네트워크 통신

2022년 6월 25일

#web

네트워크통신

이미지, 동영상, 음악… 네트워크를 통해 다운받고 사용하고 있다는 사실! 이러한 콘텐츠는 컴퓨터 로컬에 저장되어 있는 것이 아닌, 외부와의 통신을 통해 가져옵니다. 그 중에서도 프론트엔드에서는 HTTP와 자바스크립트 비동기 API를 통해 네트워크통신을 알아봅시다.

HTTP

HTTP(HyperText Transfer Protocol)는 **HTML같은 하이퍼미디어 문서를 전송하기 위한 프로토콜**입니다!

→ 프로토콜 : 데이터가 전송되는 방식을 결정하는 규약. 송신자와 수신자 사이에서 데이터 포맷, 오류 제어에 대한 규칙을 이야기합니다.

웹에서 이뤄지는 데이터 통신의 기초로 주로 TCP를 사용합니다. 기본 포트는 80번, 송수신하는 데이터는 http: 로 시작하는 URL로 접근합니다.

→ TCP VS UDP : OSI 7계층의 4번째 계층인 전송계층에서 사용되는 프로토콜. TCP는 연결 지향적, 순서보장, 상대적으로 느림. UDP는 비 연결 지향적, 순서 보장X, 빠름.

클라이언트 측과 서버는 프로토콜을 통해 정해진 포맷에 맞춰 통신합니다.

클라이언트 → 서버 : Request
서버 → 클라이언트 : Response

HTTP 통신에는 상태(state)라는 개념은 없습니다. 클라이언트-서버는 연결되어 있지 않고, 그 전에 처리된 요청과 응답이 통신에 영향을 주지 않으며, 독립적으로 처리됩니다.

현재는 보안이 강화된 HTTPS(HyperText Transfer Protocol over SSL)를 주로 사용합니다. https의 경우 기본 포트 443번으로 사용하며 https: 로 시작하는 URL 통해 접근합니다.

상태코드

HTTP 응답 상태 코드는 HTTP 요청이 성공적인지 알려주는 세 자리 정수입니다.

응답은 크게 5개 그룹으로 나뉘어집니다.

1XX (informational) : 서버에서 요청을 수신했으며, 현재 처리하고 있거나 정보를 알려 줄 필요가 없을 경우
2XX (Successful) : 요청이 성공적으로 완료
3XX (Redirection) : 요청을 마치기 위해 다른 위치로 리다이렉션하는 것과 같이 추가 동작을 취해야 할 경우
4XX (Clientt Error) : 요청에 잘못된 구문 포함 혹은 수행할 수 없는 경우
- 400 (Bad Request) : 요청 오류. 잘못된 문법이나 서버가 해당 응답을 이해할 수 없는 경우
- 401 (Unauthorized) : 권한 없음. 요청을 받기 위해 인증을 받아야 하는 경우
- 403 (Forbidden) : 접근이 금지된 경우
- 404 (Not Found) : 서버가 유효한 요청을 수행하지 못했을 경우
5XX (Server Error) : 서버가 유효한 요청을 수행하지 못했을 경우

이 중 4XX 에러는 프론트 개발자가 좀 더 유의해야하는 에러입니다! 클라이언트 측의 대응책을 마련하는 게 좋습니다.

잘못된 URL을 입력한 경우에 대한 처리, 백엔드 개발자와 상호 합의된 데이터 포맷 등!

HTTP 메서드

응답을 저장해 향후 재사용할 수 있는 HTTP 메서드입니다. (Cacheable) 아래는 많이 사용되는 6가지 HTTP 메서드입니다.

GET : 특정 리소스를 가지고 올 때 사용
POST : 서버로 데이터를 전송할 때 사용. 이를 통해 서버 변경 일어남.
PUT : 요청 payload를 사용해 새로운 리소스를 생성하거나, 타깃을 payload 로 대체. PUT메서드는 POST메소드랑 다르게 멱등성을 가짐.
PATCH : 리소스의 특정 부분을 수정할 때 사용.
DELETE : 특정 리소스 제거할 때 사용
OPTIONS : 주어진 URL 또는 서버에 대해 허용된 통신 옵션을 확인할 때 사용. 서버에서 지원하는 메서드를 확인하거나 사전 요펑을 보내는 용도로 사용

