티스토리 뷰

Front End/🤢 Next.js

use server 파일 관리

James Wetzel 2025. 3. 16. 17:32

1. 목적에 따른 폴더 분리

서버 파일을 기능이나 역할에 따라 폴더로 나누는 것이 좋습니다. 이렇게 하면 파일의 목적을 쉽게 파악할 수 있고 유지보수가 편리해집니다. 예를 들어:

  • API 관련 파일: /api 폴더에 API 엔드포인트(라우트) 파일을 모아둡니다.
  • 서버 컴포넌트: /components/server처럼 서버에서 실행되는 컴포넌트를 별도로 관리합니다.
  • 데이터베이스 관련 파일: /lib/db 또는 /services/db에 데이터베이스 연결이나 쿼리 로직을 정리합니다.
  • 유틸리티 함수: /utils에 서버에서 공통으로 사용하는 함수를 둡니다.

2. 모듈화와 재사용성

서버 파일에서 반복적으로 사용되는 로직은 모듈화해서 관리하는 것이 좋습니다. 예를 들어:

  • 데이터베이스 연결 로직을 /lib/db/connection.ts로 분리해 여러 파일에서 임포트해서 사용합니다.
  • 이렇게 하면 코드 중복을 줄이고 유지보수가 쉬워집니다.

3. 환경 변수 관리

서버에서 사용하는 민감한 정보(예: 데이터베이스 비밀번호, API 키 등)는 하드코딩하지 말고 .env 파일에 저장합니다. 서버 파일에서는 process.env를 통해 접근하도록 설정하세요. 보안과 유연성을 동시에 확보할 수 있습니다.


4. 서버 파일과 클라이언트 파일 구분

서버와 클라이언트 파일이 섞이지 않도록 명확히 구분해야 합니다. 예를 들어:

  • 클라이언트 컴포넌트: /components/client
  • 서버 컴포넌트: /components/server
    이렇게 하면 코드의 역할이 혼동될 가능성이 줄어듭니다.

5. 버전 관리와 문서화

파일이 많아지면 변경 사항을 추적하기 어렵기 때문에 Git 같은 버전 관리 도구를 적극 활용하세요. 또한:

  • 중요한 로직에는 주석을 달거나 별도의 문서를 작성해 팀원들이 쉽게 이해할 수 있도록 합니다.

6. 성능 최적화

서버 파일이 많아지면 빌드 시간이 길어질 수 있습니다. 이를 줄이기 위해:

  • 불필요한 파일이나 코드를 정리합니다.
  • 무거운 작업은 비동기 처리하거나 캐싱을 활용해 성능을 개선합니다.

7. 보안

서버 파일에서 민감한 데이터를 다룰 때는 보안에 주의해야 합니다. 예를 들어:

  • 사용자 인증이나 권한 관리 로직을 철저히 검증하고, 서버 파일에만 포함되도록 설계합니다.

추천 폴더 구조 예시

아래는 서버 파일을 체계적으로 관리할 수 있는 폴더 구조 예시입니다:

project-root/
├── app/                    # 애플리케이션 주요 파일
│   ├── api/               # API 엔드포인트
│   │   ├── users/        
│   │   │   └── route.ts  # 사용자 관련 API 라우트
│   │   └── auth/         
│   │       └── route.ts  # 인증 관련 API 라우트
│   ├── components/        # 컴포넌트 폴더
│   │   ├── client/       
│   │   │   └── UserList.tsx  # 클라이언트 컴포넌트
│   │   └── server/       
│   │       └── ServerComponent.tsx  # 서버 컴포넌트
│   └── lib/               # 공통 라이브러리
│       └── db/           
│           └── connection.ts  # 데이터베이스 연결 파일
├── utils/                 # 유틸리티 함수
│   └── serverUtils.ts    # 서버 전용 유틸리티
└── .env                  # 환경 변수 파일

 

 

728x90
반응형