카테고리 없음

Yarn Berry란? node_module은 이제 빠이!🔥

홍준혁 [Hong-JunHyeok] 2021. 6. 19. 02:21
728x90

Yarn Berry가 뭔지 알아보기 전에, 기존에 NPM의 문제점을 알아볼 필요가 있다.

 

아래의 사진을 보도로 하자.

 

그만큼, NPM이 관리하는 시스템이 비효율적이고 무겁다는 의미이다.

 

이는, NPM의 비효율적인 의존성 탐색에 있다.

 

우리가 리액트 프로젝트에서 "react"라이브러리를 가져올려면,  require.resolve.paths() 이라는 함수를 사용해서 탐색을 하게 된다.

 

이 함수는 NPM이 검색하는 디렉토리의 목록을 반환한다.

이게 무슨 말이냐면,

 

NPM은 패키지를 찾기 위해서 계속 상위 디렉토리의 node_modules 폴더를 탐색한다.

 

그래서 패키지를 찾지 못할수록, 느린 I/O속도를 자랑한다. (탐색에 실패하는 경우도 있다.)

 

즉, NPM은 패키지를 찾지 못하면 상위 디렉토리의 node_modules 폴더를 계속 검색한다.

 

이 문제는 심각한 문제로 이어지게 되는데, 어떤 의존성을 찾을 수 있는지는 해당 패키지의 상위 디렉토리 환경에 따라 달라진다.

 

환경에 따라 동작이 변하는 현상은 매우 나쁜 현상이다. 왜냐하면 협업할때 해당 상황을 재현하기 힘들어지기 때문이다.

 

또 비효율적인 설치에 문제점이 드러난다.

 

Github에 실수로 node_modules를 올려본 경험이 있다면 느꼈을텐데, 정말 큰 공간을 차지한다. node_modules를 용량도 많이 먹을뿐만 아니라, 디렉토리 구조를 만들기 위해서는 많은 I/O 작업이 필요하다.

 

node_modules는 매우 복잡하기 때문에, 이 설치가 유효한지도 확인이 힘들다.

 

이제, NPM의 문제점을 확인해보았고, 이를 해결하기 위한 방안들을 생각해보자.

 

Yarn v1은 NPM의 기본적인 의존성 트리의 유효성만 검사하고,각 패키지가 올바른지는 검사하지 않는 기법을 사용한다.

 

왼쪽 (NPM) - 오른쪽 (Yarn v1)

 

위의 그래프를 비교해보면 이해가 좀 더 쉬울것이다. NPM에서 중복되서 설치하는 node_modules를 아끼기 위해서 Hosting기법을 사용한다. 

 

왼쪽의 그래프는 A (1.0)과 B (1.0)을 둘 다 설치하게 된다. 이는 디스크 공간을 낭비하게 된다.

 

오른쪽 트리는 원래 require() 할 수 없었던 [B (1.0)] 라이브러리를 불러올 수 있게 되었다.

 

그러면, 직접 의존하지 않은 라이브러리를 암묵적으로 참조할 수 있게된다. 그러면, 다른 의존성을 지웠을때에는? 암묵적으로 참조한 라이브러리도 스윽~ 사라지게 된다.

 

당연히도, 이는 패키지 관리에 있어서 혼란을 준다.

 

이제, 위의 문제를 해결한 Yarn Berry가 등장하게 된다.

 

Plug'n'Play (PnP)전략을 사용을 한다. 이게 정확히 뭔지 자세히 알아보도록 하자.

 

node_modules를 이용한 의존성은 깨지기 쉬우니까, Plug’n’Play근본적으로 안전하고 효율적인 방법으로 접근을 했다.

 

한번 사용해 보도록 하자.

 

npm install -g yarn

 

Yarn을 설치를 해주고, 의존성 관리를 하고자하는 프로젝트에 cd를 한 다음에 yarn의 버전을 Berry로 변경한다.

 

yarn set version berry

 

왜 전역적으로 버전 설정을 안하고 디렉토리를 하위로 이동하고 set을 해주냐면, Yarn Berry의 의존성 관리는 기존의 방식과 다르기 때문에, 하위호환을 위한 목적이다.

 

 

version set

 

이렇게 해주었으면, yarn Berry를 사용할 준비가 되었다.

 

한번 패키지를 다운로드 해보겠다.

yarn install

그러면 기존의 node_modules는 사라지고, .yarn이라는 폴더가 생긴다.

 

.pnp.cjs에서는 의존성의 정보를 볼 수 있는데, 밑에는 리액트의 의존성 정보를 의미한다.

 ["react", [
        ["npm:17.0.2", {
          "packageLocation": "./.yarn/cache/react-npm-17.0.2-99ba37d931-7d0dfebafe.zip/node_modules/react/",
          "packageDependencies": [
            ["react", "npm:17.0.2"],
            ["loose-envify", "npm:1.4.0"],
            ["object-assign", "npm:4.1.1"]
          ],
          "linkType": "HARD",
        }]
      ]],

 

특정 패키지와 의존성에 대한 정보가 필요할 때 바로 알 수 있다.

 

이제 yarn Berry가 뭔지 알아보았다. 다음부터 프로젝트를 진행할때 Yarn Berry를 사용해서 진행을 해봐야겠다.

 

728x90