'프론트엔드/Node.js' 카테고리의 글 목록

프론트엔드/Node.js

Node.js 2022.04.15

Node.js

2022. 4. 15. 12:06

2022.04.15

Node.js

Chrome V8 JavaScript 엔진(자바스크립트를 해석하고 동작시키는)으로 빌드된 JavaScript런타임(프로그래밍 언어가 동작하는 환경)
즉 자바스크립트라는 프로그래밍언어가 동작하는 컴퓨터 환경

Node.js 사용해야하는 이유

컴퓨터를 제어하는것을 배움
웹페이지를 제작할때 가볍게 도움을 받을 수 있음
HTML, CSS, JS만 가지고 페이지를 구현하는건 비효율적
Node.js를 통해 여러가지 모듈을 설치해 도움을 받아가며 개발

Node.js설치

https://nodejs.org/ko/ 접속해서 다운받기

왼쪽 짝수버전

LTS(Long Term Supported): 장기적으로 안정되고 신뢰도가 높은 지원이 보장되는 버전

오른쪽 홀수버전

최신(업데이트가 자주일어날 수 있음)

설치 후 터미널에

node --version 를 쳐보면 설치된 버전을 알 수 있음
node를 설치하면 npm도 같이 설치됨!!

NVM(Node Version Manager)

노드 버전관리 도구
협업을 할때나 다양한 프로젝트를 진행시 해당 프로젝트에 최적화된 Node버전을 사용할 수 있게 됨

NVM 설치

버전 설치 방법

nvm install 16.14.2 설치 후
nvm ls 로 확인
//다른버전 설치를 원할시 같은방식으로
nvm install <다른버전>

//버전 변경을 원할시
nvm use <원하는버전>
//버전 삭제하고싶을때
nvm uninstall <삭제할버전>

NPM(Node Package Manager)

전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리
npm안에 다양한 패키지들이 들어있고 원하는 기능을 npm install로 설치해서 사용할 수 있음
패키지: 프로젝트에 설치해서 웹사이트를 동작시킴( ex)lodash, swiper, gsap ...)

npm으로 trade off발생

학습 난도 증가
구성이 복잡
관리 효율 증가
손쉬운 기능 고도화

NPM 설치

npm init -y
package.json 이 생성된다 
package.json 을 클릭해서 보면 정보확인가능하며 "main": "index.js", 생략가능

parcel-bundler 설치

npm install parcel-bundler -D
//원하는 파슬번들러 설치하고싶을때
npm install parcel-bundler@원하는버전 -D
설치를 하면 node_modules, package-lock.json 이 생김
파슬 번들러를 사용하기 위한 패키지들이 다 설치된것
node_modules -> parcel-bundler -> package.json -> dependencies부분에 사용할 수 있는 패키지들이 나와있음 
밖에 깔려있는package.json을 확인해 보면 devDependencies부분에 parcel-bundler가 깔려있는걸 확일할 수 있음

package.json: 직접적으로 관리하는 파일
package-lock.json: 자동으로 관리되는 파일

1. Lodash 설치

npm install lodash
//lodash패키지 최신버전정보 확인
npm info lodash

2. node_modules 삭제했을 경우

언제든지 다시 살려낼 수 있음!
npm install 또는 npm i
한번 지웠더라도 깔았었던 내역이 남아있으면 다시 설치가됨

3. npm install -D, npm install 의 차이

npm install -D <패키지이름>

-D는 --save Dev의 약어
개발용 의존성 패키지 설치.
내가 설치한 패키지들이 개발할때만 필요. 웹브라우저에서는 직접적으로 동작 안함

npm install <패키지이름>

일반 의존성 설치
프로젝트 웹브라우저에서도 동작할 수 있음

4. package.json에 들어가

"scripts": {
    "dev": "parcel index.html"
  },

개발용 의존성 패키지로 parcel을 설치후
터미널에

npm run dev(scripts에 쓴 이름)

scripts 에 build라는 이름을 써서 추가해주면 실제 사용자가 보는 환경을 출력해줌

"scripts": {
    "build": "parcel bulid index.html"
  },

터미널에

npm run build(scripts에 쓴 이름)

dist 폴더가 생성됨

코드 난독화: 개발자가 보는게 아닌 웹브라우저에서 동작시키는 용도이기때문에 보기힘들게 되있음
번들(bundle): 우리가 프로젝트 개발에 사용한 여러 모듈(패키지)을 하나로 묶어내는 작업
//ctrl + c는 개발환경 종료

유의적 버전(Semantic Versioning, Semver)

의미가 유
Semantic versioning 2.0.0
Major: 기존버전과 호환이 되지 않음. 즉, 1.2.7, 2.0.0 앞에가 다르면 안됨
Minor: 새로운 기능 추가. 기존버전과는 호환이 됨
Patch: 버그 및 오타. 사소한정도. 기존버전과 호환
버전앞에 ^(캐럿)기호가 major 버전안에 붙어있으면 가장 최신 버전으로 업데이트 가능하다는 것
항상 버전관리를 해줘야함

업데이트 ^(캐럿)기호 의미

package.json에 써있는 버전이 최신게 아닐 가능성도 있으니
modul -> lodash -> package.json -> "version” 부분 확인해줄것
npm install lodash@버전이름
package.json에 vsersion이 바껴있는걸 확인 할 수 있음
npm update lodash
하면 버전이 업데이트 되는데 그 이유는 lodash앞에 ^캐럿기호가 붙어있기때문에 가능 major버전은 제외하고 가능

npm 관리

cache, modul 삭제 후 
npm i
npm run 으로 cache랑 dist 다시 불러올 수 있음
git init을 해주기 전에 따로 버전관리를해줄때 
.gitignore에 
.cache/ 
dist/
node_modules/
파일 제외시키자
git init을 하면 U표시가 뜨면 gitignore된것

PREV 1 NEXT

끄적