[엘리스 sw 엔지니어 트랙] 16일차 비동기, JSON, Promise, Fetch

오경찬·2022년 5월 2일
JavaScript부산엘리스코딩캠프
0

엘리스 SW 엔지니어 트랙 2기

목록 보기
17/57

수업 16일차

벌써 엘리스 SW 2기를 시작한지 4주째나 되었다. 활동적인 성격인데 집에 앉아만 있었던지 3주가 지났는데 이제 적응을 하고 수업을 듣는게 당연하게 되었다. 3달 남았으니 꾸준히 뽜이링 하자~!

이론

  • 동기 프로그래밍 : 코드가 완료될 때까지 기다리는 방식
    비동기 프로그래밍 : 코드가 실행되고, 완료 될때까지 기다리지 않고 다음코드를 실행하는 방식
    javascript는 싱글 쓰레드로 동작
    비동기는 Call Stack에 쌓여있는 문제들부터 해결후 Task Queue 에서 올라옴
    JSON : Java Script Object Notation, 객체형식으로 사용
    parse : 문자열을 객체로 변환
    stringify : 객채를 문자열로 변환
    Promise : 비동기 작업의 완료 혹은 실패를 다룰수 있음, 미래의 결과에 따라 어떻게 하겠다는 약속
    try - catch : 모든 코드에서 대해서 오류를 잡는 것
    then - catch : Promise에 대해서만 작동
    비동기 쓰는 이유 : 동기로 사용하면 페이지가 새로고침되는데 그것을 막기위해 사용, 서버와의 통신 딜레이 방지
    Fetch API : HTTP 요청을 간단하게 조작할 수 있는 인터페이스, 주로 서버와 정보를 주고 받을 때 사용
    fetch : Promise를 반환함

비동기

특정 작업을 시작하나서
완벽하게 다 처리하기 전에 실행 흐름이 바로 다음 코드로 넘어가고
나중에 콜백이 실행되는 것을 '비동기 실행'이라고 한다.

callback
나중에 어떤 조건이 만족된 후에 실행되는 함수

console.log('Start!');

fetch('https://www.google.com')
  .then((response) => response.text())
  .then((result) => { console.log(result); });

console.log('End');

코드 실행 순서

  1. console.log('Start');
  2. 작업 예약 : request 보내기 / 콜백 등록
  3. console.log('End');
  4. response 가 오면 2. 에서 then 메소드로 등록해뒀던 콜백 실행

setTimeout

console.log('a');
setTimeout(() => { console.log('b'); }, 2000);
console.log('c');

파라미터1 : 콜백, { console.log('b'); }

파라미터2 : 실행 조건, 2000 밀리세컨즈 (=2초) 경과

수행 작업 : n 밀리세컨즈 후 콜백을 1번 실행

setInterval

console.log('a');
setInterval(() => { console.log('b'); }, 2000);
console.log('c');

파라미터1 : 실행 조건 ( 특정 이벤트 ), click
파라미터2 : 콜백
수행 작업 : 특정 이벤트가 발생할 때마다 콜백을 실행

JOSN

  1. JSON (JavaScript Object Notation)
  2. 자바스크립트 객체 리터럴과 유사한 key와 value로 이루어진 형태
    ※ JSON에서 key는 반드시 ""(큰따옴표) 사용해야된다.(작은따옴표 사용 불가)
  3. 클라이언트와 서버 간의 HTTP 통신을 위한 순수한 텍스트 데이터 포멧
  4. 프로그래밍 언어나, 플랫폼에 상관 없이 쓰일 수 있음

JSON.stringify()

  • JSON.stringify(value[, replacer[, space]])
  • JSON.stringify() 메서드는 객체를 JSON 포맷의 문자열로 변환한다.
  • 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화해야 하는데 이를 직렬화라 한다.

배열의 문자열 변환

json = JSON.stringify(["apple", "banana"]);
console.log(`type : ${typeof json}`); // type : string
console.log(json); // ["apple", "banana"]

객체의 문자열 변환

const rabbit = {
  name: "tori",
  birthDate: new Date(),
  jump: () => {
    console.log(`${name} can jump!`);
  },
};

