[모대넓얕] yarn과 npm 톺아보기

안녕하세요~! 👋

최근에 ReactNative와 안드로이드까지 개발해볼 수 있는 기회가 생겼어요!

그런데 아무래도 저는 iOS개발자다보니 다른 플랫폼에서 개발하기 위해서는 많은 공부가 필요하겠죠 ㅠ.ㅠ

그래도 이렇게 다양한 플랫폼에 대해 공부해볼 수 있는 기회가 생겨서 열심히 해보려고요!!

카테고리 이름을.. 모대넓얕 이라고 지어봤는데요! 

모바일 플랫폼 대화를 위한 넓고 얕은 지식 이라는 의미에욧 ㅋㅋㅋㅋ 🤟

블로그는 앞으로도 여전히 iOS에 관한 포스팅이 메인이 되겠지만, 안드로이드나 ReactNative에 관련된 포스팅도 아주 기초적인 것부터 종종 생길 것 같아요!

 

아무튼 처음에 개발환경을 세팅하고, Package Dependency를 관리하는 환경을 세팅해야 하는데요!

제가 개발하는 환경은 yarn을 통해 디펜던시를 관리하고 있어요!

음.. ㅇㅋ 근데 yarn이 뭔데..? 부터 모르는게 시작되었어요.

 

그래서 오늘은 yarn에 대해 간단하게 톺아보고, yarn과 같은 역할을 하는 npm도 같이 톺아볼거에요! 👉

암튼 또 서두가 길었습니닷 🤞

---

 

 

node기반으로 프로젝트를 진행할때 많이 쓰이는 패키지 관리 Tool로는 대표적으로 npm과 yarn이 있어요.

 

npm과 yarn은 모두 javascript package manager에요.

여기서 패키지는 디펜던시 패키지를 포함한 npm에 업로드된 노드모듈을 일컫습니다.

npm에 패키지를 업로드하면 패키지 다운로드, 설치, 제거, 업데이트 등을 해줘야하는 복잡한 상황들이 생기는데요,

특히 npm에 업로드된 다양한 패키지가 있을거고, 패키지가 다른 패키지를 사용하게 되면 패키지끼리도 의존관계가 생기기도 하죠.

이러한 과정과 복잡한 상황을 자동화해서 쉽고 안전하게 관리할 수 있도록 해주는게 package manager의 역할이에요!

 

오케이~~~ 이제 npm과 yarn이 뭐하는 애들인지는 감잡았스~~~ 그럼 둘의 차이는 뭔데!?

 

npm (Node Package Manager)

Node.js에서 기본적으로 쓰이는 패키지 매니저에요. npm은 우리가 명령어로 이것저것 실행하게 해주는 command-line client 와 npm registry라는 온라인 데이터베이스로 이루어져 있어요.

 

yarn

yarn은 facebook에서 만든 패키지 매니저에요. yarn은 npm의 몇가지 단점을 보완하기 위해 만들어졌다고 해요. 여기서 npm의 단점은 속도(performance), 안정성(stability), 보안성(security) 등이 있다고 하는데요! 그렇다면 npm과 하는 역할은 같지만 이 세가지는 yarn을 사용하는게 조금 더 장점을 취할 수 있겠네요.

 

속도(performance)

yarn은 다운받은 패키지 데이터를 캐시(cache)에 저장하기 때문에 중복된 데이터는 다운로드 하지않기 때문에 npm에 비해 패키지 설치속도가 빠릅니다. 또한 여러개의 패키지를 설치할 때 병렬로 처리하기 때문에 performance와 speed가 증가 됩니다. (npm은 순차적) 그러나 이 속도 차이는 매우 근소한 차이라고 합니다 😆

 

안정성(stability)과 보안성(security)

npm은 패키지가 설치될 때 자동으로 코드와 의존성을 실행할 수 있도록 허용해줘요.

이 특징은 편리한 기능이지만 안정성을 위협할 수 있어요.

특히나 보장된 정책 없이 등록한 패키지가 존재할 수 있다는 점에서 더욱 위험도가 높다고 합니다.
반면 yarn은 yarn.lock이나 package.json으로 부터 설치만 하며, yarn.lock은 모든 디바이스에 같은 패키지를 설치하는 것을 보장하기 때문에 버전의 차이로 인해 생기는 버그를 방지해줄 수 있다고 합니다!

 

