서버와 HTTP 개념 이해하기

2021. 4. 28. 22:09프론트엔드/JavaScript

728x90
반응형

클라이언트와 서버

1. 네트워크 기본

 

네트워크는 컴퓨터와 컴퓨터간의 연결을 의미한다.

 

우리가 사용하는 거의 모든 서비스는 네트워크를 이용한다.

ex) 카카오톡

메세지를 받고 친구에게 선물을 할 수 있는 이유는 우리의 컴퓨터(스마트폰)와 카카오회사의 컴퓨터와 연결되었기 때문이다.

 

 

2. 클라이언트와 서버

 

클라이언트(Client) : 네트워크에서 정보를 요구해서 받는 쪽

서버(Server) : 정보를 제공해주는 쪽

 

보통 우리가 사용하는 웹, 앱은 클라이언트이다. 그리고 상품 정보, 로그인, 이미지 등을 전달해주는 쪽은 서버이다.

 

실제로 우리가 사용하는 웹, 앱 서비스는 다양한 서버들과 통신하고 있다.

  • 우리가 브라우저에서 웹에 접속한다는 것은 웹 서버에서 웹(HTML, CSS, JS)를 다운받은 것
  • 우리가 웹에서 보는 이미지들은 전부 파일 서버에서 이미지를 다운받은 결과물
  • 우리가 웹에서 로그인을 할 때는 로그인을 돕는 인증 서버와 통신을 한 것
  • 우리가 앱에서 상품 정보들을 불러올 때는 상품 정보를 제공하는 API 서버와 통신을 한 것

3. 서버의 기본 구조

우리가 사용하는 모든 프로그램은 OS의 관리 하에 돌아간다. 그리고 프로그램은 개발자가 열심히 개발하는 결과물이다.

일반적으로 서버라고 부르는 것은 서버 전용 프로그램이 실행되고 있는 컴퓨터라고 생각하면 된다.

그리고 서버 전용 프로그램을 개발하는 건 보통 백엔드 개발자가 개발하게 된다.

 


HTTP 통신이란?

컴퓨터끼리 네트워크 통신을 할 때 여러가지 방식으로 통신이 가능하다. 이런 통신 방식들을 묶어서 통신 프로토콜이라고 한다.

메일을 주고 받을 때 사용하는 SMTP 프로토콜, 파일을 전송할 때 사용하는 FTP 프로토콜 등이 있다.

우리가 사용할 HTTP 프로토콜은 원래 브라우저가 웹 서버와 통신을 하기 위해 생긴 프로토콜이다.

지금은 대부분의 네트워크 통신에서 사용되는 대중적인 프로토콜이다.

 

HTTP 통신은 기본적으로 요청(request)과 응답(response)으로 나눠서 이해할 수 있다.

요청과 응답 모두 아래와 같은 구조를 가진다.

요청 라인
헤더
공백
바디

 

-요청 라인에 URL, Method 같은 핵심 요청 정보가 들어간다. 요청과 응답에 따라 구성 요소가 다르다.

-Header에 HTTP 관련 여러 설정 값이 들어간다.

-Body에는 통신에 필요한 데이터가 들어간다.(옵션)

 

HTTP 요청

HTTP 통신으로 서버에게 정보를 요청하기 위해선 몇가지 규칙을 지켜야 한다.

1. 어떤 서버에게 요청할 것인지 URL이 있어야 한다. (요청 라인)

2. 어떤 방식으로 통신을 할 것인지 Method가 있어야 한다. (요청 라인)

 

HTTP Method

네이버 네트워크 요청 결과

클라이언트가 서버에게 HTTP 요청을 할 때 URL 주소와 함께 HTTP Method를 정해야 한다.

HTTP Method에 따라 서버에서는 어떤 요청인지를 파악할 수 있다.

대표적으로 사용되는 GET, POST를 알아본다.

 

GET

일반적으로 정보를 받아올 때 사용하는 Method

HTTP 요청을 할 때 method를 설정하지 않으면 기본 메소드로 GET이 들어간다.

일반적으로 웹 서버에서 웹을 다운받을 때 GET을 사용한다.

 

[사용 예시]

웹 서버에서 웹을 다운받을 때

내 상품 정보들을 받아올 때

 

POST

새로운 자원을 생성할 때 POST를 많이 사용한다.

 

[사용 예시]

로그인을 할 때 아이디, 패스워드를 담아야 함

아티클을 만들 때 입력한 아티클 정보를 담아야 함

 

HTTP 요청에 정보 담기

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

  • 회원가입을 할 때 회원 정보를 서버에게 보내줘야 한다.
  • 상품을 만들 때 상품 정보를 서버에게 보내줘야 한다.
  • 로그인을 할 때 아이디 패스워드를 담아야 한다.

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

 

GET

GET방식은 서버에 데이터를 전송해야 할 때 url 맨 뒤에 query라는 것을 붙인다.

query는 key=value 형태로 구성되어 있다.

 

POST

POST 메소드의 경우 HTTP의 Body 부분에 데이터를 담을 수 있다.

Body는 HTTP통신에 구조적으로 데이터를 담아서 전송할 수 있게 도와준다.

대표적으로 로그인, 상품 업로드, 결제하기 등 우리의 정보를 담아서 보내야하는 경우 많이 사용된다.

 

HTTP 응답

서버에서는 HTTP 요청을 받으면 열심히 일을 해서 응답을 해준다. 이때 HTTP응답의 규칙으로

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

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

 

이때 Status Code는 200~500번까지 있으며 서버의 응답에 대한 상태를 표현한다.

 

'프론트엔드 > JavaScript' 카테고리의 다른 글

[Javascript] callback(콜백)함수  (0) 2021.04.27
[ES6] 문법 익히기  (0) 2021.02.05
Javascript 핵심 익히기(2)  (0) 2021.02.02
Javascript 핵심 익히기(1)  (0) 2021.01.30