Honey-Programming

node.js / nvm / npm / package.json 본문

코드스테이츠/Immersive

node.js / nvm / npm / package.json

Latte_is_horse 2020. 9. 1. 00:04

JavaScript Runtime (웹 브라우저에서 사용)

Runtime 

  - 프로그램밍 언어가 구동되는 환경

  - 어떤 프로그래밍 언어가 동작할 수 있는 프로그램

 

예전에는 JavaScript Runtime 대표적인 것으로 Web Browser가 있었습니다.

하지만 node.js 라는 새로운 JavaScript Runtime이 나왔기 때문에 브라우저가 아닌곳에서 실행이 가능해졌음.

즉, 웹 페이지 뿐만 아니라 Server와 같은 다른 프로그램을 만들 수 있다.

또 JavaScript Code를 Browser에서 실행시킬수도 있고, node.js 환경에서도 실행 가능하다.

 

// <script> 태그 내에 test.js
const test = function(a,b) {
  console.log("result : ",a + b);
}

test(4,6);

 

위에 코드 test.jsnode에서 실행 시키려면 어떻게 해야할까? 

정답은 node <file_name> 명령어를 사용하면 작성한 코드가 node.js  환경에서 실행된다.

// node <file_name> 명령어 사용
$ node test.js

 

터미널 창에서 node 실행

 

VS Code에서 작성한 후 실행

정리)Runtime은 프로그래밍 언어가 돌아가는 환경, node.js는 JavaScript Runtime


NVM(Node Version Manager)

: nodejs를 가장 효율적으로 사용할 수 있는 도구를 nvm 이라고 한다.

 

Node 설치

sudo apt-get install nodejs

모든 프로그램은 version(버전)이 있다. node.js 또한 프로그램이니 버전이 있을 것이다.

개발을 하다 보면 다양한 node.js 버전에 대응해야 할 것이다.

Ex) node 10.13.0 버전에서 잘 돌아갔는데, node 12.13.0 버전에서는 안 돌아갈 수가 있다.

그래서 node 12.13.0에서 테스트를 해봐야한다. 그렇다면 내 node.js의 버전이 10.13.0인데,

12.13.0 버전으로 가서 테스트 하려면 어떻게 해야할지 생각해봐야된다. 

두 가지 방법이 있을 것이다. 업데이트를 하던가, 아니면 삭제를 하고 다시 설치하는 방법이다.

하지만 이것은 귀찮고 비효율적이라고 한다. 그래서 존재하는게 NVM 이다.

 

NVM 설치

1. cURL을 이용한 설치

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

위에 처럼 nvm을 설치하려하는데 밑에 처럼 curl을 찾을 수 없다고, 설치를 하라고 할 수도 있다.

cURL이라는 패키지를 설치를 해야 한다. (cURL 패키지 설치)

 

 

2. wGET을 이용한 설치

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

 

위의 명령어를 터미널에 쓰면 이런식으로 작동이 된다. 터미널 내용에 보면

"터미널을 껏다가 키고 nvm을 사용해라" 라는 내용이 있다. 

 

nvm 버전을 확인하는 명령어이면서, 동시에 nvm이 설치가 잘 되었는지 확인하는 커멘드

nvm --version

 

nvm을 이용해 설치한 모든 node version을 보여준다.

nvm ls

 

nvm을 이용해 새로운 node version을 설치

nvm install 10.13.0

 

nvm을 이용해 이전 버전을 지우지 않고 다른 node version을 사용하고 싶을 때 쓰는 명령어

전제조건) 사용하고자 하는 node version이 nvm에 이미 설치 되어있어야 한다. 

만약 설치가 안되있다면 'nvm install <version>'으로 설치하라고 메세지가 뜨므로 설치하면 된다.

nvm use 12.13.0

 

정리) NVM은 다양한 node version를 설치하고 관리할 수 있는 프로그램이다.


NPM (Node Package Manager)

: 일종의 앱스토어. 필요한 모듈을 다운로드할 수 있는, 모듈들이 모여있는 모듈 스토어

 

프로젝트를 실행시킬 때 npm 키워드를 사용한다.

npm start

package.json

: 프로젝트의 정보를 정의하고, 의존하는 패키지 버전 정보를 명시하는 파일이다. 

