Section2 Unit10 [Web Server] 기초 - CORS & Mini Node Server

---

Section2 Unit10 [Web Server] 기초
- CORS & Http 모듈로 서버 만들기(Mini Node Server)

 

📌 Chapter1. CORS

 • 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

→ 브라우저는 SOP에 의해 기본적으로 다른 출처의 리소스 공유를 막지만, CORS를 사용하면 접근 권한을 얻을 수 있게 된다.

 • SOP(Same-Origin Policy. 동일 출처 정책)는 같은 출처의 리소스만 공유가 가능한 정책이다. 동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여준다. (해킹 등의 위협에서 보다 안전해질 수 있기 때문에 모든 브라우저는 리본적으로 SOP를 사용한다.)

 • 클라이언트와 서버를 따로 개발하면 둘의 출처는 달라지는데, 클라이언트 개발시 서버에서 정보를 받아올 경우는 너무나도 많다.

SOP는 다른 사이트와의 리소스 공유를 제한하기 때문에 CORS를 통해 다른 출처의 리소스를 받아와야 한다. 

 

⭐️ 과제. Mini Node Server

🔥 Node.js의 http 모듈로 웹 서버 만들기

→ Node.js에서 파일을 읽거나 쓰기 위해 fs 모듈을 사용하듯이, HTTP 요청과 응답을 다루기 위해 HTTP 모듈을 사용한다.

 

 브라우저에는 서버에 요청을 보내기 위해 fetch 같은 HTTP 요청을 보내는 도구가 기본적으로 내장되어 있다. 서버는 클라이언트(브라우저)의 HTTP 요청에 맞게 응답을 보낼 수 있도록 코드를 작성해야 한다. Node.js는 HTTP 요청을 보내거나, 응답을 받을 수 있는 도구들을 제공한다. HTTP 요청을 처리하고 응답을 보내 주는 프로그램을 웹 서버(Web Server)라고 부른다.

 

📎 공식 가이드 문서: HTTP 트랜잭션 해부(Anatomy of an HTTP Transaction)

 

✔️ Bare Minimum Requirement

- 이번 스프린트에 이미 클라이언트, http 서버가 모두 작성되어 있다. HTTP 트랜잭션 해부를 참고하여 Mini-Node-Server를 완성하면 된다.

 

 • POST에 문자열을 담아 요청을 보낼 때는 HTTP 메시지의 body(payload)를 이용합니다.

 • 서버는 요청에 따른 적절한 응답을 클라이언트로 보내야 합니다.

 • CORS 관련 헤더를 OPTIONS 응답에 적용해야 합니다.

    • 클라이언트의 preflight request에 대한 응답을 돌려줘야 합니다.

    • preflight request에 대한 응답 헤더는 이미 작성되어 있습니다.

 

Endpoint(URL)	Method	기능
/lower	POST	문자열을 소문자로 만들어 응답해야 합니다
/upper	POST	문자열을 대문자로 만들어 응답해야 합니다

 

구현과정

💡 TIP. nodemon 설치

서버 코드를 수정하면 서버를 매번 다시 실행해야 하는데, nodemon을 사용하면 이를 자동으로 해준다.

npm install nodemon

// package.json의 scripts에 추가
"start": "nodemon server/basic-server.js"

→ npm start로 서버 실행

 

 1. http 모듈 학습

 섹션1과 섹션2의 초반부에 Node.js를 스쳐지나가듯 배웠었지만 기억나지 않는 무지 상태…

 Node.js로 코드를 작성해 본 적이 없어서 http 모듈로 웹 서버를 어떻게 만드는지 부터 공부해야 했다. 공식문서의 HTTP 트랜잭션 해부를 찬찬히 읽어봤지만 모르는 개념이 너무 많고, 이해가 잘 되지 않아서 구글링과 책(마침 예전에 Node.js도 공부하고 싶었던 욕심에 구매했던)을 통해 학습을 했다. 책이 정리가 잘 되어 있어서 이해하기 편했다.

 

아래는 책 보면서 간략하게 학습한 내용 정리 🙂

 

 👩🏻‍💻 http 모듈로 서버 만들기

// http 모듈 사용 
const http = require("http");

/* 
  http 모듈의 createServer 메서드 
  매개변수로 request(요청)와 response(응답)를 받음 
  → createServer를 여러번 호출하면 한 번에 여러 서버를 실행하는 것도 가능
*/
const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-type': 'text/html; charset=utf-8' });
  res.write('<h1>HELLO :)</h1>');
  res.end('<p>Hello Server</p>');
  /*
    writeHead 응답에 대한 정보 기록 (setHeader는 하나하나 지정)
    write 클라이언트로 보낼 데이터
    end 응답종료 메서드로 인수가 있으면 그 데이터도 클라이언트로 보내고 응답 종료
    (end는 함수가 종료되는 것이 아니기 때문에 함수를 종료하고 싶으면 return을 사용해야 함)

    → 위의 예제는 <h1>HELLO :)</h1>와 <p>Hello Server</p> 문자열을 클라이언트로 보낸 후 응답 종료
    → 브라우저는 응답 내용을 받아서 렌더링
  */
}) 
  // createServer 메서드 뒤에 listen 메서드(포트 번호와 콜백 함수)로 서버 연결
  .listen(8080, () => { 
    console.log("PORT 8080");
  })
  

