[네트워크/HTTP] HTTP

클라이언트가 서버랑 통신을 하려면 정해져있는 규약에 따라 소통을 해야한다.

이때 따르는 규약이 HTTP 프로토콜(방법)이며 실제로 주고받는 메세지를 HTTP 메세지라고 한다.

 

규약은 영어로 rule 국어사전에는 상호 간에 약속한 내용을 기록한 문서라는 뜻이다.

따라서 HTTP는 약속한 내용에 따라 작성해야하는 문서이고

웹에서 HTML,JSON 등의 정보를 HTTP에 따라 작성해서 서버와 통신을 할 수 있다.

 

 

HTTP 동작 방식

HTTP Messages를 주고받으며 클라이언트와 서버 사이에서 데이터가 교환된다.

출처:MDN

✔️무상태성

여기서 HTTP는 데이터를 교환하는 교환하는 역할만 할 뿐 어떠한 상태를 저장하진 않는다. 예를 들어서 쇼핑몰에서 장바구니에 상품을 담았을때의 상태는 HTTP에 의해 저장되지 않는다. 이 특징을 무상태성이라고 하며 쿠키-세션 등 다른 방법을 통해 상태를 저장할 수 있다.

 

HTTP 메세지구조

start line	요청이나 응답(에서는 status line)의 상태
HTTP headers	요청을 지정하거나, 메세지에 포함된 본문을 설명
empty line	헤더와 바디를 구분하는 빈 줄
body	요청/응답에 관련된 데이터 또는 문서, 유형에 따라 선택적 사용

HTTP Requests

start line	요청이나 응답(에서는 status line)의 상태	1. 수행할 작업(GET,PUT,POST) 방식(HEAD,OPTIONS)을 설명하는 HTTP method 2. 요청대상(URL,URI)또는 프로토콜, 포트, 메인의 절대경로 3. HTTP 버전
HTTP headers	요청을 지정하거나, 메세지에 포함된 본문을 설명	헤더이름 : 값 형태
empty line	헤더와 바디를 구분하는 빈 줄
body	요청/응답에 관련된 데이터 또는 문서, 유형에 따라 선택적 사용	GET,DELETE 처럼 서버에 리소스를 요청하는 경우 필요없다. POST,PUT처럼 데이터 업데이트 위해 필요하다.

HTTP Responses

start line	요청이나 응답(에서는 status line)의 상태	1. HTTP 버전 2. 상태코드-요청의결과(200,404) 3.상태 텍스트-상태코드설명(ok,Not Found)
HTTP headers	요청을 지정하거나, 메세지에 포함된 본문을 설명	헤더이름 : 값 형태
empty line	헤더와 바디를 구분하는 빈 줄
body	요청/응답에 관련된 데이터 또는 문서, 유형에 따라 선택적 사용	201,204같은 상태 코드를 가지는 응답에는 필요없다.

 

실습해보기

GET요청

  // [GET] /book 요청을 수행합니다.
  // 전체 예약 데이터를 조회합니다.
  findAll: (req, res) => {
    return res.status(200).json(booking);
  },
  // [GET] /book/:phone 요청을 수행합니다.
  // 요청 된 phone과 동일한 phone 예약 데이터를 조회합니다.
  findByPhone: (req, res) => {
    const {phone} = req.params;
    const result = booking.filter(booking => booking.phone === phone);
    return res.json(result);
  },
  // [GET] /book/:phone/:flight_uuid 요청을 수행합니다.
  // 요청 된 id, phone과 동일한 uuid, phone 예약 데이터를 조회합니다.
  findByPhoneAndFlightId: (req,res) => {
    const {phone, flight_uuid} = req.params;
    const result = booking.filter(booking => booking.phone === phone 
      && booking.flight_uuid === flight_uuid);
    return res.json(result);
  },

  // [GET] /airport?query={query} 요청을 수행합니다.
  // 공항 이름 자동완성 기능을 수행합니다!
  findAll: (req, res) => {
    if (req.query.query !== undefined) {
      const filteredAirports = airports.filter((airport) => {
        return airport.code.includes(req.query.query.toUpperCase());
      });
      return res.status(200).json(filteredAirports);
    }
    res.json(airports);
  }

POST 요청

  // [POST] /book 요청을 수행합니다.
  // 요청 된 예약 데이터를 저장합니다.
  create: (req, res) => {
    // POST /book에서 사용할 booking_uuid입니다.
    const booking_uuid = uuid();
    booking.push({booking_uuid, ...req.body});
    return res.json(booking)
  },

PUT 요청

  // [PUT] /flight/:uuid 요청을 수행합니다.
  // 요청 된 uuid 값과 동일한 uuid 값을 가진 항공편 데이터를 요쳥 된 Body 데이터로 수정합니다.
  update: (req, res) => {
    const { uuid } = req.params;
    const bodyData = req.body;
    let updatedFlight = flights.slice();
    updatedFlight.forEach((obj) => {
      if (obj.uuid === uuid) {
        obj.arrival_times = bodyData.arrival_times || obj.arrival_times;
        obj.departure_times = bodyData.departure_times || obj.departure_times;
        obj.departure = bodyData.departure || obj.departure;
        obj.destination = bodyData.destination || obj.destination;
        updatedFlight = obj;
      }
    });
    if (updatedFlight) {
      return res.json(updatedFlight);
    }
  }

마무리

블로그 챌린지 덕분에 다음주 네트워크 고급을 들어가기전에 http를 한번 훑어볼 수 있었다. 다시봐도 새롭고 어렵다. 개념을 정리하고 지난과제를 다시 훑어보면서 express를 주제로 잡을걸..이라는 약간의 후회가 들지만 그건또 따로 공부하면 되기 때문에! 아래 링크를 남기고 미래의 나에게 미뤄본다 ㅎㅎ..

 

 

🔗http 메서드

🌐 HTTP 메서드 종류 & 요청 흐름 💯 총정리

🔗Express미들웨어

🌐 HTTP 메서드 종류 & 요청 흐름 💯 총정리