전체 글

📜 서론내가 만든 서비스인 Re|view(제작 도중 올평에서 이름을 바꿨다)의 피드 페이지를 열면 위와 같은 리뷰카드들이 주루룩 나열된다. 유저들이 증가하면 리뷰도 덩달아 많아질 것이기 때문에 렌더링해야하는 리뷰카드의 개수도 엄청 많아질 것이다. 하지만 당연히 그 많은 컨텐츠를 한번에 서버에서 로드해서 렌더링까지 할 수는 없는 노릇이다. 무한 스크롤이 필요한 때다.🔍 문제 정의Tanstack Query(React Query) 쓰는 김에 같은 곳에서 제작한 Tanstack Virtual이랑 Intersection Observer API 조합하면 구현 끝 아님?단순히 생각하자면 위처럼 생각할 수 있다. 하지만 막상 구현하려다 보니 이것 이외에도 생각해야 할 것이 생겼다.다음과 같은 경우는 어떻게 해야할까..

📜서론그동안 여러 프로젝트들을 진행하면서 기준 없이 무질서한 디렉토리 구조에 미묘한 불편함을 늘 느껴왔다. 그러던 중 최근 유튜브에서 제로초님의 영상을 보고 FSD 아키텍쳐란 것을 알게 되었다. 영상에서 소개한 FSD 소개 아티클의 번역본을 참고하면서 진행 중이던 올평 프로젝트에 이를 적용해보기로 했다.🤔 FSD란?FSD는 Feature-Sliced Design의 약자로, 직역하자면 기능 분할 설계다. 다음과 같은 구조로 이뤄져 있으며, 프론트엔드 애플리케이션의 구조를 체계적으로 설계하기 위한 방법론이다. 왠지는 모르겠지만 공식 문서도 있다.📌레이어이 사진을 유심히 살펴보면 FSD의 컨셉이 뭔지 감을 잡을 수 있다.app: 전역적으로 작동하는 것들processes: 여러 페이지에 걸쳐진 프로세스(현..

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

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