실전 프로젝트에서는 원래 배운 내용들을 깃허브에 올리는 방식이 아닌 하루하루 진행 상황과 느낀점들을 기록하기 위해서 벨로그에 TIL을 작성하기로 했다.
1. 진행상황
회원가입 로그인 기능 구현 중
마이페이지 닉네임 변경, 비밀번호 변경, 계정탈퇴 기능 구현 중
2. 발생했던 문제들
1. 로그인을 할 때 백에서 오는 response에 담겨오는 nickname을 recoil atom에 담고 useEffect로 console을 찍었을 때 담기지 않는 문제 발생.
이는 자바스크립트가 비동기 통신을 해서 담기는데 시간이 필요했다. 시간을 주지 않고 바로 console을 찍어서 발생하는 문제였다. 정상적으로 다음 컴포넌트로 넘어가니까 잘 담겨서 콘솔이 찍혔다.
2. useRecoilState로 nickname 값을 출력해줬는데 새로고침 시 비워지는 문제 발생.
새로고침을 하면은 값이 날라가는 문제가 발생하여, 로그인을 하면 쿠키에 유저 정보를 저장하여 쿠키에서 값을 불러오는 방식으로 변경하여 해결하였다.
3. 소셜로그인 토큰과 유저 데이터는 넘어오는데 리다이렉트가 안되는 문제 발생.
백엔드에서 인가코드와 유저데이터 및 토큰을 카카오에서 받아오는 것을 전부 처리한다고 하여 localhost8080으로 설정한 것을 프론트 로컬에서 테스트 해보고 싶어 localhost3000으로 바꾸면서 유저 데이터와 토큰은 받아오는데 리다이렉트가 안되는 문제가 발생했다. 카카오 developers에서 앱 설정을 바꾸는 등 다양한 방법을 시도했지만 실패했고, 백엔드에서 테스트 할 때는 정상적으로 작동했다고해서 프론트에서 배포를 하고 백과 연결 후 다시 테스트 해보기로 했다.
4. typeScript useRef를 사용할 때 에러가 발생.
typeScript에 대한 이해가 부족해서 발생했던 문제이다. useRef에 대한 타입을 지정해주는 방법을 몰라서 발생했던 문제이다.
useRef() as React.MutableRefObject<HTMLInputElement>이렇게 타입을 지정해줘서 구현을 해줬다.
2. 느낀점
다른 조보다 진행 상황이 느린 것 같다. 분발해야 할 것 같다...
:)