next.js 3

URL 상태를 결합한 선언적 데이터 페칭 구현하기

최근 리쿠르팅 사이트의 어드민 페이지를 개발하며, 지원서 열람 페이지의 복잡한 필터와 다중 정렬 로직을 처리해야 했습니다. 처음에는 당연하게도 Redux나 Zustand 같은 전역 상태 관리 라이브러리와 로컬 상태 관리를 먼저 떠올렸습니다. 하지만 현직자분과의 코드 리뷰 도중, "복잡한 로컬 상태에 매몰되지 말고, URL에 상태를 담아보라"는 조언을 듣게 되었습니다. 이 조언은 제가 가진 '상태 관리'에 대한 고정관념을 깨는 계기가 되었습니다. 흔히 상태 관리라고 하면 외부 라이브러리를 통한 메모리 관리를 떠올리지만, 어드민 서비스에서 URL은 단순한 주소창을 넘어 공유성, 보존성, 신뢰성을 보장하는 최적의 상태 저장소였기 때문입니다.왜 URL인가? (The Power of URL as State)우리는..

프론트엔드 2026.03.09

프로젝트 통합으로 생산성 높이기: Turborepo 도입 및 모노레포 마이그레이션 여정

안녕하세요, IT 연합 동아리 Cotato(코테이토) 리뉴얼 프로젝트 프론트엔드 개발로 참여 중인 김민아입니다. 저희 팀은 최근 코테이토 리뉴얼 프로젝트를 진행하며 큰 구조적 변화를 겪었습니다. 기존에는 메인 홈페이지(cotato.kr)와 리쿠르팅 페이지(recruit.cotato.kr)를 각각 독립적인 멀티 레포지토리로 관리할 계획이었습니다. 하지만 프로젝트가 진행될수록 두 서비스 사이의 강력한 연결 고리를 발견했고, 이를 효율적으로 관리하기 위해 pnpm + Turborepo 기반의 모노레포로 마이그레이션을 진행했습니다. 모노레포 전환을 고민 중인 다른 팀들에게 도움이 되길 바라며 기록을 공유합니다. 1. 도입 배경: 왜 모노레포여야 했나?코테이토의 웹 생태계는 크게 두 가지 도메인으로 나뉩니다.메..

프론트엔드 2026.02.22

Next.js App router 프로젝트 구조 활용 전략

Next.js 프레임워크를 사용한 프로젝트를 몇 개 진행하다 보니, 자연스럽게 반복해서 마주치게 되는 고민들이 있었다.폴더 구조를 어떻게 잡아야 유지보수가 쉬울까?어디까지를 서버 컴포넌트로 두고, 어디서부터 클라이언트 컴포넌트로 분리해야 할까? 특히 App Router가 도입되면서 기존의 pages 기반 구조보다 자유도가 훨씬 높아졌고, 그만큼 팀 혹은 개인의 기준이 더 중요해졌다고 느꼈다. 이 글에서는 Next.js 공식 문서를 기반으로, 내가 실제 프로젝트(COTATO 동아리 리쿠르팅 홈페이지)에 적용한 구조와 그 이유, 그리고 그로 인해 얻은 장점들을 정리해보려고 한다. 1. Next.js App Router에서의 기본 구조Next.js 공식 문서에서는 App Router 기준으로 다음과 같은 구조..

프론트엔드 2026.01.29