React.js를 공부하던 중 fetch로 서버와 통신하는 방법을 보았는데, 콜백함수와 프로미스 등 js개념이 부족해 fetch를 깊게 이해하기가 어려워 생활코딩 - Promise(callback & async)를 통해 javascrpt에 대한 이해를 넓히고자 한다.

참고 - 생활코딩

🎈 Synchronous(동기), Asynchronous(비동기)

---

1. 동기

• 앞 명령이 실행 완료될때까지 기다리다가 뒤의 명령이 실행

console.log(1);
console.log(2);
console.log(3);
console.log(4);

• 결과

1
2
3
4 

2. 비동기

• 프로그램이 병렬적으로 실행

console.log(1);
console.log(2);
setTimeout(function(){console.log(3)}, 5000) // 5초가 지난 후에 콜백 함수 실행
console.log(4);

• 결과

1
2
4
3 -> 프로그램과 상관없이 독립적으로 실행됨

언제 비동기적인 처리를 하는가?

1. 어떤 명령이 언제 끝날지 예측하기 어려운 경우
2. 주가 되는 작업이 아닌 경우

• 예시 : 통신
  통신이 끝날때 까지 다른일을 하고 있다가, 통신이 끝날때 콜백이 호출되면서 필요한 작업을 나중에 수행

• ajax: 브라우저와 웹서버가 리로드를 하지 않고도 js를 이용해서 서로 통신하는 것

만약 동기적으로 통신할 경우, 통신이 완료될때까지 사용자는 아무 행위도 할 수 없음!
하지만 사용자는 통신을 하고있다는 사실조차 알수가 없는데, 이는 비동기적으로 통신을 했기 때문이다.
브라우저와 웹서버가 통신할때 자주 사용하는 fetch API는 프로미스를 사용

🎈 Promise

---

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json()) // 얻게된 데이터타입이 json임을 알려줌
  .then((data) => console.log(data)); // 데이터 불러오기

• 아래의 사이트에서 쉽게 서버 마련 가능함
  https://jsonplaceholder.typicode.com/
• fetch : json 데이터 타입을 JavaScript의 데이터 타입으로 바꾸어 줌
  
  
• 언제 끝날지 알 수없는 서버와의 통신은 비동기적으로 처리하는 경우가 많음

console.log(1);
fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json()) // 얻게된 데이터타입이 json임을 알려줌
  .then((data) => console.log(data)); // 데이터 불러오기
console.log(2);

• 콘솔 출력: 1, 2가 먼저 출력되고 콜백함수는 나중에 실행되는 것을 알 수 있음

1
2
{100} [{...},{...},{...},{...}, ...]

• 여기서 사용된 then이 프로미스

Fetch

fetch()함수는 Promise데이터 타입을 리턴한다. 이 Promise데이터 타입은 Response 객체를 돌려 줄 것이다.

• 어떤 함수가 Promise를 리턴한다면, 그 함수는 비동기 함수일 가능성이 매우 높다.
• 그 함수가 리턴한 값은 두개의 메소드를 사용할 수 있다.
  1. then
  2. catch
• then과 catch는 둘 다 콜백 함수를 받고, 파라미터를 하나씩 가지고 있음

then

• fetch를 통해 실행한 결과가 성공했을 때 then으로 전달된 콜백함수가 호출
• 그 콜백함수가 호출되면서 그 결과값을 첫번째 파라미터로 받을 수 있음

catch

• fetch를 통해 실행한 결과가 실패했을 때 catch안으로 전달된 콜백함수가 호출
• 그 파라미터는 이유를 알려줄 것

Promise를 사용하는 이유

• 비동기 적인 작업을 처리할 때 , 성공실패 여부를 표준화된 방식을 통해 처리할 수 있음
• 성공했을 때 then, 실패했을 때 catch

console.log(1);
fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json()) // 얻게된 데이터타입이 json임을 JavaScript에게 알려줌
  .then((data) => console.log(data)); // 데이터 불러오기
console.log(2);

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(function(response){
  	console.log(response.json());
})

response.json()는 무엇을 리턴할까?

• Promise를 리턴함
• json을 Javascript 데이터타입으로 컨버팅을 하고, Promise는 컨버팅 작업이 끝났을때 then을 호출할 것이라는 의미
  
  

Promise 사용 방법 2가지

1. Nested Promise: then 안에서 다시 promise를 사용하고 그안에서 then이 들어가는 경우
2. Promise chaining: then안에서 promise를 리턴하는 경우 -> 바깥에서 then과 then을 연결

• 일반적으로 Promise chaining를 사용함