๐ŸŒ Express ํ”„๋ ˆ์ž„์›Œํฌ & ๋ฏธ๋“ค์›จ์–ด

์ง€์€ยท2022๋…„ 10์›” 14์ผ
0

Node.js Library

๋ชฉ๋ก ๋ณด๊ธฐ
7/14
post-thumbnail

Express ํ”„๋ ˆ์ž„์›Œํฌ

: Node.js ํ™˜๊ฒฝ์—์„œ ์›น ์„œ๋ฒ„ ๋˜๋Š” API ์„œ๋ฒ„๋ฅผ ์ œ์ž‘ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ
Express๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด, HTTP ๋ชจ๋“ˆ๋ณด๋‹ค ํ›จ์”ฌ ๋” ๊ฐ„๋‹จํ•˜๊ฒŒ ์›น ์„œ๋ฒ„๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.

Express๋กœ ๊ตฌํ˜„ํ•œ ์„œ๋ฒ„๊ฐ€ HTTP ๋ชจ๋“ˆ๋กœ ์ž‘์„ฑํ•œ ์„œ๋ฒ„์™€ ๋‹ค๋ฅธ ์ 

  1. ๋ฏธ๋“ค์›จ์–ด๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค.
  2. ๋ผ์šฐํ„ฐ๋ฅผ ์ œ๊ณตํ•œ๋‹ค.

Express ์„ค์น˜

npm install express

์„œ๋ฒ„ ์ƒ์„ฑํ•˜๊ธฐ

const express = require('express'); // Express ๋ชจ๋“ˆ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
const app = express();              // ์„œ๋ฒ„ ์‹คํ–‰
const port = 3000;                  // ํฌํŠธ ๋ฒˆํ˜ธ ์„ค์ •

์„œ๋ฒ„ ์‹คํ–‰ํ•˜๊ธฐ

app.listen()

app.listen(port, () => {
  console.log(`Server is Running on port ${port}`);
  // Server is Running on port 3000
});

๋ผ์šฐํŒ…

: ํด๋ผ์ด์–ธํŠธ ์š”์ฒญ์˜ HTTP ๋ฉ”์†Œ๋“œ์™€ ์—”๋“œํฌ์ธํŠธ(URI)์— ๋”ฐ๋ผ ์„œ๋ฒ„๊ฐ€ ์‘๋‹ตํ•˜๋Š” ๋ฐฉ์‹์„ ๊ฒฐ์ •ํ•˜๋Š” ๊ฒƒ

Express ๋ผ์šฐํŒ…

app.METHOD('/path', ํ•ธ๋“ค๋Ÿฌ ํ•จ์ˆ˜)

  • ๊ฐ ๋ผ์šฐํŠธ๋Š” ํ•˜๋‚˜ ์ด์ƒ์˜ ํ•ธ๋“ค๋Ÿฌ ํ•จ์ˆ˜๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋ผ์šฐํŠธ๊ฐ€ ์ผ์น˜ํ•  ๋•Œ ์ด ํ•ธ๋“ค๋Ÿฌ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋œ๋‹ค.
  • ๋ผ์šฐํŠธ ์ •์˜ํ•˜๋Š” ๋ฒ• : app.METHOD('/path', ํ•ธ๋“ค๋Ÿฌ ํ•จ์ˆ˜)
// ํ™ˆํŽ˜์ด์ง€(๋ฃจํŠธ ๋ผ์šฐํŠธ)์—์„œ 'Hello World!'๋ผ๊ณ  ์‘๋‹ต
app.get('/', (request, response) => {
  response.send('Hello World!');
});

// ํ™ˆํŽ˜์ด์ง€(๋ฃจํŠธ ๋ผ์šฐํŠธ)์—์„œ POST ์š”์ฒญ์— ์‘๋‹ต
app.post('/', (request, response) => {
  response.send('Got a POST request');
});

// /user ๋ผ์šฐํŠธ์—์„œ PUT ์š”์ฒญ์— ์‘๋‹ต
app.put('/user', (request, response) => {
  response.send('Got a PUT request at /user');
});

