5주차 스터디 자바스크립트 웹 개발 기본기 (2) Web API [코드잇 부스트 백엔드 스터디 ]

 

<자바스크립트 웹 개발 기본기>

 

2. Web API 배우기

 
API란 Application Programming Interface의 약자로, 원래는 '개발할 때 사용할 수 있도록 특정 라이브러리나 플랫폼 등이 제공하는 데이터나 함수 등'을 의미
 
웹 개발에서는 어느 URL로 어떤 리퀘스트를 보냈을 때, 무슨 처리가 수행되고 어떤 리스폰스가 오는지에 관해 미리 정해진 규격을 Web API
 
💡Web API를 설계한다는 것은 서비스에서 사용될 모든 URL들을 나열하고, 각각의 URL에 관한 예상 리퀘스트와 리스폰스의 내용을 정리한다는 뜻
 
* REST API는 오늘날 많은 웹 개발자들이 Web API 설계를 할 때, 준수하기 위해 노력하는 일종의 가이드라인
 

JSON이란

 

JSON(JavaScript Object Notation)

 
• 어떤 정보를 교환할 때 사용하기 위해서 만들어진 데이터 포맷
• 자바스크립트 언어의 문법을 빌려서 만들어진 데이터 포맷
 
 

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response)=> response.text())
  .then((result)=>{console.log(result)}

서버가 보내주는 리스폰스의 종류
 
 
 

자바스크립트 객체 표기법과 JSON문법의 차이

 
 
1. JSON에는 프로퍼티의 이름과 값을 표현하는 방식에 제한이 있다.
   1) JSON에서는 각 프로퍼티의 이름을 반드시 큰따옴표(")로 감싸줘야 한다
 

{
   "name":"Michael Kim",
   "height":180,
   "weight":70,
   "hobbies":["Basketball", "Listening to music"]
}

   
    2) JSON에서는 값이 문자열인 경우 큰따옴표(")를 사용해야 한다
 
 
 
2. JSON에서는 표현할 수 없는 값들이 있다.
자바스크립트에서는 프로퍼티의 값으로 사용할 수 있는 undefined, NaN, Infinity 등을 JSON에서는 사용할 수 없다.
 
 
3. JSON에는 주석을 추가할 수 없다.
JSON은 코드가 아니라 데이터 포맷이기 때문에 그 안에 주석을 포함시킬 수 없다.
 
 
 

JSON 데이터를 객체로 변환하기

 
string 타입의 JSON데이터는 그대로 자바스크립트 객체로 변환 가능
 
 

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response)=> response.text())
  .then((result)=>{
  const users = JSON.parse(result)}
 
  );

💡JSON이라는 객체의 parse라고 하는 메소드를 사용하면 String 타입의 JSON 데이터를 자바스크립트 객체로 변환할 수 있다
 
string 타입의 json 데이터에 표현된 사용자 정보들의 배열을 실제로 자바스크립트 배열로 변환한다는 뜻
 
 
☑️실행결과

 
 
 
 
코드잇 토픽 데이터 처리하기
 

/* fetch('https://learn.codeit.kr/api/topics')
    .then((response) => response.text())
    .then((result) => { console.log(result) }) */

// 일단 이 코드를 주석 해제하고, 아래 코드를 주석 처리해서 어떤 JSON 데이터가 오는지 확인하세요


fetch('https://learn.codeit.kr/api/topics')
  .then((response) => response.text())
  .then((result) => {
    const topics = JSON.parse(result);
    const beginnerLevelTopics = topics.filter((topic) => topic.difficulty === '초급');
    console.log(beginnerLevelTopics);
  });

 
☑️JSON 데이터가  result 파라미터로 넘어올 때는 그 데이터 타입이 string이기 때문에 자바스크립트 객체로 변환을 해줘야 한다.
 
 
 

---

 
 

메소드의 의미

 
 
리퀘스트의 종류
 
데이터 조회 GET Request
데이터 추가 POST Request
데이터 수정 PUT Request
데이터 삭제 DELETE Request
→리퀘스트의 메소드라는 정보를 보고 알 수 있다
 
 
CRUD (Create-Read-Update-Delete)
데이터베이스 관점에서 데이터에 관한 처리를 나타낸 합성어
만약 서버가 데이터베이스를 사용한다면 CRUD 작업을 하게 된다
 

