재테크 블로그 프로젝트 (4) - 중간 개발 점검 NextJS 폴더구조 재구성

개요 

개발 기간이 약 한달 정도 되면서 어느정도 UI도 잡혀가고, api연결도 일부 완성했으나 정신이 없어 이제야 작성한다...

개발 내용 현황에 대해선 여유가 될 때마다 바로바로 기록할 예정

 

일단 폴더구조가 초반에 비해 조금 바뀐면이 있어 이를 정리하고자 한다.

프로젝트 폴더구조

.github

• 깃허브 Issue, PR 컨벤션 파일 .yml을 포함
• 깃허브 액션에 관한 파일들을 담은 workflows폴더를 포함

.husky

• commit, push 이전 팀이 정한 코드 규칙을 강제하고자 위한 husky 규칙을 보관하는 폴더

.Next

• NextJS 프로젝트 빌드 결과물 및 캐시파일을 보관하는 폴더(Next Build 시 해당 폴더에 생성)

.Node_modules

• 프로젝트에서 사용하는 모든 NPM 패키지와 해당하는 의존성이 설치되는 폴더
• package.json에는 명시했지만 라이브러리가 없다하는 경우 해당 폴더를 확인

public

• 정적파일들을 저장 (이미지, svg, 파비콘 등) 해당 폴더 경로에 접근시 /내부경로/images.png로 접근가능

_types

• 프로젝트에서 사용되는 각 types 및 interface를 선언
• 파일명의 경우 해당 기능이 사용되는 페이지 단위로 선언 Ex) main.ts, admin.ts, news.ts
• 타입과 인터페이스의 경우 파스칼 표기법으로 작성 Ex) interface SignUpFormTypes

interface SignUpFormTypes {
  birth: string;
  nickname: string;
  blogName: string;
  salary: string;
  interestKeywords: string[];
  socialId: number;
}

• 해당 파일의 type을 불러올 때 import 불 필요

(route)

• app 라우팅을 위한 파일, 해당 폴더에만 page, layout, error 파일들을 생성해서 경로 구현
• 경로는 types와 마찬가지로 기능이 사용되는 페이지 단위로 선언
• root경로에 layout을 통해 헤더, 폰트, zustand store 등 선언

api

• Next api routing을 위한 파일로 위와 마찬가지로 최대한 기능별로 api 폴더를 보관
• 대신 method를 구분하지 않고 파일내에 생성 route.ts
  • Ex) api/blog/route.ts엔 get,post,update,delete메소드 api함수를 한 번에 선언
• 해당 폴더에서 route.ts파일은 실제 서버로의 요청을 응함.

components

• 컴포넌트 파일들을 생성하는 폴더, 마찬가지로 기능별로 구분 및 용도에 따라 다르게 명시
• common : 공용 컴포넌트를 생성하는 폴더로 헤더, 푸터, 버튼, 별도로 만든 Input,Button,Icons파일들을 해당 폴더에 저장
• route의 page.tsx와 components 폴더 및 파일 구조는 페이지 규모가 너무 작지 않은 경우를 제외하곤 다음 규칙을 따름
  1. page.tsx에선 페이지에 존재하는 여러 파트를 구분해 00container.tsx 로 크게 한 번 묶기
  2. 해당 Container.tsx를 구성하는 컴포넌트들을 따로 작성해 해당 Container.tsx로 작성
  3. api는 상황에 맞게 Container.tsx에서 받아와서 자식 컴포넌트로 나눠주기 or 다른 api를 요구하는경우 각 컴포넌트 파일에서 직접 요청하기
  4. 의존성은 떨어지게 하나 state가 여러곳에서 쓰이는 경우 Container에서 선언해 state, setState를 전달하는 방식을 채택

메인페이지에 해당하는 최상단 컨테이너와 그를 구성하는 양쪽 left, right폴더로 구성

constants

• 상수값들을 보관하는 폴더로 기능별로 구분해 파일명을 작성
• 상수를 담은 변수, 배열의 경우 이름을 전부 대문자로 지정해 다른 type 혹은 Componenet들과 헷갈리게 하지 않도록 함
• 다른 페이지에서 사용되는 상수의 경우 별도 파일에 지정하지않고 최대한 재활용 하는 것을 원칙으로 함

data

• api연결 전 필요한 mock data들을 보관하는 폴더
• api가 연결되거나 정식 배포 후 용도가 없어지는 경우엔 사라지는 폴더

hooks

• 커스텀 hooks들을 보관하는 폴더
• 주로 선언하는 hooks로는 데이터를 가져오는 useFetch, 모달의 상태를 관리하는 useModal등을 선언해서 관리함

service

• 실제 서버로 api를 요청하는 함수들을 선언한 파일을 보관하는 폴더로, 하나의 큰 공통 요청 함수와 해당 함수로부터 파생된 함수들로 구성

import { getCookie } from '@/app/utils/setToken';

const SERVER_URL = process.env.NEXT_PUBLIC_SERVER;
const commonHeaders = {
  'Content-Type': 'application/json',
};

const getRequest = async (url: string, req: Request) => {
  const token = getCookie(req, 'accessToken');
  const headers = {
    ...commonHeaders,
    ...(token && { Authorization: `Bearer ${token}` }),
  };
  const response = await fetch(`${SERVER_URL}${url}`, { headers });
  return response.json();
};
// 여기까지가 get api를 위한 하나의 큰 공통 함수
// 밑에 부터는 각 api를 호출하는 route.ts에서 사용되는 api 요청함수

export const getMain = async (req: Request) => {
  const url = '/api/v1/main';
  return getRequest(url, req);
};

export const getLandingPost = async (req: Request, filter: string) => {
  const url = `/api/blogs/landing?filter=${filter}`;
  return getRequest(url, req);
};

store

• zustand를 통한 상태관리를 위한 store 설정 파일들을 보관하는 폴더

styles

• 각종 스타일링과 관련된 파일을 보관하는 폴더
• Icons.tsx의 공용 아이콘 컴포넌트로 생성이 어려운 svg의 경우 해당 폴더의 svg폴더에 별도 생성
• root의 스타일링을 담당하는 styles.css혹은 외부 라이브러리 커스텀을 위한 css파일들을 보관

utils

• 프로젝트에 전반적으로 사용되는 유틸 함수들
• 본인의 경우 아래와 같은 함수들을 생성해두었다.
  • Ex) 날짜 변환함수, 검증함수, 세션관리 함수, api 호출 간략화 함수, string 길이 단축 함수

빠른 시일내에 블로그를 다시 뵙길