Dev/React.js

[Package Manager] yarn 과 npm을 시작하기 전에

隣席の開発者群 2023. 9. 24. 16:16
반응형

 

정말 오랜만에 글을 쓰는 것 같은데 오늘은 패키지 관리자(매니저) 에 대한 이야기를 좀 하려고 한다. 최근에 개인적으로 만드는 프로젝트는 모두 한가지 패키지에서 관리하고 배포해볼까? 라는 생각이 들어서, 모노레포를 활용해볼까 하는 중인데 그러다보니 자연스레 이 yarn 이랑 Npm에 대해서 알아야하다보니 좀 자세히 파보려고 준비를 한다. 저 두가지를 얘기하기 전에 기본적으로 패키지 관리자가 뭐하는 애들인지부터 알아야하기 때문에 일단 이 글로 한번 정리하고 넘어가보자. 

 

1. Package? 

먼저 Package에 대한 정의부터 하고 넘어가도록 하자.

JavaScript로 개발을 하는 사람들이라면 초급, 신입 개발자라도 Module이라는 말에는 상당히 익숙하겠지만, 그 초급, 신입 개발자의 경우 대부분 이 Package라는 이름에 대해서는 Package.json을 제외하곤 깊게 생각을 안해봤으리라고 생각한다. 

(왜냐면 일반적으로 이미 환경은 다 정리가 되어있는 프로젝트에서 코드만 치는 경우가 태반이기 때문이다. )

 

Package란 아주 개발자 친화적으로 얘기하자면 JS 모듈 프로젝트 하나를 의미하는 말이다.

node.js 환경을 사용한 Front-end 개발을 하게 되면 app을 만들든, library를 만들든 Package.json을 하나씩은 갖고 있게 되는데, 이걸 가지고 있는 프로젝트 하나가 Package 하나라고 생각하면 되겠다. 

그래서 이 Package.json에다가 빌드를 어떻게 할건지, App으로 배포할 수 있도록 할건지, 그냥 여기저기서 가져다 쓸 수 있는 모듈 Library로 만들 것인지를 설정하는게 가능하다. 

 

 

2. Dependency(종속성)

이건 더 친숙하리라고 생각한다. 프로젝트를 패키지라고 불러본적은 없지만, 필요한 라이브러리들을 package.json에 dependency로 추가해본 적은 있을테니까. 말 그대로 지금 만들고 있는 프로젝트가 의존하고 있는 (가지고 있어야하는) 라이브러리들의 목록이 Dependency다. 

만일 예를 들어 우리가 React 프로젝트를 하나 만들고자 한다면, 우리는 React를 dependency에 추가하고 yarn이나, npm install을 실행시켜서 react를 설치하는 과정을 거친다. 그리고 이렇게 설치한 react는 node_modules 안에 들어가서 내가 만들고 있는 프로젝트 전체에서 import React from 'react'; 만 입력해주면 사용할 수 있게 된다. 

 

1) dependency

종속시킬 라이브러리를 추가할 때 가장 기본적으로 사용하게 되는 package.json의 속성이 바로 이 dependency다. 

여기에 입력하는 라이브러리들은 묻고 따지지도 않고 걍 받아와서 node_modules에 저장하게 된다. 

2) devdependency

얘는 개발환경에서 필요한 dependency들을 써두는 속성이다. 예를 들면 개발할 때는 쓰지만 굳이 배포환경에서는 필요하지 않은 라이브러리들이 여기 들어간다. 디버깅을 하기 위한 애들이라거나 뭐 그런 것들. 

 

3) peerdependency

여기가 이제 조금 응용이 들어가는데 여기서부턴 Package의 계층 구조에 대해서 생각해야한다. 만일 우리가 여러 개의 라이브러리 패키지를 만드는데, 이 패키지들은 하나의 App위에서 사용된다고 생각해보자. 대충 이런그림이라고 생각하면 된다. 

{
// app's package.json

//...
"dependency" : {
	"내가만든거 1" : "0.0.1",
	"내가만든거 2" : "0.0.1"
}
//...

}

 

 

근데 만약에 내가만든거 1,2 둘 다 공통적으로 의존하고 있는 라이브러리가 있다면? 그 라이브러리를 쟤네도 받아오고 app도 받아와야한다는 세상에서 제일 비효율적인 문제가 생긴다. 이걸 해결하기 위한 문제가 peerdependency라고 생각하면 되겠다. 

peerdependency에 추가되는 애들의 경우에는 그러니까 상위 패키지(여기서 얘기하면 App 패키지를 의미한다고 생각하면 되겠다.)

에다가 내가만든거 1,2가 써야하는 애들 관리를 위임하겠다 라는 의미가 되는데, 굳이 내가만든거 1,2 패키지의 node_modules에 추가하지 않고 app이 가지고 있는 node_modules만 가지고 있으면 걍 거기있는거 갖다 쓰겠다~ 이런 의미가 된다. 

때문에 devdependency가 가지고 있는 애들을 peerdependency도 가지고 있는 경우가 많다. 모듈단위로 개발을 할때는 dev로 받아와서 개발을 하다가 실제 배포되는 환경에서는 상위패키지가 가지고 있는 라이브러리를 가져다쓰면 되니까.

 

 

3. Package Manager

앞선 저 의존하는 라이브러리들을 설치하고, 관리하는데 사용되는 애들이 Package Manager다. 우리가 흔히 보고 듣고 쓰게 되는 yarn, npm 이 바로 이 Package Manager다. 

기본적으로는 node.js에서 제공하는 npm을 사용하게 되고, 이 npm이 가지고 있는 문제점을 해결하여 개발된 것이 yarn이다 보니 실제로는 yarn을 사용하게 되는 경우가 많다. 

 

자세한 이야기는 npm, yarn을 중점적으로 다루는 게시물에서 작성하도록 하겠다. 

LIST

'Dev > React.js' 카테고리의 다른 글

[React] Next.js VS Vite VS CRA  (0) 2024.06.14
[React] Custom Hooks  (0) 2023.06.28
[FrameWork] Next.js를 시작하기 전에 (SSR은 무엇인가?)  (0) 2023.06.02
[React] useMemo, useCallBack  (0) 2023.06.01
[React] MobX  (0) 2023.05.30