401 에러코드 발생... 카카오 소셜로그인의 400 에러코드를 해결을 했지만, 401에러코드도 발생을 했다. 도대체 어떻게 해결할지 여러가지 시도를 했지만 이 에러코드는 없어지지 않다가, 400에러코드 해결과 비슷하다는 생각이 들어서 비슷하게 코드를 쳐보니.... 우리 슈크림 서비스의 토큰이 들어와있을 경우에만 백엔드 서버에 포인트를 요청하는 식으로 코드를 짜니 에러코드가 사라졌다!!! 이 때 나는 또다시 코딩의 기쁨을 느

기능구현은 어느정도 되었고 작동은 되었는데, 개발자 도구에 카카오 로그인 버튼을 클릭하기 전에 계속 fetch 요청이 가서 계속 오류코드가 발생하는 현상이 일어났다. 무엇이 문제인지 알기 위해서 개발자 도구를 열어서 네트워크 탭도 열고, 오류가 뜬 코드가 어느 줄인지 보고 고민을 했으나 useEffect 문제인 것만 알고 어떻게 해결할지 감이 안잡혀서 결국 팀원분께 질문을 했으나, 팀원 분도 잘 모르셔서 결국 멘토님께 도움을 요청하였고, 어떤 부분이 부족했는지 알게 되었고 코드를 고쳐서 결국 해결을 하게 되었다. 나의 문제는 useEffect에 대해서 너무 얉게 알고 썼기 때문이었다. ![](https://images.velog.io/images/youngloper77/post/4

해결책 > 1단계: Login.js 파일에서 슈크림 서비스의 토큰을 받아와서 전역변수로 관리를 한다. 2단계: 그것을 Nav.js에서 검사를 한다. 3단계: 이 때 Login에 있는 token과 Nav에 있는 token이 같아야 하기 때문에 Recoil을 써주는 것이다. 결국 이 논리대로 하려면 RecoilRoot부터 다시 감싸줘야 했다. 우선, login 파일도 같이 감싸줘서 recoil 상태를 사용할 수 있게끔 해야한다. [Routes.js] 그리고 Nav에서 감지를 하고 변화를 줘야 하기 때문에 nav도 RecoilRoot로 감싸 준다. [Nav.js 파일] 그리고 이제 토큰을 받아오고 저장하는 구조 자체를 손을 봤어야 했다. 로컬스토리지에 저장된 토큰을 다시 또 변수에 담아서 그것의 변화를 감지시키는 것이 아니라 Login.js에서 useRecoilState를 써서 state에 담아주는 것이다. **[Login.js 파일]

문제점 토큰을 로컬 스토리지에 저장을 해서 변수에 넣은 뒤에 변수를 활용한 삼항 연산자를 했는데, 직접 새로고침을 해야하지만 렌더링이 되면서 인식을 하면서 로그인/로그아웃이 바뀌었다. 내 상상(?)으로는 자동으로 바꿔져야하는데 그렇지 못해서 구글링을 했다. 그 결과 스택오버플로우(stack overflow)에 나와 비슷한 문제가 있는 분이 질문을 올리신 것을 찾을 수 있었다. React.js Log out did not turn into log in after I log out in nav bar https://stackoverflow.com/questions/66383572/react-how-to-change-navbar-dynamically-when-you-are-logged-in 이 글을 통해서 결국 문제를 전역변수에 토큰을 담아서 관리를 해줘서 변하면 자동으로 렌더링이 되게끔 해주게끔 코드를 작성해야함을 알게 되었다. 나는 그저 로컬 스토리지에서 값