[React] 리액트 : #2 npm (node package manager)

지난 포스팅에서 리액트를 쓰는 이유와 특징에 대해 간략히 알아봤다.

 

우리는 리액트 프로젝트를 시작하기에 앞서

프로젝트를 생성하고 실행하기 위해 아래와 같이 npm의 도움을 받았다!

//프로젝트 생성 명령 설치
npm install -g create-react-app

//프로젝트 생성
create-react-app [react-app]

//프로젝트 실행
cd [react-app]
npm start

 

오늘은 npm에 대해 자세히 알아보자.

아래의 내용은 생활코딩 npm 수업을 토대로 정리한 내용이다.

 

 

npm

npm이란,

Node Package Manager의 약자로 

 

명령어를 통해서 컴퓨터를 제어하는 방식인 

CLI(Command Line Interface)방식으로 동작하는 프로그램이다.

 

npm은 앱 스토어에 비유하는데

실제로 npm에는 백만개 이상의 오픈 소스 패키지들이 업로드되어 있다.

 

npm은 명령어로 사용될 뿐,

앱 스토어에서 우리가 필요한 앱을 검색하고, 설치, 업데이트, 삭제하듯

터미널에서 아래와 같은 명령어들로 업로드되어있는 패키지 이용이 가능하기 때문이다.

 

• npm search
• npm install
• npm uninstall
• npm update

 

즉, npm이란 node.js 기반의 자바스크립트로 개발된 모듈을 패키지 형태로 저장해놓은 오픈 소스 라이브러리이다.

 

 

 

npm 패키지 검색  및 설치

 

패키지를 설치하기 위해 검색할 수 있는 쉬운 방법 중에 하나는

아래의 npmjs.com 페이지에서 필요한 것을 검색하는 것이다.

 

npm

 

 

필요한 패키지를 찾았다면,

npm을 통해서 설치하는 프로그램은 두 가지로 구분할 수 있다.

 

• 독립적으로 실행되는 커맨드 라인 프로그램인가 (완제품)
• 컴포넌트로 사용되는 프로그램인가 (부품)

 

 

마찬가지로

내가 필요한 패키지를 설치할 때도 두 가지 방식으로 구분할 수 있다.

 

• 현재 디렉토리 내부에 설치하여 프로그램의 모듈로써 사용할 것인가 
• 내 컴퓨터의 어디에서든 동작하도록, 전역적으로 사용할 것인가

 

 

패키지를 설치하는 터미널 명령어는 아래와 같다.

//현재 위치한 디렉토리에 설치
npm install [package]

//독립적, 전역적으로 설치 (global)
/* sudo => superuser do == 관리자 권한 */
sudo npm install -g [package]

 

 

npm 패키지 업데이트 및 삭제

업데이트나 삭제 이전에

설치된 패키지를 확인해보자.

 

//현재 디렉토리 내부에 설치된 패키지
npm list

//전역적으로 설치된 패키지 (자세히)
npm list -g

//직접적으로 우리가 보고 설치한 그 패키지,,
npm list -g --depth=0

 

 

목록 중에서 업데이트를 하거나 삭제하고 싶은 패키지가 있다면,

아래와 같이 터미널에 명령어를 입력해준다.

 

//로컬으로 설치된 패키지 업데이트 
npm update [package]

//글로벌으로 설치된 패키지 업데이트 
/* permission denied => sudo 붙여서 관리자 권한으로 업데이트! */
npm -g update [pakage]

//관리자 권한으로 삭제
sudo npm uninstall -g [pakage]

 

 

---

외계어 같던 npm에 대한 정리가 끝났다.

정말 헷갈렸는데 이고잉님의 생활코딩 강의는 귀에 쏙쏙 들어온다!!!!

🤔🤔👍🏻