[TSR] Web Server

EllaDev·2022년 2월 3일

express middleware nodejs server

today-study-record

목록 보기

5/8

해당글은 오늘 공부한 내용을 정리하여 메모하는 형식으로 작성한 것으로
설명이나 이해를 돕는 글이 아님을 명시합니다.

Cors

Background

예전에는 Server안에 Client가 있어서 User가 요청을 하면 Server에 있는 Client를 다운 받아서 static하게 썼다.
이럴 경우 따로 Server에 위해가 없으므로(Same origin) cors가 필요없었다.
요즘은 SPA가 되고 하나의 서버가 아니라 여러 리소스를 활용하게 되었다.( Youtube API, Slack API 등등)
그러므로 다른 Origin의 서버에 리소스 요청을 하게 되고 이를 Cross-origin-Resource-Sharing이라고 한다.
브라우저는 자신이 요청한 리소스가 아닌 다른 리소스를 가져오는 것이 보안 상의 이유로 제한 되었다. 하지만 고도화 웹 구현을 위해서 서버가 허용한 범위 내에서는 Cross-origin 허용이 가능하도록 바뀌었다.

Server 구현

기본 서버 기능

toUpperCase 버튼을 누르면 대문자로 변환
toLowerCase 버튼을 누르면 소문자로 변환

참고 자료

HTTP 트랜잭션 해부

Node Debugging

console 외의 디버깅 방법
Node debugging guide

--inspact : chrome console 창에 디버깅메뉴가 생성
--inspact-brk : 시작하자마자 debugger를 걸고 싶을 때
nodemon에서도 node 공식문서에서 지원하는 옵션을 똑같이 지원
VScode에서 debugger를 걸고 싶으면 기본 debugger탭을 이용 가능
프로젝트마다 환경구성을 따로 구성할 수 있다.

Express Refactoring

Express

MERN stack : JavaScript 생태계에서 인기 있는 프레임워크인 MongoDB, Express, React, Node를 지칭하는 말
Express.js : Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기 있는 프레임워크
http 모듈 서버보다 미들웨이 추가하기 편하고 자체 라우터를 제공해서 코드 관리하기 편하다.

기본 서버 구현 및 express refactoring 구현

Middleware

미들웨어는 자동차 공장의 공정과 비슷하다. 컨베이어 벨트 위에 올라가 있는 request에 필요한 기능을 더하거나, 문제가 발견된 불량품을 밖으로 걷어내는 역할을 한다.
express의 가장 큰 장점

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

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

/* body-parser 미들웨어  */
const bodyParser = require('body-parser')

// 하나의 요청에 설정 추가
const jsonParser = bodyParser.json()
app.post('/api/users', jsonParser, function (req, res) {
  // req.body에는 JSON의 형태로 payload가 담겨져 있다.
})

// 모든 요청에 설정 추가
app.use(bodyParser.json())

/* 4.x 버젼 이후 부터  express 기본 기능에 추가  */
app.use(express.json());
app.use(express.urlencoded({ extended: true }))

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

/* http 모듈 서버 */
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 미들웨어 - 모든 요청에 대해 CORS 허용 */
const cors = require('cors')

app.use(cors())

/* cors 미들웨어 - 특정 요청에 대해 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 3 : 모든 요청에 대해 url이나 메소드를 확인할 때

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

endpoint가 /이면서, 클라이언트로부터 GET 요청을 받았을 때 적용되는 미들웨어
파라미터의 순서에 유의해야 한다. req, res는 우리가 잘 아는 요청(request)/응답(response)이고, next는 next() 함수를 호출하여 다음 미들웨어로 데이터를 전달하고 다음 미들웨어를 실행한다.

const express = require('express');
const app = express();
/* 모든 요청에 대해 LOGGED가 출력 */ 
const myLogger = function (req, res, next) {
  console.log('LOGGED');
  next();
};

/*  */
const myURL = function (req, res, next) {
  console.log(`http request method is ${req.method}, url is ${req.url}`);
  next();
};
app.use(myLogger);
app.use(myURL);

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

app.listen(3000);

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

HTTP 요청에서 토큰이 있는지 여부를 판단하여, 이미 로그인한 사용자일 경우 성공, 아닐 경우 에러를 보내는 미들웨어 예제이다.
서버에서는 요청에 포함된 데이터를 통해 미들웨어가 요구하는 조건에 맞지 않으면, 불량품으로 판단하고 돌려보내도록 구현 가능

app.use((req, res, next) => {
  if(req.headers.token){
    req.isLoggedIn = true;
    next()
  } else {
    res.status(400).send('invalid user')
  }
})

응용 서버 구현

파일 설명

app.js : 서비스에 필요한 미들웨어와 웹 서버를 실행하는 코드가 작성
router 폴더 : API 요청을 수행하는 라우터가 작성된 폴더로 작성된 라우터 내용을 통해 API 요청을 받을 수 있음
controller 폴더 : API 요청을 수행하는 코드를 작성
repository : 서비스에서 제공하는 데이터가 작성로 데이터베이스 역할

코드 구현

Web Server vs WAS

정적 웹페이지 vs 동적 웹페이지

정적 웹페이지(Static Web Page)

서버에 미리 저장된 데이터(html,css,JS,image등)을 가져와서 페이지 구성
간편하게 Web Server만 구축하여 사용할 수 있다.
수동적으로 수정,삭제, 삽입이 되어야 하므로 관리가 어렵다.

동적 웹페이지(Dynamic Web Page)

서버에 있는 데이터들을 사용자의 요청에 따라 가공 처리하여 페이지 구성
사용자의 요청에 따라 동적으로 페이지를 생성, 제공하므로 서비스가 다양하다.
삽입, 수정, 삭제 등의 작업 관리가 쉽다.
WAS 사용으로 로직 복잡도가 올라간다.

Web Server

소프트웨어 관점 : Client로 부터 HTTP Request를 받은 후 HTML, CSS, JS 등과 같은 정적 컨텐츠들을 제공해주는 프로그램
하드웨어 관점 : 소프트웨어적 관점에서 본 프로그램을 탑재한 컴퓨터 시스템
EX) Apache, nginx, IIS, tMax WebtoB 등
정적웹페이지 구성이나 동적 페이지 구성을 위한 요청 전달을 한다.