Refactor Express

 

 

📌 Refactor Express

 

 

📍Express

 

Express 설치

 

npm install express

 

Hello world! 예제 만들기

 

Express "Hello World" 예제

 

공식문서를 통해 실행

 

1. myapp 디렉토리 생성
2. npm init 실행
3. app.js 라는 이름의 파일을 작성 후
4. 다음 코드 작성

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

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

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

 

 

💡 Express란?

📖 Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크입니다.

 

💡Express는 왜 써요?

📖 가볍게 웹 서버를 구현할 수 있기 때문이다

 

 

Mini-Node Server

 

👆👆 mini node server Express로 구현 해보기

 

basic.server.js

 

래퍼런스에서 cors 설치했기 때문에 cors 이용

 

npm install cors

 

const express = require('express') 
const app = express()
const cors = require('cors')

app.use(cors()) // 모든 요청에 cors 허용
//npm install cors --save 터미널에서 설치
app.use(express.json({strict : false}))
// const jsonParser = express.json({
//   strict: false
// })
// jsonParser를 변수로 선언해 하나씩 넣어줘도 되고
// 위처럼 모든 요청에 적용할 수도 있다 

const port = 4999 // 포트번호 확인

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


app.post('/lower', (req, res) => {
  res.json(req.body.toLowerCase())
})

app.post('/upper' , (req, res) => {
  res.json(req.body.toUpperCase())
})


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

 

📍Middleware

 

미들웨어란 운영체제와 응용 프로그램 사이에서 실행되는 소프트웨어이다.

요청과 응담의 중간에 위치해서 기능을 추가하거나 나쁜 요청을 걸러낸다

' 자동차 공장의 공정과도 비슷' , 미들웨어는 Express의 가장 큰 장점이다

 

미들웨어의 대표적 사용 (npm으로 다운 가능 )

 

Morgan 익스프레스 프레임워크가 동작하면서 나오는 메시지들을 콘솔에 표시해줌
Compression 페이지를 압축해서 전송해줌
Session은 세션 사용할 수 있게함
Body-parser은 폼에서 전송되는 POST 값을 사용할 수 있게 함
Cookie-parser는 쿠키를 사용할 수 있게 함
Method-override는 REST API에서 PUT과 DELETE 메소드를 사용할 수 있게 함
Cors 크로스오리진(다른 도메인 간의 AJAX 요청)을 가능하게 해줌
Multer 파일업로드를 할 때 주로 쓰임

 

 

미들웨어 실행

 

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

// app.use() => 모든 요청에 대해서 이 미들웨어가 실행된다
app.use((req,res,next) =>{
  console.log('모든 요청에 다 실행됨')
  next()
})

app.get('/', (req, res, next) =>{
  console.log('GET, / 요청에서만 실행됨')
  next()// 다른 요청을 보냄
}),(req,res) => {
  throw new Error('에러는 에러처리 미들웨어로 감')
}

// 에러처리 미들웨어
app.use((err, req, res, next) => {
  console.log(err)
  res.status(500).send(err.message) // res.send()로 응답을 보냄
})

app.listen(app.get('port'),()=>{
})

 

 

라우팅 

 

URL 요청에 따른 응답 처리를 의미

 

// 아래 코드처럼 rest API등의 메서드를 사용하고 매게변수로 주소를, 그 후 처리할 내용을 넣어 작동

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

 

 

Express 설명

 

일반적으로 첫 줄에서 마지막줄로 진행

미들웨어 셋팅 -(요청이 오면)-> 라우트 -(if X)-> error

but, 라우트를 처리하고 에러처리가 안 되는 경우가 있다?

-> 라우트 안에 next()가 들어있지 않기 때문!

 

-------------------------------------------------------------------------

 

이것만 기억하자!

 

서버를 처음 실행 시키면 미들웨어 셋팅 부분이 동작

그후 '주소/'를 들어가게 되면 라우트 부분이 실행되고 다시 요청을 기다림

주소/가 아닌 경우 다른 주소로 들어가면 라우트 실행 x 에러처리 동작

 

이걸보고 미들웨어 실행을 다시보면 이해가 간다!

 

--------------------------------------------------------------------------

 

 

 

 

📍미들웨어가 자주 사용되는 상황

 

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

 

 

case 1: 모든 요청에 대해 url이나 메소드를 확인할 때

 

var myLogger = function (req, res, next) {
  console.log(req.method, req.url);
  next();
};

app.use(myLogger)

// POSR /upper
// 모든 요청에 대해서 미들웨어가 로그가 찍히기 때문에
// 디버깅 할 때 편리하다

 

case 2: POST 요청 등에 포함된 body(payload)를 구조화할 때

 

node.js로 HTTP body(payload)를 받을 때에는 Buffer를 조합해서 다소 복잡한 방식으로 body를 얻을 수 있었다

 

let body = [];
request.on('data', (chunk) => {
  body.push(chunk);
}).on('end', () => {
  body = Buffer.concat(body).toString();
  // body 변수에는 문자열 형태로 payload가 담겨져 있습니다.
});

// ------------------------------------------------------------
// body-parser 미들웨어를 사용하면 이 과정을 간단히 처리
// 다룰 수 있는 바디 형식은 json, text, buffer 만 가능

const jsonParser = express.json()

// 생략
app.post('/api/users', jsonParser, function (req, res) {
  // req.body에는 JSON의 형태로 payload가 담겨져 있습니다.
})

 

case 3: 모든 요청/응답에 CORS 헤더를 붙일 때

 

node.js 코드에 CORS 헤더를 붙이려면, 응답 객체의 writeHead 메소드 등을 이용하고 Access-Control-Allow-* 헤더를 매번 재정의 해줘야 했다
그리고 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);
  res.end()
}

 

cos 미들웨어를 사용해 간단히 처리

 

// npm 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'})
})

 

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

 

HTTP 요청에서 토큰이 있는지를 판단하여, 이미 로그인한 사용자일 경우 성공, 아닐 경우 에러 예제

 

토큰(Token) : 주로 사용자 인증에서 사용 

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