Part 2. JavaScript Essentials

Ch 1. Node.js -04.NPM 개요(2)

마도가와 2023. 11. 25. 22:34
반응형

#. npm init -y 로  {} package.json 파일이 생성

 

test 폴더를 만들어서,  

터미널을 열어주세요. nodejs를설치했으면 npm도 설치됩니다.

npm init -y를 입력하면 ( npm init 를 입력하고  -y 플래그를 입력합니다. )

그러면 옆에 {} package.json 파일이 생성되는 것을 볼 수 있습니다. 안 나오면 새로고침 누르세여.

 

# {} package.json 파일 상세보기

name: test  ,폴더명이고요. 다른이름으로 바꿔도 사용해도됩니다.

version: 1.0.0 ,프로젝트 버전도 나오고요

description: "" 프로젝트에 대한 설명

main: index.js 우리도 직접 패키지를 만들어서 사용할 수 있는데요, 현재의 프로젝트를 하나의 패키지처럼 만들어서 npm생태계에 업로드를 할 때 필요한 옵션인데요. 지금 프로젝트에는 필요하지 않습니다. 삭제해도 됩니다. 

script: ... , 우리가 현재 프로젝트에서 내부에서 사용할 수 있는 스크립트 명령들을 명시해서 사용하면 프로젝트와 관련된 명령들을 손쉽게 사용할 수 있습니다. 

keywords , 프로젝트에 관련된 키워드

author , 프로젝트의 소유

license , 프로젝트 라이센스를 명시합니다. 

 

이렇게 npm init -y로 프로젝트를 시작을 했고요. 그 안의 기본적인 옵션은 그대로 두셔도 되고 수정해도 됩니다.  

 

# npm install parcel-bundler -D 

 

npm install parcel-bundler -D, 엔터를 누릅니다.

npm install 을 입력하고,  parcel-bundler라는 패키지 설치하겠다 명시하고, 그리고 -D 를 입력하는데,

이것에 대해서 설명하겠습니다.

옆에 보면 node_modules , package-lock.json이라는 파일이 생성이 되었는데요,

node_modules폴더 안에 또 우리가 만든 parcel-bundler라는 폴더가 만들어 진 것을 확인 할 수 있습니다.

 node_modules 안에 수많은 폴더 안에 parcel-bundler를 확인 할 수있습니다.

 

즉, npm install 이라는 명령을 통해서 어떠한 패키지를 프로젝트에 설치하면,

node_modules라는 폴더 안에 패키지 폴더 들어가겠고요. 그 패키지들이 모듈입니다.

 

그리고, parcel-bundler 라는 패키지만 설치했는데 왜 수많은 폴더가 생성되냐면,

결국 node_modules 안에 들어있는 모든 폴더들은 하나의 패키지입니다.

parcel-bundler라는 폴더 패키지가 만들어지고, 프로젝트에서 활용 될 때 필요한 또 다 패키지들이 같이 설치된거에요. parcel-bundler라는 폴더를 열어서 보시면,

이렇게 package.jason이라는 폴더가 또 있는데 이것을 또 열어서 보시면,
dependencies라는 옵션부분에

dependencies라는 옵션부분에 사용하는 여러가지 패키지들이 명시되어있습니다. 이미 만들어진 패키지를 가져와서 활용할 수 도있고요, 이러한 개념들로 연결이 되어져있다 이해하면됩니다.

 

#.그리고, 다시 package.jason파일로 다시 돌아오면요,

devDependencies라고 새로 옵션이 추가 되었습니다.

라이센스 밑에 , devDependencies라고, 옵션이 새로 생성되었고, 

parcel-bundler라고  설치한 패키지가 명시되었습니다. 

 

즉, 우리가 npm installer라는 명령을 통해서 패키지를 설치하면,

패키지 내역이 package.jason파일에 남아요.

결국 현재 프로젝트에 설치된 패키지는 무엇이고, 그 버전은 무엇인지 확인해서 프로젝트가 동작합니다.

 

#. npm install lodash 이번에는 -D를 붙이지 않고 또 다른 패키지를 인스톨 해 봅니다.

터미널로 들어가서 npm install lodash

 

터미널로 들어가서 npm install lodash 를 입력하는데, 이번에는 -D를 입력하지 않습니다. 

그러면 또 프로젝트에 설치한 lodash라는 패키지 내역이 남습니다.

 

이런식으로 우리가 npm installer라는 명령을 통해서 패키지를 설치하면, node_modules라는 폴더 안에 실제 패키지가 들어가겠고요. 그 내역이 package.json에 devDependencies 또는 dependencies 라는 옵션에 명시가 됩니다.

 

#이것의 장점은 무엇인가.

node_modules폴더를 삭제 해 봅니다. 그리고 터미널을 열어주세요.

 node_modules 폴더를 삭제를 했습니다만, 

npm install(또는 npm i )엔터,

다시    node_modules이 나타납니다.

 

 프로젝트에 한번 설치한 패키지는 내역으로 남게되고, 그 내역을 바탕으로 실제 설치된 패키지를 지우더라도,

npm install 명령을 통해서, 다시 우리 프로젝트에, 프로젝트에 해당하는 패키지를 설치 할 수 있습니다. 

 

#. packasge-lock.json

packasge.json에 명시된 모듈들을 ,  parcel-bundler랑  lodash를 설치했는데, 내부적으로 관리를 해야하는데, 

우리가 parcel-bundler랑  lodash를 설치했는데, 다른 패키지들도 설치가 되었지만, 정확하게 무엇이 설치되었는지 알 수가 없잖아요. 그 모듈들을 내부적으로 관리를 해야하는데, 그 패키지 정보가 자동으로 packasge-lock.json 안으로 들어가게 됩니다.

packasge.json은 직접적으로 관리하는 것이고, packasge-lock.json  자동으로 관리되는 파일이라고 보면 됩니다. packasge-lock.json의 lock은 잠금처리가 되어있다는 것이고요.

 

*주의사항*

node_modules 폴더를 삭제를 해도 되는데요.

packasge.json와 packasge-lock.json은 절대 삭제하지마세요.

 

#.이미지로 정리.

packasge-lock.json을 관리 할 때 이미지

npm의 생태계에서 npm install이라는 명령을 통해서 패키지A를 프로젝트에 설치하였습니다. 

그 패키지는 다른 사람이 만든 패키지이고, 다른 패키지가 붙어 있을 수 있습니다. 그것을 다 이해할 수 없으니까,

그 세부적인 파일들을 자동으로 관리 해 주는 파일 있었죠. 그것은 packasge-lock.json입니다.

 

#. devDependencies 또는 dependencies  

-D를 붙이면 devDependencies,개발용 의존성 패키지를 설치하는 것이고.

붙이지 않으면 dependencies,일반 의존성 패키지가 설치 되는 것입니다. 

 

#개발용 의존성 패키지

내가 설치한 특정한 패키지들이 개발 할 때만 필요하고, 나중에 웹브라우저에서 동작할 때는 필요하지 않다.

개발 할 떄만 도움받는 용도냐 아니냐...

--save-dev의 약어를 -D로 짧게.

우리 프로젝트에서 parcel-bundler는 개발용도라고 생각하면 됩니다.

#일반의존성패키지

실제로 웹브라우저에서 동작할 수도 있다. 라는 것을 전제로 합니다. 

예를들어 lodash는 나중에 프로젝트 다 만들면 웹브라우저에서도 동작할 수 있다고 명시하는 거에요.

 

 

반응형