[온보딩챌린지] monorepo _Turbo로 모노레포 세팅하는 법

유림·2022년 12월 8일
1

REACT

목록 보기
7/16

느낀점

  • 취준생이 제일 궁금한 부분들이라고 생각한다. 실제로는 어떤식으로 코딩을 하는지, 내가 어느 부분을 더 잘 알아야하는지, 어떻게 해야 더 좋은코드인지 배울 수 있는 곳이 없었는데 무려 원티드 현직자가 직접 해주시는 강의를 듣는다는 것은 나같은 취준생에겐 감사한 일이였다. (굉장히 자연스럽게 용어도, 의견을 듣는것도 좋았고 하다못해 영타 속도가 정말 그렇게 빠를까 했던 쓸데없는 궁금증도 해결되었다 ㅋㅋ)
    포폴 프로젝트를 더 해야할까, 토이프로젝트로 다양한 아웃풋을 내야하나, 이력서 가독성을 더 개선해야할까 고민에 어느 순간 코딩보다는 이런저런 고민이 가득해지는데
    취업말고, 정말 더 좋은 코드에 대해 알아가는 시간으로 리프레쉬되는 재밌는 시간이였다.
    (사실 기대를 많이 안했어서 그랬을 수도 있다 ㅎㅎ)

  • 모노레포의 이론은 대충 알아도 그래서 폴더구조가 어떤지 직접 눈으로 시현해보는 것과는 천지차이이다. 동시에 앞으로 또 혼자 어떻게 공부해야할까 고민이다. 끝도 없는 개발의 세계..

  • 나처럼 무지한 사람에게는 '추상화가 잘 되어있다', '빌드할때 캐싱이 이렇게 되어있어서 더 좋다' 등 자연스러운 꿀팁들이 스며들어 재미있었다. 코딩 더 잘해서 이렇게 더 좋은 코드를 위한 공부를 하는 내가 되면 좋겠다ㅠㅠ

  • 다들 질문을 굉장히 많이하고 그냥 그 과정을 지켜보기만해도 알게되는게 많다.

▶️ Turborepo를 사용하기 위하여 아래 사이트에서 생성 가능

https://turbo.build/repo

▶️ 모노레포파일을 터보로 만드는 법

1단계. nav DOCS -> create a New Monorepo를 클릭
2단계. 터미널에 npx create-urbo@latest 작성
3단계. 순서대로 파일이름 -> yarn(다른것도 사용 가능)
4단계. next.js로 만들어졌다면 cd vscode해서 모노레포 세팅된 파일 열어주기

▶️ 터보로 만든 모노레포 세팅의 특징

  1. Parallels하게 진행됨, 병렬처리되어 진행되어 보다 빠르게 진행됨
  2. apps, web, packages로 미리 구성되어있어 간편하게 빨리 사용할 수 있음
  3. eslint, prettier 설치되어있음
    단, 아래 세팅을 추가해줘야 작동됨 (= 세팅(톱니바퀴모양) -> 작업 영역)
    .vscode파일 만들고 -> settings.json 파일 만들어서 아래 코드 추가해주면 작동함
    📌 settings.json파일에 아래 코드 추가해주기
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.rulers": [
    120
    ],

📌 extensions.json파일에 아래 코드 추가해주기

{
  "recommendations": [
    "arcanis.vscode-zipfs",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}
  1. tsconfig파일에 vase.json, next,json파일을 모아서 넣어두어 tsconfig를 관리
  2. packages폴더 안에 ui폴더가 자동생성되고 eslint 등이 이미 설치되어있음
  3. root에서 따로 worksapce 등 따로 다운받지않아도 yarn dev하나로 바로 세팅준비가 되며, 실시간 반영도 가능함
  4. yarn lint 명령어 lint 점검 가능 (예를들어 eslint)
  5. 캐싱처리를 규칙에 맞게 알아서 실행됨 (캐싱전략을 잘 짤 수 있는 장점)
    캐싱이 되어있기 때문에 다시 bulid했을 때 더 빨리 bulid할 수 있음
    remote 캐싱
    : 로컬에서 빌드한 내용을 원격에 저장하여 배포가되면 저장되어 다음에 진행할 때 보다 빠르게 빌드할 수 있는 기능이 있음
  6. turbo.json?
    : yarb dev명령어로 dev 시 설정될 때의 기본 설정들이 들어있음
    : 그 외에도 bulid 등 설정값들이 들어 있음

용어정리

  1. Trunk Based Development(TBD)
    : git branch 전략
  2. Feature flag (Feature toggle 유사한 단어)
    : TBD를 하기 위해서 하는 건데
    특정 기능을 개발했을 때, 그 기능을 특정 인원에게만 접근할 수 있게 하여 운영환경에서 테스트 할 수 있게 하는 방법.
    배포 이후 원하는 때에 기능을 활성화하거나 비활성화할 수 있음.
    (다음시간에 해당 용어들에 대해 설명해줄 예정이기에 공부해오기!! )
profile
ɪ ʜᴏᴘᴇ ᴛᴏ sᴏʟᴠᴇ ʀᴇᴀʟ ᴘʀᴏʙʟᴇᴍs👩🏻‍💻❤️

0개의 댓글