node.js

[Node.js] #6 익스프레스 웹 서버 만들기

로춘남 2021. 11. 15. 17:51
728x90

1. 익스프레스 프로젝트 시작하기

익스프레스(express) : 웹 서버를 만들 때 코드가 보기 좋지 않고 확장성도 떨어진다고 느꼈을때, npm에는 서버를 제작하는 과정에서의 불편함을 해소하고 편의 기능을 추가한 웹 서버 프레임워크가 있다. 그것이 바로 익스프레스.

const express = require('express');

const app = express();
app.set('port', process.env.PORT || 3000);  //서버가 실행될 포트 설정

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

app.listen(app.get('port'), () => {
    console.log(app.get('port'), '번 포트에서 대기중');
});

[HTML로 응답하고 싶다면 res.sendFile 메서드를 이용하면 된다.]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>익스프레스 서버</title>
</head>
<body>
    <h1>익스프레스</h1>
    <p>배워봅시다.</p>
</body>
</html>
const express = require('express');
const path = require('path');

const app = express();
app.set('port', process.env.PORT || 3000);  //서버가 실행될 포트 설정

app.get('/', (req, res) => {
    //res.send('Hello, Express');
    res.sendFile(path.join(__dirname, '/index.html'));
});

app.listen(app.get('port'), () => {
    console.log(app.get('port'), '번 포트에서 대기중');
});

 

2. 자주 사용하는 미들웨어

익스프레스의 핵심. 요청과 응답의 중간(미들:middle)에 위치하여 미들웨어라 부름.

...
app.set('port', process.env.POST || 3000);

app.use((req, res, next) => {
	console.log('모든 요청에 다 실행');
    next();
  });
app.get('/', (req, res, next) => {
	console.log('GET / 요청에서만 실행);
    next();
  }, (req, res) => {
    throws new Error('에러는 에러 처리 미들웨어로 갑니다.')
  });
  
app.use((err, req, res, next) => {
    console.error(err);
    res.status(500).send(err.message);
  });
  
  app.listen(app.get('port'), () => {
...

미들웨어는 위에서부터 아래로 순서대로 실행되면서 요청과 응답 사이에 특별한 기능을 추가 할 수 있음.

app.use(미들웨어) 모든 요청에서 미들웨어 실행
app.use('/abc', 미들웨어) abc로 시작하는 요청에서 미들웨어 실행
app.post('/abc', 미들웨어) abc로 시작하는 POST 요청에서 미들웨어 실행

 

미들웨어 종류

- morgan : 요청과 응답에 대한 정보를 콘솔에 기록

app.use(morgan('dev'));

- static : 정적인 파일들을 제공하는 라우터 역할. 기본 제공이기때문에 따로 설치 필요 없이 express 객채 안에서 꺼내 장착.

app.use('요청 경로', express.static('실제 경로'));
app.use('/', express.static(path.join(__dirname, 'public')));

-body-parser : 요청의 본문에 있는 데이터를 해석해서 req.body 객체로 만들어주는 미들웨어. 보통 폼 데이터나 AJAX 요청의 데이터를 처리. 단, 멀티파트(이미지, 동영상, 파일) 데이터는 처리하지 못함.

app.use(express.json());
app.use(express.urlencoded({ extended: false }));


//버퍼나 텍스트 요청을 처리할 떄 body-parser를 설치 후 다음과 같이 진행
npm i body-parser

const bodyParser = require('body-parser');
app.use(bodyParser.raw());
app.use(bodyParser.text());

-cookie-parser : 요청에 동봉된 쿠키를 해석해 req.cookies 객체로 만듬.

app.use(cookieParser(비밀키));

-express-session : 세션관리용 미들웨어. 로그인 등의 이유로 세션을 구현하거나 특정 사용자를 위한 데이터를 임시적으로 저장해둘 때 매우 유용.

 

-multer : 이미지, 동영상 등을 비롯한 여러 가지 파일들을 멀티파트 형식으로 업로드할 때 사용하는 미들웨어.

 

3. Router 객체로 라우팅 분리하기

//routes/index.js
const express = require('express');

const router = express.Router();

//GET / 라우터
router.get('/', (req, res) => {
	res.send('Hello, Express');
});

module.exports = router;


//routes/user.js
const express = require('express');

const router = express.Router();

//GET /user 라우터
router.get('/', (req, res) => {
	res.send('Hello, User');
});

module.exports = router;
...
const path = require('path');

dotenv.config();
const indexRouter = require('./routes');
const userRouter = require('./routes/user');

...
	name: 'session-cookie',
}));

