{React.js}리액트 독학! npm으로 설치해보자

 

npm은 Node.js로 만들어진 프로그램을 쉽게 설치해줍니다.

npm을 설치할 때에는 먼저 Node.js 프로그램을 먼저 설치합니다.

 

Node.js 홈페이지는 (https://nodejs.org/) 입니다.

대표사진 삭제

사진 설명을 입력하세요.

들어가시면 '14.17.3 LTS' 와 '16.4.2 Current' 버전이 있습니다.

LTS 버전은 버전 숫자는 더 낮지만 안정화되어 있는 버전입니다.

Current는 최신 버전입니다. 각자의 취향에 따라 설치하시면 됩니다.

 

최신버전을 사용하길 좋아하는 사람도 있고, 검증되어있는, 위험성이 없는 버전을 사용하길 좋아하는 사람도 있는 것처럼 그런 차이라고 생각됩니다.

 

개인적인 생각으로는 여러가지를 활용해 개발하거나, 여러사람들과 협력하여 개발하시는 분들은 LTS 버전을 사용하고, 비교적 소규모로 개발하여 버전통합이 용이하고, 기술의 업데이트에 적응하고 활용하길 좋아하는 사람은 Current를 사용하지않을까 생각해봤습니다.

 

저는 M1 칩의 MacOS 를 사용하기 때문에 예전의 안정화된 버전은 지금의 M1 OS와는 맞지 않을까 싶어서 Current 버전을 설치했었습니다.

 

윈도우에서는 윈도우 + R 을 눌러 '실행' 프로그램을 실행하셔서 cmd 라고 타이핑하셔서 엔터를 누르시면 명령 프롬프트가 실행됩니다.

 

npm -v

 

라고 타이핑 하시고 엔터를 치시고 6.12.0 과 비슷한 숫자, 즉 설치된 프로그램 버전이 나타난다면 Node.js와 npm 설치가 된것입니다.

 

저와같이 macOS를 사용하시는 분은 'terminal'을 실행시킵니다.

방법은

Finder - 응용프로그램 - 유틸리티 - 터미널

또는

네손가락을 트랙패드에서 오므리면 런치패드가 나타납니다 - 거기어서 - 기타 폴더에 터미널이 있습니다.

혹은 시스템 환경설정 - Spotlight - 키보드 단축키 에 가시면 Spotlight를 실행시키는 단축키가 있습니다. 저는 ^S 로 되어있습니다.

Spotlight - terminal 을 입력하시면 터미널.app 이 표시되는데 실행하시면 됩니다.

 

터미널에서

npm -v

 

를 입력하셔서 엔터를 하신 뒤 숫자가 나타난다면 Node.js와 npm이 성공적으로 설치가 된것입니다.

 

다음으로는 계속 터미널에서 계속 진행합니다.

 

npm install -g create-react-app

 

을 실행하면 npm 에게 create-react-app을 설치하라고 명령한 것입니다.

혹시 설치 과정에서 'Error: EACCES: permission denied, ...' 같은 에러가 나타난다면 권한이 없어 설치를 못한다는 뜻으로 앞에 'sudo'를 붙여 똑같이 실행합니다.

sudo npm install -g create-react-app

 

그리고 비밀번호를 묻는 텍스트가 나오면 macOS에 로그인할 때 입력하는 비밀번호를 입력하면 설치가 진행됩니다.

비밀번호 타이핑을 할 때 *별표와 같은 아무런 텍스트도 나타나지 않는데, 실제로는 입력이 되고 있는것이므로 실제 비밀번호 치는것처럼 타이핑하시고 엔터를 치시면 됩니다.

 

설치가 끝나고 나면 잘 설치됐는지 확인하기 위해서 터미널에서

create-react-app -V

 

 

입력하면 버전을 나타내는 숫자가 나타나면 설치가 잘 된것입니다.

 

npx 를 이용하여 설치를 하는 방법도 있는데, npm과 기본적인 기능은 같지만 차이점은

 

npm은 프로그램을 설치한다고 보면 되고,

npx는 프로그램을 임시로 설치해서 실행시키고 다시 지워진다고 생각하면 됩니다.

 

공식홈페이지에서는 npx를 권장하고 있습니다.

 

번거롭다는 단점이 있지만, 공간을 낭비하지 않고, 설치를 실행할때마다 새로 다운로드하기 때문에 항상 최신버전으로 설치가 된다는 장점이 있습니다.