사이드 프로젝트 구축기 초반에 썼었어야 했지만..ㅋㅋ
anyway
이전 회사에서 B2C 서비스를 위해서 user단인 포털과 관리자가 사용할 admin이 필요했었다.
아니... 사실을 얘기하자면 좀 긴 얘기긴 하지만,
원래 개발이 되어있긴 했는데... thymeleaf framework를 사용한 개발이었다.
(사실 이때 이 프레임워크를 처음 들어봤음)
근데 이게 확장성도 나쁘고 (웹->앱) 유지보수 측면에서도 좋은게 하나도 없었다.
그래서 React로 전환하는 프로젝트를 진행했고,
그 과정에서 monorepo 형식을 처음 접하게 되었다.
얼마전 포스팅에서도 기재했지만,
보통 git에서 프로젝트 별로 repository를 쪼개서 운영하는데 이러면 공통적으로 사용해야 하는 모듈이 있어도 프로젝트마다 모듈을 넣어줘야하고 개별 관리해야하는 점이 번거롭다.
아무튼 이번 사이드 프로젝트는 웹서비스와 admin을 같이 개발해야 하기 때문에 Yarn berry 기반의 Monorepo를 채택했다.
바닥부터 구축해보는건 처음이라서,
yarn berry setting부터 Packager구성까지 경험해볼 수 있는 좋은 기회였다.
이렇게 ROOT하위에 packages폴더를 만들고 그 아래에 원래라면 개별로 존재해야 했을 프로젝트들을 하위에 넣어준다.
아참 이렇게 경로도 ROOT에 있는 package.json에 잡아줘야함
그러고 공통적으로 사용할 dependency들을 넣어주면 된다.(yarn add ~)
현재는 React와 typescript, chakra-ui 등이 들어가있다.(공통 사용)
그러면 이제 다시 터미널에서 packages/web 경로로 이동하여
Next.js를 통해 React app을 만들어준다.
나는 app router 기반으로 하였다.
방법은 여기에 아주 잘 설명되어있다.
https://nextjs.org/docs/getting-started/installation
그러면 이제 admin으로 다시 경로를 이동해서
vite를 통해 또 React app을 만든다.
admin은 처음에 Next.js로 할까 했는데 개발고수인 지인분이,
admin까지 Next.js로 하면 무거워지니 가볍고 빌드 속도가 빠른 vite를
사용하라고 해서 그건 오늘 다시 세팅을 바꿔줬고
로컬에서 돌리니 잘 된다.
근데 vite가 바이트가 아니라 비트라고 읽는대
아무튼 바닥부터 구축하기 기록 끝.
