폴더 구조
-
Next.js App Router(3) - 폴더 구조와 파일 역할Next.js 2025. 6. 27. 10:59
이번 편에서는 Next.js App Router의 page 파일 이외에 새롭게 추가된 파일들의 역할을 알아보고 효율적인 폴더 구조를 구성하는 방법에 대하여 알아보겠습니다. 1편에서 App Router에서 추가된 주요 파일들에 소개했는데요.다시 간단하게 작성해 보자면 다음과 같습니다.page.tsx: 각 경로의 메인 컴포넌트입니다. 서버 컴포넌트가 기본이며, 클라이언트 컴포넌트로 사용하려면 상단에 'use client'를 추가합니다.layout.tsx: 특정 경로 그룹에서 공통으로 사용되는 레이아웃을 정의합니다. 페이지 전환 시에도 상태가 유지됩니다.template.tsx: 페이지 전환마다 새 인스턴스로 생성됩니다. 상태를 초기화하고 싶을 때 사용됩니다.loading.tsx / error.tsx: 로딩 상..
-
FSD 폴더 구조 소개 (feat. NextJS App Router, Pages)Tip 2024. 7. 27. 12:54
많은 프론트엔드 개발자의 고민은 폴더 구조일 것입니다.오늘은 Feature-Sliced Design(FSD)라는 요즘 가장 괜찮다고 생각하는 폴더 구조를 소개하겠습니다.FSD는 프론트엔드 애플리케이션을 구조화하기 위한 아키텍처적 방법론입니다.FSD의 주된 목표는 프로젝트를 이해하기 쉽고 변화하는 비즈니스 요구에 안정적으로 대응할 수 있도록 만드는 것입니다.FSD의 주요 개념1. 레이어(Layers)애플리케이션의 전반적인 구조를 구성하는 최상위 폴더입니다.주요 레이어는 다음과 같습니다.하위 요소는 상위 요소들을 Import 할 수 없습니다.(pages에서 widgets, entities, shared는 Import 해서 사용할 수 이 있지만 shared는 아무것도 Import 해서 가지고 올 수 없다.)*..