node.js

odada·2023년 8월 11일

node.js

목록 보기

3/11

node.js 란?

Chrome V8 Javascript 엔진으로 빌드된 JavaScript 런타임으로
자바스크립트를 브라우저 밖에서도 사용할 수 있게 해주는 런타임 환경이다.

Chrome V8 Javascript 엔진 : 자바스크립트의 문법을 해석하고 동작시켜줄 수 있는 엔진
JavaScript 런타임 : 자바스크립트 언어가 동작하는 환경

쉽게 말해 node.js를 사용해 브라우저 및 컴퓨터를 제어할 수 있다.

프론트앤드가 node.js를 알아야 하는 이유

컴퓨터에서 제어하기 위한 용도는 아니지만 웹페이지를 개발하기 위한 도움을 받는 용도로 사용한다.
html, css, js 만으로 웹사이트 개발을 할 순 있지만 그 과정이 약간 비효율적이다.
개발을 도와주는 여러가지 모듈들을 도움을 받으면 효율적으로 작업이 가능하다.
하지만 이런 모듈들은 브라우저에서 직접적으로 동작이 어렵기 때문에
node.js 환경에서 도움을 받아 html, css, js로 변환 작업을 해야 한다.
컴퓨터에서 변환작업 명령을 주고 명령을 받는 환경이 필요하고
node.js 환경에서 자바스크립트의 프로그래밍 언어로 변환 작업을 할 수 있다.
학습 난이도 증가하고 구성이 복잡하지만 공부해야 하는 이유는...
관리 효율이 증가하고 손쉽게 기능의 고도화가 가능하다.

node.js 설치

https://nodejs.org/ko

LTS(Long Term Support) : 장기적으로 안정되고 신뢰도가 높은 지원이 보장되는 버전으로 유지/보수, 보안(서버 운영) 등 대부분의 사용자에게 추천되는 버전
일정은 여기서 확인하세요.
https://github.com/nodejs/release#release-schedule

vscode에서 설치 확인하기

vscode > terminal 열기

node -v // v18.11.0

npm

npm 이란?

NPM(Node Package Manager)은 Node.js 패키지 관리자로
Node.js 애플리케이션 개발 시 필요한 다양한 패키지와 모듈을 쉽게 설치, 관리, 공유할 수 있게 도와줍니다.

package
Modules
기존 스타일
link, script tag로 연결하여 작동 시킴

버전 확인

npm -v // 8.19.2

터미널 지우기
macOS : cmd + K
window : clear ( or cls)

npm 프로젝트 시작하기

1. package.json 생성

// package.json 파일 생성
npm init 

// 질문없이 package.json 자동 생성
npm init -y

2. package 설치

swiper (배포용)

npm install swiper

// 축약형
npm i swiper

parcel (개발용)

고도화된 개발을 하기 위해 로컬 서버를 돌릴 수 있도록 도와주는 모듈

parcel은 개발시에만 사용하고 웹브라우저에서 동작하는 패키지가 아니기 때문에
--save-dev라는 플래그를 붙여서 개발할 때만 사용하는 용도를 명시해야 한다.

// --save-dev 플래그의 위치는 앞과 뒤 모두 가능
npm install parcel --save-dev
npm install --save-dev parcel

// 축약형
// -D 소문자 안돼
npm i -D parcel

parcel bundler는 동작하기 위해 의존하고 있는 다른 패키지들이 함께 설치된다.

3. package 사용하기

index.html 생성 후

// package.json
{
  // "main": "index.js" 는 삭제
  "scripts": {
    "dev": "parcel ./index.html",
    // 터미널에서 개발서버를 오픈할 수 있도록 스크립트에 등록
    "build": "parcel build ./index.html"
    // 실제 제품용 동작
  },      
}