app.use('/', indexRouter);
app.use('/user', userRouter);

app.use((req, res, next) => {
	res.status(404).send('Not Found');
 });
 
 app.use((err, req, res, next) => {
 ...

 

4. req, res 객체 살펴보기

익스프레스의 req, res 객체는 http 모듈의 req, res 객체를 확장한 것. 기존 http 모듈의 메서드도 사용할 수 있고, 익스프레스가 추가한 메서드나 속성을 사용할 수도 있음.

- req.app : req 객체를 통해 app 객체에 접근 할 수 있음. req.app.get('port')와 같은 식으로 사용 가능

- req.body : body-parser 미들웨어가 만드는 요청의 본문을 해석한 객체

- req.cookies : cookie-parser 미들웨어가 만드는 요청의 쿠키를 해석한 객체.

- req.ip : 요청의 ip주소가 담겨있음.

- req.params : 라우트 매개변수에 대한 정보가 담긴 객체

- req.query : 쿼리스트링에 대한 정보가 담긴 객체

- req.signedCookie : 서명된 쿠키들은 req.cookies 대신 여기에 담겨 있음

- req.get(헤더 이름) : 헤더의 값을 가져오고 싶을 떄 사용하는 메서드.

 

- res.app : req.app처럼 res 객체를 통해 app 객체에 접근 할 수 있음.

- res.cookie(키, 값, 옵션) : 쿠키를 설정하는 메서드.

- res.clearCookie(키, 값, 옵션) : 쿠키를 제거하는 메서드.

- res.end() : 데이터 없이 응답을 보냄

- res.json(JSON) : JSON 형식의 응답을 보냄

- res.redirect(주소) : 리다이렉트할 주소와 함께 응답을 보냄

- res.render(뷰, 데이터) : 다음 절에서 다룰 템플릿 엔진을 렌더링해서 응답할 때 사용하는 메서드

- res.send(데이터) : 데이터와 함께 응답을 보냄. 데이터는 문자열일 수도 있고 HTML일수도 있으며, 버퍼일 수도 있고 객체나 배열일수도 있음.

- res.sendFile(경로) : 경로에 위치한 파일을 응답

- res.set(헤더, 값) : 응답의 헤더를 설정

- res.status(코드) : 응답 시 HTTP 상태 코드를 지정

※ req 나 res 객체는 메서드 체이닝 지원 가능 → 코드의 양을 줄일 수 있다.

ex)

res
	.status(201)
    .cookie('test', 'test')
    .redirect('.admin');

 

5. 템플릿 엔진 사용하기

• 퍼그(Pug)

//익스프레스와 연결할때 필요한 부분

...
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(morgan('dev'));
...

• 넌적스(Nunjucks)

참 조 : Node.js 교과서(개정2판)

728x90
저작자표시 비영리

'node.js' 카테고리의 다른 글

[Node.js] #8 몽고디비 몽고DB  (0) 2021.11.19
[Node.js] #7 시퀄라이즈(Sequelize)  (0) 2021.11.18
[Node.js] #5 패키지매니저  (0) 2021.11.15
[Node.js] #4 http 모듈로 서버 만들기(2)  (0) 2021.11.12
[Node.js] #3 http 모듈로 서버 만들기(1)  (0) 2021.11.12

'node.js'의 다른글

  • 현재글[Node.js] #6 익스프레스 웹 서버 만들기

관련글

티스토리툴바