TIL 21.05.28

Jaemin Jung·2021년 5월 30일

CODESTATES Today I learned

Today I Learned

목록 보기

30/62

오늘한일

세상에 벌써 서버를 구축을 해봤다.
뭔가 너무 빠른건가 싶기도 한데, 잘 모르겠다.
nodejs를 통해 서버를 구축하는 여러가지 방법을 시도해보았다.

Achievement Goals

(이해한대로 작성하였기에 틀릴수도 있습니다. 계속 공부하며 수정해 나가겠습니다.)

node.js modules의 사용
node.js의 내장 http 모듈을 사용할 수 있다.
http 모듈 사용시에 서버에 CORS 설정을 할 수 있다.
CommonJS를 이용한 모듈 내보내기/불러오기를 할 수 있다.
라우팅과 API
라우팅(조건에 따른 분기)을 이해하고, 이를 서버 코드에서 구현할 수 있다.
클라이언트가 사용할 수 있도록, 서버 API 문서를 직접 작성할 수 있다.
Express 라이브러리
express 라이브러리가 어떤 작업을 단순하게 만드는지 이해할 수 있다.
미들웨어의 개념을 이해할 수 있다.

Node js modules

Node.js는 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경으로
주로 서버 사이드 어플리케이션 개발에 사용되는 소프트웨어 플랫폼이다.
Node.js는 http 서버 모듈을 내장하고 있어서 아파치와 같은 별도의 웹서버를 설치할 필요가 없다.
그리고 이를 좀더 간결하게 리팩토링할 수 있는 Express framework를 npm을 통해 다운로드 할 수 있다.

Routing

클라이언트는 특정한 HTTP 요청 메소드(GET, POST 등)나 서버의 특정 URI(또는 경로)로 HTTP 요청을 보낸다.
라우팅은 클라이언트의 요청에 해당하는 메소드와 Endpoint에 따라 서버가 응답하는 방법을 결정하는 것이다.

http module

먼저 http 모듈을 사용하면 HTTP서버를 만들어 js파일로 웹서버를 구축할 수 있다.
우선 서버를 생성하기 위해 모듈을 불러와야한다.

const http = require("http");

자바스크립트 개발을 하다보면 require나 import 키워드를 통해 외부 라이브러리를 불러오는 코드를 자주 보게 된다.
require는 NodeJS에서 사용되고 있는 CommonJS 키워드이다.

http모듈을 http라는 변수를 통해 사용 가능해졌으며, .createServer()메소드를 통해
서버 객체를 생성한다.
그리고 listen()메소드를 통해 해당 서버를 실행하며, 요청을 기다릴 수 있다.
listen에 들어오는 인자는 사용할 포트번호와 ip주소를 넣으면 된다.

const PORT = 5000;
const ip = 'localhost';

const http = require('http');

const server = http.createServer((request, response) => {
  // do something(라우트작업)
});

server.listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);// 서버가 잘 실행되었는지 확인하기위함
});

서버가 성공적으로 생성되었다면, 요청과 응답을 받아 처리할것이 필요하다.
http 모듈에서는 request(요청)객체와 response(응답)객체를 통해 http메세지를 처리한다.

request 객체
클라이언트가 서버에게 전달하는 메세지(정보)를 담는 객체입니다.
속성
method : 클라이언트 요청 방식으로 GET, POST가 있다.
url : 클라이언트가 요청한 URL을 나타낸다.
headers : 요청 메세지 헤더를 나타낸다.
url.parse(): URL 형태를 분석한다.
url.parse().pathname : "/blog/index.nhn"

response 객체
서버에서 클라이언트로 응답 메세지를 전송시켜주는 객체이다.
속성
writeHead() : 응답 헤더를 작성한다.
end() : 응답 본문(body)을 작성한다.

위 두 객체를 통해 CORS설정(프리플라이트 요청 예시)

if (request.method === 'OPTIONS'){// <- 프리플라이트 요청은 제일먼저 OPTIONS 메소드를 보내 사전 요청을 한다.
  response.writeHead(200, defaultCorsHeader);// <- 응답 헤더작성 첫번째 인자는 http 상태코드, 두번째 인자는 응답 헤더의 내용
  response.end('OK')// <- 응답 헤더의 본문(body)
}

const defaultCorsHeader = { //<- 응답 메세지에 보낼 Header 구성
  "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,
  //통신 최대 지연 시간 (통신 지연이 10초 이상 delay되면 연결이 끊긴다.)
};

Express framework

express framwork란 http 모듈처럼 서버 모듈이다.
http와 다른점은 http 모듈만 사용해서 웹 서버를 구성하면 직접 많은 기능을 개발해야한다.
Express는 웹 및 모바일 애플리케이션을 위한 기능이 이미 구현이 된 모듈을 제공하는
간결하고 유연한 Node.js 웹 애플리케이션 프레임워크다.
Express를 사용하면 간단한 코드로 웹 서버의 기능을 대부분 구현 할 수있고,
middle ware와 router를 사용하여 편리하게 웹 서버를 구성할 수 있다.

const requestHandler = (req, res) => {
  if(req.url === '/lower') {
    if (req.method === 'GET') {
      res.end(data)
    } else if (req.method === 'POST') {
      req.on('data', (req, res) => {
        // do something ...
      })
    }
  }
}

http 모듈을 이용해 요청에 따른 라우팅 코드 구현

const router = express.Router()

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

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

Express의 router기능을 이용한 리팩토링

middle ware

middle ware 함수는 요청 오브젝트(req), 응답 오브젝트 (res), 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수 대한 액세스 권한을 갖는 함수이다.

이 말이 조금 어려운데, express의 라우터메소드(url, 콜백함수)형식에서
미들웨어 함수가 인자 가운데 들어가 어떠한 행동을 해준다라고 이해하면 된다.

이러한 미들웨어함수는 이미 구현된것도 있고, 새로 만들어내는것도 가능하다.

const cors = require('cors')

// 생략
app.use(cors()) // 모든 요청에 대해 CORS 허용
const cors = require('cors')

// 생략
// 특정 요청에 대해 CORS 허용
app.get('/products/:id', cors(), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for a Single Route'})
})

cors를 처리해주는 미들웨어 함수는 이미 구현되어있어 이를 불러와서 적용
기존 http 모듈에서는 cors 처리를 위해 헤더 정의와 OPTIONS메소드에 대한 라우팅도 구현하였다.
하지만 express에서는 cors()미들웨어 함수가 구현되어있어서 이를 가져와 사용만 하면 된다.

const myLogger = function (req, res, next) {
  console.log('LOGGED'); 
  // 이 부분을 req, res 객체를 이용해 고치면, 모든 요청에 대한 로그를 찍을 수 있습니다.
  next();
};

app.use(myLogger);