패키지 매니저, Yarn
우선 yarn 이란 무엇인지 모르는 초보 개발자분들을 위해 yarn 이란 무엇인지, 그 개념에 대해 간단하게 설명해 보겠습니다! 😎
Yarn 의 공식 홈페이지 에 접속해 보면, 다음과 같이 yarn 에 대한 한 줄 소개를 하고 있는데요,
Yarn is a package manager that doubles down as project manager.
이는 직역하면, "Yarn 은 패키지 매니저이면서 프로젝트 매니저이다" 라는 의미입니다.
여기까지 봤을 때, 프론트엔드 개발을 조금 해 본 사람이라면, "패키지 매니저" 를 보고, package.json 파일을 떠올릴 수 있을 것입니다. 개발을 접한지 얼마 되지 않으신 분들은 이마저도 생소하실 수 있구요! :)
이번 포스팅에서는 개발에 대한 배경지식이 전혀 없어도, 무리 없이 yarn 의 개념을 이해하고, 설치하는 과정을 담았으니 걱정 말고 따라와주세요!
자, 위에서 본 패키지 매니저와 프로젝트 매니저 개념을 더 자세히 살펴보기 위해 다시 공식 홈페이지로 돌아가 보겠습니다.
(개발을 하면서 공식 문서와 공식 홈페이지를 보는 것은 아주 좋은 습관입니다.)
Yarn 의 공식 홈페이지의 Introduction 페이지를 참고하면,
Yarn is an established open-source package manager used to manage dependencies in JavaScript projects.
이라며 Yarn 을 소개하고 있습니다.
여기서 우리가 알 수 있는 정보는 다음 세 가지와 같습니다.
1) Yarn 은 자바스크립트 프로젝트에서 쓸 수 있다.
2) Yarn 은 dependancy 라 하는 것을 관리할 수 있다.
3) Yarn 은 패키지 매니저이다.
여기서 한 가지 의문이 들 수 있습니다. 아까 분명 Yarn 은 프로젝트를 매니징한다고도 했는데, 왜 여기에서는 그 설명이 빠져있지?
네, 앞서 Yarn 이 프로젝트 매니저의 역할을 한다고도 하였으나, 이것은 어디까지나 부가 기능에 속하고, Yarn 이 무엇인가? 라는 질문에 한 단어로 대답해야 한다면, 패키지 매니저 라고 대답하는 것이 맞습니다.
그렇다면 패키지 매니저란, 무엇일까요?
그 전에, 패키지 매니저에 대해 이해하려면, 우선 패키지란 무엇인가? 에 대한 질문에 답할 수 있어야겠죠? :)
패키지란, 쉽게 말해 어떤 프로젝트를 실행할 때 필요한 준비물이라고 할 수 있습니다. 프로젝트에 사용되는 모든 라이브러리와 프레임워크들이 이에 해당합니다.
리액트 프로젝트에서는 주로 이 준비물들을 package.json 이라는 이름의 파일에 정리해두기로 약속합니다. 그럼 yarn 과 같은 패키지 매니저들은 이 package.json 을 읽고, 프로젝트에 필요한 준비물들을 설치하거나 실행시키거나 삭제하는 등의 매니저 역할 (= 관리자 역할) 을 하게 되는 것입니다.
+) 한 가지 추가적인 지식으로, package.json 파일을 열어보시면, dependencies 속성 아래에, devDependencies 라는 속성이 추가로 있다는 것을 확인하실 수 있을 것입니다. devDependencies 란, 개발할 때에만 필요하고, 실제 프로덕트에서는 필요하지 않은 준비물들을 모아둔 것이라고 생각하시면 쉽습니다.
자 이제 다시 한 번 위에 정리한 Yarn 의 세 가지 정보를 보겠습니다.
1) Yarn 은 자바스크립트 프로젝트에서 쓸 수 있다.
2) Yarn 은 dependancy 라 하는 것을 관리할 수 있다.
3) Yarn 은 패키지 매니저이다.
이제 여러분은 2번과 3번이 더 이상 다른 것을 말하고 있지 않다고 느끼실 것입니다. dependancy 를 관리하는 것이 곧 패키지 매니저의 역할이니까요!
즉, 앞으로 누군가 Yarn 이 무엇인지 물어보면 여러분은
"Yarn 은 자바스크립트 패키지 매니저야" 라고 짧게 대답할 수 있을 것입니다.
Yarn 설치하는 방법
Yarn 을 설치하기 전, 적어도 Yarn 이라는 것이 무엇인지에 대한 개념을 전달드리려 서론을 길게 써보았습니다. 이제 Yarn 이 무엇인지에 대한 대략적인 감은 잡히셨으리라 기대하고, 어떻게 설치할 수 있는지 설명드리겠습니다.
그 전에, 먼저 yarn 이 설치되어 있는지 여부를 확인해야겠죠? 이를 위해 다음과 같은 명령어를 입력해 봅니다.
yarn -v 위 명령어의 수행 결과, 버전에 해당하는 숫자가 나온다면, 이미 yarn 이 설치되어 있는 것이고, command not found 와 같은 에러 메시지가 나온다면, yarn 을 설치하는 과정이 필요합니다.
1) 맥북의 경우
npm -v 를 통해 npm 이 설치되어 있음을 확인했다면,
npm install -g yarn 해당 명령어를 통해 설치를 진행할 수 있습니다.
npm 이 설치 되어 있지 않다면, 다음의 과정을 따라야합니다.
맥북은 npm 을 설치하기 위해 어떤 도구를 먼저 설치해야 합니다. 바로 homebrew 라는 것인데요, 여기에서는 이에 대한 설명은 생략하겠습니다.
https://brew.sh/
homebrew 설치가 끝났다면,
brew install node
brew install npm 위 명령어를 통해 node 와 npm 을 설치해 줍니다. 그 뒤에
npm install -g yarn위 명령어를 작성하고, yarn -v 를 통해 설치가 성공적으로 되었는지 확인하면 됩니다.
2) 윈도우의 경우
윈도우는 homebrew 를 설치할 필요 없이, cmd (명령 프롬프트) 창을 열고,
npm install -g yarn을 이용해 설치를 한 뒤, 마찬가지로 yarn -v 명령어를 이용해 설치가 잘 되었는지 확인합니다.
Yarn 의 명령어 소개 + 자주하는 실수
지금까지 Yarn 의 개념과, yarn 의 설치까지 진행해 보았습니다. 이제부터는 yarn 의 대표적인 명령어와 함께, yarn 을 잘 모르고 썼을 때 생길 수 있는 문제도 알아보는 시간을 가지도록 해보겠습니다.
1) yarn install 혹은 yarn
yarn install 과 yarn 은 같은 명령을 실행하게 됩니다. package.json 파일을 읽고, 여기에서 필요한 준비물들을 모두 챙겨오는 작업을 수행합니다. 보통 yarn 명령어 중에 가장 시간이 오래 걸리는 단계가 이 단계입니다.
따라서 여러분의 시간을 절약하기 위해 yarn install 을 쓰는 경우는 오로지, package.json 파일이 기존과 달라졌을 때만으로 한정해야 합니다. package.json 이 변경되지 않았다는 것은, 준비물이 바뀌지 않았다는 것과 같은 의미입니다. 즉 필요한 것이 이미 다 있는데, 또 준비물을 새로 받아올 필요는 없겠죠?
2) yarn add
그런데 만약 기존의 준비물에서 새로운 준비물을 추가하고 싶다면 어떻게 해야할까요? 그럴 때 사용하는 것이 바로 이 yarn add 명령어 입니다. yarn add 패키지명 을 해주면, 준비물을 추가로 가져오게 할 수 있습니다. 이 경우 package.json 파일에 yarn add 한 패키지가 추가됩니다. 만일 여러분이 팀 프로젝트를 하여 레포지토리를 공유하고 있는 상황이라면, 다른 동료의 package.json 파일도 변경되었을 것입니다. 따라서 이 경우, 그 팀원은 yarn install 을 통해 자신의 로컬 프로젝트에 준비물을 다시 받아오는 작업을 해주어야 합니다.
+) 패키지를 업그레이드 하는 툴 중 yarn up 이라는 명령어도 있습니다. 이 내용은 모노레포의 개념을 아신다는 전개 하에 작성하겠습니다. yarn up 은 yarn add 와 달리 싱글 패키지를 대상으로 하는 것이 아니라, 전체 패키지를 대상으로 dependancy 를 업그레이드하게 됩니다. 따라서 모노레포를 사용하고 계신다면, 전체 패키지를 대상으로 할 때는 yarn up 을 써야 하고, 특정 패키지를 대상으로 할 때는 yarn add 를 써야 합니다. 이를 구분하지 않으면, yarn up 을 써서 전체 패키지를 바꿔버리는 불상사가 발생할 수 있습니다. (그래서 가능하면 yarn add 를 사용하는 것을 권장하고 싶습니다.)
3) yarn remove
기존의 준비물에서 빼고 싶은 것이 있을 때 사용하는 명령어입니다. yarn remove 패키지명 이 명령어를 실행하면, package.json 파일에서 해당 패키지가 삭제되며 파일이 변경됩니다. 따라서 협업 대상이 이 변경된 package.json 을 pull 받았다면, yarn install 을 통해 준비물을 재정비해줘야 합니다.
그 외..
이 외에도 next.js 와 같은 프레임워크를 사용하고 계신다면, next.js 에서 제공하는 yarn 명령어들이 있을 수 있습니다. 예를 들어, 개발 서버를 실행하는, (아마도 가장 많이 사용할) yarn next dev 라든지 프로젝트를 배포하기 위해 정적 파일을 생성하고 번들링을 실행하는 build 작업을 위한 yarn next build 같은 것들이 있을 수 있습니다. 이 명령어들은 yarn 자체에서 제공하는 명령어가 아니며, package.json 의 script 속성에 적혀져 있기 때문에, package.json 파일을 보시고 적절하게 사용하면 됩니다.
*** 초보자분들이 하실 수 있는 엄청난 실수
초보자분들은 yarn install 이라는 명령어를 프로젝트 내의 터미널이 아니라, cmd 창에서 곧바로 하시는 엄청난 실수를 하실 수 있습니다. (제가 그랬습니다..하하) 이렇게 될 경우, yarn 을 install 하면서 생긴 상위 폴더의 node_modules 폴더와 하위 프로젝트의 node_modules 폴더가 충돌하여.. 엄청난 고생을 하실 수 있으니, yarn install 명령어는 반드시..! 프로젝트 폴더 내에서만 사용해주세요!
마무리
이렇게 Yarn 에 대해서 깊게 알아보는 시간을 가졌습니다. 저는 프로젝트를 진행하면서 기능 구현에 급급했던 터라, yarn 이 무엇인지 제대로 모른 채 개발을 해왔었는데, 최근 졸업 프로젝트에서는 의존성 관리를 할 일이 생기며 yarn 에 대해 공부할 필요가 생겼고 이에 공식 문서를 읽어보며, yarn 에 대한 잘못된 지식과 오해를 많이 해소할 수 있었습니다. 제 이런 시행착오를 이 글을 읽는 분들은 겪지 않으시고, 시간을 아끼시길 바라는 마음으로 글을 작성했으니, 부디 잘 활용해주세요!
또 오타나 잘못된 내용이 있다면 언제든지 댓글로 알려주시기 바랍니다 :)
그럼 오늘도 좋은 코딩 하세요!!ㅎㅎ
