2주차 기술 멘토링 사전 노트

## 기술적 어려움 1. 로그인 기획단계의 어려움 개인 기능 구현 중 기획 단계 에러로 인해 트러블 슈팅 후 해결 방법 모색이 관련하여 의견을 듣고 로그인 부분을 다시 기획하였습니다. 처음 로그인 페이지 기획 시 로그인 단계는 총 3단계로 구현하기로 기획 DB > supabase auth > nextAuth 1단계 모달 : 선생님 또는 수강생선택 2단계 모달 : 선생님 선택 시 2단계 모달로 이동되며 직업, 분야를 추가로 받기 3단계 모달 : 실제 회원가입 창 (이메일, 소셜로그인) 구현 방법 1. zustand를 이용해 각각의 단계(1단계 2단계)에서 받은 내용을 스토어를 이용해 저장 2. 3단계에서 소셜 회원가입 버튼을 누르면 각각의 소셜에서 주는 유저의 정보를 담아 스토어에 저장 3. 유효성을 이용해 3개의 단계에서 받은 데이터가 잘 들어왔는 지 확인 후 수퍼베이스에 전송 🚨문제발생. - 위 기획 단계를 모두 구현 후 실제 값이 잘 들어가는지 확인해 보았으나 값이 들어가지 않음 - 🛠️문제해결 과정 ✅ 1,2 단계 값이 잘 담기는지 확인 ✅ 소셜 회원가입 후 값이 잘 담기는지 확인 ✅ 소셜 로그인 시 스토어에 모든 값이 잘 담겨 있는지 확인 🔥찾아낸 문제점. - 1,2 단계에서 값이 잘 담기는 것을 확인하였으나 문제는 소셜 회원가입 시 화면이 리렌더링 되어 스토어에서 담고 있던 값들이 모두 초기화 되는 문제점 - 소셜 회원가입은 회원가입과 로그인을 동시에 처리 즉, 회원가입 후 로그인이 동시에 처리되기 때문에 화면이 리렌더링 될 수 밖에 없고 로그인 후 유저의 정보를 받아 올 수 있음 🗝️해결 방법 모색 1. zustand persist 사용하기 2. 회원가입 순서 갈아업기 (회원가입 후 별도의 페이지에서 추가정보 받기) ❓zustand persist 사용하기 스토어의 상태를 로컬스토리지나 세션스토리지와 같은 영구 저장소에 값을 저장하고 있다가 슈퍼베이스에 전송을 하는 방법이다. ⚠️해당 방법을 채택하는 경우 우회하는 방법을 사용하는 것이기 때문에 하드코딩이 된다. 그리고 가장 치명적인 단점으로는 사용자의 정보를 로컬스토리지에 담는다면 보안적으로 너무 취약할 수밖에 없는 구조가 된다고 생각했다. 💡결론 채택은 회원가입 순서 갈아업기 그래서 작성해둔 코드가 너무 안깝고 속상하지만 페러렐라우터와 인터셉터를 배웠다는 것으로 만족하기로 했다. 과연 다른 방법도 있는지 알아보고 싶으나 더 이상의 시간 소요는 할 수 없다고 판단 하였다. 소셜 로그인(학생으로 회원가입) > 마이페이지에서 강사로 전환 후 추가 데이터 받기