전체 글

📜 서론이전에 업로드한 포스팅을 보면 알겠지만, 앞선 과정들을 통해 카카오 로그인 서비스를 원활하게 사용할 수 있게 되었다. 이제 카카오 서버로부터 사용자의 카카오톡 프로필 사진과 닉네임 가져와 사이트 프로필에 박아야 한다. 한마디로 전역적으로 관리해야하는 정보다. 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를 통해 인가 코드 발급 요청을 보..

❓ MVC 패턴이란?애플리케이션을 모델, 뷰, 컨트롤러로 구분해 설계하는 소프트웨어 아키텍처 디자인 패턴으로, 선대 개발자들이 어떻게든 편하게 개발하려고 머리 굴리다가 만들어진 방법론 중 하나이다.🧩 MVC 패턴의 구성요소 MVC의 핵심은 Separated Presentation으로, 프레젠테이션 로직(View, Controller)과 도메인 로직(Model)을 분리하자는 아이디어다.이러한 생각에 따라 MVC 패턴은 다음 세 가지 컴포넌트로 구성된다.Model어플리케이션이 무엇을 할 것인지 정의하는 파트다.데이터와 데이터 조작(비즈니스 로직)을 담당한다.View사용자에게 어떻게 보여줄지 정의하는 파트다.UI를 통해 입력을 전달 받고, 업데이트된 데이터를 출력한다.ControllerView와 Model의..