19 :: HTTP, REST API, Fetch API

엘리스 SW 엔지니어 트랙 19일차

온라인 강의날

 

 

async / await 사용법을 알아보고

 

 

HTTP(Hypertext Trasfer Protocol)

• 서버와 클라이언트 간의 통신하는 방법을 정한 것
• 서버와 클라이언트 사이에 많은 요소와 절차가 존재
• HTTP는 이런 요소들 사이의 통신 방법 규정
• 여러 통신 방법 중 하나
• HTTP가 나오기전에는 마구잡이 요청하고 보내고 했나보다

서버 주소, 요청 메서드, 상태 코드, target path, 헤더 정보, 바디 정보 등 포함

 

 

요청 메서드

• GET - 가져올 때
• POST - 보낼 때
• PUT, PATCH - 업데이트
• DELETE - 삭제

 

 

REST API(Representational State Transfer API)

서버 API와 클라이언트 간 통신의 구조의 베스트 예시 명시

 

 

HTTP는

=> 통신규약

 

REST API는

=> HTTP, 이 규약을 어떻게 잘 사용해서

클라이언트와 서버간 통신을 할까에 대한 내용

 

 

Fetch API

XMLHTTPRequest 대체 하는 HTTP 요청 API

 

fetch는 Promise를 리턴한다

 

이런식으로 POST 요청도 가능하다고 한다

서버에 데이터에 생성할 때 요청을 보내는 코드

fetch(serverURL, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json; charset=utf-8',
        Authentication: 'mysecret'
    },
    body: JSON.stringify(formData)
})
    .then(response => {
        return response.json()
    })
    .then(json => {
        console.log('POST 요청 결과', json)
    })

 

 

fetch by Anthony Duran #unsplash