Vue - Node.js와 NPM

김영준·2023년 8월 1일
0

TIL

목록 보기
56/91
post-thumbnail

Node.js

자바스크립트 엔진으로 빌드 된 자바스크립트 런타임 환경
런타임 환경: 동작할 수 있는 환경


NPM(Node Packaged Manager)

Node.js로 만들어진 package를 관리해주는 툴
Node.js를 다운로드 받으면 자동적으로 NPM도 받아진다.

npm init

프로젝트 초기화 (이제부터 프로젝트를 npm으로 관리하겠다.)
패키지 이름은 다른 패키지명과 중복되지 않게 만드는 것이 좋다.
npm init -y를 사용하면 세팅을 묻지 않고 바로 생성된다.
package.json 파일이 생성된다.

npm install

패키지를 설치한다.
npm install vue or npm i vue
@를 활용해서 버전을 명시할 수 있다. npm i vue@3.2.9

개발 할 때만 필요한 패키지 설치 npm i serve --save-dev or npm i serve -D
패키지가 devDependencies로 들어간다. (개발 의존성 패키지)

-D 옵션을 붙이지 않으면 브라우저 환경에서도 필요한 패키지를 설치
dependencies로 들어간다. (일반 의존성 패키지)

-g 옵션을 사용하면 패키지를 전역적으로 설치한다. (어디서든 사용 가능) npm i serve -g


폴더 구조


node_modules: 설치한 패키지들이 들어있는 폴더
package.json: 패키지 관리 파일
package-lock.json: 실질적인 버전을 담고있는 모든 의존성 패키지 관리 파일


node_moudles 폴더는 package.json, package-lock.json 파일만 존재하면 언제든지 npm i 명령어로 재설치 할 수 있다.

따라서 git으로 버전 관리를 할 때 node_modules 폴더는 push 하지 않는 것을 권장한다.
따라서 .gitignore 파일을 생성해 내부에 작성한다.


npm info

패키지 정보를 확인할 수 있다.
npm info vue

npm uninstall

패키지를 제거한다.
npm uninstall vue or npm un vue


npx

npm이 설치되면 사용할 수 있는 명령어로 패키지를 가져와서 한 번만 사용한다.
npx로 실행된 패키지는 실행하기 위해 로컬에 설치하지 않고 메모리에 잠깐 설치되었다가 실행 후 삭제된다.
따라서 자주 사용하지 않는 패키지를 사용할 때 용이하다.
npx serve


scripts

package.json에 scripts 부분은 해당 명령어를 입력 시 수행하는 명령어를 명시한다.
실행할 땐 npm run 명령어 형식으로 작성한다. npm run dev

profile
꾸준히 성장하는 개발자 블로그

0개의 댓글