2024.04.26 1차 스터디

오늘의 스터디 주제는? 비동기 데이터 통신 HTTP!

최근에 JavaScript의 학습 기간이 끝나고 Node.js를 학습하게 되었다. 강의를 보며 이전보다 더욱 복잡한 코드를 이해하는데 어려웠다. 강의를 듣고 로그인 웹 서버를 만들어보는 과제를 하는데 주석으로 써진 방법을 보아도 무슨 코드를 작성해야 하는지 감조차 잡을 수 없었다. 그래서 Velog에 서버를 만드는데 필요한 기본 개념을 정리하여 기록하고자 한다!!



웹 서버란 ?

웹 서버는 텍스트, 이미지, 비디오 및 애플리케이션 데이터와 같은 웹 사이트 콘텐츠를 클라이언트 요청을 받고 전달한다. 가장 일반적인 유형의 클라이언트( 웹 브라우저)가 링크를 클릭하거나 표시된 페이지에서 문서를 다운로드하고자 할 때 HTTP를 통하여 데이터를 요청받고 데이터를 전달하는 웹 브라우저 프로그램이다.

일상에서 비유하자면 클라이언트가 웹브라우저로 네이버 주소를 요청을 하면 HTTP를 통하여 요청을 받은 뒤 HTML 문서 등의 필요한 데이터를 반환해 주는 프로그램인 것이다.



HTTP란 ?

HTTP(HyperText Transfer Protocol는 클라이언트(웹 브라우저)와 서버(웹 서버)가 데이터를 주고받을 수 있게 해주는 프로토콜(규약)이다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 이 규악을 암호화하며 보안을 확보한 규약을 HTTPS라 한다.
HTTP에서는 클라이언트가 서버에 요청 메시지를 보내고 이에 대해 서버가 응답 메시지를 반환한다. 이때 서버는 응답 메시지를 반환한 후에 초기 상태로 돌아가는데 이러한 특징으로 인해 HTTP를 Stateless Protocol이라고도 한다.



Stateless Protocol 이란 ?

HTTP는 상태를 저장하지 않는 프로토콜이기 때문에 서버가 여러 요청을 하는 기간 동안 각 사용자에 대한 정보나 상태를 유지할 필요가 없고, 이는 각 요청에 대한 연결을 재설정하는 데 소요되는 시간 / 대역폭을 최소화하기 위한 것이다.
즉, 클라이언트의 요청을 기억해 두지 않는다는 특징이 있다.

대역폭이란?
데이터 통신(data communication)에서 어떤 대역의 크기를 표시하는 것으로 최고 주파수와 최저 주파수와의 차




HTTP Request와 Response 란 ?

1. Request(요청) 구조

요청 메시지의 구조는 3가지로 나누어져 있다.

  • Starter line(행)
    HTTP 메서드, URL, HTTP 버전 정보 등을 포함한다. 일반적으로 POST/test.html HTTP/1.1 과 같이 표현된다.

  • Headers(헤더)
    Key:Value 값으로 해당 Request에 대한 추가 정보를 담고 있다.

  • Body(본문)
    서버로 전송하는 데이터가 담겨있는 부분이다. 전송하려는 데이터가 없다면 비어있게 된다.

1-2. Request(요청) Method종류

HTTP Method는 수행할 작업의 종류를 나타내기 위해 서버에 요청(Request)을 보낼 때 사용한다. 이러한 방법을 사용하면 브라우저와 서버 간의 더 풍부한 통신이 가능하다.

메서드의 종류는 총 9가지가 있으며 자주 사용되는 5가지만 간단히 설명하자면 아래와 같다.

GET : 어떠한 데이터를 받아올 때
POST : 데이터를 등록할 때
PUT : 데이터를 수정 또는 대체 할 때
PATCH : 데이터를 일부만 변결 할 때
DELETE : 데이터를 서버에서 삭제할 때



2. Response(응답) 구조

응답 메세지의 구조 또한 3가지로 나누어져 있다.

  • Starter line(행)
    Status Code(상태 코드), Status Text(상태 메시지), HTTP 버전 정보 등을 포함한다. 일반적으로 HTTP/1.1 200 OK와 같이 표현된다.

  • Headers(헤더)
    Key:Value 값으로 해당 Request에 대한 추가 정보를 담고 있다. Request와 동일하지만 Response에서만 쓰이는 값이 있다.

  • Body(본문)
    클라이언트 측으로 보내는 데이터를 포함한다.

2-2. Response(응답) Status Code 란?

클라이언트(브라우저) 요청의 처리 상태를 응답을 통해 알려주는 기능으로, 100 ~ 500번 대의 3자리 숫자로 만들어져 있다. 주요 상태 코드들을 알아보자.

  • 100 ~ 199
    정보 코드(infomational codes)로 요청에 대한 정보 메세지를 반환하는 코드

  • 200 ~ 299
    성공 코드(success codes)로 성공적인 요청을 나타내는 코드
    200 (OK) : 요청을 성공했습니다.

  • 300 ~ 399
    리다이렉션 코드(redirection codes)로 추가적인 작업 조치가 필요한 알림인 코드

  • 400 ~ 499
    클라이언트 에러 코드(client error codes)로 클라이언트로 인해 발생한 오류를 나타내는 코드
    401 (unauthorized) : 인증에 실패했습니다.
    403 (Forbidden) : 액세스가 허용되지 않았습니다.
    404 (Not Found) : 요청한 리소스를 찾지 못했습니다.

  • 500 ~ 599
    서버 에러 코드(server error codes)로 서버에서 오류가 발생했음을 나타내는 코드
    500 (Internal Server Error) : 서버 내부에 오류가 발생했습니다.
    503 (Serrver Unanailable) : 서비스를 일시적으로 사용할 수 없습니다.

profile
프론드엔드 개발자 입니다!

0개의 댓글