Image
Image

DAY2-1.NPM 소개 및 Package.json 이해하기

이번 시간에서는 재 사용 가능한 자바스크립트 및 노드 모듈을 손쉽게 본인의 프로젝트에서 사용할 수 있는 환경을 제공해주는 NPM(Node Package Manager) 과
개발소스의 빠른 배포 및 손 쉬운 노드 팩키지 복원을 도와주는 package.json 파일의 용도에 대해 알아보도록 하겠습니다.

1)NPM(Node Package Manager)?
-Node Package 란  노드 개발자가 개발한 재사용 가능한 노드 모듈 소스 및 자바스크립트 오픈소스를 통칭해 말함
-Node Package 저장소 란 자바스크립트 및 노드 프레임워크를 이용하는 전 세계 개발자가 본인들이 개발한 개발 팩키지 소스를 상호 공유할수 있는 공간을 말하며 버전관리 및 손쉬운 배포 환경을 제공한다.
-
Node Package Manager 는 Node Package 저장소에 공유된 수많은 자바스크립트 및 Node 팩키지 소스를 본인의 개발 프로젝트로 손쉽게 이식할 수 있게 도와주는 관리 프로그램을 말합니다.
-NPM은 Node Framework 설치시 함께 설치되기도 하고 별도로 NPM 을 개발자 컴퓨터나 서버 컴퓨터에서 설치하여 사용할수도 있습니다.

2)NPM 기반 Node Package의 설치 및 사용 
-NPM이 컴퓨터에 설치되면 NPM 명령어를 사용해 인터넷에 존재하는 Node Package 저장소 공유 공간에서 선택한 팩키지 소스를 개발자 컴퓨터나 서버컴퓨터로 다운로드하며 설치 팩키지는
관련 프로젝트 소스 내 node_modules폴더에 설치 저장되고 여러분들이 만든 개발소스에서 node_modules폴더에 저장된 관련 관련 팩키지를 참조하여 사용하게된다.

3)Package.json 의 용도

-NPM에 의해 개발 프로젝트에 설치된 각종 노드 팩키지들의 설치 및 버전 정보를 명세하고 관리하는 파일
-NPM에 의해 다운로드 설치된 각종 팩키지 소스들은 node_modules 폴더에 저장되고 개발소스에서 참조되어지지만 해당 프로젝트에 설치된 팩키지 및 사용 명세정보는 Package.json에 별도 관리됩니다.
-
Package.json의 주 용도는 파일내 명세 된 팩키지 버전/설치정보를 이용해 손 쉽게 node_modules 폴더내 각종 프로젝트 참조 패킥지들의 복원 재설치가 가능하기에 개발소스의 서비스 환경으로의
배포 및 개발소스 복원 시 오리지널 소스에서 사용한  node_modules 폴더내 참조 패키지 소스가 없어도 손쉬운 복원이 가능해집니다.
-결론적으로 여러분들이 개발을 완료하고 개발소스를 배포하거나 다른 사람이 개발한  개발소스를 개발 환경에복원할 때 굳이 개발소스보다 용량이 많은 node_modules 폴더를 포함시켜
함께 배포하지 않아도 되어 배포 속도 개선 및 손 쉬운 개발 및 서비스 환경 복원이 가능해집니다.

4)NPM 기반 노드 프로젝트 만들기

-지금부터 함께 NPM 기반 노드 프로젝트를 직접 만들어 보면서 NPM 과  Package.json의 용도, 주요 npm명령어에 대해 알아보도록 하겠습니다. 

가) Visusal Studio Code 을 오픈하고 cmd터미널 오픈하기
-Visusal Studio Code를 기동하고 상단 메뉴 파일>Open Folder> 여러분의 Node 실습 폴더를 선택합니다.
-좌측 탐색기 빈영역을 클릭 후 오른쪽 마우스 클릭 >New Folder>DAY2 폴더를 만듭니다.
- DAY2폴더를 선택하고 오른쪽 마우스 클릭 >New Folder>npm-project 폴더를 만듭니다.
-Visusal Studio Code 상단 메뉴 >터미널>New Terminal을 오픈합니다.
-하단 터미널 영역에 헤더 콤보 영역이 숫자:cmd가 아니고 숫자:powershell이라고 표시 되시는 분들은  해당 콤보 박스를 클릭하고
Select Default Shell을 선택 후  기본 커맨드 프로그램을 PowerShell이 아닌 Command Prompt로 선택 후 New Terminal을 오픈하시면 cmd기반 터미널 창이 오픈됩니다.
-Windows PC 기반 노드 프로젝트 개발 시 터미널창은 반드시 cmd기반 터미널 창을 오픈하시기 바랍니다.

