프로젝트 개요

기존 4년 전 React + Redux + styled-components 기반 코드를 2026년 최신 기술 스택으로 마이그레이션하면서, 각 기술의 차이와 발전을 직접 체감하는 것이 목표입니다.

개발 우선순위: 로그인 → 게시글(피드) → 스토리 → DM

기술 스택 한눈에 보기

Next.js 15

무엇인가?

Next.js는 React 기반의 풀스택 웹 프레임워크입니다. 순수 React(CRA)는 브라우저에서만 실행되는 CSR(Client-Side Rendering)이지만, Next.js는 서버에서도 React 컴포넌트를 실행할 수 있어 SSR(Server-Side Rendering) 과 CSR을 혼합해서 사용할 수 있습니다.

왜 선택했나?

기존 코드는 순수 React(CRA)였기 때문에 모든 렌더링이 브라우저에서 이루어졌습니다. 이는 초기 로딩 시 빈 화면이 보이는 문제(White Flash)가 있었고, 검색엔진 최적화(SEO)에도 불리했습니다.

Next.js App Router를 사용하면:

• 피드, 프로필 페이지 → 서버에서 초기 데이터를 미리 렌더링해서 빠른 첫 화면 제공
• 로그인, 모달 등 인터랙티브한 부분 → 기존처럼 클라이언트에서 처리
• 파일 기반 라우팅으로 React Router 설정 없이도 라우팅 자동 처리

핵심 개념: App Router

src/app/
├── (auth)/login/page.tsx   → /login 경로
├── (main)/page.tsx         → / 경로 (피드)
├── (main)/[username]/      → /username 경로 (프로필)
└── direct/page.tsx         → /direct 경로 (DM)

괄호로 묶은 폴더 (auth), (main) 은 URL에 영향을 주지 않는 그룹핑입니다. 레이아웃을 분리하기 위해 사용합니다.

Server Component vs Client Component