🎯 Achievement Goals

• HTTP 메소드의 종류를 이해할 수 있다.
• HTTP 메시지가 어떤 구성으로 이루어져 있는지 이해할 수 있다.
• 클라이언트와 서버가 서로 통신하기 위해 사용하는 HTTP 프로토콜에 대해 이해할 수 있다.
• HTTP 요청/응답을 브라우저를 통해 확인할 수 있고, 해당 내용을 읽을 수 있다.
• HTTP 다양한 요청 방식과, 응답 코드에 대해 이해할 수 있다.

👉 HTTP 특징

메소드

위에 사진은 HTTP 메소드 중에서도 가장 많이 쓰이는 메소드이다. POST메소드는 header와 body 둘 다 갖는다.

속성

• connectionless(무연결성): 응답이 완료가 되면 클라이언트와 서버의 연결이 끊어지는 특징이다.
• stateless (무상태성): HTTP는 특정 상태를 담고 있지 않으며 이전 요청이나 다음 요청을 기억하지 않는다. 모든 HTTP 요청은 독립적이므로, 서버는 클라이언트의 상태를 기억하지 못한다. (지속적인 state라는 것은 없다.)

• Accept: 돌려줄 데이터 타입에 대해 서버에 알린다.
• Content-Type: 리소스의 미디어 타입을 나타낸다.
• Content-Length: 수신자에게 전송된 엔티티 바디의 크기를 10진수 바이트 단위로 나타낸다.
• Allow: 리소스에 의해 지원되는 HTTP 요청 메소드를 나열한다.

• Access-Control-Allow-Origin: 값은 *(모든 출처를 허용)하거나 한가지 출처만 허용한다.
• Access-Control-Max-Age: 허용할 시간을 초 단위로 나타낸다.
• Access-Control-Allow-Method: 허용할 메소드를 나타낸다.
• Access-Control-Allow-Headers: 허용할 헤더를 나타낸다.

👉 Mini Node Server

그동안 fetch를 이용해 HTTP 요청을 보냈다면 오늘은 HTTP 요청에 따른 응답을 처리할 수 있도록 코드를 작성하였다. node.js 에서는 HTTP 요청을 보내거나, 응답을 받을 수 있는 도구를 제공한다.

그래서 node.js의 HTTP 모듈을 이용하여 간단한 웹 서버를 만드는 것을 해보았다.

구동방식은 매우매우매우 간단한 것이였다. 영어를 입력하고 변환 버튼을 누르면 대문자/소문자로 변환시켜주는 것이였다.

이번 스프린트는 node 공식문서의 HTTP 트랜잭션 해부 부분을 많이 활용하였다.

서버 생성

모든 node 웹 서버 애플리케이션은 웹 서버 객체를 만들어야 한다. (createServer 활용)

const http = require('http');

const server = http.createServer((request, response) => {

})

HTTP 요청이 서버에 오면 node가 트랜잭션을 다루려고 request와 response객체를 전달하며 요청 핸들러 함수를 호출한다.

오늘 배운 "on"이라는 메소드는 지정된 이벤트 처리를 통합하는 것으로, 첫번째 인자에 이벤트 이름을 넣고, 두번째 인자에 통합처리(함수)를 지정한다.

요청 바디

// 생략...

if (request.method === "POST" && request.url === "/upper") {
    let body = [];
    // 스트림에서 chunk 데이터를 읽을 수 있을 때 'data' 생성
    request.on("data", (chunk) => {
        body.push(chunk);
    // 스트림에서 데이터가 더 이상 제공되지 않을 때 'end' 생성
    }).on("end", () => {
        // 각 'data' 이벤트에서 발생시킨 청크는 'Buffer'이다.
        body = buffer.concat(body).toString();
    })
}

HTTP 상태 코드

따로 설정하지 않으면 응답의 HTTP 상태 코드는 항상 200이다.

response.statusCode = 404; //(bad request)
response.end();

명시적인 헤더 데이터 전송

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

메소드가 옵션일 때, CORS 설정

if (request.method === "OPTIONS") {
    // 응답 헤더 작성(statusCode, object)
    response.writeHead(200, defaultCorsHeader);
    // 응답 본문 작성
    response.end()
}

🙌 느낀점

이번 스프린트는 node API 공식 문서를 활용했기 때문에 어렵진 않았다. 다만 요청받은 서버를 직접 응답해보는 과정이 재미있었다. 다음주는 직접 server의 구조를 알아보는 과정에 대해서 배운다.

node.js를 활용해 로컬을 만들고 그것과 연결시킬 것이다. 이 부분도 정말 어렵겠지만, 개발자가 되려면 정말 중요한 내용이기 때문에 빨리 배우고 싶다. 서버를 배우고 나면 조금이나마 개발에 대해서 배우고 있다는 것을 더 실감할 것 같다!

👊 내일의 TIW(today I Will)

이번 주 스프린트 복습