프로젝트/올평

📜 서론이전에 업로드한 포스팅을 보면 알겠지만, 앞선 과정들을 통해 카카오 로그인 서비스를 원활하게 사용할 수 있게 되었다. 이제 카카오 서버로부터 사용자의 카카오톡 프로필 사진과 닉네임 가져와 사이트 프로필에 박아야 한다. 한마디로 전역적으로 관리해야하는 정보다. redux-toolkit을 사용할 때가 온 것이다. 오늘 포스팅에서는 이걸 구현하면서 어떤 방법을 사용했고, 어떤 이슈를 겪었는 지에 대한 이야기를 하고자 한다.⚙️ 사용자 정보 가져와서 리덕스로 관리하기📌 새로고침 되어도 회원 정보 유지시키기redux-toolkit(약칭 RTK)으로 상태를 관리하는 방법은 매우 쉽다. RTK를 어떻게 사용하는 지에 대한 자료들은 넷상에 널려있기 때문에 여기서 그에 대한 이야기는 생략하도록 하겠다. 문제는..

🧩 구현해야 할 로직저번 포스팅에서 말한 것처럼 인증이 필요한 api 요청(리뷰 작성, 댓글 달기 등등) 시 accessToken이 만료되었을 경우 토큰을 자동 갱신해서 응답을 받는 로직을 구현해야 한다. 그림으로 좀 더 디테일하게 어떤 과정들을 구현해야 하는지 살펴보자.위 그림에서 보는 것처럼 토큰 갱신 후 처음에 요청했던 작업을 다시 재요청할 수 있도록 해야 한다. 그리고 당연히 유저는 이 과정을 느낄 수 없어야 한다.🌱 첫번째 버전: 직접 함수 구현맨 처음에는 이 로직을 아래와 같이 withTokenRefresh라는 함수로 직접 구현했다.// /util/api.ts// api 함수 타입 정의type ApiFunction = (data: T) => Promise;/** - 토큰 만료 시 토큰 갱신..

📜 서론사이트의 여러가지 기본적인 기능들을 구현하던 중 반드시 거쳐가야할 로그인 적용 단계에 이르렀다. 카카오 로그인 공식 문서와 실제 적용 사례들을 찾아보며 카카오 로그인을 구현했고, 그 과정에서 맞닥뜨린 이슈들을 어떻게 해결했는지 설명하고자 한다. Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com📩 카카오 로그인 요청📌 CORS 에러 발생카카오 로그인을 하려면 먼저 사용자의 동의를 받는 인가 화면으로 넘어가야 한다. 그러기 위해서는 인가 코드를 카카오로부터 받아야 하는데, 맨 처음에 클라이언트단에서 axios를 통해 인가 코드 발급 요청을 보..

❗ 이슈 설명올평 레포지토리에 PR을 열어 커밋을 했더니 unverified가 떴다. D2 문서 번역 작업 때문에 설정했던 GPG 키 때문에 문제가 없다면 verified가 떠야 한다. unverified 버튼을 누르자 위와 같은 경고창이 떴다. 서명의 이메일과 커밋한 사람의 이메일이 일치하지 않는다고 한다. 뭐가 문제일까?🔍 원인 파악 과정D2 번역 레포지토리로 커밋 테스트키 자체의 문제인지 확인하기 위해 앞서 링크한 D2 문서 번역 작업을 진행하는 레포지토리에 테스트 커밋을 넣어봤다.여기서는 정상적으로 verified문구가 뜬다. 이러면 키 자체에는 문제가 없다.git config 확인문제의 원인을 찾아내기 위해 열심히 구글링을 하던 도중 GPG key 생성 과정을 설명하는 어떤 블로그에서 git ..