[TIL] Day37 #Express

2022.06.17(Fri)

[TIL] Day37
[SEB FE] Day37

☑️ Express

Node.js 환경에서 웹 서버 또는 API 서버 제작을 위해 사용되는 인기 프레임워크

1. 미들웨어 추가 가능
2. Router 제공

// express install
npm install express

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

// 루트 URL(/)에 대한 요청에 대한 응답: 'Hello World!'
// 다른 모든 경로는 404 Not Found로 응답
app.get('/', (req, res) => {
	res.send('Hello World!');
})

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

📎 Routing

메서드와 URL로 분기점을 만드는 것
⇒ 클라이언트의 요청에 해당하는 Endpoint에 따라 서버가 응답하는 방법 결정

const router = express.Router();

router.get('/lower', (req, res) => {
	res.send(data);
})

router.post('/lower', (req, res) => {
	~~~
})

📎 Middleware

프로세스 중간에 관여하여 특정 역할 수행

➰ 미들웨어 사용 상황

1. POST 요청 등에 포함된 body(payload)를 구조화할 때

   // Node.js
   
   let body = [];
   request.on('data', (chunk) => {
   	body.push(chunk);
   }).on('end', () => {
   	// body 변수엔 문자열 형태의 payload(body)가 담겨져 있음
   	body = Buffer.concat(body).toString();
   });

   // body-parse middleware로 위의 과정을 간단히 구현 가능
   npm install body-parser
   
   const bodyParser = require('body-parser');
   const jsonParser = bodyParser.json();
   
   app.post('/users', jsonParser, function (req, res) {
   	~~~
   })

   // Express v4.16.0부턴 따로 body-parser 설치 x
   // Express 내장 middleware인 express.json() 사용
   const jsonParser = express.json();
   
   app.post('/users', jsonParser, function (req, res) {
   	~~~
   })

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

   // Node.js
   
   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()
   }

   // cors middleware를 사용하면 위의 과정을 간단히 구현
   npm install cors
   
   const cors = require('cors');
   
   // 모든 요청에 대한 CORS 허용
   app.use(cors());
   
   // 특정 요청에 대한 CORS 허용
   app.get('/products/:id', cors(), function (req, res, next) {
   	res.json({msg: 'This is CORS'})
   })

3. 모든 요청에 대해 URL이나 메서드를 확인할 때

   const express = require('express');
   const app = express();
   
   const myLogger = function (req, res, next) {
   	next();
   };
   
   // function(): middleware function
   // req: 미들웨어 함수에 대한 HTTP 요청 인수
   // res: 미들웨어 함수에 대한 HTTP 응답 인수
   // next: 미들웨어 함수에 대한 콜백 인수 => 다음 미들웨어 실행 역할
   
   app.use(myLogger);
   
   app.get('/', function (req, res) {
   	res.send('Hello World');
   });
   
   app.listen(3000);

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

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

  app.use((req, res, next) => {
  	if(req.headers.token) { // 토큰이 있다면
  		req.isLoggedIn = true;
  		next();
  	} else { // 토큰이 없다면 error 처리
  		res.status(400).send('invalid user');
  	}
  })

---

☑️ [Pair] Refactoring Mini-Node-Server

어제 Node.js로만 구현한 코드 길이는 꽤 길었었는데 확실히 Express를 사용하니까 깔꼼하게 몇 줄만에 리팩토링 구현 끝- 👍

// express로 refactoring
const express = require("express");
const http = require("http");
const app = express();
const cors = require("cors");
// 원시 데이터 형태도 parsing 해주도록 설정 (객체 형태가 아닌 String 형태도 받을 수 있도록 처리)
const jsonParser = express.json({ strict: false });
const port = 4999;

app.use(cors());

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

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

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

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

---

오늘 페어분과 함께 StatesAirline Server를 구현하여 항공편 조회 및 예약 서버 기능을 구현했다.
아직 끝까지 구현하지는 못 해서 월욜에 마저 다 구현하고 좀 더 이해한 다음에 블로깅하좌
처음에 진짜 어떻게 구현할지 넘 막막했는데 같이 아무거나 때려넣어보자 라는 마인드로 생각한대로 코드 때려넣어서 어찌어찌 10/13 testcase pass🫠
월욜에 마저 모든 testcase 통과하기!

내일부터 주말동안 알바 시간 제외하고 짬짬이 React로 CRUD 구현해보기! 아직 좀 막막하지만 일단 뭐든 적어보면 어떻게든 구현되지 않을꽈,,

요즘 내용이 어려워져서 따라가기 급급하달까.. 그래서 그런지 암것도 하기싫고 축축 쳐지는 느낌 🥲