[Web Server] 기초 Node.JS로 서버구현하기 (HTTP 트랜잭션 해부 완전정리)/ CORS

지금까지 배운 네트워크의 기초

 

Client = 요청하는 주체 (API가 이 요청/응답을  정리해서 상호작용 매개, 이때 상호작용은 HTTP라는 통신규약 = 프로토콜 을 사용)

Server = 응답하는 주체 

Node js = 자바스크립트 실행창, 실행환경        *상세설명 :  Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 

 

Client가 Server 로부터 요청에 응답(데이터 받아온다던가)을 받아서 이를 보여줄때

비동기통신으로 데이터를 주고받는  기술인 AJAX(서버에 새로고침없이 요청을 할수있게 도와준다. AJAX를 쓰기위해 리액트를 씀. 리액트는 일종의 도구 ) 있다. 이때 Server는 자바스크립트 런타임이며, 비동기적으로  작동하는 Node.js를 사용해서 구축한다. 

 

서버를 만들때 Node.js를 사용하려고하면, 이와 함께 번들링 되어있는 여러가지 모듈이 있으므로 require문법을 이용해서 불러서 사용할 수 있다. 대표적인 모듈 : fs, http, url, path ...

 

자바스크립트만 알면 클라이언트,서버 개발이 가능해진다. <= Node.js <=자바스크립트 런타임~!

우리가 지금까지 자바스릡트를 배운 이유랍니다.

 

 

 

 

안녕 나야 Node.js 

나를 통해 그럼 서버를 만들어봐봐

 

 

 

Node.js로 서버 구현하기 (Node.js? 자바스크립트 실행창이니까! 서버구현가능!)

 

 

1. 서버생성

 

서버를 만드는 모듈 HTTP를 불러와서 createServer 를 이용하여 만든다.

이때 포트번호와 ip가 필요. 모든 서버는 요청을 받을 수 있는 포트 번호를 필요로한다.(ip가 아파트면 port는 호수, 주소는 전부필요함)

이렇게 생성된 서버는 모든 들어오는 요청들을 처리해준다.

1.1서버 생성확인

 

콘솔로그를 찍어보면 server.listen에 찍어서 <- 서버생성을 확인

server함수 안쪽에 찍어보면 서버요청을 확인가능하다 

// 프로토콜 설정
const http = require('http');
// 포트 설정
const PORT= 5000;
// 아이피 설정
const ip = 'localhost';
// server라는 변수 선언하고 그 안에 createServer를 생성한다.
const server = http.createServer((request, response) => {
// request와 response 인자를 받고
// request는 요청이며 서버가 받은 것들을 말한다.
// response는 응답이며 서버에서 클라이언트로 전달해 줄 것을 말한다.
}
// listen을 이용해서 prot와 ip를 연결해준다. 브라우저랑 연결해주는 역할을 한다.
server.listen(PORT, ip, () => {
console.log(`http server listen on ${ip}:${PORT}`);
});

 

2. Request, Response (요청은 비동기로온다!)

 

HTTP요청이 서버에 들어오면 Node가 이것을 처리하기위해 request와 response 객체를 전달하고 함수를 작동시킨다 

 

Request(HTTP 요청)는 서버로 본내는 요청에 대한 정보를 담고있다.

Request은 header와 (optional)body로 구성되어 있다. 

 

 

Response는 server -> client에게 전달하는 데이터, 내용을 담고있다. 이걸 이제 client에게 전달하려면 response객체를 어떻게 활용하고 이를 어떻게 화면에 출력되게 할까 고민을 해봐야한다

공식문서에 있는 내용을 확인해보자

 

request안에는 method url headers 를 담고있다.

 

 

POSTMAN을 통하여 서버에 요청을 보내보자! (콘솔을 통하여 확인해보세요)

resoponse.end => 응답을 줬기에 postman에 찍힌다.

 

2.1 Body

 

postman으로 바디를 한번 체크해보자

 

요청에 데이타가오면 안에값이 실행된다 요청이 끝나면 두번째 콜백함수가 실행된다

 

console.log (chunk) => 결과값은 Buffer < asdd>

조각조각 받아서 나중에 합친다. 

 

end는 딱 한번만 불린다. 

 

REQUEST/ RESPONSE 부분

 

 

이전시간에 배운 HTTP상태코드를 잘 활용해야한다.  GET, POST, OPTION 등등 요청에 대한 각각의 응답을 처리해준다. 

POST와 OPTION에 대해서 연습해봤다.

 

// method는 OPTIONS, GET, POST, PUT DELETE 처럼 CRUD 메서드를 다 사용할 수 있으며 대문자로 써야한다.
// 클라이언트가 서버한테 준 요청을 표현하는 코드
request.method === 'OPTIONS'
// url을 설정해서 주소값을 설정한다.
// 클라이언트가 서버한테 준 요청을 표현하는 코드
request.url === '/upper'
// Node 내장 메서드인 on과 end를 이용해서 클라이언트가 요청하는 값을 찾는다.
request.on('data', (chunk) => {
// on의 첫번째 인자로 클라이언트가 요청한 'data' 값을 받는다.
// chunk에 data가 한꺼번에 들어가지 않고 나눠서 들어간다.
body.push(chunk);
})
// 요청이 끝났음을 알리는 'end'
.on('end', () => {
body = Buffer.concat(body).toString().toUpperCase();
// writeHead를 이용해서 status값과 header값을 같이 적을 수 있다.
response.writeHead(200, defaultCorsHeader);
console.log(body);
// 서버가 클러아언트에게 값을 전달해준다.
response.end(body);

https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction/

 

HTTP 트랜잭션 해부 | Node.js

 

OPTION 과 CORS

 

네트워크에서 요청시에 POST나 PUT전에 OPTIONS요청이 발생하기도한다. preflight라고 불리우는 이 OPTIONS 요청은 CORS와 밀접한 연관이있다. 

 

CORS(Cross-Origin Resource Sharing)와 보안

 

현재 웹페이지가 웹페이지를 받은 서버와 다른 서버의 리소스를 요청하는 것을 의미(예를 들자면 웹서버와 분리되어 있는 API 서버로 요청을 보낼때) 

보안상의 이유로  브라우저는 OPTIONS를 preflight하여 서버에서 허용하는 옵션을 미리 확인하고, 허용되지 않은 요청의 경우 405(Method Not Allowed)에러를 발생시키고 실제 요청은 전송하지 않는다.

 

https://nukeguys.github.io/dev/options-request/

[TIL] `OPTIONS` 요청은 왜 발생하는가?

 

프로토콜이 같아야 host네임 포트번호 -> same origin 나머지는 다 cors적용은 fetch할때만 적용 

 

지금했던 작업은 CORS적용을 해줘야한다.

 

access-control-allow-origin 부분을수정한다면???

아래와같이 오류. 막혀버리는 오류가 발생한다.

const defaultCorsHeader = {
  'Access-Control-Allow-Origin': http://localhost : 3000 //'*',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, Accept',
  'Access-Control-Max-Age': 10
};

 

 

cors적용은 fetch할때만 적용. ajax할때만 적용