JavaScript (1)

Tony Kim·2022년 1월 28일
0

JavaScript

목록 보기
1/8
post-thumbnail

JavaScript (1)

1. Node.js

Node.js
Chrome V8이라는 javascript엔진으로 만들어진(빌드된) javascript 런타임

Chrome V8이라는 javascript 엔진 : js문법 해석하고 동작시켜주는 엔진
javascript 런타임 : 프로그래밍 언어(js)가 동작하는 환경

환경

  • 컴퓨터
  • 웹브라우저(크롬)

2. setting

1) nvm
node.js 설치하기 전에 버전 언제든지 바꿀 수 있는 nvm(node version mamanger) 다운!

mac OS

nvm검색, github (nvm-sh)
readme에서 installing and updating 선택
curl으로 시작하는 링크 복사 (운영체제 터미널 or VS 터미널)
----
nvm --version // 확인

windows OS

nvm-windows github 저장소 
스크롤 내려서 download now
nvm-setup.zip 풀어서 실행
----
nvm --version // 확인

2) node.js 설치

  • LTS : 안정적
  • 최신버전(current) : 최신기능 (변경사항 많고 안정적이진 않음)

12 버전 권장 (but 플젝 바이 블젝)

nvm ls         // nodejs 설치유무확인 + 버전 확인 + 현재 버전 확인
nvm install 12.14.1    // 짝수버전이 안정적!, 14가 최신
nvm install 12.21.0    // 12버전 중 가장 최신
nvm use 12.14.1        // 버전 변경
node --version         // 노드 버전 확인
nvm uninstall 12.21.0  // 노드 버전 삭제 

3) npm (node.js와 함께 설치)

NPM (Node Package Manager)
전 세계 개발자들이 만든 다양한 기능 (패키지, 모듈)들을 프로젝트에 설치하고 관리할때 사용

이전 플젝에서 원시적으로 연결
최근에는 프로젝트에 직접 설치해서 별도의 가공처리를 거쳐서 결과물로 만들고 웹사이트로 동작!

플러그인 등의 기능들을 링크와 스크립트 태그로 외부에서 가져와서 연결

reset min css
google material icon
loadash
gsap
swiper

but 트레이트 오프(trade-off) 있음

  • 장: 활용방법등을 공부해야해서 학습난도가 높아짐
  • 단: 관리효율증가, 손쉬운 기능 고도화, 적은시간에 복잡한 기능 플젝 추가

npm으로 프로젝트 생성

npm init -y   // package.json 생성
npm install parcel-bundler -D  
// parcel-bundler라는 패키지 설치

parcel bundler
1) node modules 생성
node-modules 폴더 생성 (중간에 parcel-bundler도 확인가능)
nodemodules안 모두 패키지임
parcel bundler가 실행할때 필요한 것들

2) package-lock.json 생성
package.json에 명시된 모듈들이 내부적으로 사용하는 모듈들 정보
자동으로 관리되는 파일


npm install lodash  (D플러그 없이 설치)

package.json

1) devDependencies
설치된 parcel-bundler (-D)
어떤 패키지 사용하는지 여기서 확인가능

2)dependencies
설치된 lodash (-D 없이)

차이점 (-D)
O : 개발용 의존성 패키지 설치 (웹브라우저 동작할때는 필요 X)
X : 웹브라우저에서도 동작 가능

npm install (= npm i)

한 번 설치한 패키지는 내역에 남게되고
내역 바탕으로 실제 패키지 지우더라도 다시 npm i통해 해당 패키지 설치가능

profile
Back-end-dev

0개의 댓글