리액트 작업 환경 설정: Node.js, npm, nvm, 그리고 yarn, 왜 이걸로 시작할까?

리액트를 개발하려면 몇 가지 기본 도구를 먼저 세팅해야 해요. 이런 도구들이 뭐고 왜 필요한지 알면 작업 환경이 훨씬 깔끔해지겠죠? Node.js, npm, nvm, 그리고 yarn이 리액트와 어떻게 연관되는지 차근차근 알려드릴게요!

 

Node.js: 리액트의 든든한 배경
 
우선 Node.js는 자바스크립트 런타임 환경이에요. 원래 자바스크립트는 브라우저에서만 돌아갔지만, Node.js 덕분에 서버나 로컬 컴퓨터에서도 자바스크립트를 실행할 수 있게 됐죠. 리액트 프로젝트를 만들고 실행하려면 Node.js가 기본적으로 필요해요.
 
설치 방법: Node.js 공식 사이트에서 최신 LTS 버전을 다운로드해서 설치하면 됩니다.
 
npm: 패키지 관리의 필수 도구
 
Node.js를 설치하면 **npm(Node Package Manager)**도 함께 설치돼요. npm은 리액트 프로젝트에서 필요한 라이브러리나 패키지를 쉽게 다운로드하고 관리하는 데 사용됩니다. 예를 들어, 리액트를 설치하거나 관련 라이브러리를 추가할 때 주로 사용되죠. 기본적으로는 npm install react 명령어를 통해 필요한 패키지를 쉽게 설치할 수 있어요.

---

그렇다면 yarn은 뭐지?
 
yarn은 npm처럼 패키지를 관리하는 또 다른 도구예요. 사실 페이스북이 개발했는데, npm보다 속도가 빠르고 안정적이라는 이유로 리액트 개발자들이 많이 사용합니다. 저도 yarn을 선호하는데, 그 이유는 바로 다음과 같은 장점들 덕분이에요!
 
yarn의 장점: 왜 나는 yarn을 쓰는가?
 
1. 더 빠른 속도
yarn은 캐싱 기능 덕분에 한 번 설치한 패키지는 다음에 설치할 때 훨씬 빨리 설치돼요. 이 점은 작업 속도가 중요한 프로젝트에서 특히 유리하죠.
2. 일관성과 안정성
yarn은 lock 파일(yarn.lock)을 통해 프로젝트에서 항상 동일한 패키지 버전을 유지할 수 있어요. 이 기능은 특히 팀 프로젝트에서 큰 도움이 되는데, 모두가 같은 패키지 환경을 사용하므로 버전 차이로 인한 에러가 줄어들죠.
3. 오프라인 설치
yarn은 한 번 설치된 패키지를 로컬 캐시에 저장하기 때문에, 인터넷이 불안정할 때도 오프라인 모드로 설치가 가능해요.
4. 병렬 처리
yarn은 패키지를 병렬로 설치할 수 있어 설치 속도가 npm보다 빠릅니다. npm이 패키지를 하나씩 설치하는 반면, yarn은 여러 패키지를 한꺼번에 설치할 수 있어 시간을 절약할 수 있어요.

---

nvm: Node 버전 관리의 편리함
 
프로젝트마다 요구하는 Node 버전이 다를 수 있어서, **nvm(Node Version Manager)**을 사용하면 좋아요. 여러 Node.js 버전을 설치하고, 필요할 때마다 쉽게 전환할 수 있게 해 주거든요. 예를 들어, 프로젝트 A는 Node 12 버전, 프로젝트 B는 Node 16 버전을 요구하는 경우 nvm으로 간단하게 맞춰줄 수 있죠.
 
nvm 사용 예시
 
nvm을 설치한 후에 다음과 같이 버전을 관리할 수 있어요:

nvm install 14.17.0 # 특정 버전 설치
nvm use 14.17.0     # 해당 버전 사용
nvm ls              # 설치된 Node 버전 확인

 
리액트와의 연결 고리
 
정리하자면, Node.js는 리액트 개발을 위한 기본 런타임 환경이고, npm과 yarn은 리액트 프로젝트에서 필요한 라이브러리들을 쉽게 설치하고 관리할 수 있게 해 줍니다. 그리고 nvm은 여러 프로젝트 간에 Node 버전을 유연하게 변경할 수 있도록 해 주죠. 특히 리액트의 생태계는 넓고 빠르게 발전하고 있어서, yarn을 사용하면 더 빠르고 일관된 환경에서 프로젝트를 유지할 수 있어요.
 
이제 이 기본 도구들만 준비해두면 리액트 프로젝트를 더 수월하게 시작할 수 있을 거예요! 😄