node_modules (npm)과 Yarn Berry

2023. 10. 30. 23:32·React

 

https://kasterra.github.io/setting-yarn-berry/

Yarn Berry란?

Yarn Berry는 node.js를 위한 새로운 패키지 관리 시스템으로 기존의 깨져있는 npm  패키지 관리 시스템을 혁신적으로 개선한다. 

그렇다면 NPM의 문제점은 무엇일까?

NPM의 문제점

NPM은 Node.js설치에서 기본으로 제공되어 범용적으로 사용되고 있으나, 비효율적이거나 깨져있는 부분이 많다.

 

NPM은 파일 시스템을 이용하여 의존성을 관리한다. 익숙한 node_modules 폴더를 이용하는 것이 특징이다. 이렇게 관리 했을 때 의존성 검색은 비효율적으로 동작한다. 

 

NPM은 패키지를 찾기 위해서 계속 상위 디렉토리의 node_modules 폴더를 탐색한다. 따라서 패키지를 바로 찾지 못할수록 readdir, stat와 같은 느린 I/O호출이 반복된다. 경우에 따라서는 I/O호출이 중간에 실패하기도 한다. 

TypeScript 4.0까지는 node_modules를 이용한 패키지 탐색이 너무 비효율적이여서 처음으로 import하기 전까지는 node_modules내부의 타입 정보를 찾아보지도 않았다. 

 

Plug'n'Play(PnP)

Yarn Berry는 PnP전략을 이용하여 문제를 해결한다. 

 

Plug'n'Play(PnP) 켜기

NPM에서 최신 버전의 Yarn을 내려받고, 버전을 Berry로 설정하면 Yarn Berry를 사용할 수 있다. 

$ npm install -g yarn
$ cd ../path/to/some-package
$ yarn set version berry

Yarn Berry는 기존 Node.js의존성 관리 시스템과 많이 다르기 때문에 하위호환을 위해 패키지 단위로만 도입할 수 있다. 

Plug'n'Play의 동작 방법 

/* react 패키지 중에서 */
["react", [
  /* npm:17.0.1 버전은 */
  ["npm:17.0.1", {
    /* 이 위치에 있고 */
    "packageLocation": "./.yarn/cache/react-npm-17.0.1-98658812fc-a76d86ec97.zip/node_modules/react/",
    /* 이 의존성들을 참조한다. */
    "packageDependencies": [
      ["loose-envify", "npm:1.4.0"],
      ["object-assign", "npm:4.1.1"]
    ],
  }]
]],

react 17.0.1버전 패키지의 위치와 의존성의 목록을 완전하게 기술하고 있는 것을 확인할 수 있다. 이로부터 특정 패키지와 의존성에 대한 정보가 필요할 때 바로 알 수 있다. 

 

Yarn Berry는 Yarn Classic과는 다르게, 몇몇 추가 설정이 필요하다. 

Yarn Berry는  node_modules를 생성하지 않는다. Yarn Berry는 모듈들을 zip파일로 관리하여, .yarn/cache폴더에 두고, 해당 모듈들을 .pnp.cjs, .pnp.loader.mjs를 통해서 가져오게 된다. 이러한 특징 때문에 몇몇 설정들이 추가적으로 필요하게 된다. 

 

Yarn Berry 셋팅

npm install -g yarn

우선 전역에 yarn을 깔고

yarn --version

yarn의 버전을 확인할 수 있다.

node:internal/modules/cjs/loader:1080 throw err; ^ Error: Cannot find module

yarn 실행이 안되고 자꾸 이런 오류가 떴는데 .yarnrc.yml파일에 들어 있는 

이 경로가 잘못 되었다는 오류가 계속 떴다 알고보니, 나는 다른 프론트엔드 분이 셋팅 해놓은 코드를 가지고 와서 실행시키다보니 이 파일을 삭제하고 다시 깔아야하는 것이었다. 이 파일을 삭제 했더니 오류를 해결할 수 있었다. 앞으로 이 오류가 뜬다면 파일 경로를 잘 살펴보자.

yarnPath: .yarn/releases/yarn-4.0.0.cjs
yarn set version berry

이렇게 하면 .yarn이라는 폴더와 releases라는 폴더 안에 yarn-4.0.0.cjs라는 파일이 생긴다. 

하지만 이 코드는 가장 최신의 yarn berry를 설치한다. 특정 버전의 yarn을 설치하고 싶다면

yarn set version "버전"으로 세팅하면 된다. 

 

 

'React' 카테고리의 다른 글

Error: React Hook useEffect has missing dependencies:...Either include them or remove the dependency array  (0) 2024.08.19
React: [Error] Firebase 사용자 photoURL  (0) 2024.01.19
React: Path Parameters  (0) 2023.12.27
React : Refresh Token &Access Token& Cookie(브라우저 저장소)  (1) 2023.10.08
OAuth 2.0(생활코딩) 개념  (0) 2023.09.23
'React' 카테고리의 다른 글
  • React: [Error] Firebase 사용자 photoURL
  • React: Path Parameters
  • React : Refresh Token &Access Token& Cookie(브라우저 저장소)
  • OAuth 2.0(생활코딩) 개념
hyejeong_02
hyejeong_02
  • hyejeong_02
    프론트엔드 개발일지
    hyejeong_02
  • 전체
    오늘
    어제
    • 분류 전체보기 (24)
      • React (9)
      • 네트워크 (2)
      • git (2)
      • HTML (0)
      • CSS (1)
      • Typescript (1)
      • java script (3)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    infiniteScroll
    react
    제어 컴포넌트
    react-hook-form
    얕은 복사
    ESLint
    Prettier
    useefftect
    무한스크롤
    불변성
    비제어 컴포넌트
    리렌더링
    useeffect오류
    의존성배열
    uncontrolled
    var와 let의 차이
    js
    intersectionObserver
    controlled
    redux
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
hyejeong_02
node_modules (npm)과 Yarn Berry
상단으로

티스토리툴바