[12/11] DAY7 자바스크립트 공부

7일 차 진도

 

 

 

Promise

비동기 작업을 편리하게 할 수 있게 도와주는 JS 내장 객체

executor = (resolve, reject) => {
	setTimeout(()=>{
		console.log(“3초만 기다리세요”)
	},3000)
}

const promise = new Promise(executor);

 

excutor함수는 promise 객체의 인수로 전달되어야 하며, promise 객체를 생성함과 동시에 실행되는 실행함수

 

executor 함수의 매개변수인 resolve, reject는 js에서 자체적으로 제공하는 콜백함수로,  비동기 처리가 성공하면 resolve를, 실패하면 reject를 호출한다.

 

 

 

 

Promise 객체는 State, Result 두 가지의 내부 프로퍼티를 가진다.

 

 

 

state : pending(대기)

result : undefined

 

executor가 호출하는 콜백함수에 따라 state와 result가 변화하게 된다.

 

 

 

-> resolve(value)

state : fulfilled(성공)

result : value

 

-> reject(error)

state : rejected(실패)

result : error 

 

 

promise 객체의 상태는 resolve와 reject를 통해 변하지만, 한 번 변경된 상태에서는 더 이상 변하지 않기 때문에 처리가 끝난 프로미스 객체에 resolve, reject를 호출하면 무시된다.

 

 

 

 

 

resolve, reject 사용법

executor = (resolve, reject) => {
    setTimeout(()=>{
    	resolve(“성공”);
	},3000)
}

const promise = new Promise(executor);

promise.then((res)=>{
	console.log(res);
})

 

executor 함수에서 비동기 처리된 결괏값을 반환할 때에는 매개변수로 받은 resolve 콜백함수에 결괏값을 전달하면 된다.

 

또한 resolve 콜백 함수에 전달된 값은 promise 객체의 then 메서드를 이용해 사용할 수 있으며,  executor 함수에서 전달한 값이 then 메서드의 매개변수로 전달된다.  즉 executor에서 전달한 “성공”이라는 값을 then 메서드의 res 매개변수로 받을 수 있는 것이다.

 

 

코드 실행 순서

 

1. Promise 객체 생성과 동시에 executor 함수가 실행된다.

2. executor 함수에서는 매개 변수로 받은 콜백 함수들 중 resolve 함수를 사용해 “성공”이라는 값을 전달

3. Promise 객체의 State는 Pending에서 fulfilled로 변경되고 result는 undefined에서 “성공”으로 변경된다.

4. then 메서드를 통해 promise 객체의 result 값을 매개변수로 받아 console.log를 통해 출력

 

 

 

executor = (resolve, reject) => {
    setTimeout(()=>{
    	reject(“실패”);
    },3000)
}

const promise = new Promise(executor);

promise.then((res)=>{
	console.log(res);
}).catch((err)=> {
	console.log(err);
})

 

마찬가지로 reject 함수가 실행되었기에, 프로미스 객체의 State는 pending에서 rejected로 변경되고, result는 undefined에서 “실패”로 변경된다.

 

then 메서드는 작업이 성공했을 때 사용하는 메서드이고, reject함수를 사용해 작업 실패 시 결과 값을 사용하기 위해서는 catch 메서드를 사용해야 한다.

 

작업이 실패하면 then 메서드는 실행되지 않고, catch 메서드만 실행됨

 

 

 

 

 

async/ await

async와 await 문법은 promise객체를 더욱 쉽게 작성할 수 있고, 직관적으로 해석할 수 있게 도와주는 역할을 한다.

 

 

 

async

const start = async() => {
  return "대기"
};

start().then((res)=> {
  console.log(res); // 대기 
})

 

async 키워드는 함수의 오른쪽에 작성한다. async 키워드를 붙인 함수는 자동으로 promise 객체를 반환하는 비동기처리 함수가 되기에 then메서드를 사용할 수 있다.

 

start 함수의 반환값이 promise 객체의 resolve값과 동일하기에 위처럼 then 메서드를 사용할 수 있다

 

정리 : 함수에 async 키워드를 붙이면 프로미스 객체를 반환함과 동시에 return 옆의 작성 값이 resolve의 결괏값으로 전달되기에 훨씬 깔끔한 코드를 사용할 수 있다.

 

 

 

await

await 키워드는 특정 함수의 앞에 작성되고, then 메서드를 대신해서 사용할 수 있다.

