http-통신-이란

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

1️⃣ 클라이언트와 서버

🔗MDN HTTP

1. 네트워크 개요

Info: 💼 네트워크=> 컴퓨터와 컴퓨터간의 연결

네이버에 접속하면 뉴스와 쇼핑, 이메일등의 각종 편의 서비스를 이용할수 이유는 내 컴퓨터나 휴대폰이 네이버 회사의 컴퓨터와 네트워크로 연결되어 있기 때문이다

2. 클라이언트와 서버

클라이언트와 서버

네트워크로 연결된 컴퓨터는 크게 두개로 나눌수 있다.

**정보를 요청해서 받는 ⇒ **클라이언트(Client) **정보를 제공해 주는 ⇒ 서버(Server) **

보통 우리가 사용하는 웹, 앱은 클라이언트이고, 뉴스, 쇼핑, 상품등의 정보를 전달해주는 쪽은 서버가 된다.

우리가 사용하는 웹(앱) 서비스는 여러 서버들과 통신하고 있다.

웹에 접속한다는 것은 웹 서버의 웹문서(HTML,CSS,JS)를 다운 받은것.
웹에서 보는 이미지들은 파일 서버에서 이미지를 다운받은 것.
웹에서 로그인을 할 때는 로그인을 돕는 인증 서버와 통신을 한 것.
앱에서 상품 정보들을 불러올 때는 상품 정보를 제공하는 API 서버와 통신을 한 것.

클라이언트의 요청에 따라 다양한 형태의 서버가 응답을 한다.

3. 서버의 기본 구조

**우리가 사용하는 모든 프로그램은 OS(운영체제)의 관리 하에 돌아간다. ** 그리고 프로그램은 개발자가 개발한 결과물이다. 서버라고 부르는 것은 **서버 전용 프로그램이 실행되고 있는 또 다른 컴퓨터 이고**서버 전용 프로그램을 개발하는 건 백엔드 개발자의 영역 이다. 하지만 요즘 Node.js 를 사용한 서버 개발도 가능하므로 프론트엔드의 개발 지식으로도 서버개발을 할수 있다

2️⃣HTTP 통신 이해

🔗프론트엔드 개발자가 알아야하는 HTTP 프로토콜 Part 1

1. HTTP 통신이란?

통신프로토콜 → 네트워크 통신 시 사용하는 다양한 방식/규칙
통신프로토콜 종류→메일을 주고 받을 때 사용하는 SMTP, 파일을 전송할 때 사용하는 FTP …
그중 HTTP 는 웹 브라우저가 웹 서버와 통신을 하기 위해 생긴것.

Info: 💡 HTTP 프로토콜 통신⇒ HTTP 통신

HTTP 통신은 크게 요청(request)과 응답(response)으로 나뉨.

요청과 응답의 공통적으로 아래의 구조를 가진다

🔗자세히보기

요청 라인에 URL, Method 같은 핵심 요청 정보 포함. (요청/응답 메세지 내용에 따라 정보 상이 )
Header에 HTTP 관련 설정 값 포함.
Body에는 통신에 필요한 데이터가 포함(옵션)

2. HTTP 요청(Request)

🐦 HTTP 통신으로 서버에게 정보 요청시 규칙

어떤 서버에게 요청할 것인지 URL이 있어야 한다. (요청 라인)
어떤 방식으로 통신을 할 것인지 Method 가 있어야 한다 (요청 라인)

2-1. HTTP Method

클라이언트가 서버에 HTTP 요청(Request) 시 URL 과 HTTP Method 를 지정해야 한다. ** HTTP Method**에 따라 서버는 어떤 요청인지를 파악할 수 있다. 많이 사용하는 Method 로는 GET, POST,PUT , DELETE … 이 있다. 🔗더알아보기 GET, POST에 대해 알아보자

네이버 네트워크 요청결과

Info: 💡 같은 URL 로 서버에 요청해도 method가 다르면 다른 요청으로 인식

GET 정보를 받아올 때 사용 ** **HTTP 요청시 method를 설정하지 않으면 기본 메소드 ⇒ GET 일반적으로 서버에서 웹을 다운받을 때 GET을 사용

웹 서버에서 웹을 다운받을 때
내 상품 정보들을 받아올 때

POST 새로운 자원 생성시 사용

로그인을 할 때 아이디, 패스워드를 담아야 함
아티클을 만들 때 입력한 아티클 정보를 담아야 함

Info: 💡 GET은 정보를 읽는 READ, POST는 정보를 작성하는 WRITE 로 볼 수 있다.

다만 서버 개발자가 어떻게 코드를 짜냐에 따라 조금씩 달라질 수도 있다.

2-2 HTTP 요청에 정보 담기

⚠ 클라이언트가 HTTP 요청을 할 때 정보를 담아야 하는 경우가 있다.

회원가입시 입력한 회원 정보를 서버에 전송해야 할 때
상품 등록시 상품 정보를 서버에 전송해야 할 때
로그인 시 아이디,패스워드 담아서 전송해야 할 떄

이때** Request method ****에 따라 정보를 담는 **방식이 다르다

이미지 출처: https://dev.to/williamragstad/how-to-use-ajax-3b5e

[GET]

Info: 📖 www.example-url.com/resources?name1=value1&name2=value2

GET은 요청을 전송할 때 필요한 데이터를 Body에 담지 않고, 쿼리 query를 통해 전송 query는 key = value 형태

GET 요청은 캐시가 가능하다.
: GET을 통해 서버에 리소스를 요청할 때 웹 캐시가 요청을 가로채 서버로부터 리소스를 다시 다운로드하는 대신 리소스의 복사본을 반환한다. HTTP 헤더에서 cache-control 헤더를 통해 캐시 옵션을 지정할 수 있다.
GET 요청은 브라우저 히스토리에 남는다.
GET 요청은 길이 제한이 있다.
GET 요청은 중요한 정보를 다루면 안된다. (보안)

Info: 💡 POST도 URL 뒤에 query를 붙일 수 있다.

[POST]

POST 메소드의 경우 HTTP의 Body 부분에 데이터를 담을 수 있다. Body는 HTTP 통신에 구조적으로 데이터를 담아서 전송할 수 있게 도와준다. 주로 로그인, 상품 업로드, 결제하기 등 클라이언트의 정보를 담아서 전송시 사용됨

POST 요청은 캐시되지 않는다.
POST 요청은 브라우저 히스토리에 남지 않는다.
POST 요청은 데이터 길이에 제한이 없다.

Info: 💡 GET은 Body에 데이터를 담을 수 없다.

3️⃣ HTTP 응답(Response)

서버는 HTTP 요청을 받으면 답변을 한다.

이때 HTTP 응답의 규칙으로

응답이 어떤 상태인지를 나타내는 Status Code 가 있다 (요청 라인)

요청 결과를 Body에 담아야 한다.

Info: 📖 Status Code

200~ 500 번까지 있으며 서버의 응답을 의미 🔗MDN 문서

응답코드분류

200 번대는 정상적으로 응답을 했을 때,
400 번대는 클라이언트가 요청을 잘못했을 때,
500 번대는 서버에서 에러가 발생했을 때

대표응답코드

200 : 정상적으로 응답이 됐다.
404 : 해당 URL 요청을 처리할 수 없다.
**500 : **서버에서 알 수 없는 에러가 발생했다.