[JS] 02. NPM 및 프로젝트 생성
📚 Table of Contents
01. NPM 개요
NPM (Node Package Manager)은 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리하는 Node.js의 기본 패키지 관리자입니다. 다음은 NPM의 주요 특징과 기능입니다:
- 패키지 관리: JavaScript 라이브러리와 도구를 쉽게 설치, 업데이트, 제거할 수 있습니다.
- 의존성 관리: 프로젝트의 의존성을 자동으로 관리하고 해결합니다.
- 스크립트 실행: package.json 파일에 정의된 스크립트를 실행할 수 있습니다.
- 버전 관리: 패키지의 버전을 세밀하게 제어할 수 있습니다.
- 보안: 취약점 검사 및 패키지 무결성 확인 기능을 제공합니다.
- 패키지 게시: 개발자가 자신의 패키지를 NPM 레지스트리에 게시할 수 있습니다.
- 커뮤니티: 전 세계 개발자들이 만든 수많은 오픈소스 패키지를 사용할 수 있습니다.
NPM은 Node.js 프로젝트 개발에 필수적인 도구로, 효율적인 패키지 관리와 프로젝트 구성을 가능하게 합니다.
02. NPM 프로젝트 시작
> npm --version / or / npm -v
10.7.0
> clear or cls : 터미널이 정리됩니다.
> npm init : 프로젝트 초기화, 생성
-> 프로젝트 이름, 버전, 설명
> npm init -y : 기본 질문 생략01) package.json
프로젝트 초기화를 진행하면
package.json 파일이 생성됩니다.
{
"name": "signature",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"description": ""
}02) 패키지 설치
NPM에서 -D 옵션은 "개발 의존성(devDependencies)"으로 패키지를 설치하는 것을 의미합니다. 이는 다음과 같은 특징을 가집니다:
- 개발 환경에서만 사용: 이 옵션으로 설치된 패키지는 개발 과정에서만 필요하고, 실제 프로덕션 환경에서는 필요하지 않습니다.
- package.json에 별도 기록: 설치된 패키지는
package.json파일의devDependencies섹션에 기록됩니다. - npm install --production 제외:
npm install --production명령어로 설치할 때 이 패키지들은 제외됩니다. - 빌드 도구, 테스트 프레임워크 등에 주로 사용: 예를 들어, Webpack, Babel, Jest 등이 여기에 해당합니다.
- 프로젝트 크기 최적화: 프로덕션 환경에서 불필요한 패키지를 제외하여 프로젝트 크기를 줄일 수 있습니다.
따라서 npm install -D parcel은 Parcel을 개발 의존성으로 설치하여, 개발 중에만 사용하고 실제 배포 시에는 포함되지 않도록 하는 명령어입니다.
> npm install lodash
> npm install parcel --save-dev
> npm install -D parcel
: 개발할때만 사용, 웹브라우저에서 동작 X
package.json 파일 확인
"dependencies": {
"lodash": "^4.17.21"
},
"devDependencies": {
"parcel": "^2.12.0"
}
파일과 폴더가 1개씩 생성됩니다.
package.json
우리의 프로젝트를 직접적으로 의존하고 있는 패키지들을 관리하는 파일입니다.
package-rock.json
설치된 패키지들이 추가적으로 의존하고 있는 다른 패키지들의 관계 정보를 가지고 있는 파일입니다.
node-modules
폴더는 삭제되더라도 언제든지 다시 원상복구 할 수 있습니다.
위 파일이 존재하기 때문입니다.
03. Parcel, 개발 서버 실행과 빌드
index.html, main.js 파일 생성
프로젝트에 설치를 했기 때문에 cdn으로 연결하지 않고 바로 사용할 수 있습니다.
import _ from 'lodash'
console.log(_.upperCase('hello-world'))<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./main.js" type="module"></script>
</head>
<body>
</body>
</html>01) Parcel 개발 서버 실행
Announcing Parcel v2!
The Parcel team is beyond excited to announce that v2.0.0 stable is now available! 🎉
parceljs.org
Parcel은 웹 애플리케이션 번들러입니다. 다음과 같은 특징을 가지고 있습니다:
- 설정이 필요 없음: 별도의 복잡한 설정 없이 바로 사용할 수 있습니다.
- 빠른 성능: 멀티코어 처리를 활용하여 빠른 빌드 속도를 제공합니다.
- 자동 변환: JavaScript, CSS, HTML 등 다양한 파일 형식을 자동으로 변환합니다.
- 코드 분할: 필요한 코드만 로드하여 성능을 최적화합니다.
- 핫 모듈 교체(HMR): 개발 중 코드 변경 사항을 실시간으로 반영합니다.
- 다양한 에셋 지원: 이미지, 폰트 등 다양한 파일 형식을 처리할 수 있습니다.
Parcel을 사용하면 복잡한 웹팩 설정 없이도 모던 웹 개발 환경을 쉽게 구축할 수 있습니다.
package.json 파일
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
이 부분을 아래와 같이 변경해줍니다.
"scripts": {
"dev": "parcel ./index.html"
}
터미널
> npm run dev
Server running at http://localhost:1234
✨ Built in 332ms
보내준 링크로 들어가면 출력 된 콘솔을 확인할 수 있습니다.
'Language > JavaScript' 카테고리의 다른 글
| [JS] 06. 연산자 (1) | 2024.10.15 |
|---|---|
| [Js] 05. 데이터 etc (0) | 2024.10.14 |
| [JS] 04. 참조형 데이터 (0) | 2024.10.11 |
| [JS] 03. 프로젝트 구성, 원시형 데이터 (1) | 2024.10.10 |
| [JS] 01. JavaScript, Node.js 란? (1) | 2024.10.07 |
