[JS중급] Web API 배우기

• JSON이란? JavaScript Object Notation - 정보 교환을 하기 위해 만들어진 데이터 포맷... JS 기반이라 문법 유사하지만 좀 다름
  • 각 프로퍼티의 이름을 반드시 큰따옴표로 감싸줘야 함
  • 값이 문자열인 경우, 큰따옴표를 사용해야 함
  • JSON에서 표현할 수 없는 값 : undefined, NaN, Infinity 등
  • 주석 추가 X

{
   "name":"Yamdurian",
   "height":164,
   "age":25,
}

• JSON 데이터를 객체로 변환하기 : 
  
  • JSON 데이터 타입은 string

fetch('https://www.google.com')
    .then((response) => response.text())
    // JSON: JSON을 다루기 위해 사용되는 JS 기본 객체
    // parse: string JSON 데이터 -> JS 객체로 변환
    .then((result) => {const users = JSON.parse(result)});

• 메서드의 의미
  
  • 요청(request) : 메서드 정보를 보면 다음과 같은 것을 알 수 있음
    • 데이터 조회(GET) : READ
    • 데이터 추가(POST) : CREATE
    • 데이터 수정(PUT) : UPDATE
    • 데이터 삭제(DELETE) : DELETE
  • 요청의 경우, Head와 Body로 구성
    • Head : Request에 대한 부가 정보 | 메서드가 여기에 존재  | GET, DELETE
      • Header : Head 안에 존재하는 하나하나의 키와 값의 쌍
    • Body : 실제 데이터를 담는 부분 | 보통 POST, PUT은 여기에 담김
  • 헤드에 관한 표현

<!-- http/1.1에서는 method와 path의 경우 -->
<!-- 첫번째 줄에 별도의 형식을 갖고 표시됨... start-line -->
GET /men/shirts HTTP/1.1 
헤더 1: 값
헤더 2: 값
헤더 3: 값 
...

<!-- http/2에서는 method와 path의 경우 -->
<!-- method와 path를 일종의 가상 헤더(pseudo header)로 표현 -->
...
:method: GET
:path: /men/shirts
...
헤더 1: 값
헤더 2: 값
헤더 3: 값
...

• POST request 보내기

// 모든 정보 조회
fetch('https://www.google.com')
    .then((response) => response.text())
    .then((result) => { console.log(result); });

// 특정 정보 조회('3만 조회됨')
fetch('https://www.google.com/3')
    .then((response) => response.text())
    .then((result) => { console.log(result); });

// POST request 보내기
const newMember = {
    name: 'band',
    email: 'band@abc.dfg',
};
fetch('https://www.google.com', {
	// 옵션 객체
    method: 'POST',
    body: JSON.stringify(newMember),
})
    .then((response) => response.text())
    .then((result) => { console.log(result); });

• PUT request, DELETE request 보내기
  
  • PUT request : 기존 데이터 수정
  • DELETE request : 기존 데이터 삭제

// PUT request
const Member = { // 바꿀 내용
    name: 'memo',
    email: 'band@abc.dfg',
};
// 수정할 id 추가 (id = 2)
fetch('https://www.google.com/2', {
    method: 'PUT',
    // JS객체데이터를 body에 담아서 웹으로 전송하려면 stringify메서드를 사용해서 str타입으로 변환해야 함
    body: JSON.stringify(Member),
})
    .then((response) => response.text())
    .then((result) => { console.log(result); });
    
// DELETE (id = 2) - 굳이 body 프로퍼티 필요 X
fetch('https://www.google.com/2', {
    method: 'DELETE',
})
    .then((response) => response.text())
    .then((result) => { console.log(result); });

