63일차 TIL( cs 기술 면접 .1 / 소셜 로그인(카카오))

오늘 21일부터 팀 cs 기술 면접 스터디를 진행하였다.

 

1 . 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?

우리가 웹 브라우저에 렌더링를 하는데 우선적으로 필요한 값을 상태라고 하는데
이 상태가 렌더링에 미치는 영향력이 있으려면 필수적으로 필요한게 동적인 값
바뀌는 값이여야 한다.
리액트는 각 컴포넌트가 바뀔 때 마다 재랜더를 걸어주는데 가상DOM에서 이 부분만 인지하여 실제DOM에 반영을 해준다.
이런 재랜더링방식을 통해 우리가 의도하는 상태 변경을 볼 수 있다.
필요한 요소 중에는 state말고도 우리가 필요로 하는 data라고 하는 정보를 담고 있는 props가 있는데
이 props는 리액트의  단방향 데이터 흐름 때문에 부모 -> 자식 컴포넌트 간 데이터전달이 가능하다. 자식컴포넌트끼리 데이터를 주고 받기 위해 부모에게 재전달하여 내려주는 식으로 연결을 해줘야하는데 이러다 보면 어디서 시작 되었는지 알기 어려울 뿐만 아니라 유지보수도 어려워진다.
이런 상황을 방지하고 개선하기 위해, 리덕스라는 라이브러리가 등장했다.
리덕스는 state를 관리 하기 위해 서비스의 규모가 커지고 state가 많아짐에 따라 이를 체계적으로 관리하기 위해 도입되었다.

 

kakao 소셜 로그인 in supabase

 

  const signupKakao = async (e: React.FormEvent) => {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'kakao',
      options: {
        queryParams: {
          access_type: 'offline',
          prompt: 'consent'
        }
      }
    });

provider: 'kakao', 만 수정해주면 코드 내에서 더 수정할 사항은 없다.

하지만..

 

구글보다 자료가 많지 않아서 공식 문서를 보면서 길을 찾아갔다.

 

https://developers.kakao.com/console/app/956889

kakao developers 에 접속하여 계정을 생성해야한다.

카카오계정

 

REST API 키와  Client Secret을 supabase에 넣어줘야한다.

 

각 위치에 넣어주기만 하면된다.

하지만 최근에 업데이트된 상황들이 즉각 반영이 아니라 supabase와 kakao의 서로간의 설명이 각 공식문서 마다 차이가 있는듯하다.

숨겨진 탭에서 찾아서 key와 코드를 입력해야하는데 꽤 애를 먹었다.

 

이렇게만 입력해주면 kakao 소셜 로그인이 활성화 되는데,

여기서 끝이 아니라 오류가 뜨는데 나같은 경우에는 E-mail 허가를 해야한다는 오류가 떴다.

사용자 명과, 프로필 사진을 허가하고 E-mail 까지 허가를 해야 kakao 소셜 로그인이 비로소 활성화된다.

 

 

 

완료된 화면 렌더링