나)터미널창에서 npm 명령어를 통해 노드 팩키지 기반 프로젝트를 생성합니다.
- cmd터미널 창에서 cd 명령어를 통해 npm-project 폴더로 이동합니다.
cd DAY2
cd npm-project

-해당 경로상에서 npm init 명령어를 입력 후 엔터
-packangename: 엔터
-version : 엔터
.....
-옵션별로 엔터를 치고 계속 다음으로 이동 후 최종 y를 입력 후 종료합니다.
-탐색기 영역에서 DAY2\npm-project폴더내에 생성된
package.json 파일을 클릭하고 내용을 확인합니다.
- package.json 파일내에 여러분이 방금 생성한 노드 프로젝트 패키지 정보가 명세되어 있음을 확인합니다.
-탐색기 영역에서 npm-project폴더를 선택하고 오른쪽마우스 클릭 새파일> index.js파일을 생성합니다.
-index.js파일을 열고 아래 코드 내용을 입력 후 저장합니다.

function hello() {

  console.log("안녕하세요.");

}

hello();


-터미널영역에서 node index or node index.js 명령어를 입력하고 엔터를 실행합니다.
PS D:\Eddy\Node\DAY2\npm-project> node index
안녕하세요.

-여러분이 직접 생성한 자바스크립트 파일을 node명령어를 통해 실행시켜 보았습니다.
- package.json 파일을 오픈하고 아래 내용을 수정합니다.

  "scripts": {
    "start""node index"  
},

-터미널 영역에서 npm start 라고 명령어를 입력하고 엔터를 실행합니다.

PS D:\Eddy\Node\DAY2\npm-project> npm start
> npm-project@1.0.0 start D:\Eddy\Node\DAY2\npm-project
> node index
안녕하세요.

-개발자가 정의한 명령어를 통해 node 명령어를 실행시키는 방법도 테스트 해보았습니다.
-package.json 파일내 scripts 속성을 이용하면 개발자가 정한 키워드를 명령어로 등록하고 해당 명령어에  명령 내용을 정의할수 있으며 npm “명령어” 방식을 통해 개발자 정의 명령어를 실행시킬수 있습니다.


다)NPM 팩키지 라이브러리 설치하고 복원하기

-moment라고 하는 날짜 포맷 관리 자바스크립트 오픈소스 라이브러리 팩키지를 노드 팩키지 저장소를 통해 현재 프로젝트에 설치해보고 해당 기능을 이용해 날짜를 출력해보도록 하겠습니다. 
-터미널 창에서 npm i moment 를 입력하여 moment 노드 팩키지 라이브러리를 다운로드하고 해당 프로젝트에 설치를 진행합니다.

PS D:\Eddy\Node\DAY2\npm-project> npm i moment
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN npm-project@1.0.0 No description
npm WARN npm-project@1.0.0 No repository field.
+ moment@2.24.0
added 1 package from 6 contributors and audited 1 package in 2.314s
found 0 vulnerabilities

-정상적으로 moment 2.24.0 버전 노드 팩키지 라이브러리가 설치되었으며 설치와 동시에  npm-project 폴더내에 node_modules 폴더가 만들어지고 하위에 moment폴더 및 관려 라이브러리 소스가 설치되었습니다. 
-또한 npm-project\package.json파일을 열어보면 dependencies속성이 추가되어 있고 moment 팩키지 설치 명세정보가 기록되어 있음을 확인합니다.

  "dependencies": {

    "moment""^2.24.0"
}


-npm i 명령어는 지정한 팩키지를 설치하거나 package.json에 명세된 모든 노드 팩키지를 재설치하는 명령어입니다.
-npm i 설치 팩키지명 : 팩키지 하나를 설치시 
-npm i 설치팩키지명1 설치팩키지2 설치팩키지3  : 여러 개 팩키지를 동시 설치시
-
npm i  : 팩키지명을 명시하지 않으면 package.json내 dependencies 속성에 명세 된 모든 노드 팩키지를 재설치한다.
-npm i 대신에 npm install 팩키지명 명령도 동일하게 작동함

-npm-project\index.js 파일을 열어 다음과 같이 소스 내용을 수정 후 저장합니다.

