1. Express

키워드

• Express 란

• URL 구조

• REST API

• HTTP Method(CRUD)

Express

Node.js 웹 애플리케이션 프레임워크

Node.js

• V8엔진으로 빌드된 자바스크립트 런타임

  • 런타임 : 특정 언어로 만든 프로그램을 실행할 수 있는 환경

• 다양한 자바스크립트 애플리케이션을 실행할 수 있게 해줌(주로 서버를 실행)

Express

• Node.js에서 효율적으로 웹 애플리케이션을 개발할 수 있도록 도와주는 프레임워크

• HTTP 유틸리티 메소드 및 미들웨어로 쉽고 빠르게 API를 작성할 수 있음

ts-node

.ts 파일을 따로 컴파일하지 않고 node.js에서 타입스크립트를 실행하는 도구

Express 환경 설정

mkdir express-demo-app
cd mkdir express-demo-app

.gitignore 세팅

touch .gitignore
echo "/node_modules/" > .gitignore

패키지 초기화

npm init -y

TypeScript

npm i -D typescript
npx tsc --init

ESLint

npm i -D eslint
npx eslint --init

ts-node

npm init -y

Express 설치

npm i express
npm i -D @types/express

Hello World 예제

app.ts http://localhost:3000/으로 GET요청이 들어오면 Hello, world!를 응답

import express from 'express';

const port = 3000;

const app = express();

app.get('/', (req, res) => {
  res.send('Hello, world!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

ts-node로 실행

npx ts-node app.ts

코드 수정시 자동으로 반영되도록 nodemon 사용

npm i -D nodemon
npx nodemon app.ts

package.json script 세팅

  "scripts": {
    "start": "npx nodemon app.ts",
    "lint": "eslint --fix ."
  },

REST API

• URI는 정보의 자원을 표현

  • /write-post 처럼 동작을 표현하지 않고 /post 처럼 자원만 명시

• 자원에 대한 행위는 HTTP Method로 표현(GET, POST, PUT, DELETE)

  • Collection(복수)과 Item(Element)(단수)로 나뉨

  • Read (Collection) → GET /products ⇒ 상품 목록 확인

  • Read (Item) → GET /products/{id} ⇒ 특정 상품 정보 확인

  • Create (Collection Pattern 활용) → POST /products ⇒ 상품 추가 (JSON 정보 함께 전달)

  • Update (Item) → PUT 또는 PATCH /products/{id} ⇒ 특정 상품 정보 변경 (JSON 정보 함께 전달)

  • Delete (Item) → DELETE /products/{id} ⇒ 특정 상품 삭제

Thinking in React 예제

app.get('/products', (req, res) => {

  const products = [
    {
      category: 'Fruits', price: '$1', stocked: true, name: 'Apple',
    },
    {
      category: 'Fruits', price: '$1', stocked: true, name: 'Dragonfruit',
    },
    {
      category: 'Fruits', price: '$2', stocked: false, name: 'Passionfruit',
    },
    {
      category: 'Vegetables', price: '$2', stocked: true, name: 'Spinach',
    },
    {
      category: 'Vegetables', price: '$4', stocked: false, name: 'Pumpkin',
    },
    {
      category: 'Vegetables', price: '$1', stocked: true, name: 'Peas',
    },
    ];

  res.send({ products });
});

http://localhost:3000/products 접속하여 확인

CommandLine으로 확인

curl localhost:3000/products

http localhost:3000/products