본문 바로가기
IT 공부/Javascript

npm 기초

by 쭈잇 2024. 12. 10.
반응형

node js
자바스크립트 런타임 환경

 

npm (node package manager)

라이브러라, 모듈 등을 설치받을 수 있게 쉽게 도와주는 메니저

 

package.json

프로젝트에 대한 정보를 갖고 있는 파일.

dependecies 와 같은 속성을 활용하여 프로젝트에 의존된 라이브러리를 관리한다

 

package.json 파일은 직접 작성할 수도 있고,

npm init 명령어를 사용해 자동으로 생성도 가능하다!

 

npm 속성

name : 프로젝트 이름

version : 프로젝트 버전 

description : 프로젝트 설명

keywords: 프러젝트 검색시 참조되는 키워드

private : true (소스 공개 안할거 )

main : 패키지 메인 기본 진입점

scripts : 자주 실행하는 명령어는 scripts로 작성

예)npm run test 하면 뒤가 실행됨 ** npm start 만 특별하게 run 안 하고! 

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},

 

 author : 제작자

license: 패키지 라이선스

dependencies : 프로젝트에서 사용하는 모듈을 기술,

이 프젝이 뭐 쓰는지 알 수 있음( 배포되었을 때 )

devDependencies : 개발할 때만 의존하는 모듈을 관리

ex) npm install --save-dev nodemon 

 

 

node_modules

이 프젝이 필요한 라이브러리가 설치된 경로

package-lock json

프젝에 설치된 모듈들의 의존성 트리거를 기록

ex) A 프젝에서는 a, b 라이브러리를 사용하고 있는 b는 c를 가지고 있고, b는 d도 가지고 있고 등등

 

명령어 보기

npm init -y ( 기본 값 입력됨)

npm install (or i) dayjs

sudo npm install -g nodemon (nodemon을 프젝 전역에 설치)

sudo npm uninstall -g nodemon

 

./node_modeules/.bin/nodemon index.js

이렇게 명령어에 쳐야하는데 귀찮으니 scripts에 넣어주자

"scripts": {
"start": "nodemon index.js",

 

만약 버전이 꼬였다면, package.json 파일만 놔두고 다 지우고
다시 npm install 로 설치해주면 된다

근데 여기서 npm install --production 옵션을 주면 devDependecies는 설치 안함

 

버전 업데이트 

sudo npm update -g nomeon

 

npm root

로컬패키지 설치 디렉토리 확인 ( node_modules의 절대경로 확인 가능)

npm root -g

전역으로 설치된 node_modules 절대 경로를 확인할 수 있어.

npm ls 

설치된 모듈 확인이 가능해

npm ls --depth=2

의존성 모듈까지 확인 가능해

npm start 하면 scrpts의 start 부분 실행됨. 나머지는 npm rum  붙여서 실행하는거야

 

npm npx 뭐가 다름?

프로젝트 개발하다가 npx jest 를 사용했는데 npx는 뭐가 다를까

npm 과 npx  차이

npm 용도는 주로 패키지 설치 관리 

npx는 패키지 또는 바이너리 실행

쉽게 말해 npx는 설치 안하고 바로 가볍게 사용해보고 끝낼때 쓰는 용

일회용임

 

CLI 도구를 전역적으로 설치하지 않고 사용

그래서 test  진행할때 npx 일회용으로 사용하고 지워짐
전역 설치 없이 사용되니 시간, 디스크 공간 절약 됨

 

 

 

 

 

 

 

참고) 짐코딩 유튜브 

반응형