헤더

HTTP 헤더는 서버와 클라이언트 사이에서 body 외에 추가적인 정보를 교환하는 방식입니다. HTTP 메시지 가장 앞에 삽입되며, 대소문자를 구분하지 않고 이름:값으로 이루어져 있습니다.

쿠키

HTTP 쿠키는 서버가 사용자의 웹 브라우저에 전송하는 작은 기록 정보 파일을 의미합니다.

쿠키는 공개된 정보로 보안에 취약하여 개인 정보나 보안상 중요한 정보를 담기엔 적합하지 않아요.

쿠키 외에 WebStorage(localStroage, sessionStroage) 같이 정보를 기록할 수 있는 저장소가 생겼기에 사용성을 맞춰 선택하면 됩니다.

쿠키는 이름-값 쌍으로 정보를 기록하고, 만료기간, 도메인, Secure, HttpOnly 등의 정보를 기록합니다.

JSON

JSON 포맷은 더글라스 크락포드가 처음 정의하고 보급한 문자 기반의 데이터 교환 형식입니다.

객체 리터럴 작성법을 따르며, 문자열, 숫자, 불리언을 가질 수 있고, 중첩된 계층 구조를 가질 수 있습니다.

{
  "name": "joy",
  "age": 24,
  "school": [
    {
      "name": "Hanuel"
    },
    {
      "name": "Dongsan"
    },
    {
      "name": "Seoul"
    }
  ]
}

JSON은 문자열 형태이기에, 네트워크 전송시 유리합니다. 하지만 자바스크립트 객체를 데이터로 전송하거나 전송 받는데, 파싱이 필요합니다.

stringfy() : 문자열로 변환
parse() : 객체로 변환

Ajax

초기의 웹은 서버로 요청을 보내고, 응답을 받아 페이지를 전체 그리는 방식이었습니다!

항상 전체 페이지에 대해 응답을 받기 때문에, 비슷한 페이지를 그려도 전체를 요청했기에 많은 리소스가 낭비되었습니다.

하지만! 구글이 웹서버와 비동기 통신 기술을 사용하면서, 웹에 변화가 시작됩니다.

페이지의 일부만 수정할 수 있게 되어, 응답성이 크게 향상되었습니다. 페이지 이동없이 빠르게 화면을 동적으로 변경할 수 있는 것입니다!

현재는 AJax라는 이름으로 불리고 잇으며, 브라우저에서는 XMLHttpRequest라는 API로 Ajax를 사용할 수 있습니다.

const xhr = new XMLHttpRequest()
const method = 'POST'
const url = '/posts'

xhr.open(method, url)

// ----------------

const body = JSON.stringify({ userId: 100 })

xhr.send(body)
xhr.abort()

브라우저와 웹 서버 간에 통신을 하여 리소스를 가져올 수 있는 API입니다.

open() : 서버에 정보를 가져올 때
send() : 서버에 요청을 보낼 때
abort() : 요청 중지

헤더 다루기

setRequestHeader() : 이름과 값을 인자로 넘겨 원하는 헤더 필드를 지정할 수 있습니다.
- xhr.setRequestHeader(’Content-Type’, ‘application/json’);

이벤트

응답을 다루는 이벤트는 여러 가지 존재합니다.

loadstart : 요청이 시작될 때 발생
progress : 요청한 데이터를 받는 동안 주기적으로 발생
load : 요청이 성공적으로 종료되었을 때 발생
loadend : 성공 여부 관계없이 요청 처리 과정이 완료되었을 때
요청 처리에 문제가 발생했을 때 timeout, abort, error 이벤트로 각각 예외를 처리할 수 있습니다.

단, Error 이벤트는 HTTP 상태코드가 4XX 5XX 때 발생하는 것이 아닌 네트워크 장애로 인해 요청이 완료되지 않았을 때 발생합니다!