앱 라우터가 지향하는 파일 아키텍쳐

곧 시작하는 최종 프로젝트에 앱 라우터를 사용할 것 같아서 파일 아키텍쳐에 대해 미리 조사해보았다!

✨ 어떻게 하면 효율적인 파일 구조를 만들어 앱 라우터를 제대로 사용할 수 있을까?

기본적으로 페이지 라우터와 앱 라우터의 차이는 유연함

pages-only : 모든 JS파일을 라우트로 변환해야 하는 구조로 기존 페이지 라우터의 pages 폴더 안의 모든 JS 파일들은 페이지가 되던 것을 의미

하지만 앱 라우터는 관련 파일을 한곳에 보관하는 app 폴더를 사용

이를 colocation 이라고 하며 더욱 효율적인 개발이 가능

보통의 프로젝트 파일 구조는 역할을 기반으로 한다.

• 페이지, 컴포넌트, 유틸, 훅, API 폴더 등

앱 라우터의 경우 기능을 기반으로 폴더구조를 이루며, 이는 앱 라우터의 장점을 더욱 부각시킨다.

• 인증, 랜딩, 대시보드, 수정, 마이 페이지 등

이러한 기능을 나누는 규칙은 존재 X, 하지만 기준은 존재

• 해당 기능에 속하는 파일이 최소 두개 이상 있는가?
• 관련 파일들을 하나의 기능 폴더로 그룹화 하는 것이 코드 유지보수에 도움이 되는가?
• 파일들이 프로젝트 내의 같은 기능이나 주제를 공유하는가?
• 파일들이 프로젝트 내에서 공통된 역할이나 책임을 가지고 있는가?
• 새로운 기능을 만들지 않아도 기존 기능 내에서 해당 작업을 처리 가능한가?

중요한 것은, 폴더의 복잡성을 우려해 기능에 따라 폴더를 만드는 것을 부담스러워 할 필요가 없다는 것.

기능에 따른 폴더는 언제든 생성 가능하며, 자유롭게 코딩한 뒤 최적화를 고려하는 것도 좋은 방안이다.

보통 리액트나 Next.js의 페이지 라우터가 가지는 MVC 패턴에 따른 역할 기준 폴더 구조를 보자

src/
├── components/          # 뷰 (View)
│   ├── Header.jsx
│   ├── Footer.jsx
│   └── UserList.jsx
├── controllers/         # 컨트롤러 (Controller)
│   ├── userController.js
│   └── authController.js
├── models/              # 모델 (Model)
│   ├── userModel.js
│   └── postModel.js
├── pages/               # Next.js의 경우 페이지 폴더
│   ├── index.jsx
│   ├── login.jsx
│   └── profile.jsx
├── services/            # API 호출 및 서비스 로직
│   ├── api.js
│   └── authService.js
├── styles/              # 스타일 시트
│   ├── global.css
│   └── Header.module.css
├── utils/               # 유틸리티 함수
│   ├── formatDate.js
│   └── validateEmail.js
└── index.js             # 애플리케이션 진입점

Next Right Now 문서에 따르면 MVC 패턴은 매우 직관적이고 이해하기 쉽기 때문에 초보자에게 친숙하나, 확장성이 없다.

다양한 기능이 여러개로 나누어질 경우, 각각의 파일이 서로 관련이 없더라도 그룹화된다.

하지만 보통 개발자가 로직을 관리하는 경우 역할보다 기능에 더 무게중심을 두는 경우가 많다.

MVC 패턴은 하위 폴더에 파일이 다 뭉쳐있어 코드를 찾기 어렵고 관련 부분의 복합 처리가 힘들다.

앱 라우터에서는 프로젝트 폴더 구조화 시 기본적으로 라우트와 관련된 페이지를 기준으로 한다.

└── app/
    ├── home
    ├── landing
    └── page.tsx

또한 예를 들어 인증에 따라 조건부 렌더링을 해야하는 경우. @somthing 과 같은 네이밍을 통해 병렬 경로 처리를 할 수 있다.

└── app/
    ├── home
    ├── landing
    ├── @admin
    |      └── page.js
    └── @user
          └── page.js

또 루트에서만 사용되는 파일들을 2차적으로 그룹화 하고 싶은 경우, 괄호를 이용해 폴더를 만들면 url 에 영향을 끼치지 않는다.