메소드	데이터 처리
GET	READ
POST	CREATE
PUT	UPDATE
DELETE	DELETE

 
 
 
 

Request의 Head와 Body

 

 
 
Head : Request에 대한 부가 정보가 담겨있다
Body: 실제 데이터를 담는 부분
 
 
 

 
post , put은 보통 body에 데이터를 담아서 보내줘야한다
하지만 get, delete는 보통 body가 필요하지 않다
 
 
 

 
 
💡method값은 리퀘스트의 헤드에 존재한다
path: 패스 정보 , 웹브라우저가 어떤 데이터를 원하는 지 알 수 있다
user-agend: 리퀘스트를 보낸 브라우저와 운영체제 정보를 알 수 있다
 
 
 
http/1.1에서는 method와 path의 경우
 

GET /men/shirts HTTP/1.1 
헤더 1: 값
헤더 2: 값
헤더 3: 값 
...

 
http/2에서는 start-line 대신에, method와 path를 일종의 가상 헤더(pseudo header)로 표현
 

...
:method: GET
:path: /men/shirts
...
헤더 1: 값
헤더 2: 값
헤더 3: 값
...

 
 
 

GET, POST request 보내기

 
*웹 브라우저로 url에 접속하면 GET Request를 보내는 것과 같다
 
GET Request

fetch('https://learn.codeit.kr/api/members/3')
  .then((response)=> response.text())
  .then((result)=>{console.log(result);});

→ id 3번 직원 정보 조회
 
 
☑️실행결과
 

 
 
 
POST request
• 정보 추가, 추가할 직원의 정보를 리퀘스트의 바디에 넣어줘야한다
• fetch함수는 아무런 설정을 하지 않으면 기본적으로 GET Request를 보내도록 되어있다
 

const newMember ={
  name: 'Jerry',
  email: 'jerry@coideitmail.kr',
  department: 'engineering',
}

fetch('https://learn.codeit.kr/api/members',{
  method: 'POST',
  body: JSON.stringify(newMember),
})
 .then((response)=> response.text())
 .then((result)=>{console.log(result);});

 
 
JSON 객체의 stringify라고 하는 메소드의 아규먼트로 newMember 객체를 넣고 실행 →
💡stringify 메소드는 자바스크립트 객체를 string 타입의 json 데이터로 변환한다 (parse랑 반대)
 
 
 
☑️실행결과
 

 
 
 
 

PUT request, DELETE request 보내기

 
 
PUT Request (수정)
 

const member ={
  name: 'Alice',
  email: 'Alicey@coideitmail.kr',
  department: 'marketing',
}

fetch('https://learn.codeit.kr/api/members/2',{
  method: 'PUT',
  body: JSON.stringify(member),
})
 .then((response)=> response.text())
 .then((result)=>{console.log(result);});

 
 
☑️실행결과
 
 

 
 
DELETE Request (삭제)
• 굳이 body 프로퍼티가 필요 없다
 
 

fetch('https://learn.codeit.kr/api/members/2',{
  method: 'DELETE',
})
 .then((response)=> response.text())
 .then((result)=>{console.log(result);});

 
 
☑️실행결과
 

 
 

JSON 데이터 다루기 종합

 
자바스크립트 객체를 string 타입의 JSON 데이터로 변환하는 것은 영어로 Serialization, 우리말로는 직렬화라고 한다 (stringify)
 
반대로 string 타입의 JSON 데이터를 자바스크립트 객체로 변환하는 것을 영어로는 Deserialization, 우리말로는 역직렬화라고 한다 (parse)
 
1. string 타입의 JSON 데이터 vs 자바스크립트 객체
 
☑️자바스크립트 실행 환경에서만 인식되는 객체라는 존재를 어느 환경에서든 해석될 수 있는 포맷으로 변환하기 위해 Serialize를 한다
 
☑️string 타입의 값에서 문자열을 파싱하느라 낑낑대며 어렵게 필요한 데이터를 추출하기보다는 이렇게 자바스크립트 객체로 변환해서 편하게 데이터를 다루기위해 Deserialize를 한다
 
