re|view

📜 서론솔직히 이번 프로젝트에서 가장 힘들었던 부분을 꼽으라 하면 배포 부분이라 할 수 있을 것 같다. 내 손으로 직접 CI/CD 과정을 구축하는 게 처음이었기 때문에 내가 하고 있는 작업이 제대로 될 지에 대한 확신이 없어서 심적으로 더 힘들었던 것 같다. 하지만 결국 해냈죠? 구글링을 통한 자료 조사에는 장사가 없었다.🍃 MongoDB Atlas 연동새로운 Flex Tier를 소개합니다! 온디맨드 버스트 용량과 예측 가능한 청구(월 $30로 제한)를 갖춘 새로운 비용 효율적인 클러스터 티어입니다. Flex Tier는 M2, M5 및 Serverless 인스턴스를 대체하여 MongoDB Atlas의 기능에 대한 전체 액세스와 가변적인 워크로드에 대한 유연한 용량 및 유연한 가격을 제공합니다.일단 이..

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

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