npm 대신 yarn 써보기

yarn

지금까지 프로젝트에선 npm만 썼었는데, 이번에 프리온보딩 첫 번째 개인과제를 yarn으로 세팅하게 되었고 마침 참여중이었던 다른 프로젝트에서도 프론트엔드 개편과 함께 yarn을 써보자는 이야기가 나와서 이참에 정리해보려고 한다

약간 이름이 얀이 머냐 얀이 이러면서 좀 비호감이었는데 방금 아이콘 찾아보니 너무 귀여워서 급호감됨

고양이 못참지

yarn이란?

기본적으로 npm과 같은 자바스크립트 패키지 매니저로, 패키지 설치와 삭제를 돕는다

다만 yarn은 npm의 느린 속도와 불안정함을 보완하기 위해 태어난 녀석이라 상대적으로 빠르고, yarn.lock과 package.json에 등록된 패키지만을 설치하기 때문에 안정적이다

npm과의 차이점

속도

npm은 작업을 순차적으로 수행하기 때문에 이전 패키지를 모두 설치하여야 다음 패키지로 넘어간다

반면 yarn은 병렬로 여러 패키지를 설치하기 때문에 약 5배 정도 빠르다... 지만 npm이 계속 업데이트되면서 예전보단 차이가 많이 줄어든 것 같다

안정성

npm은 한 패키지를 설치하면, 의존 관계를 가진 다른 패키지나 코드를 포함시켜 실행되도록 한다

이 때문에 의도치 않은 코드가 설치될 가능성이 있으며, 특히나 그러한 코드가 안전하다는 보장이 없기 때문에 보안 이슈가 발생할 수 있다

npm은 버전에 ^

yarn은 yarn.lock과 package.json에 등록된 패키지만을 설치하기 때문에, 한결 안정적이다

또한 이러한 설치 방식 덕에 yarn.lock은 같은 yarn.lock을 보유한 디바이스에 완전히 같은 패키지를 설치하는 것을 보장하기 때문에, 각 디바이스 (팀원) 간 버전 차이로 문제를 겪을 여지가 많이 줄어든다

속도는 npm이 yarn을 많이 따라잡은 추세라 하지만, 안정성은 아직 yarn이 우위라고 할 수 있겠다

명령어

# 패키지 설치
$> npm install [패키지명] # npm i [패키지명]

# 프로젝트 의존성 설치
$> npm install # npm i

# dev (개발 단계) 패키지 설치
$> npm install --save-dev [패키지명]

# 패키지 삭제
$> npm uninstall [패키지명]

# dev (개발 단계) 패키지 삭제
$> npm uninstall --save-dev [패키지명]

# 프로젝트의 모든 패키지 업데이트
$> npm update

# 특정 패키지 업데이트
$> npm update [패키지명]

# 전역 패키지 설치
$> npm install --global [패키지명] # npm install -g

# 전역 패키지 삭제
$> npm uninstall --global [패키지명] # npm uninstall -g

# 패키지 설치
$> yarn add [패키지명]

# 프로젝트 의존성 설치
$> yarn

# dev (개발 단계) 패키지 설치
$> yarn add --dev

# 패키지 삭제
$> yarn remove [패키지명]

# dev (개발 단계) 패키지 삭제
$> yarn remove --save-dev [패키지명]

# 프로젝트의 모든 패키지 업데이트
$> yarn upgrade

# 특정 패키지 업데이트
$> yarn upgrade [패키지명]

# 전역 패키지 설치
$> yarn global add [패키지명] 

# 전역 패키지 삭제
$> yarn global add [패키지명] 

명령어가 조금씩 다르다는 차이점이 있다

npm에서 넘어왔다면 한동안은 치트시트를 보면서 작업해야 할 듯

# package.json 생성 및 폴더 작업환경 초기화
$> npm init
$> yarn init

# 프로젝트 실행
$> npm run
$> yarn run

# 테스트 실행
$> npm test
$> yarn test

# 패키지 배포 시 계정 로그인
$> npm login 
$> yarn login

# 계정 로그아웃
$> npm logout
$> yarn logout

# 캐시 삭제
$> npm cache clean
$> yarn cache clean 
# 전역: yarn cache clean --mirror, 모두: yarn cache clean --all

위의 명령어는 npm과 yarn이 같은 기능을 수행한다

접근성

$> npm install --global yarn
$> yarn --version
1.22.17

npm은 node에 기본 내장되어있지만, yarn을 사용하기 위해선 npm으로 설치를 해줘야 한다는 단점이 있다

이러한 접근성 때문에 그냥 npm을 사용하는 사람들이 많아 점유율은 아직도 높은 편이다

react 프로젝트 생성 (CRA)

# 자바스크립트 프로젝트
$> npx create-react-app [프로젝트명 또는 경로]
$> yarn create react-app [프로젝트명 또는 경로]

# 타입스크립트 프로젝트
$> npx create-react-app [프로젝트명 또는 경로] --template typescript
$> yarn create react-app [프로젝트명 또는 경로] --template typescript

npm에서 create-react-app 을 실행시킬 땐 보통 한번 실행시키고 지워버리기 위해 npx를 사용한다

yarn은 npx같은 별도의 도구가 없는 대신, yarn create를 사용한다

create와 react-app 사이에 대시 (-) 기호가 없는 것을 유념하자

누가 타입스크립트 프로젝트 생성 플래그 --typescript라 그래서 한참 삽질했다 ㅡㅡ

디스크 공간 차지

yarn이 조금 더 무겁다

또한 npm은 추가로 설치할 도구가 없지만 yarn은 npm을 이용하여 설치해야 사용가능하기 때문에 용량에서 차이가 나는 건 필연적일 수밖에 없다

결론

각각의 장단이 있고 보통 프론트엔드 입문 시에는 기본 설치된 npm을 많이 이용하는 편이니 npm 쪽이 더 익숙한 경우가 대부분일 것이다

프로젝트가 패키지간 안정성과 의존성, 버전 문제로 인한 충돌을 줄이고 싶다면 yarn, 대중적이고 접근성이 뛰어난 도구가 좋다면 npm을 사용하면 된다...만 npm이 업데이트를 통해 단점을 많이 보완하여 지금은 그렇게 큰 차이는 없다

내가 진행중이던 프로젝트는 패키지 정리를 하다 보니 온갖 영문도 모를 패키지가 잔뜩 설치되어 있어 package.json을 초기화하였고, 팀원마다 패키지의 버전이 달라 난항을 겪거나 package-lock.json의 충돌로 rebase를 시도하다가 브랜치가 꼬인 경험이 있기에 이참에 의존성을 조금 더 빡빡하게 체크하는 yarn으로 넘어간 것이 컸다

참고

NPM vs Yarn ?

NPM vs Yarn ?

Cheat Sheet: npm vs Yarn Commands | DigitalOcean

Cheat Sheet: npm vs Yarn Commands | DigitalOcean