React-41

최광희·2023년 12월 25일

React

목록 보기
40/44
post-thumbnail

HTTP

[학습 목표]
1. HTTP 프로토콜의 특징과 Request & Response 구조에 대해 이해할 수 있습니다.
2. URL이 무엇인지 이해할 수 있습니다.
3. HTTP 통신에 이용되는 여러 메서드와 상태코드를 이해할 수 있습니다.

1. ‘통신’이라는 말도 어려웠을 당신에게

(1) 개념

통신은 영어로 보면 더 쉬워요. ‘communication’이죠.

“우린 왜 이렇게 커뮤니케이션이 안되는거야!”

이처럼, 웹 프로그래밍 세계에도 서로 대화가 필요합니다. 이를 웹 통신이라고 해요. 이 대화방법은 보통 ‘데이터’로 이루어집니다. 대상은 누구인가요? 바로 서버(웹 서버)클라이언트(웹 브라우저) 입니다.

웹 통신은 서버와 클라이언트간의 대화이다.

2. 웹 통신은 약속(=프로토콜)이다

(1) 프로토콜

사람들끼리 대화를 하기 위해서 언어적, 문화적으로 정립된 약속이 있죠. 이처럼 웹 또한 서버(웹 서버)와 클라이언트(웹 브라우저)가 대화하기 위해 서로 약속된 방식이 필요합니다. 그 방식대로 서로 데이터를 주고 받아야만 “오해”가 없어요. 즉, “오류”가 없습니다.

약속을 우리는 프로토콜(protocol)이라고 해요.
특히, 웹에서 서버 ↔ 클라이언트간 주고 받은 상호간의 약속(프로토콜)을 HTTP 프로토콜이라고 해요.

이제 감이 잡히시나요?

웹에서는 브라우저와 서버가 데이터를 주고 받기 위해 HTTP 프로토콜을 사용하고 있어요. 우리처럼 프론트엔드 개발을 하는 사람이면 반드시 이 약속을 알아야만 더 깊은 수준의 개발을 할 수 있겠죠 😎

(2) 요청(Request)과 응답(Response)

서버와 클라이언트가 서로 데이터를 주고 받기(대화하기) 위해서는 항상 ‘요청(request)’을 해야 하구요, 그에 따른 ‘응답(response)’을 줍니다. 대화랑 똑같죠?

보통 클라이언트가 대화를 시도하구요. 서버는 요청을 받아, 그에 따른 응답을 주는 쪽을 의미한답니다.

(3) URL에 대해서

우리는 이미 url이라는 용어는 많이 들어보았어요. 구조를 한번 뜯어보죠.

아래와 같은 용어들이 등장해요.

  • protocol
  • domain(sub domain, domain name)
  • resource path(path/page)
  • query variable, path variable

    [출처 : https://www.hostinger.in/tutorials/what-is-a-url]

(4) 메서드

이미 여러분들 알고계세요! 종류만 언급하게 넘어갈게요 🙂

GET - 조회
POST - 생성
PUT, PATCH - 수정(변경)
DELETE - 삭제

더 많지만, 필요할 때 마다 찾아봐도 전-혀 상관없습니다. 아래 주요 링크를 걸어드릴게요.
링크텍스트

(5) 상태코드

개발에 관심을 가지시면서 이런 비슷한 짤을 보신 적이 있으신가요?

클라이언트가 서버에 어떤 요청(request)를 하고 나면, 서버는 그에 맞는 응답(response)를 제공합니다. 그 때, 각 응답은 상태코드를 갖는데요. 아래와 같습니다.

  • 1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다.
  • 2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용하였습니다.
  • 3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요합니다.
  • 4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다.
  • 5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패했습니다.

아래 정리를 재밌게 해놨는데, 같이 살펴보고 마무리 하시죠!

링크텍스트

profile
나는 사람들을 치료해주는 '약'과 같은 존재가 되고 싶다.

0개의 댓글