// /user ๋ผ์šฐํŠธ์—์„œ DELETE ์š”์ฒญ์— ์‘๋‹ต
app.delete('/user', (request, response) => {
  response.send('Got a DELETE request at /user');
});

Hello World ์˜ˆ์ œ

const express = require('express');
const app = express();
const port = 3000;

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

app.listen(port, () => {
  console.log(`Server is Running on port ${port}`);
});
  • ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ์„œ๋ฒ„๋ฅผ ์‹คํ–‰ํ•˜๊ณ , 3000๋ฒˆ ํฌํŠธ์—์„œ ์—ฐ๊ฒฐํ•œ๋‹ค.
  • ๋ฃจํŠธ URL(/)์˜ ์š”์ฒญ์— 'Hello World!'๋กœ ์‘๋‹ตํ•œ๋‹ค.
    ๋‹ค๋ฅธ ๋ชจ๋“  ๊ฒฝ๋กœ์— ๋Œ€ํ•ด์„œ๋Š” 404 Not Found๋กœ ์‘๋‹ตํ•œ๋‹ค.

๋ฏธ๋“ค์›จ์–ด (Middleware)

Middleware functions are functions that have access to the request object (req), the response object (res), and the next function in the applicationโ€™s request-response cycle.
Express - Writing middleware

: ๋ฏธ๋“ค์›จ์–ด ํ•จ์ˆ˜๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์š”์ฒญ-์‘๋‹ต ์‚ฌ์ดํด ์•ˆ์—์„œ request ๊ฐ์ฒด, response ๊ฐ์ฒด, ๊ทธ๋ฆฌ๊ณ  next() ํ•จ์ˆ˜์— ๋Œ€ํ•ด ๊ถŒํ•œ์„ ๊ฐ–๋Š” ํ•จ์ˆ˜์ด๋‹ค.

์ฆ‰, ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ์š”์ฒญ์„ ๋ฐ›๊ณ , ์‘๋‹ต์„ ๋ณด๋‚ด๊ธฐ ์ „๊นŒ์ง€ ์š”์ฒญ๊ณผ ์‘๋‹ต์„ ๋ชฉ์ ์— ๋งž๊ฒŒ ๊ฐ€๊ณตํ•˜๋ฉฐ, ๊ฑฐ์ณ๊ฐ€๋Š” ํ•จ์ˆ˜๋“ค์„ ๋งํ•œ๋‹ค.

๋ฏธ๋“ค์›จ์–ด ์ฒด์ด๋‹

ํ˜„์žฌ ๋ฏธ๋“ค์›จ์–ด ํ•จ์ˆ˜๊ฐ€ ์‘๋‹ต์„ ์ข…๋ฃŒํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ์—๋Š”, ๋ฐ˜๋“œ์‹œ next()๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ๋‹ค์Œ ๋ฏธ๋“ค์›จ์–ด ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋„๋ก ํ•ด์•ผ ํ•œ๋‹ค.

๋ฏธ๋“ค์›จ์–ด ์‚ฌ์šฉ์˜ ์žฅ์ 

  • ์„œ๋ฒ„๊ฐ€ ํ•ด๋‹น ์š”์ฒญ์— ๋Œ€ํ•ด ์ž‘๋™ํ•˜๊ธฐ ์ „์— ์š”์ฒญ ๊ฐ์ฒด๋ฅผ ์—ฌ๋Ÿฌ๋ฒˆ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ๋ฏธ๋“ค์›จ์–ด๋ฅผ ์‚ฌ์šฉํ•ด ๋กœ๊ทธ์ธ ๋ฐ ์ธ์ฆ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ๋ฏธ๋“ค์›จ์–ด๋Š” ํด๋ผ์ด์–ธํŠธ ์ธก ๋ Œ๋”๋ง ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚จ๋‹ค.
  • ๋ฏธ๋“ค์›จ์–ด๋ฅผ ์ด์šฉํ•ด ํŠน์ • HTTP ํ—ค๋”๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ๋ฏธ๋“ค์›จ์–ด๋Š” ์ตœ์ ํ™” ๋ฐ ์„ฑ๋Šฅ ํ–ฅ์ƒ์— ๋„์›€์ด ๋œ๋‹ค.

