[멋사 프론트엔드 부트캠프 14기] NPM / package.json / live-server

JeonLay 2025. 4. 24. 22:04

NPM

Node Package Manager로, 자바스크립트 프로그래밍 환경에서 패키지를 설치하고 관리하는 도구이다.
주로 Node.js 환경에서 사용
다양한 패키지 손쉽게 설치하고 관리할 수 있고, 다른 개발자들이 만든 패키지를 내 프로젝트에 쉽게 추가하고, 의존성 관리를 간편하게 할 수 있다.
또한, 자신이 만든 패키지를 다른 사람들과 공유하고 배포할 수도 있다.
npm | Home < 여기서 다양한 패키지를 제공하고 있다.

NPM은 Node.js를 설치하면 함께 설치된다.
설치여부와 버전을 확인하기 위해서는 다음의 명령을 입력한다.

# 설치 여부 및 버전 확인
npm --version
npm -v

# 업데이트
npm install --global npm@latest
npm i -g npm@latest

| NPM을 활용하여 패키지 설치

# 전역(Global)으로 설치
npm install --global 패키지명
npm i -g 패키지명
 
# 로컬(local)로 설치
npm install 패키지명
npm i 패키지명

+ 깃허브 주소를 클론 해왔을 때, 패키지 장부(pacage.json)에 등록된 패키지를 등록하기 위해서는 그냥 npm i 를 해주면 알아서 장부 속 패키지를 설치해 준다!

| NPM을 활용하여 패키지 삭제

# 전역(Global)에 설치된 패키지 삭제
npm uninstall --global <패키지명>
npm un -g <패키지명>

# 로컬(Local)에 설치된 패키지 삭제
npm uninstall <패키지명>
npm un <패키지명>

https://www.npmjs.com/package/degit 패키지를 한 번 깔아보자!

- degit 패키지는 Github과 같은 Git 저장소에서 프로젝트를 복제할 때 사용할 수 있는 도구이다.

주요 기능

빠른 복제: 필요한 파일만 가져와서 빠르게 프로젝트를 설정
Git 기록 없음: 복제한 프로젝트에는 Git 기록이 포함되지 않으므로, 깔끔한 상태로 시작할 수 있다.
템플릿 생성: 다양한 프로젝트 템플릿을 쉽게 가져와서 새로운 프로젝트를 시작할 수 있다.

npm install -g degit # degit 패키지 설치
npm list -g # 전역(global)으로 설치된 Node.js 패키지 목록


# Github 저장소에서 원하는 폴더를 로컬의 디렉토리에 복제하는 명령어
degit Github경로 폴더명 # 이게 안되면 아래의 명령어를 입력해보자.
npx degit Github경로 폴더명

package.json

= 패키지를 관리하는 장부

Node.js 프로젝트에서 사용되는 메타데이터 파일
프로젝트의 이름, 버전, 의존성 패키지 정보 등을 포함
package.json 파일은 프로젝트의 루트 디렉터리에 위치하며, npm init 을 통해 초기화하거나 수동으로 작성할 수 있다.
npm 을 사용하여 패키지를 설치하면, 자동으로 package.json 파일에 의존성 정보가 업데이트된다.

+ 원래 패키지를 깔면 pacakage.json이 자동으로 깔리는데, 사람에 따라 자동으로 깔리지 않는 경우가 있어서 미리 package.json을 만들어두기도 한다.

| 역할

의존성 관리	package.json 파일에는 프로젝트가 의존하는 외부 패키지들의 정보가 포함되기에 프로젝트를 다른 환경에 배포할 때, 해당 환경에서 필요한 패키지들을 쉽게 설치 가능
스크립트 정의	프로젝트에서 사용되는 스크립트들을 정의할 수 있다. ex) 테스트 실행, 빌드, 서버 실행 등의 스크립트
프로젝트 정보 제공	프로젝트의 이름, 버전, 설명 등의 정보를 포함하여 다른 개발자들이 프로젝트를 이해하고 사용할 수 있도록 한다.
프로젝트 배포 정보	만약 자신의 패키지를 NPM 등의 패키지 관리 도구를 통해 배포하고자 하면, 해당 패키지의 정보를 package.json 파일에 포함시켜야 한다.

▶ 프로젝트를 배포할 때, 만약 패키지 정보를 package.js에 포함시키지 않는다면?

패키지 설치가 불완전하거나 실패될 것이고, 버전 관리에 문제가 생기며, 배포 및 관리의 어려움이 있고, 협업 시 혼란이 생길 것이다.

live-server

(https://www.npmjs.com/package/live-server)

Live Reload 기능을 갖춘 개발 서버이다.
VS Code의 확장 프로그램으로 설치하거나 프로젝트 폴더에 로컬(local)로 설치하여 사용할 수 있다.
전역 설치 말고, 로컬로 설치하여 사용하는 것이 협업에 유리하다.

1. learn-node라는 폴더 하위에 src 폴더를 생성하고 해당 폴더에 index.html 파일도 생성한다.

mkdir src
touch src/index.html

2. index.html 파일에 다음의 코드를 추가한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>NPM 패키지 설치(live-server)</title>
</head>
<body>
  <h1>live Server 실행</h1>
</body>
</html>

3. learn-node라는 폴더에 live-server 패키지를 로컬로 설치한다.

npm i -D live-server

4. live-server 실행을 위해 터미널 창에 다음 명령을 입력한다.

npx live-server src --port=8080 --host=localhost --no-browser

문제는 live-server를 실행할 때마다 위의 코드를 입력해야 한다는 것...

그렇지만 이 번거로움을 해결할 수 있다!!

바로 nmp 스크립트 명령으로 등록하여 실행하는 것이다.

4.1. package.json에 다음의 코드를 추가한다.

"scripts": {
	"dev": "live-server src --port=8080 --host=localhost --no-browser"
},

scripts 안에 명령으로 만들고자 하는 것을 넣으면 된다.
원랜 live ~~ 부분을 터미널에서 실행하려면 npx를 앞에 무조건 써야 하는데, 스크립트에서는 npx를 안 써도 된다.
'src'는 index.html이 있는 폴더가 루트가 되어 해당 부분에 폴더명이 작성되는데, 만약 현재 폴더에 index.html이 있다면 해당 코드에서 scr가 아니라 .이 나올 것이다.

4.2. npm 스크립트 명령을 사용하여 five-server를 실행한다.

npm run dev

[live-server.json]

- live-server.json 파일을 생성하여 live-server의 root, port, host 등 환경 구성에 대한 값을 별도로 관리할 수 있다.

var liveServer = require("live-server");

var params = {
	port: 8080, 
	host: "localhost", 
	root: "/src", 
	open: false, 
	file: "index.html", 
};

liveServer.start(params);
}

[package.json]

- live-server.json 파일이 구성된 경우

"scripts": {
	"dev": "live-server"
},