[원티드11월챌린지] FE 프리온보딩(모노레포) - 1주차

모노레포 구성 실습을 세 가지 환경에서 차례로 했다.

 

1. yarn1 으로 모노레포 구성(이 포스팅엔 안적겠다.)
2. yarn-berry 로 모노레포 구성
3. turbo Repo 로 모노레포 구성

---

yarn-berry 로 모노레포 구성

 

1. 레포지토리의 패키지 구성

apps / packages 디렉터리의 하위에 위치 시켰다.

apps(실제 서비스하는 서버 디렉토리)

    / web1(nextJS 서비스1),

    / web2(nextJS 서비스2)

packages(라이브러리 디렉토리)

    / lib(함수 모음 라이브러리)

    / ui(nextJS 컴포넌트 UI 라이브러리)

 

2. 개발 환경 설정(각 팀의 Lint 룰을 일치시킬 수 있다)

esLint, prettier(파일 저장 시 자동 Lint)

 

3. 그 외 설정

peerdependancy 설정 - 해당 패키지를 타 패키지에서 install 할 때 필요로 하는 의존성 버전 명시

타입체크 스크립트 설정 - 프로젝트에서 ts 사용 시, 타입 관련 이슈를 직접 파일을 열어 확인하지 않고도 어느 경로에 이슈가 발생했는지 알려주는 스크립트이다.

 

 

---

turbo Repo 로 모노레포 구성

지금까지 손수 구성했던 것들을 보일러플레이트 식으로 지원하는 툴이다.

터보레포 URL : https://turbo.build/repo/docs

 

아래의 세 가지 경우라면, turbo Repo로 모노레포를 구성할 수 있다.

• 기존 프로젝트에(not 모노레포) 적용
• 새로 모노레포 프로젝트 생성
• 기존 모노레포 프로젝트에 적용

강사님과의 실습에선 새로 모노레포 프로젝트를 생성했다.

 

yarn-berry 로 구성했던 결과물을

npx create-turbo@latest

명령어 한 번으로 완성 시켰다.(참고로 yarn1 이다.)

(해당 명령 실행 시 npm, pnpm, yarn 세 가지 방식의 모노레포 보일러 플레이트를 선택할 수 있다.)

타입체크나 vscode extensions 적용 설정은 따로 해줘야 한다. 

c.f.) vercel 만세

 

turborepo 에서 타입체크 적용하기 (참고 : https://github.com/alejandronanez/turborepo-egghead-course)

 

---

강의 후기 - 

모노레포를 포함한 개발환경 관련 학습 외에도 컴포넌트 추상화 방식 이라던가 이것저것 학습하고 싶었지만

개발환경 관련 강의 내용만 으로도 굉장히 강의 내용이 많았다.(실습 위주 강의)

 

많은 강의 내용을 일 3시간에 압축시켜 해주시다 보니 실습을 따라가기 벅찼고 중간중간 놓치는 경우가 있었지만,

강사님께서 빠른 피드백 반영을 해주셔서 실습 중요 체크포인트 마다 git branch 를 분기해 주셔서 너무 좋았다.

실습에 허덕이느라 강의 내용을 놓치지도 않고, 실습도 중간에 놓치면 체크포인트의 branch 로 옮겨가서 바로 다음 실습에 정상참여가 가능했다.

 

(인프런 강의 끈이 긴 사람으로써 이 정도 강의면 꽤에에에나 비쌀 텐데. 원티드에서 무료로 해주시다니. 너무 감사할 따름이다!! 2주차 강의도 기대된다!!!)

 

 

메모) 추가 공부해볼 것 : vscode에서 eslint, prettier 적용 및 커스터마이징 | yarn 사용법 | tsconfig