const delay = (ms) => {

return new Promise((resolve)=>{
    setTimeout(()=>{
      resolve();
    },ms)
  })
}

const start = async () => {
	await delay(2000)
	console.log("대기");
}

start()

 

async 키워드가 붙어있는 함수의 내부에서만 사용 가능하며. 해당 promise 객체가 처리될 때까지 기다린 다음 결괏값을 받아볼 수 있다.

 

즉 await 키워드가 작성된 함수가 종료되기 전까지는 그 아래 코드들은 수행되지 않는다.

 

위의 코드에서 await가 없으면 delay()의 호출이 끝나기 전에 console.log(“대기”)가 먼저 출력된다. 하지만 await를 붙이면 delay()가 끝날 때까지 “대기”는 출력되지 않는다.

 

 

 

 

 

async, await을 활용한 에러 처리(try-catch)

const delay = (ms) => {
return new Promise((resolve)=>{
    setTimeout(()=>{
      resolve();
    },ms)
  })
}

const start = async () => {
  try{
    await delay(2000)
    console.log("대기");
  }catch(error){
    console.log(error);
  }
}

start()

 

try 블록 안에는 함수에서 실행해야 될 코드들을 작성한다. 만약 try에서 에러가 발생한다면 catch 블록 안의 코드가 실행된다.

 

 

 

 

 

API 호출

 

 

클라이언트 서버 통신 과정

 

손님 -> 바리스타 -> 창고

 

1. 원하는 커피 주문 (손님 -> 바리스타)

2. 원두 선택 (바리스타 -> 창고)

3. 원두 가져오기 (창고 -> 바리스타)

4. 커피 제작 후 전달 (바리스타 -> 손님)

 

손님은 클라이언트, 바리스타는 서버, 창고는 데이터베이스로 생각하면 된다.

 

API는 웹브라우저와 같은 클라이언트(손님)와 서버(바리스타) 사이의 연결이라고 할 수 있고, 서버에 원하는 데이터를 요청하고, 전달받는 방법이라고 할 수 있다.

 

 

 

 

 

JSON 형식

 

자바스크립트 객체 표기법(Javascript Object Notation)

 

자바스크립트에서 객체 형태의 데이터를 가독성 좋게 나타내기 위한 표기법

 

 

 

 

 

fetch

fetch라는 내장함수 안에는 사용할 API 주소를 넣어줄 수 있다.

const response = fetch('https://jsonplaceholder.typicode.com/posts');

console.log(response) // Promise { <pending> }

 

Promise 객체를 반환하는 함수는 비동기 처리를 하는 함수이고, then메서드를 사용해서 결과를 출력할 수 있다.

 

 

 

const response = fetch('https://jsonplaceholder.typicode.com/posts');

response.then((res)=>{
  console.log(res)
}).catch((error)=>{
  console.log(error)
})

 

이런 식으로 fetch를 통해 api를 호출하면 response라는 api 성공 객체 그 자체를 반환한다 그래서 자바스크립트에서 JSON 데이터를 사용하려면 JSON 데이터들을 파싱 해서 객체 형태로 변환해야 한다.

 

 

 

const getData = async() => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
  const data = await response.json()
  console.log(data)
}

getData()

위의 코드에서 await를 통해, 비동기 처리를 기다리며, 받아온 JSON 데이터를 json메서드를 활용해서 객체 형태로 변환했다.

 

데이터를 요청할 때에는 우리의 컴퓨터가 아닌 다른 서버 프로그램의 데이터를 요청하는 경우가 많기에, 다양한 이유로 실패할 수 있다는 점을 주의해야 한다. 그래서 성공할 수도, 실패할 수도, 언제 종료될지도 모르는 작업들을 모두 비동기적으로 처리하고 오류가 발생할 상황을 대비해서 에러 처리를 해주어야 한다.

 

 

 

const getData = async() => {
  try{
    const response = await fetch('https://jsonplaceholder.typicode.com/posts')
    const data = await response.json()
    console.log(data)
  }catch(error){
    console.log(error)
  }
}

getData()

 

에러 처리를 위한 try-catch를 적용한 코드이다. api가 성공적으로 끌어와졌으면 try블록을, 실패했다면 catch 블록을 실행시킨다. 

 

 

 

 

 

[7일 차 QUIZ]

1번 문제

 

 

 

1번 문제 정답