#. 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를 확인 할 수있습니다.
즉, npm install 이라는 명령을 통해서 어떠한 패키지를 프로젝트에 설치하면,
node_modules라는 폴더 안에 패키지 폴더 들어가겠고요. 그 패키지들이 모듈입니다.
그리고, parcel-bundler 라는 패키지만 설치했는데 왜 수많은 폴더가 생성되냐면,
결국 node_modules 안에 들어있는 모든 폴더들은 하나의 패키지입니다.
parcel-bundler라는 폴더 패키지가 만들어지고, 프로젝트에서 활용 될 때 필요한 또 다 패키지들이 같이 설치된거에요. parcel-bundler라는 폴더를 열어서 보시면,
dependencies라는 옵션부분에 사용하는 여러가지 패키지들이 명시되어있습니다. 이미 만들어진 패키지를 가져와서 활용할 수 도있고요, 이러한 개념들로 연결이 되어져있다 이해하면됩니다.
#.그리고, 다시 package.jason파일로 다시 돌아오면요,
라이센스 밑에 , devDependencies라고, 옵션이 새로 생성되었고,
parcel-bundler라고 설치한 패키지가 명시되었습니다.
즉, 우리가 npm installer라는 명령을 통해서 패키지를 설치하면,
패키지 내역이 package.jason파일에 남아요.
결국 현재 프로젝트에 설치된 패키지는 무엇이고, 그 버전은 무엇인지 확인해서 프로젝트가 동작합니다.
#. npm install lodash 이번에는 -D를 붙이지 않고 또 다른 패키지를 인스톨 해 봅니다.
터미널로 들어가서 npm install lodash 를 입력하는데, 이번에는 -D를 입력하지 않습니다.
이런식으로 우리가 npm installer라는 명령을 통해서 패키지를 설치하면, node_modules라는 폴더 안에 실제 패키지가 들어가겠고요. 그 내역이 package.json에 devDependencies 또는 dependencies 라는 옵션에 명시가 됩니다.
#이것의 장점은 무엇인가.
node_modules 폴더를 삭제를 했습니다만,
npm install(또는 npm i )엔터,
프로젝트에 한번 설치한 패키지는 내역으로 남게되고, 그 내역을 바탕으로 실제 설치된 패키지를 지우더라도,
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은 절대 삭제하지마세요.
#.이미지로 정리.
npm의 생태계에서 npm install이라는 명령을 통해서 패키지A를 프로젝트에 설치하였습니다.
그 패키지는 다른 사람이 만든 패키지이고, 다른 패키지가 붙어 있을 수 있습니다. 그것을 다 이해할 수 없으니까,
그 세부적인 파일들을 자동으로 관리 해 주는 파일 있었죠. 그것은 packasge-lock.json입니다.
#. devDependencies 또는 dependencies
-D를 붙이면 devDependencies,개발용 의존성 패키지를 설치하는 것이고.
붙이지 않으면 dependencies,일반 의존성 패키지가 설치 되는 것입니다.
#개발용 의존성 패키지
내가 설치한 특정한 패키지들이 개발 할 때만 필요하고, 나중에 웹브라우저에서 동작할 때는 필요하지 않다.
개발 할 떄만 도움받는 용도냐 아니냐...
--save-dev의 약어를 -D로 짧게.
우리 프로젝트에서 parcel-bundler는 개발용도라고 생각하면 됩니다.
#일반의존성패키지
실제로 웹브라우저에서 동작할 수도 있다. 라는 것을 전제로 합니다.
예를들어 lodash는 나중에 프로젝트 다 만들면 웹브라우저에서도 동작할 수 있다고 명시하는 거에요.
'Part 2. JavaScript Essentials' 카테고리의 다른 글
Ch 3. JS 함수-03.IIFE(즉시실행함수) (1) | 2023.12.01 |
---|---|
Ch 2. JS 시작하기-07.조건문 Switch (0) | 2023.11.29 |
Ch 2. JS 시작하기-06.조건문 IF Else (0) | 2023.11.29 |
Ch 2. JS 시작하기-05.삼항 연산자 (0) | 2023.11.28 |
Ch 2. JS 시작하기-01.개요(ECMA Script) 및 프로젝트 초기화 (0) | 2023.11.28 |