/* listen 메서드에 콜백 함수 넣는 대신 listening 이벤트 붙여도 됨
server.listen(8080); // 서버 연결
server.on("listening", () => { // on()은 이벤트를 연결하는 함수. on(이벤트명, 콜백)
  console.log("PORT 8080")
});
server.on("error", (error) => {
  console.error(error);
})
*/

 

 2. 과제 basic-server.js 작성

const http = require('http');

const PORT = 4999;
const ip = 'localhost';

const server = http.createServer((req, res) => {
  // res.end("Hello, Node JS Server");
  /* ↑ server 실행시 보여주는 문구 (구현 후 삭제해야 정상동작)
    서버를 node server.js 로 브라우저에서 실행시 무한로딩이 되는 이유 : 응답이 없기 때문 */

  // Preflight Request
  if (req.method === 'OPTIONS') {
    res.writeHead(200, defaultCorsHeader);
    res.end();
  }

  // POST 
  if (req.method === 'POST') {
    if (req.url === '/upper') {
      let data = '';
      req.on('data', chunk => { // 요청의 data를 stream 형식으로 받음
        data += chunk;
        
        // 확인용 코드
        console.log("-------------------------------")
        console.log("UPPERCASE")

        console.log(chunk) // EX. Buffer로 출력 <Buffer 79 63 65 66 66 6f 72 74>
        console.log(chunk + chunk) // chunk를 +로 연결시 문자열로 자동 변환

        /*
          on()은 이벤트를 연결하는 함수이고, 위의 'data'와 아래의 'end'는 이벤트이다.
          stream : 데이터를 조각 조각으로 처리하기 위한 방법으로 큰 데이터를 효율적으로 처리할 수 있도록 도와준다.
          chunk : stream에서 전송되는 데이터의 작은 조각.
          buffer : raw 바이너리 데이터를 저장할 수 있는 특수한 유형의 객체
          → 스트림에서 데이터를 처리하거나 전송할 때는 chunk 단위로 나누어 처리한다. (메모리 효율성과 성능 면에서 이점)
        */
        console.log("data", data)
        console.log("chunk", chunk.toString()) // Buffer는 toString()으로 문자열로 변환 가능
        console.log("-------------------------------")

      });
      req.on('end', () => { // 요청의 data를 다 받은 후 실행
        data = data.toUpperCase();
        res.writeHead(201, defaultCorsHeader);
        res.end(data);
      });
    } else if (req.url === '/lower') {
      let data = '';
      req.on('data', chunk => {
        data += chunk;

        // 확인용 코드
        console.log("-------------------------------")
        console.log("LOWERCASE")
        console.log("data", data)
        console.log("chunk", chunk.toString()basic-server.js) 
        console.log("-------------------------------")

      });
      req.on('end', () => {
        data = data.toLowerCase();
        res.writeHead(201, defaultCorsHeader);
        res.end(data);
      });
    } else {
      res.writeHead(400, defaultCorsHeader);
      res.end();
    }
  }
});

server.listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
});

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
};

 

 내일 오전 라이브세션 때 basic-server 리뷰를 하는지 잘 모르겠지만, 아마 리뷰를 하면 이 글은 수정될수도..?!

 node.js를 사용해 볼 수 있는 좋은 기회였고, 앞으로 더 공부하고 싶다는 생각이 드는 과제였다 :)

---

🌙  오늘의 회고

 이전 유닛에서 맛보기는 한 적 있지만, 사용할 줄 전혀 모르는 node.js로 웹서버를 만드는 실습을 했다. 정말 아무것도 모르는데, 학습 자료와 공식 문서로는 충분히 이해가 되지 않아 어려웠다. 이전에 자바스크립트를 배우며 node.js도 다뤄보고 싶어서 관련 책을 구매한 적이 있었는데, 그 때는 펼쳐보지도 못한 이 책이 도움이 정말 많이 되었다. 😂 이렇게 저렇게 코드를 작성하며 완성은 했지만, 아직도 익숙치 않은 node.js

 자바스크립트를 배우며 백엔드와 모바일 개발까지 가능하다는 이점이 정말 크지 않을까, 라고 생각했었는데 (물론 네이티브만큼은 못하겠지만) 과연 조금씩이라도 저것들을 내가 다 해볼수 있을까…

 오늘도 정말 열심히 해야겠다는 생각이 또또또 드는 하루였다. 🫠