๋ฏธ๋“ค์›จ์–ด๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ƒํ™ฉ

๋ฏธ๋“ค์›จ์–ด๋ฅผ ์ด์šฉํ•˜๋ฉด Node.js๋งŒ์œผ๋กœ ๊ตฌํ˜„ํ•œ ์„œ๋ฒ„์—์„œ๋Š” ๋ฒˆ๊ฑฐ๋กœ์šธ ์ˆ˜ ์žˆ๋Š” ์ž‘์—…์„ ๋ณด๋‹ค ์‰ฝ๊ณ  ๊ฐ„๋‹จํ•˜๊ฒŒ ์ž‘์—…ํ•  ์ˆ˜ ์žˆ๋‹ค.
์•„๋ž˜์—์„œ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ๋ฏธ๋“ค์›จ์–ด์™€ ํ•ด๋‹น ๋ฏธ๋“ค์›จ์–ด๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ƒํ™ฉ์„ ์†Œ๊ฐœํ•œ๋‹ค.

1. POST ์š”์ฒญ์— ํฌํ•จ๋œ body(payload)๋ฅผ ๊ตฌ์กฐํ™”ํ•  ๋•Œ

Node.js๋กœ๋งŒ ๊ตฌํ˜„ํ•œ ์„œ๋ฒ„์—์„œ๋Š” HTTP ์š”์ฒญ์˜ body(payload)๋ฅผ ๋ฐ›์„ ๋•Œ ๋‹ค์†Œ ๋ณต์žกํ•œ ๋ฐฉ์‹์œผ๋กœ body๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.
์š”์ฒญ body(payload)๋ฅผ chunck๋กœ ๋ฐ›์•„ Buffer์— ํ•ฉ์น˜๊ณ , Buffer๋ฅผ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ์ž‘์—…์ด ํ•„์š”ํ•˜๋‹ค.

let body = [];
request.on('data', (chunck) => {
  body.push(chunck);
}).on('end', () => {
  body = Buffer.concat(body).toString();
});

โžก๏ธ body-parser ๋ฏธ๋“ค์›จ์–ด๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ด ๊ณผ์ •์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค.

body-parser ๋ฏธ๋“ค์›จ์–ด

: Node.js์—์„œ ์š”์ฒญ body๋ฅผ ํŒŒ์‹ฑํ•ด์ฃผ๋Š” ๋ฏธ๋“ค์›จ์–ด๋กœ 4 ๊ฐ€์ง€์˜ parser๋ฅผ ์ œ๊ณตํ•œ๋‹ค.

const express = require('express');
// ์ƒ๋žต
app.use(express.json());

body parser ๋ฏธ๋“ค์›จ์–ด์— ๋Œ€ํ•ด ์ •๋ฆฌํ•œ ๊ธ€


2. ๋ชจ๋“  ์š”์ฒญ/์‘๋‹ต์— CORS ํ—ค๋”๋ฅผ ๋ถ™์ผ ๋•Œ

Node.js์—์„œ HTTP ๋ชจ๋“ˆ์„ ์ด์šฉํ•œ ์ฝ”๋“œ์—์„œ CORS ํ—ค๋”๋ฅผ ๋ถ™์ด๋ ค๋ฉด, ์‘๋‹ต ๊ฐ์ฒด์˜ writeHead() ๋ฉ”์†Œ๋“œ๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
ํžˆ์ง€๋งŒ ๋ชจ๋“  ๋ผ์šฐํŒ…๋งˆ๋‹ค ํ—ค๋”๋ฅผ ๋งค๋ฒˆ ๋„ฃ์–ด์ฃผ์–ด์•ผ ํ•˜๊ณ , OPTIONS ๋ฉ”์†Œ๋“œ์— ๋Œ€ํ•œ ๋ผ์šฐํŒ…๋„ ๋”ฐ๋กœ ๊ตฌํ˜„ํ•ด์•ผ ํ•œ๋‹ค.

