아주 많은 파일의 구조를 옮겨서 Diff가 미칠듯이 늘어난 PR입니다... 모노레포로 바꾸는 과정에서 어쩔 수 없었습니다. PR을 알아보기가 어려울 것 같아 간략한 가이드를 작성해두었습니다.

모노레포 사용법

이제 client라는 폴더 안에서 저희가 작업하던 next.js의 코드를 확인할 수 있습니다. 서버와 클라이언트, 각종 자체 패키지의 코드가 모두 한 레포지토리에 위치해있는 모노레포 프로젝트의 특징입니다. 각 폴더의 packages.json 파일을 확인해보세요. 이제 xction.co.kr라는 프로젝트의 client workspace로써 우리의 프론트엔드 프로젝트가 들어간 것을 알 수 있습니다. 그래서 루트 디렉토리의 터미널에서 yarn dev 등을 돌리면 제대로 작동하지 않을 겁니다. 어떻게 하면 좋을까요? 바로 yarn client를 붙이면 됩니다. yarn client 명령어는 client 워크스페이스에 접근하는 단축 명령어입니다. 따라서 yarn client dev라 입력하면 기존의 프로젝트와 같이 개발서버를 열 수 있고, yarn client add {패키지명} 명령어로 패키지를 설치할 수도 있습니다.

core 디렉토리

루트에는 모노레포를 구성하는 파일들과 client 디렉토리 말고, core라는 디렉토리도 존재합니다. 이는 기존에 이용하던 types 폴더의 entity, usecase, dto들을 서버에서도 이용할 수 있게 분리해둔 것입니다. 프론트엔드 작업 시 core 디렉토리를 건들 일은 거의 없을 것입니다. PR을 날리기 전에 core에 diff가 남지 않았는 지 확인해보세요!

import alias

프론트엔드의 코드 내에서 core 디렉토리의 타입을 import하는 일은 종종 발생합니다. 유즈케이스나 dto의 타입을 가져올 때가 그러하겠죠. 이 때 상대경로를 이용하면 import문이 너무 길어질 수 있습니다. 그래서 core 디렉토리로 향하는 import alias(import를 간단하게 하기 위한 별칭)를 붙여 두었습니다. 바로 @core입니다. 따라서 아래와 같이 간단하게 import가 가능합니다.

import { UserEntity } from "@core/entity/user";
import { CommentEntity } from "@core/entity/comment";

@ alias는 여전히 프론트엔드 프로젝트의 src/디렉토리를 가리킵니다. 기존의 세팅과 동일하죠.

앞으로의 작업

모노레포의 이점을 살리기 위해 아래와 같은 작업을 진행할 예정입니다.

server 워크스페이스 생성
server와 client를 동시에 구동할 수 있는 명령어 만들기.
- concurrently를 이용합니다.
- 루트에서 yarn dev만 하면 client와 server가 모두 작동하게 만드는 게 목표입니다.
pre-commit 훅 만들기
ci/cd 재연결

xction-dev / xction.co.kr

Feat/monorepo #21

모노레포 사용법

core 디렉토리

import alias

앞으로의 작업