Express

Express

2023. 2. 2. 15:04ㆍ프로그래밍/JavaScript

Express

Node.js의 API를 단순화하고 유용한 기능들을 추가시켜

Node.js를 더욱 편리하게 사용할 수 있게 해주는 프레임워크

package.json 파일 생성

npm init -y

express 패키지 설치

npm i express

Node.js 진입점 파일 생성 (Server.js)

// Express 모듈 불러오기
const express = require('express');

// Express 서버를 위한 포트 설정
const PORT = 8080;

// 호스트 지정
const HOST = '0.0.0.0';

// 새로운 Express 앱 생성
const app = express();

// '/' 경로로 요청이 오면 Hello World를 결과값으로 전달
app.get('/', (req, res) => {
  res.send('Hello World');
});

// 해당 포트와 호스트에서 HTTP 서버 시작
app.listen(PORT, HOST);

Express 를 사용하면 따로 statusCode와 Content-Type을 명시해주지 않아도 됨

라우트 핸들러 생성

app.get('/users', (req, res) => {
  res.json(users);
});

app.get('/users/:userId', (req, res) => {
  const userId = Number(req.params.userId);
  const user = users[userId];
  if (user) {
    res.status(200).json(user);
  } else {
    res.status(404).json({ error: 'No User Found' });
  }
});

해당 경로로 요청이 들어왔을 경우 콜백 함수 내부의 로직을 실행함

res.json() vs res.send()

외부에서 보기에는 차이가 없지만

내부에서는 res.send()에 object가 들어올 경우 res.json()을 호출함

object를 보낼 때에는 res.json()을 이용하는 것이 직관적임

res.end()

데이터를 제공하지 않고 응답을 종료할 때 사용함

404 페이지에 유용함 (res.status(404).end())

res.json() / res.send() 로 데이터를 보내면 자동으로 종료되기 때문에 res.end()를 사용하지 않아도 됨

Content-Type, ETag 가 없음 (res.send() 에는 있음)

middleware

Express는 라우팅 / 미들웨어 웹 프레임워크임

Express 애플리케이션은 본질적으로 일련의 미들웨어 기능 호출임

미들웨어 기능: 요청 객체(req), 응답 객체(res), next 미들웨어 함수에 접근할 수 있는 기능

// 요청 객체(req), 응답 객체(res), next 미들웨어 함수
app.use((req, res, next) => {
  const start = Date.now();
  console.log(`${req.method} ${req.url}`);
  
  // 다음 미들웨어로 이동
  next();
  
  // 메인 작업을 처리한 후 next() 뒷부분 호출
  const diffTime = Date.now() - start;
  console.log(`${req.method} ${req.baseUrl}${req.url} ${diffTime}ms`);
});

// log

GET /users
// 작업 처리 시간: 7ms
GET /users 7ms

express.json()

// front-end
axios.post('/products', {
  name: 'cat', description: 'It is cute';
});

// back-end
const express = require('express');
const app = express();
app.post('/products', (req, res) => {
  // undefined
  console.log('req.body : ', req.body);
});

post 요청으로 들어오는 body 부분을 받으면 undefined 가 찍힘

bodyParser 모듈을 이용해 해결 가능

express 4.16.0 버전부터는 내장 미들웨어 함수로 bodyPerser 모듈 대체 가능

// front-end
axios.post('/products', {
  name: 'cat', description: 'It is cute';
});

// back-end
const express = require('express');
const app = express();
// express 내장 미들웨어 함수
app.use(express.json());

app.post('/products', (req, res) => {
  console.log('req.body : ', req.body);
});

MVC Pattern

관련 프로그램 로직을 상호 연결된 3개의 요소로 나눔

사용자 인터페이스 개발에 일반적으로 사용되는 소프트웨어 디자인 패턴

소프트웨어의 비즈니스 로직과 화면을 구분하는 데 중점을 둠

Model: 데이터와 비즈니스 로직 관리
View: 레이아웃과 화면 처리
Controller: 명령을 모델과 뷰 부분으로 라우팅 함

MVC 패턴 소스코드

controllers/users.controller.js

const users = require('../models/users.model');

function getUsers(req, res) {
  res.json(users);
}

function getUser(req, res) {
  const userId = Number(req.params.userId);
  const user = users[userId];
  if (user) {
    res.status(200).json(user);
  } else {
    res.status(404).json({ error: 'No User Found' });
  }
}