const defaultCorsHeader = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, Accept',
  'Access-Control-Max-Age': 10
};

// ์ƒ๋žต
if (req.method === 'OPTIONS') {
  res.writeHead(201, defaultCorsHeader); // writeHead ๋ฉ”์†Œ๋“œ ์ด์šฉํ•ด์„œ ํ—ค๋” ์ž‘์„ฑ
  res.end()
}

โžก๏ธ cors ๋ฏธ๋“ค์›จ์–ด๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ด ๊ณผ์ •์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค.

cors ๋ฏธ๋“ค์›จ์–ด

: ๋‹ค์–‘ํ•œ ์˜ต์…˜์œผ๋กœ CORS๋ฅผ ํ—ˆ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋•๋Š” ๋ฏธ๋“ค์›จ์–ด

cors (๊ณต์‹ ๋ฌธ์„œ)

์„ค์น˜

npm install cors

๋ชจ๋“  ์š”์ฒญ์— ๋Œ€ํ•ด CORS๋ฅผ ํ—ˆ์šฉ

const cors = require('cors'); // cors ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
// ์ƒ๋žต
app.use(cors());

ํŠน์ • ์š”์ฒญ์— ๋Œ€ํ•ด์„œ๋งŒ CORS ํ—ˆ์šฉ

const cors = require('cors');
// ์ƒ๋žต
app.get('/products/:id', cors(), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for a Single Route'})
}); // ๋‘๋ฒˆ์งธ ์ „๋‹ฌ์ธ์ž๋กœ cors()๋ฅผ ์ „๋‹ฌํ•œ๋‹ค.

3. ๋ชจ๋“  ์š”์ฒญ์— ๋Œ€ํ•ด ๋ฉ”์†Œ๋“œ์™€ url์„ ํ™•์ธํ•  ๋•Œ

๋ฏธ๋“ค์›จ์–ด๋Š” ๋ง ๊ทธ๋Œ€๋กœ ํ”„๋กœ์„ธ์Šค ์ค‘๊ฐ„์— ๊ด€์—ฌํ•˜์—ฌ ํŠน์ •ํ•œ ์—ญํ• ์„ ์ˆ˜ํ–‰ํ•œ๋‹ค.
๋กœ๊ฑฐ(logger)๋Š” ๋””๋ฒ„๊น…์ด๋‚˜ ์„œ๋ฒ„ ๊ด€๋ฆฌ์— ๋„์›€์„ ์ฃผ๊ธฐ ์œ„ํ•ด console.log()๋กœ ์ ์ ˆํ•œ ๋ฐ์ดํ„ฐ๋‚˜ ์ •๋ณด๋ฅผ ์ถœ๋ ฅํ•œ๋‹ค.

๋ฐ์ดํ„ฐ๊ฐ€ ์—ฌ๋Ÿฌ ๋ฏธ๋“ค์›จ์–ด๋ฅผ ๊ฑฐ์น˜๋Š” ๋™์•ˆ, ๋ฏธ๋“ค์›จ์–ด ์‚ฌ์ด ์‚ฌ์ด์— ๋กœ๊ฑฐ๋ฅผ ์‚ฝ์ž…ํ•˜์—ฌ ํ˜„์žฌ ๋ฐ์ดํ„ฐ๋ฅผ ํ™•์ธํ•˜๊ณ  ๋””๋ฒ„๊น…์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

1) ํŠน์ • ์š”์ฒญ์— ๋ฏธ๋“ค์›จ์–ด ์ ์šฉ

