✒️Node.js
Node.js 란?
: 크롬 v8 js 엔진으로 build된 JavaScript 런타임 (프로그래밍 언어가 동작하는 환경)
- 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 별도의 소프트웨어 없이 동작하는 것이 가능하다.
⇒ 웹 브라우저에서만 동작하는 언어인 JS를 브라우저로부터 독립시킨 것!!
⇒ JS 한가지 언어로 전체 웹 페이지를 만들 수 있게 된 것!!
- 서버 실행뿐만 아니라 다양한 자바스크립트 애플리케이션을 실행할 수 있다 (babel, sass,ejs등)
✒️npm
npm 이란?
Node Package Manager의 약자로 누군가 올려둔 패키지(모듈, 기능)를 다운 받아서 사용할 수 있다. (like app store)
npm을 통해서 다양한 모듈을 다운받아 node 환경에서 일종의 확장프로그램을 사용할 수 있는 것이죠.
🔎 모듈 설치하고 활용해보기
모듈을 다운받기 이전에 터미널에서 $ npm init 을 통해 설치된 패키지 목록을 관리할 수 있는 package.json 파일을 생성해줍니다.
그 후, npm i parcel-bundler -D 와 npm i lodash 를 터미널에 입력해서
자바스크립트 파일들을 최적화, 압축하여 하나 혹은 여러개의 static 파일로 빌드해주는 컴파일러 "bundler",
객체, 배열 등 데이터 구조를 변환하여 다룰 때 유용한 라이브러리인 "lodash"를 예시로 설치합니다.
여기서 -D 플래그는 개발용 의존성 패키지 설치 즉, 개발할 때만 필요한 패키지를 다운 받을 때 넣어줍니다.
flag -D : 개발용 의존성 패키지 설치 | 개발할 때만 필요한 패키지
=> package.json 에서 "devDependencies" 에 분류됨.
no-flag : 일반 의존성 설치 | 웹 브라우저에서도 동작할 수 있는 패키지
=> package.json 에서 dependencies 에 분류됨.
간단한 사용 예시로
[ parcel-bundler ]
{
.....생략
"scripts": {
"dev": "parcel index.html"
// dev 라는 명령어로 index.html 파일을 js언어로 parcel 한다.
// $ npm run dev를 터미널에 입력하면, 서버를 열어서 볼 수 있음.
// $ npm start를 직접 설정해준 셈
},
...생략
//개발용
"devDependencies": {
"parcel-bundler": "^1.12.5" // 설치 버전
},
// 웹브라우저에서도 사용
"dependencies": {
"lodash": "^4.17.21"
}
}[ lodash ]
import _ from "lodash";
// package.js 에서 _ 라는 변수로 불러와서 저장
console.log(_.camelCase("hello world"));
// _라고 저장된 lodash 내장함수 중에 카멜케이스를 가져와 실행🔎 bundler를 이용해 build 하기
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html" //추가
}, 터미널에 $ npm run build 하면 build 파일 (여기선 dist) 생깁니다.
bundle 은 우리가 프로젝트 개발에 사용한 여러 모듈(패키지)을 하나로 묶어내는 작업을 말하는데요.
parcel-bundler를 사용해서 번들 작업을 거치면, 프로젝트에 사용한 모든 모듈을 포함한 새로운 index.html, main.js 등 웹 브라우저에서 동작할 수 있는 파일을 만들어 줍니다.
이 파일만 제공해주면 웹 브라우저에서 출력해서 사용할 수 있게 됩니다!
🔎.gitignore
위에 나온 모든 모듈들을 git hub 버전관리할 필요는 없습니다. .gitigonre 파일을 만들고 이곳에 작성한 폴더들은 버전 관리에서 제외됩니다.
.cache/
dist/
node_modules/작성 후 터미널에 $ git init 을 해주면, ignore 설정해 둔 파일들이 회색으로 보이고, git hub 의 pull, push 항목에서 제외됩니다.
Ref : https://hanamon.kr/nodejs-개념-이해하기/
썸네일 :(https://velog.velcdn.com/images/imzzuu/post/0781c6ac-6f18-40aa-8aab-df7646d829b6/image.png)