module.exports = {
  getUsers,
  getUser,
};

models/users.model.js

const users = [
  {id: 0, name: 'Jack'},
  {id: 1, name: 'Jennifer'},
];

module.exports = users;

server.js

const usersController = require('./controllers/users.controller');

...

app.get('/users', usersController.getUsers);
app.get('/users/:userId', usersController.getUser);

Express Router

Router: 클라이언트의 요청 경로에 따라 해당 요청을 처리할 수 있는 곳으로 기능을 전달해주는 것

express.Router()로 생성

routes/users.router.js

const express = require('express');
const usersRouter = express.Router();
const usersController = require('../controllers/users.controller');

usersRouter.get('/', usersController.getUsers);
usersRouter.get('/:userId', usersController.getUser);

module.exports = usersRouter;

server.js

const usersRouter = require('./routes/users.router');

...

app.use('/users', usersRouter);

Express 파일 전송 (res.sendFile())

public/images/cat.jpg 파일 추가

function getPost(req, res) {
  res.sendFile(path.join(__dirname, '..', 'public', 'images', 'cat.jpg'));
}

__dirname: 현재 실행하는 파일의 절대 경로
path.join(): 인수로 전달된 경로들을 이어붙임

express.static()

이미지, CSS파일, JS파일 등

정적 파일을 제공하기 위해 사용하는 내장 미들웨어 기능

public/index.html 생성

<head>
  <title>Document</title>
  <link rel="stylesheet" href="./css/style.css" />
</head>
<body>
  <h1>It is a cat</h1>
  <img src="images/test-image.jpg" alt="cat" />
</body>

public/css/style.css 생성

body {
  font: 14px Arial, sans-serif;
}

img {
  width: 300px;
}

사용 방법

해당 디렉토리에서 정적 파일을 제공함

경로로 접속하여 직접 파일에 접근 가능

app.use(express.static('public'));

http://localhost:3000/images/cat.jpg

http://localhost:3000/css/style.css ...

가상 경로 지정

해당 디렉토리에 대한 마운트 경로를 지정함

이 경로는 실제로 파일 시스템에 존재하지 않음

app.use('/static', express.static('public'));

http://localhost:3000/static/images/cat.jpg

http://localhost:3000/static/css/style.css ...

절대 경로 사용

express.static() 에 제공하는 경로는 노드 프로세스를 시작하는 디렉토리에 상대적임

디렉터리의 절대 경로를 사용하는 것이 안전함

const path = require('path');

app.use('/static', express.static(path.join(__dirname, 'public')));

Template Engine

동적인 결과 데이터를 정적인 파일(HTML)에 담아 줌

Pug, EJS, hbs 등

hbs 설치

npm i hbs

템플릿 엔진을 서버에 등록

server.js

// 특정 엔진을 템플릿 엔진으로 사용하기 위한 설정
app.set('view engine', 'hbs');

// view 파일들이 모여있는 폴더 명시
app.set('views', path.join(__dirname, 'views'));

Template 생성

views/index.hbs

<head>
  <title>Document</title>
  <link rel='stylesheet' href='static/css/style.css' />
</head>
<body>
  <h1>{{imageTitle}}</h1>
  <h2>{{hello}}</h2>
  <img src='static/images/test-image.jpg' alt='cat' />
</body>

이미지 태그의 src 속성에 작성된 static 은 지정한 가상 경로 /static 을 의미함

res.render()

app.get('/', (req, res) => {
  res.render('index', {
    imageTitle: 'It is a cat!',
    hello: 'Hello~',
  });
});

'/' 경로에 접근 시 index.hbs 템플릿을 이용함

템플릿 파일에서 사용하는 변수를 넣어줌

저작자표시 비영리 변경금지

Cotudy Cafe

Cotudy Cafe

태그

최근글

댓글

공지사항

Express

Node.js 진입점 파일 생성 (Server.js)

라우트 핸들러 생성

res.json() vs res.send()

res.end()

middleware

express.json()

MVC Pattern

MVC 패턴 소스코드

Express Router

Express 파일 전송 (res.sendFile())

express.static()

사용 방법

가상 경로 지정

절대 경로 사용

Template Engine

관련글

티스토리툴바