supabase를 이용한 로그인 기능을 구현해보려고 한다. 먼저 소셜로그인(google,kakao로그인)에 대해 정리해본다.
1. Google로그인
1. google cloud에서 설정
https://console.cloud.google.com/welcome/new?project=final-project-410604
- final-project를 만듦
- API 및 서비스의 사용자 인증 정보 탭
- 사용자 인증 정보 만들기로 OAuth 클라이언트 ID 만들기
- 웹 애플리케이션 선택 후 승인된 자바스크립트 원본은 현재 쓰고 있는 port를 입력하고 승인된 리디렉션 URI는 supabase에서 가져옴
- Auth 탭의 Provider에서 google탭의 callback url을 가져와 승인된 리디렉션 URI 칸에 입력
- 반대로 OAuth에서 아이디, 비밀번호를 복사하여 supabase auth 탭의 google에 클라이언트 id와 비밀번호를 입력
2. 코드
공식문서를 활용하여 다음과 같이 코드를 작성한다.
구글로그인은 따로 갱신을 해주지 않기 때문에 option을 추가하면 매번 새롭게 로그인할 수 있다.
2. kakao로그인
1. 카카오 Developers 설정
https://developers.kakao.com/
- 카카오 개발자센터에서 앱등록 (REST API키 필요!)
- 카카오 로그인탭의 활성화 설정on, OpenID on, Redirect URI는 supabase auth 탭의 provider에서 kakao탭의 callback URL 입력
- 카카오 앱 동의 항목 설정
동의항목을 설정해야하는데, 그 전에 개인정보 동의항목 심사 신청을 해야함 (사업자 정보 등록하라고 하지만, 안해도 가능!)
- 비즈앱 전환 -> 앱아이콘등록 대표이미지 등록 -> 개인 개발자 비즈 앱 전환 항목이 생김 (인증 로그인 단계에서 이메일 필요 -> 이메일 필수 동의로 설정 후 전환버튼)
- 비즈앱 전환 후 카카오계정(이메일) 권한없음에서 활성화됨, 설정 누른 후 모두 동의
- Client Secret 코드 등록 (보안 탭에서 코드 복사, 활성화 상태 사용함으로 설정)
- supabase auth의 provider 탭에서 kakao에 위에서 저장해 둔 REST API key와 Client Secret 코드 입력!
2. 코드
공식문서를 활용하여 다음과 같이 작성한다.
<기술면접질문>
- Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요.
Recoil이 있는데 Redux에서 비동기를 활용하기 위해서는 middleware를 활용하는것에 반해 Recoil에서는 내장된 개념인 selector을 활용해 추가적인 middleware의 사용없이 쉽게 비동기 상태관리를 할 수 있습니다. 그리고 매우 경량화되어 있어 성능이 빠릅니다. - 버츄얼 돔과 리얼 돔의 차이를 설명해주세요.
리얼 돔은 실제 페이지를 이루는 컴포넌트인 element를 tree 형태로 표현한 것이고 버츄얼 돔은 리얼 돔의 복사본입니다. 리얼돔은 element의 자식노드가 추가되면 전체 문서가 갱신되지만 버츄얼 돔은 버퍼 역할을 해줌으로서 변경점만 리얼 돔에 적용하여 전체 문서가 갱신되지 않습니다. 또한 버츄얼 돔은 batch로 update 합니다.
코린이 탈출을 기원하는 코린이