[Web Server] 기초

오늘 공부하면서 제일 느꼈던 점은 여러 문서를 찾아보고 스스로 공부하는것이 코드스테이츠 방식이지만 어떤 하나를 구현해보는 것이 가장 좋은 것을 깨달았다. 앞에 내용들 솔직히 눈에도 안들어 왔지만 오늘 실습을 하면서 뒤에 공부 했던것이 조금씩 보이기 시작했다. 코드스테이츠 수업 방식이 흥미를 찾아주진 않아서 직접 스스로 깨닫는게 중요한거 같다. 공부에 무슨 흥미냐 할 수 있지만 적어도 나는 그게 필요한것 같다. 그렇기에 얼른 현업에서 많은 것을 보고싶다.

CORS (cross origin resource sharing)

브라우저에서 크로스 도메인 요청은 기본적으로 제한되어있다. 웹 애플리케이션 고도화를 위해 개선 요청 했는데. 서버가 Allow한 범위에서는 허용하게 되었다.  서버에서 Allow 하는 조건들을 다 맞추고 있는가? 를 사전에 서버에 확인하는 요청

 

네이버 코드를 네이버에서 치면 내용을 전달받지만 코드스테이츠홈페이지 가서 치면 허용되지 않는다.

 

 

 

HOST 메서드  = 서버 열쇠

먼서 HOST메서드를 보내고 확인 받아서 전달하고자 하는 내용을 서버에 보내고 전달 받을 수 있는 개념

 

GET, HEAD, DELETE, OPTIONS처럼 서버에 리소스를 요청하는 경우에는 본문이 필요하지 않습니다.

POST는 전달하고자 하는 본문(response.end(   ))을 작성 합니다. (한 조건에 응답을 두번 보낼 수 없다 - 서버 다운으로 이어지기 때문에 조건문 마다 return을 마지막에 붙여준다 (end 두번 방지))

 

브라우저 주소창에 입력하면 무조건 GET 요청

 

1. 이번 챕터에서는 node.js의 http 모듈을 이용해 웹 서버를 만듭니다. node.js에서 파일을 읽거나 쓰기 위해 fs 모듈을 사용하듯이, HTTP 요청과 응답을 다루기 위해 http 모듈을 사용합니다.

2. 공식 API 문서를 읽고 문제를 해결하는 게 가장 중요하지만, 어디서부터 접근해야 할지 결정하는 일은 다소 어렵습니다. HTTP 트랜잭션 해부라는 공식 가이드 문서를 통해 여러분의 첫 시작에 도움을 받을 수 있습니다.

 

세부내용은 생략하고 크게 저 2개의 문서를 주고 미니노드서버를 만들라고 하는데 막막했지만 구글링하면 전 기수 분들이 답을 다 올려놨는데 (https://velog.io/@heeseok/201113-TIL-Mini-Node-Server-Sprint)

답답해서 보면서 했더니 이해가 잘되었다. 솔직히 고민을 하지 않고 그냥 봤으면 이해라도 했나 싶기도 하다. 앞에서 여기에 관련된 내용 진짜 하나도 모르는데 오늘 과제를 하면서 많은게 눈에 보였다.

 

HTTP 트랜잭션 해부 를 통해 만든 코드 (방법 1, 2)

 

방법 1

const http = require('http');

const PORT = 5000;

const ip = 'localhost';

const server = http.createServer((request, response) => {
  if (request.method === 'OPTIONS') {
    response.writeHead(200, defaultCorsHeader);
    response.end();
  }
  if (request.method === 'POST') {
    let body = [];
    request
      .on('data', (chunk) => {    // chunk은 버퍼, request객체는 streming
        body.push(chunk);      // 데이터가 올때마다 푸쉬 (쌓는다)
      })
      .on('end', () => {
        body = Buffer.concat(body).toString(); // 쌓인 데이트를 합치고 바디에 정렬 (Buffer 메소드)
        response.writeHead(201, defaultCorsHeader); // 헤더 보내기 
        
        // defaultCorsHeader를 넣는 이유는
        // 'Access-Control-Allow-Origin': '*'  내용이 들어가야 함으로
        
        if (request.url === '/lower') {
          response.end(body.toLowerCase());
        } 
        
        else if (request.url === '/upper') {
          response.end(body.toUpperCase());
        } 
        
        else {
          response.writeHead(404, defaultCorsHeader);
          response.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
};

 

 

방법 2 (레퍼런스)

const http = require('http');
const PORT = 5000;
const ip = 'localhost';

const server = http.createServer((req, res) => {
  if (req.method === 'POST') {
    if (req.url === '/lower') {
      let data = '';
      req.on('data', chunk => {
        data = data + chunk;
      });
      req.on('end', () => {
        data = data.toLowerCase();
        res.writeHead(201, defaultCorsHeader);
        res.end(data);
      });
    } else if (req.url === '/upper') {
      let data = '';
      req.on('data', chunk => {
        data = data + chunk;
      });
      req.on('end', () => {
        data = data.toUpperCase();
        res.writeHead(201, defaultCorsHeader);
        res.end(data);
      });
    } else {
      res.writeHead(404, defaultCorsHeader);
      res.end();
    }
  }
  if (req.method === 'OPTIONS') {
    res.writeHead(200, 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
};