json = JSON.stringify(rabbit);
console.log(`type : ${typeof json}`); // type : string
console.log(json); // {"name":"tori","birthDate":"2022-03-18T08:56:58.879Z"}

객체의 메소드(함수)는 JSON.stringify() 포함되지 않는다.

특정 key와 value를 가져올 수 있다.

json = JSON.stringify(rabbit, ["name"]);
console.log(json); // ["name":"tori"]

JSON.parese()

  1. JSON.parse(text[, reviver])
  2. JSON 포맷의 문자열을 객체로 변환하며 이를 역직렬화라 한다.

JSON 포맷, 객체 변환

const rabbit = {
  name: "tori",
  birthDate: new Date(),
  jump: () => {
    console.log(`${name} can jump!`);
  },
};

// 객체를 JSON 포맷의 문자열로 변환한다.
const json = JSON.stringify(rabbit);

// JSON 포맷의 문자열을 객체로 변환한다.
const obj = JSON.parse(json);
console.log(`type :  ${typeof obj}`); // type : object
console.log(obj); // {name: 'tori', birthDate: '2022-03-19T04:46:30.600Z'}

"객체 → 문자열 → 객체" 문제점

rabbit 객체는 JSON.stringify()로 문자열 변환되어 Date() API를 사용할 수 없게된다.

console.log(`type : ${typeof rabbit.birthDate}`); // type : object
console.log(rabbit.birthDate.getFullYear()); // 2022

console.log(`type : ${typeof obj.birthDate}`); // string
console.log(obj.birthDate.getFullYear()); // Error

Promise

작업에 관한 3가지 상태 정보 및 해당 상태에 따른 결과값 (response) 을 갖고 있는 객체

pending ------ 진행 중
fulfilled ------ 성공
rejected ------ 실패

작업의 결과가 fulfilled면 작업 성공 결과
작업의 결과가 rejected면 작업 실패 이유

.then 메소드

  1. Promise 객체의 메소드
  2. 콜백을 등록해준다
  3. 실행 결과로 무조건 promise 객체를 리턴한다

promise chaining

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.text())
  .then(result => {
     const users = JSON.parse(result);
     return users[0];
   })
  .then(user => {
     console.log(user);
     const { address } = user;
     return address;
   })
  .then(address => {
     console.log(address);
     const { geo } = address;
     return geo;
   })

실행 과정

  1. fetch 함수에서 url로 리퀘스트를 보내고 promise 객체 리턴 (pending 상태)

  2. 순차적으로 콜백을 등록하고 promise 객체 리턴 → promise 객체의 총 갯수 : 5개 (pending)

  3. fetch 함수 다음의 코드를 실행하다가

  4. fetch 함수의 response 가 도착하면 fetch 함수의 promise 객체 의 상태가 pending에서 fullfiled 또는 rejected로 바뀌고, 상태 정보 및 상태에 따른 결과값 (response) 을 갖게 된다.
    이 promise 객체가 다음 then 메소드 콜백의 파라미터로 넘어감.

  5. then 메소드의 콜백이 실행되는데

    1) then 메소드의 콜백이 또 promise 객체를 리턴하는 경우

then 메소드의 promise 객체 의 상태 (fulfilled or rejected)가

    콜백의 promise의 상태 를 따라가고, 상태 정보 및 상태에 따른 결과값 (response) 을 갖게 된다.
    이 promise 객체가 다음 then 메소드 콜백의 파라미터로 넘어감

    2) then 메소드의 콜백이 promise 가 아닌 값을 리턴하는 경우

then 메소드의 promise 객체의 상태 가 fulfilled가 되고

    상태 정보 및 상태에 따른 결과값 (response) 을 갖게 된다.
    이 promise 객체가 다음 then 메소드 콜백의 파라미터로 넘어감.

profile
오경찬
코린이 입니당 :)
이전 포스트

[엘리스 sw 엔지니어 트랙] 15일차 변수 정의 과정, 호이스팅, 내장 객체

다음 포스트

[엘리스 sw 엔지니어 트랙] 17일차 비동기, 이벤트루프, Promise,

0개의 댓글