Express.js

ryusudol·2024년 1월 28일
express.js
post-thumbnail

1. Express.js

1-1. Express.js 설치와 실행

Express.js란?

  • Express.js는 Node.js 기반 Web Application Framework
  • Node.js의 http 모듈과 Connect 컴포넌트를 이용하여 제작한 Framework

Express.js 설치 방법

  • npm install express로 현재 디렉토리에 express 패키지 설치 → 기존에는 --save를 입력했는데 지금은 default라 입력할 필요 X → -g 태그를 추가하면 global 하게 설치되어 컴퓨터 전역에서 사용 가능하지만 주로 local에 설치

Express.js 실행 방법

  • 서버 파일 작성 후 node <filename>.js 커맨드 입력하여 실행

1-2. Routing

라우팅

app.METHOD(PATH, HANDLER)
  • app: express 인스턴스
  • METHOD: HTTP Method
    GET
    POST
    PUT
    DELETE
  • PATH: 서버에서의 경로
  • HANDLER: Route가 일치할 때 실행되는 Middleware 함수

예시 코드

const express = require("express");
// app 변수는 express 인스턴스
const app = express();

// METHOD로 HTTP Method 구분
app.get("/", (req, res) => {
	res.send("Welcome :)");
});

app.post("/user", (req, res) => {
	res.send("User successfully added . . .");
});

app.put("/article", (req, res) => {
	res.send("Article successfully changed . . .");
});

app.put("/user", (req, res) => {
	res.send("User successfully deleted . . .");
});

app.listen(8080, () => console.log("Server is listening to 8080 . . ."))

1-3. JSON

JSON이란?

  • JavaScript Object Notation
  • JavaScript에서 컴퓨터 간 데이터 통신을 위해 ‘Douglas Crockford’가 고안
  • 현재는 JavaScript 뿐만 아니라 거의 모든 프로그래밍 언어에서 데이터 통신을 위한 기본 규약으로 사용 中
// JSON 데이터의 기본 구조
{
	key: value
}

// 예시
{
	id: 1
	name: "Bill Gates",
	height: 177,
	assets: 108_000_000_000,
	spouse: {
		id: 2,
		name: "Melinda French Gates",
		height: 168,
		assets: 11_100_000_000,
	},
	chilren: {
		...
	}
}

1-4. Middleware

(Web Application에서) Middleware란?

  • request와 response 주기 사이에 사용자 정의 코드를 삽입할 수 있도록 하는 소프트웨어
  • Middleware는 반드시 response를 반환하거나 next 함수로 다음 Middleware로 결과값을 전달해줘야 함
    • response 반환이나 next 함수를 호출하지 않으면 해당 요청은 정지된 채로 방치됨
    • next(); -> 바로 다음 Middleware 함수 실행
    • next(”route”); → Route가 있는 다음 Middleware 실행
  • Express.js에서 Middleware는 HANDLER 함수나 express 인스턴스의 use 메소드에서 사용됨
    app.get("/my/path", (req, res, next) => {
	console.log("🐓");
	next();
});

app.use((req, res, next) => {
	console.log("🥚");
	next();
});

app.use((req, res, next) => {
	console.log("🐣");
	res.send("Finished . . .");
});

// 🐓 -> 🥚 -> 🐣

Callback vs Middleware

Callback: 다른 code 덩어리에 파라미터로 전달되는 실행가능한 code 덩어리

Middleware: request와 response 사이에서 사용자 정의 작업 수행

Middleware 사용 예시

const express = require("express");
const app = express();

const myFn = (req, res, next) => {
	console.log("Middleware here ~");
	next();
}

app.use(myFn);

app.get("/", (req, res, next) => {
	res.send("Response from the server . . .");
});

결론

❗ Request와 Response 로직 사이에서 사용자 정의 로직을 구현하고 싶은 경우 Middleware 활용

1-5. Error Handling

  • Error Handling Middleware는 파라미터 4개를 받음
app.use((err, req, res, next) => {
	console.error(err);
	res.status(500).send("Something is wrong . . .");
});
  • Error Handling Middleware는 app.use와 모든 Route 호출을 정의한 후 제일 마지막에 정의
app.get("/", (req, res) => {
	res.status(200);
	res.send("Welcome :)");
});

app.use((req, res, next) => {
	console.log("I'm Middleware");
	next();
});

app.use((err, req, res, next) => {
	console.error(err);
	res.status(500).send("Something is wrong . . .");
});
  • Error Handling Middleware는 response를 HTML 오류 페이지, JSON 문자열, 단순 오류 메시지 등 사용자가 원하는 형식 가능
  • 여러 Error Handling Middleware 정의 가능
app.use((req, res, next) => {
	console.log("🤖 Middleware");
	next();
});

// 여러 Error Handling Middleware 정의
app.use(logErrors);
app.use(clientErrorHandler);
app.use(errorHandler);

const logErrors = (err, req, res, next) => {
	console.error(err.stack);
	next(err);
}

const clientErrorHandler = (err, req, res, next) => {
  if (req.xhr)
    res.status(500).send({ error: 'Something failed!' });
  else
		next(err);
}

