Javscript : fetch 함수, JSON, Request

 

1. fetch 함수 

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

 

1) 정의 

서버로 리퀘스트를 보내고 리스폰스를 받는 함수

파라미터로 넘어온 url로 리퀘스트를 보낸다.

여기서는 서버에서 온 리스폰스를 response라는 파라미터로 받는다.

 

 

2) then 메소드 

 

then은 fetch함수가 리턴하는 Promise 객체의 메소드로,

 콜백을 등록하는 메소드이다.

 

then 메소드 안에 있는 함수((response) => response.text())는

fetch 함수가 실행될 때 함께 바로 실행되는 함수가 아니다.

 

이 함수는 서버로부터 response가 도착했을 때 실행된다.

이렇게 특정 조건이 만족 되었을 때 실행되는 함수를 "콜백"이라고 한다.

 

이전 콜백의 리턴 값을 다음 콜백이 넘겨받을 수 있다.

즉, 여기서는 response.text()의 리턴값이 result라는 파라미터로 넘어간다.

 

3) 정리

1. fetch 함수는 어떤 객체를 리턴하는데(Promise 객체)

2. 이 객체의 then 메소드로, '리스폰스가 왔을 때 실행할 콜백'을 등록할 수 있다.

3. 이렇게 등록된 콜백들은 then 메소드로 등록한 순서대로 실행되고,

이때 이전 콜백의 리턴값을 이후 콜백이 넘겨받아서 사용할 수 있는 것이다.

 

 

4) 궁금증

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

 

그냥 이렇게 한 번에 처리하면 안되는 건가?

예.. 안됩니다.

일단, response 파라미터에 response의 "내용"만 넘어오는 게 아니라,

리스폰스에 관한 각종 부가정보들과 실제 정보가 같이 넘어온다.

그래서 response.text()를 통해 실제 내용만 뽑아오는 과정이 필요하다.

 

 

2. JSON이란?

1) 정의 

JavaSrcipt Object Notation의 줄임말 

어떤 정보를 교환할 때 사용하기 위해 만들어진 데이터 포맷

자바스크립트 문법을 빌려 만들어짐

 

그래서 JSON 문법은 자바스크립트 문법과 유사함

 

 

 

2) JS 객체 표기법과 JSON 문법의 차이

 

JS

const member = {
  name: 'Michael Kim',
  height: 180,
  weight: 70,
  hobbies: ['Basketball', 'Listening to music']
};

 

1.  특정 경우를 제외하고는 프로퍼티 네임의 따옴표를 생략하거나,

작은 따옴표로 감싸주는 것도 가능하다.

JSON

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

 

1. JSON에서는 반드시 프로퍼티 네임을 큰 따옴표로 감싸줘야한다.

2. undefined, NaN, Infinity등을 프로퍼티 값으로 사용할 수 없다.

3. 주석을 추가할 수 없다.

4. JSON은 자바스크립트 문법으로 치면, String 타입에 해당된다.

 

3) JS 객체와 JSON 데이터의 상호 변환 

i) 자바스크립트 객체 -> string 타입의 JSON

이러한 변환를 Serialization, 우리 말로는 직렬화라고 한다.

이를 위해 JSON이라는 자바스크립트 기본 내장 객체의 stringify 메소드를 사용한다.

 

const obj = { x: 1, y: 2 };
const jsonString = JSON.stringify(obj);

 

ii) string 타입의 JSON -> 자바스크립트 객체 

이러한 변환를 Deserialization, 우리 말로는 역직렬화라고 한다.

Deserialization을 수행하기 위해 JSON 객체의 parse 메소드를 사용한다.

 

const jsonString = '{"x": 1, "y": 2}';
const obj = JSON.parse(jsonString);

 

4) json 메소드 

 

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

 

위의 함수를 

아래처럼 바꿀 수 있다.

 

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

text 메소드 대신 json 메소드를 사용하고, 

콜백 안에 있는 JSON.parse 코드를 없앴는데, 

그럴 수 있는 이유는 다음과 같다. 

 

response 객체의 text 메소드 대신 json이라는 메소드를 호출하면,

리스폰스의 내용이 JSON 데이터에 해당하는 경우,

바로 Deserialization까지 수행해주기 때문이다.

 

 

 

3. request의 종류

 

1) 개요 

request의 종류에는

1) 조회, 2) 추가, 3) 수정, 4) 삭제가 존재하는데,

각 리퀘스트가 이 중에 어떠한 것에 해당하는 지는 

Method라는 정보를 보고 알 수 있다.

 

1) 조회(READ)=> GET 메소드

2) 추가(CREATE) => POST 메소드

3) 수정(UPDATE) => PUT 메소드

4) 삭제(DELETE) => DELETE 메소드

 

2) Request의 구조

GET, DELETE 메소드는 Body가 필요없지만,

POST, PUT 메소드는 Body가 필요하다.

 

Head 안에는 키, 밸류로 이뤄진 Header들이 여러 개 존재한다. 

 

Head - 메소드, 상태코드

Body - JSON 데이터

 

 

3) request 보내기

 

fetch 함수는 아무런 설정을 해주지 않으면 GET 리퀘스트를 보낸다.

만약 다른 리퀘스트를 보내려면

리퀘스트에 대한 각종 설정을 적는 옵션 객체가 필요하다.

 

i) POST

const Member = {
  name : '담이',
  email : 'dami@codeitmall.kr',
  department : 'engineering',
};

fetch('https://learn.codeit.kr/api/members', {
  method :'POST',
  body: JSON.stringify(Member),
})

.then((response) => response.text())
.then((result) => { console.log(result)});

 

ii) PUT

 

const Member = {
  name : 'Alice',
  email : 'alice@codeitmall.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)});

 

iii) DELETE

 

fetch('https://learn.codeit.kr/api/members/2', {
  method :'DELETE',
})

.then((response) => response.text())
.then((result) => { console.log(result)});