react는 페이스북(Facebook, 현재 메타 Platforms)의 소프트웨어 엔지니어였던 **조던 워크(Jordan Walke)**가 개발했습니다. 그는 2011년에 React의 초기 버전을 만들었으며, 이는 Facebook에서 내부적으로 사용되던 XHP라는 PHP 기반 라이브러리에서 영감을 받았습니다.
React는 처음에는 Facebook의 뉴스피드와 Instagram에 사용되었으며, 2013년에 오픈 소스로 공개되었습니다. 공개된 이후로 React는 웹 개발 커뮤니티에서 큰 인기를 얻었고, 현재는 전 세계적으로 가장 널리 사용되는 프론트엔드 라이브러리 중 하나로 자리 잡았습니다.
리액트를 사용하려면 npm or yarn을 통해 라이브러리를 내려받아야합니다.
npm(Node Package Manager)과 Yarn은 JavaScript 패키지 매니저로, Node.js 프로젝트에서 라이브러리와 의존성을 설치하고 관리하는 도구입니다. 두 도구는 유사한 기능을 제공하지만, 차이점도 있습니다.
1. 기본 소개
- npm
- Node.js의 기본 패키지 매니저로, Node.js 설치 시 함께 제공됩니다.
- 2010년에 처음 출시되었으며, JavaScript 생태계에서 가장 오래되고 널리 사용되는 도구 중 하나입니다.
- Yarn
- Facebook에서 npm의 한계를 개선하기 위해 2016년에 개발한 패키지 매니저입니다.
- 더 빠르고 신뢰성 높은 패키지 설치를 목표로 만들어졌습니다.
2. 차이점 비교
| 항목 | npm | Yarn |
|---|---|---|
| 속도 | 초기에는 느렸으나, 최신 버전(npm 5 이상)에서 크게 개선됨. | 캐싱과 병렬 다운로드로 더 빠른 속도 제공. |
| 설치 명령어 | npm install | yarn install |
| 의존성 잠금 파일 | package-lock.json 사용 | yarn.lock 사용 |
| 병렬 다운로드 | 버전 5 이전에는 지원하지 않음. | 기본적으로 병렬 다운로드 지원. |
| 오프라인 캐싱 | 버전 5 이후 지원. | 처음부터 강력한 오프라인 캐싱 제공. |
| 보안 | npm audit로 취약점 점검 가능. | 설치 시 자동으로 취약점 점검. |
| 모노레포 지원 | 추가 패키지(lerna 등) 필요. | 기본적으로 지원 (Yarn Workspaces). |
| 기본 제공 | Node.js 설치 시 포함. | 별도로 설치 필요. |
3. npm과 Yarn의 주요 특징
npm
- Node.js에 기본 포함되어 있어 추가 설치가 필요하지 않습니다.
- 의존성 관리와 속도가 버전 5 이후로 크게 개선되었습니다.
- 커뮤니티가 크고, 문서와 지원이 풍부합니다.
Yarn
- 안정성과 속도가 뛰어나며, 특히 큰 프로젝트에서 유리합니다.
- Yarn Workspaces로 모노레포를 쉽게 관리할 수 있습니다.
- 설치 속도가 빠르고, 오프라인 캐싱이 강력합니다.
4. 선택 기준
- npm: 간단한 프로젝트나 이미 Node.js가 설치된 환경에서 추가 설치 없이 사용하고 싶다면 적합합니다.
- Yarn: 대규모 프로젝트나 빠르고 효율적인 의존성 관리가 필요한 경우에 더 나은 선택입니다.
최신 npm 버전에서는 대부분의 기능이 개선되어 둘의 차이가 점점 줄어드는 추세입니다. 하지만 특정 워크플로우에서는 여전히 Yarn이 유리할 수 있습니다.
npm 설치 방법
npm은 Node.js 설치 시 기본적으로 포함되어 있습니다. 따라서 Node.js를 설치하면 npm도 함께 사용할 수 있습니다.
npm 설치 절차:
- Node.js 공식 웹사이트로 이동합니다.
- 최신 LTS (Long Term Support) 버전을 다운로드합니다.
- LTS는 안정적인 버전으로 권장됩니다.
- 설치 프로그램을 실행하고 안내에 따라 Node.js를 설치합니다.
- 설치 완료 후, 터미널에서 다음 명령어로 버전을 확인합니다:
-
bash코드 복사node -v # Node.js 버전 확인 npm -v # npm 버전 확인
Yarn 설치 방법
Yarn은 별도로 설치해야 하며, 설치 방법은 몇 가지 옵션이 있습니다.
a. npm을 사용하여 설치 (간단한 방법)
npm이 이미 설치되어 있다면, 다음 명령어로 Yarn을 설치할 수 있습니다
npm install -g yarn
설치 완료 후 Yarn 버전을 확인합니다
yarn -v설치 확인
설치가 완료되면, 아래 명령어로 설치 상태를 확인합니다:
두 도구의 동시 사용
- npm과 Yarn은 동일한 프로젝트에서 함께 사용할 수 있지만, 일반적으로 하나의 패키지 매니저만 사용하는 것이 좋습니다.
- 프로젝트 디렉토리에 package-lock.json(npm) 또는 yarn.lock(Yarn) 파일이 있는 경우, 해당 매니저를 유지하는 것이 권장됩니다.