const moment = require("moment");

 

function hello() {

  const codingDate = Date.now();

  console.log("안녕하세요.");

  console.log(

    `오늘 날짜는  ${moment(codingDate).format("YYYY-MM-DD")} 입니다.`

  );

}

 

hello();


-require는 노드에서 특정 팩키지나 자바스크립트모듈을 참조할 때 사용하는 예약어입니다.
-문자열내에 정의된 변수를 바로 사용하기 위해 템플릿 문자열을 문법(ES2015스펙)을 사용했습니다.
-템플릿 문자열은 벡틱(키보드 숫자1 자판 옆의 역홑따옴표) 표기안에 문자열을 나열하고 문자열내 ${변수} 방식으로 변수를 함께 문자열내 바로 조합 출력할수 있는 방법을 제공합니다.
-터미널에서 npm start 명령어를 통해 index.js 파일을 실행합니다.
PS D:\Eddy\Node\DAY2\npm-project> npm start
> npm-project@1.0.0 start D:\Eddy\Node\DAY2\npm-project
> node index
안녕하세요.
오늘 날짜는  2020-03-15 입니다.

-탐색기 창에서 테스트를 위해 node_modules 폴더를 선택하고 오른쪽 마우스 클릭 >삭제합니다.
-터미널 영역에서 설치 팩키지명을 입력하지 않고 npm i  명령어만 입력하고 실행합니다.

PS D:\Eddy\Node\DAY2\npm-project> npm i
npm WARN npm-project@1.0.0 No description
npm WARN npm-project@1.0.0 No repository field.
added 1 package from 6 contributors and audited 1 package in 1.629s
found 0 vulnerabilities

-다시 프로젝트 폴더에 node_modules 폴더가 생성되고 package.json내 dependencies 속성에 명세 된 모든 노드 팩키지가 재설치된 것을 확인할수 있습니다.
-따라서 노드 프로젝트를 진행할때는 package.json 파일을 신경써서 관리 하셔야하며 설치한 노드팩키지에 문제가 있다면 package.json 파일을 이용해 관련 전체 노드 팩키지를 재설치하거나 노드 팩키지들에 대한 추가/삭제 관리하는데 많은 편리함이 제공됩니다.
-팩키지 설치시 함께 추가된 package-lock.json 파일은 설치된 팩키지 들 간의 의존관계 정보를 관리해주는 파일이며 팩키지 간 복잡한 참조관계로 인한 버전 충돌 문제 발생시 간혹 참고하시면 좋습니다


5)NPM 주요 명령어 

가) 개발용 팩키지 설치 명령어
-실제 서비스 환경에서는 사용하지 않고 개발환경에서만 사용하는 팩키지
-package.json 내 devDependencies 속성에 명세되어 관리됨.
npm i --save-dev 팩키지명
npm install --save-dev 팩키지명

예시) npm i --save-dev nodemon 


나)전역 팩키지 설치 명령어
-해당 프로젝트에서만 사용되는 팩키지가 아닌 개발 컴퓨터나 서비스 서버 컴퓨터내 모든 영역에서 사용가능한 설치 팩키지
-해당 프로젝트내 node-modules 공간이 아닌 npm이 설치된 공간(c:\users\사용자계정\appdata\roamng\npm)에 팩키지가 설치된다.
-전역으로 설치해서 사용하는 팩키지는 프로젝트내 package.json 파일에 기록되지 않기 때문에 개발 및 서비스에 필요한 전역 설치 팩키지들은 별도 기억이나 기록을 해두는 것이 프로젝트 개발 관리 시 많은 도움이 됩니다. 

npm i --g 팩키지명
npm install --global 팩키지명

다)NPM 팩키지 버전 표기 및 NPM 기타 명령어

-노드 팩키지는 3자리 형식으로 버전관리
@Major버전.Minor버전.패치버전  @2.24.0

-특정버전 팩키지 설치하기
npm I moment@2.24.0

-프로젝트내 업데이트된 팩키지 존재 여부 조회 : npm outdated
-특정 팩키지 업데이트 : npm update 팩키지명
-설치된 팩키지 삭제  : npm rm 팩키지명 또는 npm uninstall 팩키지명
-NPM NPM저장소내 특정 팩키지 조회: npm search 검색어
-지정 팩키지에 대한 세부정보 확인 : npm info 팩키지명


Image

댓글목록

Image