const errorHandler = (err, req, res, next) => {
  res.status(500);
  res.render('error', { error: err });
}
  • next() 함수에 파라미터로 ‘route’가 아닌 값이 전달되면 해당 요청에 Error가 있다고 간주하고, Error Handling과 관련없는 Route 및 Middleware는 건너뜀

2. npm & package.json & 모듈

2-1. npm

npm이란?

  • Node Package Manager → 세상에서 가장 큰 소프트웨어 저장소
  • Node.js 설치 시 npm도 함께 설치
  • Node.js 상에서 동작하는 JavaScript 모듈 다운로드 가능

Command

  • npm init
    • 해당 directory를 npm으로 초기화
    • Root directory에 package.json 파일 생성
    • npm init -y로 간편하게 초기화 가능
  • npm install
    • npm으로부터 package.json에 명시된 모듈들 다운로드
    • 모듈을 설치하면 node_modules 폴더와 package-lock.json 파일 생성
      • node_modules: 설치한 모듈 모음
      • package-lock.json: 프로젝트에 설치된 dependecy들의 정확한 버전 tree가 기록되어 있어 다른 개발자가 개발환경을 세팅할 때 기존 개발자와 동일한 버전의 패키지 다운로드 가능
  • npm run <keyword>
    • package.json에 정의된 keyword를 실행하여 원하는 작업 가능
    • npm run start, npm run dev, npm run build, …
  • npx
    • npm 5.2 버전부터 기본 패키지로 제공되기 시작
    • create-react-app과 같이 변화가 잦은 Boilder Plate Module 사용 등에 도움됨
    • 항상 최신 버전 모듈이 필요한 경우 사용
  • nvm
    • Node Version Manager
    • Node.js 버전과 함께 npm 버전을 관리 가능
    • nvm ls
      • 현재 디바이스에 설치된 Node.js 및 npm 버전 확인 가능
    • nvm install <version>
      • 특정 버전의 Node.js 및 npm 설치 가능
    • nvm alias default <version>
      • 특정 버전을 default 버전으로 설정 가능

2-2. package.json

package.json 파일이란?

  • 프로젝트 metadata, 패키지 버전과 같은 functional metadata, 의존성 패키지 기록
  • JSON 형식으로 데이터 저장

Version

  • [ major . minor . patch ] → 1.2.3
  • Tilde Range(~) vs Caret Range(^)
    • Tilde Range(~): minor 버전이 명시된 경우 patch level 변경 허용, minor 버전 명시 안 된 경우 minor level 변경 허용
    • Caret Range(^): 버전 표시에서 제일 왼쪽부터 0이 아닌 수를 수정하지 않는 변경은 허용
      • ^1.2.3: 제일 왼쪽부터 0이 아닌 첫 번째 수는 major의 1이므로, major를 제외한 minor와 patch는 변경 가능
      • ^0.1.0: 제일 왼쪽부터 0이 아닌 첫 번째 수는 minor의 1이므로, patch만 변경 가능
      • ^0.0.X: 제일 왼쪽부터 0이 아닌 첫 번째 수는 patch이므로 변경 불가

2-3. 모듈

  • 특정 기능을 담당하는 소프트웨어와 데이터 묶음
  • 많은 사람들이 반복적으로 필요한 기능들을 구현해놓은 경우 多
  • Node.js 모듈의 경우 거의 대부분 npm에서 관리

NestJS
1. Module → 기능 별 코드 묶어서 유지, 관리, 보수 용이하게 함
2. Controller → Routing 담당 및 Service를 import 하여 Controller는 코드가 깔끔
3. Service → 비즈니스 로직 구현

2-4. npm vs yarn & pnpm

yarn이란?

  • 2016년 Meta(구 Facebook) 사에서 React 프로젝트를 진행하면서 느낀 불편함 점들을 개선하기 위해 개발한 package manager

npm과 yarn의 차이

  • npm
    • 필요한 패키지를 하나씩 순차적으로 다운로드
    • 의존성 관계를 가지는 모든 패키지 모듈을 포함 → 보안적으로 취약
    • UI 구림
  • yarn
    • 필요한 패키지들을 동시에 설치하여 다운로드 속도 빠름
    • yarn.lock이나 package.json 파일에 있는 패키지 모듈만 설치 → 보안적으로 우수
    • npm에 비해 UI가 정돈되어 있음

그럼 yarn이 npm 보다 무조건적으로 우수한가?

No. npm도 계속 개선되어 yarn과 다운로드 속도가 비슷하고 보안적 취약성도 많이 개선됨. 그 외 yarn에 비해 npm이 가지는 여러 효율성이 있어 무조건적으로 yarn이 npm보다 우수하지는 X. 보안이 중요한 프로젝트인 경우 yarn 사용 권장됨.

pnpm이란?

  • Performant NPM
  • pnpm으로 패키지 설치 시 pnp-lock.yml이라는 자체 lock 파일 생성
  • ‘content addressable file store’를 이용해 각 패키지마다 hash id를 부여하여 효율적으로 패키지 관리
profile
ryusudol
📜 코딩 공부 기록
이전 포스트

Node.js

다음 포스트

NestJS 기본 개념 1편

0개의 댓글