[기록/환경세팅] Node.js 설치 (npm 설치)

React를 사용하기 앞서 React가 로컬에서 실행할 수 있는 환경을 제공해주는 Node.js를 설치하는 과정입니다. 마지막에 문제를 겪으면서 해결하는 추가 포스팅도 있습니다.

 

---

1. Node.js 설치

💬 Node.js가 뭔가요?
Node.js는 자바스크립트가 브라우저가 아닌 곳에서도 실행될 수 있는 환경을 제공해 주는 "런타임 환경"입니다. 자바스크립트 기반의 백엔드를 개발하기 위해서 꼭 필요한 환경 중 하나입니다. 하지만, JS 런타임 환경 외에도 다양한 기능들을 가지고 있어서, 프론트엔드 개발을 할 때, 이 기능을 이용하기 위해 Node.js를 설치하기도 합니다.

 

구글에 'Node.js' 검색해서 홈페이지 접속하셔서 Download Node.js(LTS) 버튼 눌러주세요.

물건을 구매하면 고장나거나 동작이 이상할 때 A/S 보증받잖아요. LTS(Long Term Support)는 그런겁니다.

 

PC의 환경에 따라서, 다운받으면 설치 프로그램이 바로 열리고 설치가 시작되는 분도 계실 겁니다.

만약, 아래 문구의 팝업창이 뜨시면 "예" 누르면 됩니다.

'이 앱이 디바이스를 변경할 수 있도록 허용하시겠습니까?' -> '예'

 

자동 실행 안 되면 직접 실행시키시면 됩니다.

 

Agree 체크박스 선택하신 후에는 끝날 때까지 Next만 계속 누르시면 됩니다.

 

아래는 Node.js 설치가 끝나면 Chocolatey라는 패키지 관리자를 설치할 건지 확인하는 옵션입니다. 체크하지 마시고 넘어가세요, 필요하면 나중에 깔아도 늦지 않습니다. 혹시 아래를 체크해서 설치를 진행하다 설치 실패를 문구가 뜨신 분은 [바로가기]를 참고해 주세요.

---

2. Node.js 정상 설치 확인 (npm 정상 설치 확인)

Node.js은 커맨드 명령어를 통해 설치 여부를 확인할 수 있습니다. 하지만 저는 Node.js에 내장된 npm의 명령어로 설치 여부를 확인해 보겠습니다. 아래는, npm의 공식문서에 적힌 설치(install)에 대한 행동지침입니다.

💬 npm이 뭔가요?

npm은 "Node.js의 패키지 관리자"입니다. 리액트 프로젝트는 보통 npm을 통해 패키지를 설치하고, 서버를 실행/중단하며 배포할 파일을 빌드시키는 기능까지 제공합니다. npm과 동일한 기능을 제공하는 yarn은 npm보다 속도, 안전성 측면에서 우위를 갖기 때문에 본격적으로 리액트 개발을 하는 분들은 yarn을 많이 사용합니다.

• npm : Node.js 패키지 관리자로, Node.js에 내장된 프로그램
• yarn : Node.js 패키지 관리자지만 외부 프로그램으로 별도 설치 필요

npm을 이용하고 싶으면 Node.js를 꼭 깔으라고 합니다.

그 밑에는 "Node.js와 npm이 있는지 확인하고 싶으면 'node -v' 또는 'npm -v'를 터미널에 입력해 보면 된다."라고 적혀있습니다.

 

공식 문서에서 말한대로 CMD에서 명령어를 입력해 보았습니다.

# 설치된 node.js의 버전 확인
node -v

 

명령어가 정상적으로 실행돼서 Node.js 버전이 20.12.1이라고 출력된 모습입니다. 2024-04-08 기준 최신 버전으로 정상 설치 확인했습니다. 명령어가 실행 안 된다면, 아래로 이동해서 과정 3을 참고해 주세요.

 

같은 방법으로 npm도 확인해 보겠습니다.

# 설치된 npm 버전 보기
npm -v
npm -version

# npm으로 만든 패키지들의 버전과 의존관계 보기
npm list
npm ls

 

npm도 정상 설치됐습니다.

💬 npm -version과 npm -v의 차이가 뭔가요?

설치된 npm의 버전을 보여주는 명령어로,  npm -version은 npm -v와 똑같은 명령어입니다. 편한 명령어를 사용하시면 됩니다.

 

💬 npm version과 npm -version의 차이가 뭔가요?

npm version은 npm이 관리하고 있는 패키지들의 버전을 보여줍니다.

 

💬 npm list와 npm ls의 차이는 뭔가요?

동일한 명령어로 편하신 거 사용하시면 됩니다.

 

💬  npm ls가 무슨 명령어인가요? 

공식문서도 자주 읽어봐야 익숙해지니 공식문서도 확인해 보세요.

npm-ls | npm Docs

npm 공식문서 중 npm ls 설명 이미지

 

npm list 또는 npm ls는 현재 디렉토리에서 Node.js의 프로젝트들의 목록(리스트, List)을 보여주는 명령어입니다.  생성된 프로젝트가 없을 경우 아무것도 보이지 않습니다.

npm 명령어로 확인하는 프로젝트 목록은, 해당 프로젝트에 설치된 모든 패키지명과 패키지 버전을 트리구조로 확인할 수 있습니다. (i.e. 패키지명@버전)

-all 옵션을 사용하면 의존성까지 확인할 수 있습니다.

---

3. Node.js 설치했는데 명령어 실행이 안 될 때

환경 변수를 확인해 보면 됩니다.

 

위의 PATH에 정의된 걸 보면, .../AppData/Roaming 아래에 npm 폴더가 있어야 하는데 없습니다. npm이라는 이름의 빈폴더를 생성했습니다.

  경로 : C:\Users\[컴퓨터이름]\AppData\Roaming\npm

환경변수의 경로와 다르게 Roaming 폴더 아래에 npm 폴더가 없다.

환경변수와 동일하게 npm 폴더를 추가시켰다.

 

만약에, Node.js 설치 성공까지 했는데 npm 폴더도 없고 환경변수도 없으면, 둘 다 새로 만들면 됩니다. 위치는 어디든 상관 없습니다. 하지만 보통 AppData 밑에 npm을 위치시키니 AppData 안에 npm 폴더를 만들어 주세요. 그리고 그 경로를 환경 변수의 PATH에 '새로 만들기(N)' 버튼으로 추가해 주세요.

🗨️ 컴퓨터 이름을 어떻게 확인하나요?

'C:\Users'로 이동해서 공용과 Default 외에 어떤 폴더가 있는지 확인해 보세요. 그게 자기 컴퓨터 이름입니다.

다시 node -v 또는 npm -v로 설치 확인을 해봐도 명령어가 제대로 실행이 안 된다면 컴퓨터를 재부팅하는 방법을 추천드립니다. 저도 재부팅하고 명령어 실행됐습니다. (2024-05-12 기준, v20.13.1이 Node.js의 최신 LTS 버전입니다.)

---

감사합니다! :D

---

아래와 같은 chocolatey 설치 실패 로그가 출력됐다면 아래 포스팅을 참고해 주세요.

visualstudio2019-workload-vctools - Unable to resolve dependency 'chocolatey-dotnetfx.extension'

[기록/환경세팅] visualstudio2019-workload-vctools - Unable to resolve dependency 'chocolatey-dotnetfx.extension'

Chocolatey를 사용해야 되는 게 아니라면 해결하지 않으셔도 괜찮습니다.