Yarn Berry 프로젝트에 도입하기

이선우·2021년 9월 13일
typescriptyarnyarn-berry
11

도입하기

목록 보기
2/2
post-thumbnail

저는 프론트엔드 개발자를 희망하는 마이스터고등학교 학생입니다.
어느 날 토스 프론트엔드 개발자분들께서 운영하시는 toss.tech를 둘러보던중에 Yarn Berry 관련 아티클을 읽게 되었습니다. 그래서 관심이 생겨 공부해보게 되었고, 이 글은 제가 Yarn Berry로 마이그레이션 하다가 겪은 우여곡절을 공유하고, 그 방법에 대해서 포스팅 했습니다.
(Yarn Berry에 대해서 알고 싶으시다면 토스 FE 기술 블로그를 참고하세요.)

세팅 과정

우선 제가 지금 세팅하고 있는 프로젝트는 create-react-app --template typescript 로 생성한 환경입니다.

  1. yarn 버전 업그레이드

    본인의 방법으로 yarn 버전을 최신으로 올려놓으세요.
    ex) npm install -g yarn

  2. yarn berry로 버전 올리기

    yarn set version berry 를 프로젝트 루트 디렉터리에서 실행해주세요.
    만약 위 명령어를 실행해도 안된다면
    yarn policies set-version 로 입력해주시면 됩니다.

  3. (선택사항 ) PnP를 선택하지 않고 node_modules 방식을 고수하고 싶으시다면 선택하세요.

    2를 실행하셨다면 .yarnrc.yml 파일이 생성됩니다. 이 파일에 nodeLinker: node-modules 코드를 추가해주시면 됩니다.

    * 주의 : Default가 PnP이긴 하지만 혹시 .pnp.cjs 파일이 생성되지 않을때가 있는데 그럴때는 nodeLinker: "pnp" 코드를 입력해주시면 됩니다.

  4. 패키지 다운로드 하기

    yarn 또는 yarn install 를 프로젝트 루트 디렉터리에서 실행해주세요.
    타입스크립트가 아닌 환경에서는 여기에서 설정이 끝납니다.

  5. gitignore

    zero-install을 쓴다면 첫번째를 쓰지 않는다면 두번째를 작성하자

.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

  1. Type-Script 와 함께 사용하기

    yarn init -2을 입력하여 초기화 시켜준다. 그 후 다음 코드를 입력하여 vscode에서 쓰기 위한 sdk를 설치해주세요. yarn dlx @yarnpkg/sdks vscode

    그렇게 되면 공식문서에서 말하는 방식은 다 끝나게 되었는데
    yarn start나 yarn dev가 실행이 안되는 경우가 생기기도 합니다. (react-script가 안됨)

    무엇이 문제이냐 하면 eslintConfig가 원래 package.json에 있는데 이렇게 되면 불러올 수 없다고 합니다.

    그래서 따로 /.eslintrc.json을 만들고 코드를 옮겨주도록 해야합니다.
    그런데도 안되는 경우가 있습니다.

    제가 봤을때는 PnP 모드가 모듈 이행 작동 방식이 더 엄격해서 그런것 같은데 이 경우에는 pnpMode: loose를 yarnrc.json에 작성해도 될 듯 하지만,

    저는 이 방법을 쓰지 않고 yarn add eslint-config-react-app 패키지를 다운로드 받아 해결했습니다.

  2. 실행

    yarn 을 쳐서 세팅을 시키고 커맨드에 실행 스크립트 치면 됩니다.

profile
이선우
이전 포스트

Svelte 프로젝트에 도입하기

0개의 댓글