ํŠน์ • ์š”์ฒญ์— ๋ฏธ๋“ค์›จ์–ด๋ฅผ ์ ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด, ๋‘ ๋ฒˆ์งธ ์ „๋‹ฌ์ธ์ž๋กœ ๋ฏธ๋“ค์›จ์–ด ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌํ•œ๋‹ค.

  • ์•„๋ž˜ ๊ทธ๋ฆผ์€ ์—”๋“œํฌ์ธํŠธ๊ฐ€ /์ด๋ฉด์„œ ํด๋ผ์ด์–ธํŠธ๋กœ๋ถ€ํ„ฐ GET ์š”์ฒญ์„ ๋ฐ›์•˜์„ ๋•Œ ์ ์šฉ๋˜๋Š” ๋ฏธ๋“ค์›จ์–ด์ด๋‹ค.

2) ๋ชจ๋“  ์š”์ฒญ์— ๋ฏธ๋“ค์›จ์–ด ์ ์šฉ

๋ชจ๋“  ์š”์ฒญ์— ๋™์ผํ•œ ๋ฏธ๋“ค์›จ์–ด๋ฅผ ์ ์šฉํ•˜๋ ค๋ฉด app.use()๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

  • ์•„๋ž˜ ์ฝ”๋“œ๋Š” ๋ชจ๋“  ์š”์ฒญ์— ๋Œ€ํ•ด myLogger ๋ฏธ๋“ค์›จ์–ด๋ฅผ ์ ์šฉํ•˜๋Š” ์ฝ”๋“œ์ด๋‹ค.
const express = require('express');
const app = express();

const myLogger = (req, res, next) => {
  console.log('LOGGED');
  next();
};

app.use(myLogger); // ๋ชจ๋“  ์š”์ฒญ์— myLogger ๋ฏธ๋“ค์›จ์–ด๋ฅผ ์‹คํ–‰ํ•œ๋‹ค.

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

app.listen(3000);
  • ๋ชจ๋“  ์š”์ฒญ์— ๋Œ€ํ•ด ๋ฉ”์†Œ๋“œ์™€ url์„ ์ถœ๋ ฅํ•˜๋Š” ๋ฏธ๋“ค์›จ์–ด
// ์ƒ๋žต
const printMethodAndUrl = (req, res, next) => {
  console.log(`http request method is ${req.method}, url is ${req.url}`);
  next();
}

app.use(printMethodAndUrl);
// ์ƒ๋žต

4. ์š”์ฒญ ํ—ค๋”์— ์‚ฌ์šฉ์ž ์ธ์ฆ ์ •๋ณด๊ฐ€ ๋‹ด๊ฒจ์žˆ๋Š”์ง€ ํ™•์ธํ•  ๋•Œ

๋ฏธ๋“ค์›จ์–ด๋ฅผ ์ด์šฉํ•ด HTTP ์š”์ฒญ์—์„œ ํ† ํฐ์ด ์žˆ๋Š”์ง€ ํŒ๋‹จํ•˜์—ฌ ์ด๋ฏธ ๋กœ๊ทธ์ธํ•œ ์‚ฌ์šฉ์ž์ผ ๊ฒฝ์šฐ ์„ฑ๊ณต, ์•„๋‹ ๊ฒฝ์šฐ ์—๋Ÿฌ๋ฅผ ๋ณด๋‚ผ ์ˆ˜ ์žˆ๋‹ค.

  • ํ† ํฐ์„ ํ†ตํ•ด ๋กœ๊ทธ์ธ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•˜๋Š” ๋ฏธ๋“ค์›จ์–ด
app.use((req, res, next) => {
  if(req.headers.token) {
    req.isLoggedIn = true;
    next();
    } else {
      res.status(400).send('invalid user');
    }
});

์ด ๊ธ€์€ ์•„๋ž˜ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ์ž‘์„ฑํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.
https://www.geeksforgeeks.org/middleware-in-express-js/

profile
๋ธ”๋กœ๊ทธ ์ด์ „ -> https://janechun.tistory.com

1๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2024๋…„ 8์›” 20์ผ

Hello World ์˜ˆ์ œ์—์„œ res.send์— h1ํƒœ๊ทธ๋Š” ์‹ฑ๊ธ€ ์ฟผํ…Œ์ด์…˜ ์•ˆ์œผ๋กœ ๋“ค์–ด๊ฐ€์•ผ ํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