일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- yarn classic
- Video
- React.js
- 커스텀훅
- DRM
- nextjs
- 환경설정
- Next.js
- node
- shaka
- homebrew
- npm
- VirtualBox
- 개발세팅
- Yarn
- yarn berry
- react
- mysql설정
- 세팅
- 프론트엔드
- brew
- shaka player
- MAC
- 채널톡
- 비디오플레이어
- ReactJS
- 버추어박스
Archives
- Today
- Total
코딩 요정 버터링
yarn classic(v1) 에서 yarn berrey(v4) 마이그레이션 하기 본문
들어가기전에 앞서...
기존 회사에서 관리하는 프로젝트들은 패키지 매니저를 yarn classIc을 사용하였다.
여기서 yarn classic 은 yarn 의 1.x 버전이라고 보면 된다.
본격적인 마이그레이션 방법에 대해 설명하기 전 왜 yarn berry 로 버전 업을 했는지에 대해서 설명하려고한다.
굳이 볼 필요는 없다.
yarn classic과 차이점
- yarn berry는 종속성을 설치하고 해결하기 위해 PnP(Plug'n'Play)라는 기능을 사용한다. 특히, node_modules 폴더를 사용하지 않는 것이 주요 차이점 중 하나이다. node_modules은 폴더(파일 시스템)을 이용하여 의존성을 검색하며 굉장히 비효율적으로 동작하는데, 이는 yarn classic 뿐만 아니라 npm에서도 해당되는 문제이다.
- node_modules의 비효율적인 설치는 큰 용량을 차지할 뿐만 아니라 디렉토리 구조를 만들기 위해 많은 I/O 작업이 필요하다는 문제가 있다. 서로가 서로를 의존하는 복잡한 의존성 때문에 디렉토리 구조가 깊어지고 설치가 유효한지 검증하기도 어렵다.
- Ghost Dependency 문제도 존재했는데, npm과 yarn classic에서는 node_modules의 중복 설치 문제를 해결하기 위해 호이스팅(hoisting) 기법을 사용하는데, 이로 인해 직접적으로 의존하고 있지 않은 라이브러리를 require할 수 있는 현상을 Ghost Dependency 또는 유령 의존성이라고 부른다. yarn berry에서는 nohoist 옵션을 기본으로 활성화하여 이러한 hoisting을 방지하고 있다.
Plug'n'Play(PnP)
yarn berry는 Plug'n'Play(PnP)를 사용하여 위에서 언급한 문제들을 해결했다.
yarn berry에서는 node_modules 폴더가 없다. 대신에 .yarn의 하위 경로에 .zip으로 압축하여 의존성을 저장하고 .pnp.cjs 파일을 생성하며, 이를 사용함으로써 패키지를 찾기 위한 반복적이고 비효율적인 I/O로부터 해방되며 의존성 검증도 쉬워져 Ghost Dependency 문제를 해결했다.
이를 통해 yarn berry는 프로젝트의 의존성 관리와 빌드 프로세스를 효율적으로 개선하고, 불필요한 복잡성을 간소화하는데 기여했다.
classic to berry
마이그레이션 방법
- node 18 이상의 버전
- corepack enable 이라는 명령어 사용을 통해 Corepack 을 활성화 시키기
- 프로젝트 디렉토리로의 이동
- yarn set version berry 명령어 실행
- .npmrc 와 .yarnrc 의 내용을 .yarnrc.yml 파일로 옮겨준다.
- yarn install 을 실행
세팅에 참고하면 좋을 것들
- VSCODE 기준 code completion/hinting 을 사용시 typescript가 개빌/빌드 환경에 존재해야함. (사용여부와 상관없이)
- eslint, prettier, typescript 등을 지원하는 ide 가 잘 작동되려면 아래의 명령어 실행이 필요함.
yarn dlx @yarnpkg/sdks vscode
'프론트엔드 개발' 카테고리의 다른 글
next.js 에서 샤카플레이어 (shaka player) 사용하기 (drm 적용) (1) | 2023.12.22 |
---|---|
next.js (react.js) 에서 채널톡 커스텀 훅으로 만들어 사용하기 (2) | 2023.05.11 |
Mac 에서 Homebrew 를 통해 node, npm, yarn 설치하기 (3) | 2020.01.01 |
Comments