└── app/
    ├── home
    ├── landing
    └── (root)/
        ├── page.tsx
        └── useAuth.ts

App 폴더 자체의 글로벌 파일의 가짓수가 많아지는 경우 역할 기반 그룹화를 고려해볼 만 하다.

기능 기반 그룹화를 채택하는 가장 큰 이점이 바로 하나의 폴더 안에 해당 기능과 관련된 모든 파일이 포함된다는 것이다.

└── app/
    ├── components/
    │   └── Button/
    │       └── Button.tsx      # 공통 버튼 컴포넌트
    ├── home/
    │   ├── UserList/
    │   │   └── UserList.tsx     
    │   ├── Sidebar/
    │   │   └── Sidebar.tsx
    │   ├── page.tsx
    │   └── useCustomHook.ts
    ├── (auth)/
    │   ├── useAuth.ts
    │   ├── User.ts
    │   ├── sign-up/
    │   │   └── page.tsx
    │   └── login/
    │       └── page.tsx
    ├── hooks/
    │   └── useSomething.ts
    └── utils/
        └── makeThings.ts

결국 앱 라우터의 라우팅 방식의 변경에 따라 프로젝트의 파일 구조 또한 유연함을 목표로 나아가는 것

👍 그렇다면 앱 라우터에서 기능 중심 폴더구조가 가져오는 이점은?

라우팅 명확성 및 효율성

• 모듈화된 라우팅: 기능별 폴더 구조에서는 각 기능 폴더에 라우터 파일이 포함되어 있어, 특정 기능과 관련된 모든 라우팅 규칙을 한 곳에서 관리할 수 있습니다. 이는 라우팅 규칙을 추가하거나 변경할 때 매우 유용
• 명확한 경로 관리: 기능별로 라우팅 경로가 분리되므로, URL 구조가 더 명확해지고 일관성을 유지할 수 있습니다. 예를 들어, /auth/login, /auth/register와 같은 경로는 auth 폴더 내의 라우터 파일에 명시

로드 시 최적화

• 코드 스플리팅: 기능별 폴더 구조를 사용하면, 각 기능에 필요한 코드만 로드하는 코드 스플리팅에 용이, 이는 초기 로딩 속도를 향상시키고, 사용자가 특정 기능을 사용할 때 필요한 코드만 로드되도록 최적화

접근 제어 및 보안

• 미들웨어 관리: 기능별 폴더 구조에서는 각 기능 폴더 내에 보안 미들웨어를 배치할 수 있어, 특정 기능에 대한 접근 제어를 더 쉽게 관리
• 권한 관리: 각 기능의 라우터에서 권한 체크를 개별적으로 관리할 수 있어권한 설정과 관리가 더 효율적

테스트 및 디버깅 용이성

• 기능별 테스트: 각 기능 폴더 내에 테스트 파일을 포함시켜, 기능별로 독립적인 테스트를 수행, 이는 문제 발생 시 특정 기능의 테스트만 실행하여 빠른 문제 탐색이 가능
• 디버깅 편리성: 라우팅 문제가 발생했을 때, 해당 기능 폴더의 라우터 파일만 확인하면 되므로 디버깅에 용이

유지 보수성 및 확장성

• 독립적 확장: 기능별로 라우터를 관리하면, 특정 기능을 독립적으로 확장하거나 수정하는 것이 용이, 이는 새로운 기능 추가나 기존 기능 변경 시 다른 기능에 영향을 최소화
• 폴더 구조의 일관성: 일관된 폴더 구조 덕분에 새로운 개발자나 팀원이 프로젝트에 참여할 때 라우팅 구조를 쉽게 이해 가능,이는 코드베이스의 유지보수성을 크게 향상

협업 효율성 증대

• 기능별 작업 분할: 팀원들이 각자 맡은 기능 폴더 내에서 작업할 수 있어, 병합 충돌을 최소화하고 협업 효율성을 증대
• 책임 분담 명확화: 각 기능별 폴더에 라우터가 포함되어 있어, 팀원 간의 역할과 책임이 명확

출처

https://betterprogramming.pub/how-to-structure-your-next-js-app-with-the-new-app-router-61bf2bf5a20d