🌱 [Web Server/Node.js] Express 프레임워크

🌊 Express 프레임워크

경량화 웹 개발 프레임 워크. 노드를 이용한 웹 서비스나, 웹 어플리케이션 개발에 가장 널리 쓰이는 확장 모듈이다.

express는 기본 모듈 중 하나인 http 모듈을 이용하여 웹 서버를 구축하거나 API서버를 제작하기 위해 사용되는 프레임워크 입니다. 

 

Node.js HTTP 모듈로 작성한 서버와 다른 점

• 미들웨어를 추가할 수 있다.
• 라우터를 제공한다.

 

MERN stack

• MongoDB : NoSQL데이터 베이스로, JSON형식으로 데이터를 저장한다.
• Express : Node.js를 기반으로 하는 웹 프레임워크로, 웹 어플리케이션의 구조와 로직을 구성한다 
• React : 페이스북에서 개발한 프론트엔드 라이브러리로, 웹 어플리케이션의 사용자 인터페이스(UI)를 만든다.
• Node.js : 자바스크립트 런타임 환경으로, 서버 사이드 어플리케이션을 만들 수 있다.

MERN stack은 위 네 가지를 조합한 웹 개발 스택입니다. 하나의 언어와 프레임워크만으로 전체 웹 어플리케이션을 개발할 수 있어 개발 생상성을 높일 수 있으며 React를 사용해 SPA를 구현할 수 있어 사용자 경험(UX)를 향상 시킬 수 있습니다. 

 

설치 방법

1. Express 설치

npm install express # npm 사용시
yarn add express # yarn 사용시

2. 간단한 웹 서버 만들기
: port를 3000에서 지정하여 localhost:3000에서 해당 서버를 확인할 수 있다. 

클라이언트가 Get 방식으로 루트 URL(http://localhost:3000/)에 요청을 보내면 서버는 index.html을 화면에 그려준다.

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

app.get('/', (req, res) => {
  res.sendFile(__dirname, '/index.html') 
})

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

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

 

라우팅

: 라우팅은 URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말한다. 각 라우트는 하나 이상의 핸들러 함수를 가질 수 있으며, 이러한 함수는 라우트가 일치할 때 실행 된다. - 공식문서 -

 

즉, 메서드와 URI(/lower, /upper 등)로 분기점을 만드는 것을 라우팅(Routing)이라 한다.

app.METHOD(PATH, HANDLER)

• app은 express의 인스턴스
• METHOD는 HTTP 요청 메소드(GET, POST 등)
• PATH는 서버에서의 경로
• HANDLER는 라우트가 일치할 때 실행되는 함수

app.post('/', function (req, res) {
# method : post, 경로 : '/', Handler: function~ 함수
  res.send('Got a POST request');
});

 

 

 

 

 

미들웨어

미들웨어는 요청과 응답의 중간에 위치하여 미들웨어라고 부른다.

미들웨어는 요청과 응답을 조작하여 필요한 기능을 추가하거나, 문제가 발견된 나쁜 요청을 걸러낸다. 

 

미들웨어는 express의 가장 큰 장점이다.

 

app.get('/', (req, res) => { // 이 함수는 express 전용 미들웨어 함수이다.

})

1.  미들웨어는 req, res, next가 매개변수인 함수
2. 미들웨어 함수는 여러 번 인자로 사용 가능
3. req: 요청, res: 응답 조작 가능, next(): 다음 미들웨어로 넘어감
4. 에러 처리 미들웨어는 매개변수가 err, req, res, next로 4개

 

미들웨어를 사용하는 상황

1. POST 요청 등에 포함된 body(payload)를 구조화할 때 (쉽게 얻어내고자 할 때)
2. 모든 요청/응답에 CORS 헤더를 붙여야 할 때
3. 모든 요청에 대해 url이나 메서드를 확인할 때
4. 요청 헤더에 사용자 인증 정보가 담겨있는 지 확인할 때
5. 에러처리 할 때

 

1.  POST 요청 등에 포함된 body(payload)를 구조화할 때 (쉽게 얻어내고자 할 때)

const jsonParser = express.json() // Express v4.16.0부터 사용 가능한 내장 미들웨어

app.post('경로', jsonParser, function(req, res) {
// HTTP 모듈 사용 방식에서는 Buffer를 조합해서 다소 복잡한 방식으로 body를 얻는다. 
})

 

 

2.  모든 요청/응답에 CORS 헤더를 붙일 때

cors 미들웨어를 사용한다.

npm install cors

 

const cors = require('cors');

/** 모든 요청에 대해 CORS 허용 */
app.use((cors()); // () 잊지 말 것! 

/** 특정 요청에 대해 CORS 허용 */
app.get('/produdcts/:id', cors(), function(req, res, next) {
 res.json({msg: 'Cors-enabled'}
})

 

3.  모든 요청/응답에 url이나 메서드를 확인할 때

endpoint가 '/'면서 GET요청을 받았을 때 적용되는 미들웨어

app.get('/', function(req, res, next) { 
 next()
})

이 라우팅의 파라미터의 순서에 유의해야한다. next는 다음 미들웨어를 실행하는 역할을 한다. 특정한 endpoint가 아닌 모든 요청에 동일한 미들웨어를 적용할 땐 함수를 변수에 할당한 후 메서드 app.use를 사용한다. 

app.use(함수명);

 

4.  요청 헤더에 사용자 인증 정보가 담겨있는 지 확인할 때

app.use((req, res, next) => {
  // 토큰이 있는지 확인, 없으면 받아줄 수 없음.
  if(req.headers.token){
    req.isLoggedIn = true;
    next();
  } else {
    res.status(400).send('invalid user') // 에러코드
  }
})

 

 

5. 에러처리

app.use(function(err, req, res, next){
 console.error(err.stack)
 res.status(500).send('Something broke!')
}

 

 

 

 

 

 

코딩애플, 코드스테이츠 자료, 인파님 블로그, Express 공식문서를 참고하였습니다.