[리팩토링] 폴더 구조의 변경

들어가며

처음 개인 프로젝트를 진행했을 당시 Express 프레임워크는 자유도가 너무 높아 디렉토리 구조에 대한 엄격한 룰이 존재하지 않아 어떻게 구조를 정해야 할 지 정말 막막했습니다.

당시 프로젝트 디렉토리 구조는 같은 이름을 가지는 파일들(*.router.js, *.controller.js) 끼리 하나의 디렉토리 안에 저장하는 형태였습니다. 예시) 라우터들은 routers 디렉토리 하위에 저장, 컨트롤러는 controllers 디렉토리 하위에 저장

 

한편, 개인 프로젝트 이후 회사 실무 프로젝트에서 NestJS 프레임워크를 사용하며 Nest 의 디렉토리 구조는 유지 보수 및 확장성 측면에서 괜찮은 구조라는 생각이 들었습니다.

참고) NestJS 는 비슷한 기능을 하는 컨트롤러, 서비스 등을 묶어 각 도메인 별로 명확하게 구분지어 관리합니다.

곧바로 저는 제 개인 프로젝트 구조를 Nest 의 디렉토리 구조처럼 Module 단위의 디렉토리 구조로 변경했습니다.

기존 프로젝트 디렉토리 구조   

> 같은 역할(router, controller) 을 수행하는 파일들끼리 하나의 디렉토리 안에 저장하는 형태였습니다.

├── public
│   └── cafe_info_in_seoul : 공공 API를 호출하여 받아온 서울시 내 카페 JSON 데이터가 저장되어 있음.
│  
├── src
│   ├── app.js : 중간에 거치는 각종 미들웨어 설정
│   ├── bin
│   │    └── www.js : 서버를 실행하는 스크립트   
│   ├── config : DB, 로거, Multer 미들웨어 등 각종 설정 파일이 저장되어 있음.
│   ├── controllers : 라우터 별 비즈니스 로직을 처리하는 컨트롤러들이 모여 있음.
│   ├── lib  
│   │    ├── errors : 정의한 커스텀 에러 클래스들이 모여 있음.
│   │    ├── middlewares : 라우터로 들어오는 데이터를 검증하는 데 사용되는 커스텀 미들웨어들이 모여 있음. 
│   │    ├── statusCodes : 상수화한 상태 코드 데이터들이 모여 있음.
│   │    ├── constants.js : 세션 쿠키, 자동 로그인 시 생성되는 쿠키 설정 데이터들이 모여 있음.
│   │    └── util.js : 자주 사용되는 유틸 함수들이 모여 있음.
│   │
│   └── routes : 주소별 라우터들이 모여 있음.
│
└── uploads : 사용자 프로필 이미지, 카페 썸네일 이미지가 저장됨.

변경된 디렉토리 구조

> 비슷한 기능을 하는 라우터, 컨트롤러, 서비스 등을 묶어 modules 디렉토리 하위에서 관리

예시) modules 의 하위 디렉토리 auth 디렉토리 안에 auth.router.js, auth.controller.js, auth.service.js 파일이 저장되어 있습니다.

├── public
│   └── cafe_info_in_seoul : 공공 API를 호출하여 받아온 서울시 내 카페 JSON 데이터가 저장되어 있음.
│  
├── src
│   ├── app.js : 미들웨어 및 라우터 등록
│   ├── bin
│   │    └── www.js : 앱의 시작점   
│   ├── config : DB, 로거, Multer 미들웨어 등 각종 설정 파일이 저장되어 있음.
│   ├── modules : 각 모듈 별로 라우터, 컨트롤러, 서비스가 존재함.
│   │    ├── auth : 인증과 관련된 모듈
│   │    │    ├── auth.router.js : 인증 관련 요청 라우팅 처리
│   │    │    ├── auth.controller.js : 인증 관련 API 요청, 응답 처리
│   │    │    └── auth.service.js : 인증 관련 비즈니스 로직 처리
│   │    ├── cafe : 카페 정보와 관련된 모듈
│   │    │    ├── cafe.router.js : 카페 정보 관련 요청 라우팅 관리
│   │    │    ├── cafe.controller.js : 카페 정보 관련 API 요청, 응답 처리
│   │    │    └── cafe.service.js : 카페 정보 관련 API 비즈니스 로직 처리
│   │    └── user : 사용자 정보와 관련된 모듈
│   │         ├── user.router.js : 사용자 정보 관련 요청 라우팅 관리
│   │         ├── user.controller.js : 사용자 정보 관련 API 요청, 응답 처리
│   │         └── user.service.js : 사용자 정보 관련 API 비즈니스 로직 처리
│   ├── common  
│        ├── errors : 정의한 커스텀 에러 클래스들이 모여 있음.
│        ├── middlewares : 라우터로 들어오는 데이터를 검증하는 데 사용되는 커스텀 미들웨어들이 모여 있음. 
│        ├── statusCodes : 상수화한 상태 코드 데이터들이 모여 있음.
│        ├── constants.js : 세션 쿠키, 자동 로그인 시 생성되는 쿠키 설정 데이터들이 모여 있음.
│        └── util.js : 자주 사용되는 유틸 함수들이 모여 있음.
│
└── uploads : 사용자 프로필 이미지, 카페 썸네일 이미지가 저장됨.

마치며

디렉토리 구조 변경 후에 새로운 기능을 추가하거나 기존에 작성된 코드 수정 시 각 기능 별로 접근해야 하는 메서드들이 동일 디렉토리 내에 존재해 훨씬 빠르게 파일들을 찾아 접근할 수 있게 되었습니다.

프로젝트 디렉토리 구조를 정하는 게 코드를 작성하기 전에는 별 것 아닌 것 같았지만, 이는 향후 코드 관리 측면에서 큰 영향을 미친다는 것을 깨달았습니다.

이번 프로젝트의 경우 개인 프로젝트여서 별다른 불편함을 느끼지 못했지만 만약 다른 개발자들과 협업 하에 프로젝트를 진행한다면 엄격한 규칙을 기반으로 프로젝트 디렉토리 구조를 설정하는 게 중요한 일이 될 것입니다.