2. text 메소드 말고 json 메소드도 있다
response 객체의 text 메소드 대신 json이라는 메소드를 호출하면, 리스폰스의 내용이 JSON 데이터에 해당하는 경우, 바로 Deserialization까지 수행해준다
 
 
 

---

 
 

Status Code

 

BODY 부분에 주로 JSON데이터가 들어감
 
 

 
 
상태 코드
리퀘스트를 받은 서버가 그 작업 결과를 나타내기 위해서 리스폰스의 헤드에 넣는 숫자
200 → 리퀘스트의 내용대로 서버가 정상 처리를 했다는 뜻
404 → 정상 처리되지 못한 경우
 
 

Content-type이란?

 
 
리퀘스트와 리스폰스가 둘다 헤드(head)와 바디(body)라는 걸로 이루어져 있고 헤드에는 다양한 **헤더(header)**들이 있다
 
1. Content-Type 헤더
 
Content-Type 헤더는 현재 리퀘스트 또는 리스폰스의 바디에 들어 있는 데이터가 어떤 타입인지를 나타냄
Content-Type 헤더의 값은 **'주 타입(main type)/서브 타입(sub type)'**의 형식
 
주 타입이 text인 경우(텍스트) 일반 텍스트 : text/plain CSS 코드 : text/css HTML 코드 : text/html JavaScript 코드 : text/javascript ...
 
주 타입이 image인 경우(이미지) image/bmp : bmp 이미지 image/gif : gif 이미지 image/png : png 이미지 ...
 
주 타입이 audio인 경우(오디오) audio/mp4 : mp4 오디오 audio/ogg : ogg 오디오 ...
 
주 타입이 video인 경우(비디오) video/mp4 : mp4 비디오 video/H264 : H264 비디오
 
주 타입이 application인 경우 application/json : JSON 데이터 application/octet-stream : 확인되지 않은 바이너리 파일
 
💡 application/json이라는 값이 JSON 데이터를 나타낸다는 사실
 
 
2. Content-Type 설정해보기
 

const newMember = {
  name: 'Jerry',
  email: 'jerry@codeit.kr',
  department: 'engineering',
};

fetch('https://learn.codeit.kr/api/members', {
  method: 'POST',
  headers: { // 추가된 부분
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(newMember),
})
  .then((response) => response.text())
  .then((result) => { console.log(result); });

프로퍼티의 값으로는, 리퀘스트의 바디에 담을 데이터가 JSON 데이터라는 뜻으로  application/json 을 적는다
 
 
 
 

그 밖에 알아야 할 내용들

 
1. Ajax
초창기의 웹은 특정 웹 페이지에서 다른 웹 페이지로 갈 수 있는 링크(공식 명칭은 hyperlink입니다)를 클릭하면 새로운 웹 페이지가 로드되는 방식
 
Ajax
웹 브라우저가 현재 페이지를 그대로 유지한 채로 서버에 리퀘스트를 보내고 리스폰스를 받아서, 새로운 페이지를 로드하지 않고도 변화를 줄 수 있게 해주는 기술 (Asynchronous JavaScript And XML의 줄임말)
자바스크립트를 사용해서 비동기적으로(=사용자가 보고 있는 현재 화면에 영향을 미치지 않고 별도로 백그라운드에서 작업을 처리한다는 뜻) 리퀘스트를 보내고 리스폰스를 받는데 기반이 되는 기술들의 집합
Ajax 기술 덕분에 구글 맵처럼 부드러운 UX(User Experience, 사용자 경험)를 제공하는 수많은 웹 서비스들을 사용할 수 있게 됨
 
 
2. GET, POST, PUT, DELETE 이외의 메소드들
 
(1) PATCH
 
PUT은 기존 데이터를 아예 새로운 데이터로 덮어씀으로써 수정하려고 할 때 쓰는 메소드이고, PATCH는 새 데이터로 기존 데이터의 일부를 수정하려고 할 때 쓰는 메소드
 
(2) HEAD
 
HEAD 메소드는 GET 메소드와 동일합니다. 대신 GET 리퀘스트를 보냈을 때 받았을 리스폰스에서 바디 부분은 제외하고, 딱 헤드 부분만 받는다는 점
 
3. 웹 통신 말고 다른 통신