- CORS - Node 편은 코드적인 부분이나 중간중간 설명들이 길어져 3편으로 나누어 포스팅할 계획입니다.
- CORS - Node 기본 세팅 (현재)
- CORS - Node Event 처리
- CORS - Node 마무리
CORS와 관련하여 여러 정보를 얻고싶으시면 아래의 글을 참고해 주세요.
https://flasting.tistory.com/19
https://flasting.tistory.com/20
https://flasting.tistory.com/21
Pure Node에서 CORS를 허용 하는 방법
개발과 협업에서의 편리성이 있어 Express를 많이들 사용하지만 성능적인 측면에서는 Pure Node를 무시할 수가 없으며, 빠른 속도를 원하는 프로젝트에서는 Pure Node를 이용하여 코딩을 하는 것이 개발 스택을 바꾸는 것보다 효율적일 때가 있다.
아래의 글은 2017년도 까지의 글이어서 현재 2022년과는 큰 괴리가 있지만 Pure Node(이 글에서는 Raw Node)와 Express의 성능 차이에 대해서 간략하게 파악할 수 있다.
https://raygun.com/blog/nodejs-vs-hapi-express-restify-koa/
이 블로그 글에서는 Express를 흉내 내어 Pure Node에서 이벤트 바인딩 방식으로 요청을 처리하고 응답을 보내는 예제를 이용하여 코딩을 할 예정이다. Node와 이벤트 바인딩에 대한 이해가 깊지 않을 때에는 이해가 어려울 수 있으니 비동기 처리나 논블로킹 I/O에 대한 글을 더 볼 수 있도록 하자.
기본 세팅
우리는 Node가 기본적으로 시스템에 설치가 되어있다고 가정하고 Pure Node를 위한 폴더 세팅부터 진행해 보자.
- Node는 현재 글 작성일 기준으로 LTS 버전인 16.15.0을 기준으로 사용 하고 있다.
mkdir Blog-02 && cd Blog-02
npm init -y
touch index.js이제 우리는 코딩을 할 준비가 되었다.
전체 프로세스
우리가 코딩 할 전체 프로세스는 다음과 같다.
- Node에서 Http를 이용하여 외부와의 통신을 가능한 환경을 만든다.
- Request이벤트가 발생하였을 때 우리가 미리 생성해 둔 EventEmitter를 적용하여 해당 이벤트를 처리한다.
- EventEmitter에는 Get과 OPTIONS 두 개만 두고 응답 값을 보낼 수 있도록 처리한다.
- Response를 이용하여 요청에 대한 응답을 진행한다.
Http 통신 환경 코딩하기
노드에서 기본적으로 제공하는 모듈인 http를 호출하여 3000번 포트를 여는 작업을 해 보자.
const http = require('http');
const server = http.createServer();
server.listen(3000);
단 두줄에 우리는 외부에서 요청을 받아들일 준비가 되었다.
정말 이것으로 http 통신이 가능할까?
우선 서버를 시작하고 curl을 보내보자.
참고로 우리는 “npm init -y”를 하였지만 express처럼 안에 command를 별도로 선언하지 않았기 때문에 아래의 커맨드를 입력해서 서버를 시작해 주어야 한다.
node index.js
이제 curl을 보내보자
curl -v http://localhost:3000
(GET은 Default이기 때문에 -X GET 옵션을 줄 필요가 없다.)
이상하게 여기까지 빠르게 진행되고 이후에 진행되는 것이 없을 것이다.
우선 Ctrl(Command)+C를 이용하여 명령을 취소 하자.
우리는 통신이 가능하도록 입구를 열어 두었지만 안에서 어떠한 동작을 통해서 출구로 나가는 것에 대한 코딩을 하지 않았기 때문에 Node서버가 요청을 받았음에도 아무런 결과 값을 주지 않았고, TTL에 대한 별다른 설정을 Curl이나 Node에서도 처리하지 않았기 때문에 해당 상태에서 가만히 머무르게 된다.
그런데 이 응답은 Node를 켜지 않아도 받을 수 있는 거 아니냐는 궁금증이 발생할 수도 있다.
물론 안되지만 한번 해 보자. 현재 켜져 있는 Node서버를 종료하고 다시 curl을 보내면 다음과 같이 확인할 수 있다.
입구조차 찾지 못하기 때문에 요청 자체가 정상적으로 연결되지 못하고 종료되는 것을 알 수 있다.
Request에 대한 처리
그렇다면 우선 이벤트 기반을 처리를 하기 전에 제대로 응답이 되는 것인지 확인을 해 보고 넘어가자.
코드는 다음과 같다.
const http = require('http');
const server = http.createServer();
server.on("request", (req, res) => {
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({
data: 'Hello World!'
}));
})
server.listen(3000);
아까 Http 통신 환경 코딩하기에서 2번째 줄과 4번째 줄 사이에 간단하게 5줄 정도의 코딩을 해 주었는데 이 코드의 내용은 다음과 같다.
server.on(”이벤트”, 콜백) 은 지금 우리가 생성한 http서버에 대해서 어떠한 이벤트가 발생하였을 때 이것을 캐치하여 이벤트를 처리할 수 있도록 해 주는 함수이다. 그러므로 현재의 코드는 request이벤트가 발생하였을 때에 콜백에 등록된 코드를 동작할 수 있는 것이다.
콜백에 있는 코드를 보자.
콜백은 req와 res라는 객체 값을 받는데 여기서 각각의 객체는 아래와 같은 정보를 가지고 있다.
req는 request의 약자로 요청과 관련된 정보가 담긴 객체
res는 resposne의 약자로 응답과 관련된 정보가 담긴 객체
혹시나 해당 객체들에 대해서 자세하게 확인해 보고 싶다면 console.log()로 확인 해 보는 것도 좋다.
http모듈에서 request와 관련된 정보를 어디까지 제공해 주는지 알 수 있으며, 이게 정말 객체인지 궁금하다면 console.log(typeof req); 와 같은 방법으로 확인해 볼 수도 있다.
(아 물론 console.log()를 on() 안의 콜백에 넣었을 경우에 on은 이벤트가 발생하여야지 콜백에 있는 코드가 동작하기 때문에 request를 보내어야지 확인할 수 있다.)
우리는 요청에 대한 응답을 하여야 하기 때문에 5번째 줄에서 res.writeHead();를 이용하여 상태를 200, 헤더는 Content-Type이 application/json으로 선언하였으며 6번째 줄의 end를 통해서 응답 값에 대한 데이터를 “Hello World!”로 선언해 주었다.
그러면 이제 실제 요청을 보내보자.
curl -v http://localhost:3000
정말로 우리가 코딩 한 대로 5번 줄의 상태 값 200과 헤더 내 정보로 Content-Type이 application/json인 것을 볼 수 있으며 6번 줄에서 응답 값의 데이터로 “Hello World!”가 온 것을 볼 수 있다.
그런데 여기서 이상한 점을 발견할 수 있다.
우리는 응답 값에 GET에 대한 응답인지 POST에 대한 응답인지를 코딩한 기억이 없다.
그렇다면 curl처럼 GET이 Default로 처리가 되는 것인지, 혹은 모든 Method에 대해서 동일한 응답 값을 주는 것인지에 대한 의문이 생긴다.
curl -v -X POST http://localhost:3000
curl -v -X OPTIONS http://localhost:3000
위의 두 요청을 통하여 우리는 server.on(”이벤트”, 콜백)에서 모든 Method에 대한 응답을 동일하게 보내주는 것을 확인할 수 있다.
그러므로 우리는 각각의 Method에 따라서 이벤트를 별도로 설정을 해 주어야 하며, 이를 처리할 수 있는 코드를 추가적으로 작성해 주어야 한다는 것을 알 수 있다.
이번 포스팅 까지는 순수 Node로만 코딩을 하였을 때 필요한 모듈과 각 모듈에 대한 특징들에 대하여 알아보았다. 그렇다면 본격적인 각 Method에 따른 코딩을 들어가면서 CORS에 대한 설정을 같이 설명하는 방향으로 다음 포스팅에서 설명을 진행하려 한다.
'Node.JS' 카테고리의 다른 글
| CORS - Express편 (0) | 2022.05.11 |
|---|
댓글