그렇기 때문에 yarn.lock 파일은 항상 yarn 이 자동으로 관리하도록 하고, 직접 수정하는 것은 좋지 않아요. 그리고 협업시에 동일한 환경에서 디펜던시 관리를 하기 위해 버전관리에도 포함해야 됩니다!

 

하지만 yarn에도 단점이 있어요. 바로 디스크 용량을 더 많이 차지한다고 하는데요.. 

저는 개인적으로 디스크 용량측면에서 이점을 취하기 위해 위에서 소개한 세가지 이점을 포기하지는 않을 것 같아요!

그래도 아무리 yarn이 npm의 단점을 보완해서 나왔다고 해도, npm도 지속적으로 개선버전이 나오면서 사실상 지금은 성능상에도 yarn과 npm은 크게 차이는 없다고 해요. npm이 원조고 역사도 오래되었으니 버리지는 못할 것 같네요.

 

그래서... 둘중에 뭐쓰면 되는데!?

👉 개인의 선호도나 속해있는 팀이 사용하는 패키지 매니저를 사용하면 되겠죠!? 정리하다보니 둘다 똑같씀다~~ㅋㅋ

 

지금까지 npm과 yarn에 대해 공통적인 개념과 차이점을 톺아봤는데요!

개념도 중요하지만 우리는 쓸 줄 알아야하죠~?

이제부터는 npm과 yarn에서 주로 사용하는 명령어에 대해 공부해볼거에요.

저는 yarn을 사용하는 개발환경이기 때문에 yarn의 명령어를 정리하고 npm에서 같은 명령어를 같이 써두려고요!

 

# 설치
# npm install
yarn install 또는 yarn

# 초기화
# npm init
yarn init

# 링크
# npm link
yarn link

# 실행
# npm run
yarn run

# 캐시 정리
# npm cache clean
yarn cache clean

# 디펜던시 추가 (dev, production 환경에 모두 추가됨)
# 여기서 말하는 환경은 package.json에서
# dev환경 = devDependencies에 등록된것
# production환경 = dependencies에 등록된것
# npm i <package>@<version> --save
yarn add <package>@<version>

# dev환경에만 설치할 디펜던시 추가
# npm i <package> --save-dev
yarn add <package> --dev

# production 환경에만 필요한 디펜던시 추가
# npm i <package> --save-production
NODE_ENV=production yarn install 또는 yarn install --production

# 글로벌 추가
# npm i <package> -g
yarn global add <package>

# 패키지 삭제
# npm uninstall <package> --save
yarn remove <package>

# package.json 에 명시된 version rule 에 따라 최신 버전으로 업그레이드.
# npm update --save
yarn upgrade

# 특정 패키지를 특정 버전으로 업그레이드 
# npm i <package>@<version>
yarn upgrade <package>@<version>

# 목록형식의 interactive terminal ui 제공 (yarn만 해당)
yarn upgrade-interactive

# CI 서버와 같이 재생 가능한 의존 패키지가 필요한 경우 --fronzen-lockfile 플래그를 사용
# yarn.lock과 package.json이 동기화 되지 않은 상태에서 업데이트가 필요한 경우에는 설치를 실패하고 yarn.lock을 생성하지 않음 
yarn install --frozen-lockfile

 

명령어를 보면 설치나 업그레이드를 할때 패키지 버전에 @ 이게 붙은게 있죠!

이건 어떤 버전을 설치할건지 설정을 하는 부분이에요. 아래의 룰에 따라서요!

 

@ : 명시적인 특정 버전

~ : 최하위버전의 업데이트만 허용

^ : 최상위 버전의 업데이트까지 자유롭게 허용

 

 

오늘은 yarn과 npm에 대한 간단한 개념과 특징을 톺아보고 주로 사용하는 명령어를 정리해두었는데요!

저는 아무래도 익숙해지기 전까지는 종종 와서 참고를 많이 할 것 같아요!

부족한 정리 읽어주셔서 감사합니다 🥹 잘못된 점이 있다면 가르침과 오지랖은 언제나 적극환영입니다!

 

오늘도 누군가에게 도움이 되었길 바래요 🙏

 

참고 자료  : npm vs yarn cheat sheet