일반적으로 루트 디렉토리에 위치한다.

package.json을 사용하는 이유는 내가 만든 프로젝트라면 어떤 모듈이 사용되고, 어떻게 실행시켜야할지 알것이다.

하지만 다른 사람이 내 프로젝트를 실행시키려면 어떤 모듈이 필요한지 알수가 없다.

그래서 다른 사람(같이 개발하는 페어)에게 프로젝트에 대해 알려주는 역할이 필요하다. 그것이 package.json이다.

 

package.json은 1)필요한 모듈, 2) 프로그램 실행방법, 3) 프로그램 테스트 하는 방법 등이 명시된다.

 

프로그램을 실행하기 위해 필요한 실제 모듈은 node_modules 이라는 폴더에 다 들어가 있다.

package.json에는 어떤 모듈인지만 적혀 있다.

 

또 다른 장점은 프로젝트 코드를 전달할 때, 모든 모듈을 다 전달하는 것은

파일의 용량도 무거워지고, 그럴 필요가 없는 일이다. 

package.json 에 우리 코드는 여기있고, 필요한 모듈이 무엇인지 적혀있으니 그것을

보고 사용하는 사람이 직접 다운받아서 쓰면 된다는 것을 package.json 을 통해 간접적으로 알려준다.

 

앞으로 코드스테이츠에서 스프린트를 할때, node_modules 없고,  package.json만 존재 할 것이다.

그렇기 때문에 package.json의 내용을 보고 필요하다고 생각하는 모듈을 npm을 이용해 다운 받는다.

npm install 명령어를 이용해 필요한 모듈을 다운받는다.

npm install 으로 설치하면 node_modules 디렉토리가 생기게 된다.

 

 

Package.json

 

1. dependencies ( 패키지의 배포 시 포함될 의존성 모듈을 지정)

- 이 프로젝트가 실행되기 위해 반드시 필요한 모듈들의 정보가 적혀 있다.

가장 많은 정보가 입력되는 곳이다.

"dependencies": {
  "react": "^16.8.6",
}

 

2. devDependencies (패키지의 개발 모드일 때만 의존성 모듈을 지정, 배포 시 미포함)

- 이 프로젝트를 개발하는 환경에서 필요한 모듈들의 정보가 적혀 있다.

"devDependencies": {
  "jest": "^2.3.0",
  "eslint" : "^2.0.0"
}

 

3. scripts 

- npm으로 실행시킬 수 있는 명령어를 정의. 명령어를 입력했을때 어떤 동작을 해야하는지 적혀있다.

Ex) 'npm test' 명령어를 실행 => "node에서 test.js 파일을 실행해라!" 라는 뜻이다.

만약 'npm test' 명령어를 실행 => "정의되지 않은 명령어" 라는 오류 메시지가 뜬다면,

package.json 파일 scripts 에 해당하는 명령어가 정의되어 있는지를 체크해야 한다. 

"scripts": {
  "start": "node app.js",
  "test": "node test.js",
}

package.json 관련글

 

구름EDU - 모두를 위한 맞춤형 IT교육

구름EDU는 모두를 위한 맞춤형 IT교육 플랫폼입니다. 개인/학교/기업 및 기관 별 최적화된 IT교육 솔루션을 경험해보세요. 기초부터 실무 프로그래밍 교육, 전국 초중고/대학교 온라인 강의, 기업/

edu.goorm.io

 

처음 시작하는 Node.js 개발 - 2 - npm

npm(Node Package Manager)은 JavaScript 및 세계 최대의 소프트웨어 레지스트리 패키지 관리자로 Node.js를 설치하면 같이 설치되어 사용할 수 ...

heropy.blog

 

주말에 조금더 package.json을 좀더 깊숙히 들여다 보면서

좀더 추가해서 작성해보자

'코드스테이츠 > Immersive' 카테고리의 다른 글

[자료구조] Graph, Tree, BST  (0) 2020.09.04
[자료구조] stack, queue 구현하기  (0) 2020.09.04
[자료구조] Linked List, Hash Table  (0) 2020.09.03
[자료구조] stack, queue  (0) 2020.09.03
Git workflow  (0) 2020.09.01
Comments