• 모범적인 Web API, REST API
  
  • Web API : 개발할 때 사용할 수 있도록 특정 라이브러리나 플랫폼 등이 제공하는 데이터나 함수 | 웹 API를 설계한다는 것은 서비스에서 사용될 모든 URL을 나열하고, 각각의 URL에 관한 예상 리퀘스트, 리스폰스의 내용을 정리한다는 뜻
  • REST API : [Client-Server, Stateless, Cache, Uniform Interface, Layered System, Code on Demand]를 만족하면 REST architecture로 인정
    • Uniform Interface : REST API와 연관이 깊은 조건
      • identification of resources : 리소스를 URI로 식별할 수 있어야 한다는 조건
      • manipulation of resources through representations : 클라이언트, 서버는 둘 다 리소스를 직접적으로 다루는게 아닌 리소스의 표현(representations)을 다뤄야 함
      • self-descriptive messages : 자기설명적인 - 클라이언트는 매 리퀘스트마다 필요한 모든 정보를 담아 전송해야 하고, 이때 클라이언트의 리퀘스트와 서버의 리스폰스 모두 그 자체에 있는 정보로 모든 것을 해석할 수 있어야 함
      • hypermedia as the engine of application state : 웹을 하나의 프로그램으로 간주했을 때, 서버의 리스폰스엔 현재 상탱서 다른 상태로 이전할 수 있는 링크를 포함하고 있어야 함
• Status Code : Request를 받은 서버가 작업 결과를 넣기 위해서 Response Head에 넣는 숫자
  • Response도 Request처럼 Head와 Body로 구성
    • Head : Response에 대한 부가 정보 | 상태코드 
    • Body : 실제 데이터를 담는 부분(주로 JSON이 들어감)
  • 상태코드
    • 100번대 : 정보성 응답
      • 100 Continue : 계속 리퀘스트를 보내도 괜찮다고 알려주는 상태 코드
      • 101 Switching Protocols :  클라이언트가 프로토콜을 바꾸자는 리퀘스트를 보냈을 때 수락하는 상태 코드
    • 200번대 : 클라이언트의 리퀘스트가 성공 처리 되었음을 의미
      • 200 OK : 리퀘스트가 성공적으로 처리
      • 201 Created : 리퀘스트의 내용대로 리소스가 잘 생성되었다
      • 202 Accepted : 리퀘스트의 내용이 일단은 잘 접수되었다는 뜻
    • 300번대 : 리퀘스트가 아직 처리되지 않았고, 처리를 원하면 클라이언트 측의 추가적인 작업이 필요함
      • 301 Moved Permanently : 리소스의 위치가 바뀌었음을 나타냄
      • 302 Found : 리소스의 위치가 일시적으로 바뀌었음을 나타냄
      • 304 Not Modified
    • 400번대 : 클라이언트 쪽에 문제가 있음
      • 400 Bad Request : 말그대로 리퀘스트에 문제가 있음
      • 401 Unauthorized : 아직 신원이 확인되지 않은(unauthenticated) 사용자로부터 온 리퀘스트를 처리할 수 없다는 뜻
      • 403 Forbidden : 사용자의 신원은 확인되었지만 해당 리소스에 대한 접근 권한이 없는 사용자라서 리퀘스트를 처리할 수 없다는 뜻
      • 404 Not Found : 해당 URL이 나타내는 리소스를 찾을 수 없다는 뜻
      • 405 Method Not Allowed : 해당 리소스에 대해서 요구한 처리는 허용되지 않는다는 뜻
      • 413 Payload Too Large : 현재 리퀘스트의 바디에 들어있는 데이터의 용량이 지나치게 커서 서버가 거부한다는 뜻
      • 429 Too Many Requests : 일정 시간 동안 클라이언트가 지나치게 많은 리퀘스트를 보냈다는 뜻
    • 500번대 : 서버 쪽의 문제로 인해 리퀘스트를 정상적으로 처리할 수 없음을 의미
      • 500 Internal Server Error : 현재 알 수 없는 서버 내의 에러로 인해 리퀘스트를 처리할 수 없다는 뜻
      • 503 Service Unavailable : 현재 서버 점검 중이거나, 트래픽 폭주 등으로 인해 서비스를 제공할 수 없다는 뜻