3.21 Promise Hell 을 제어하는 Asyns/Await 🤮
오배이안 🪙
내일부터 리액트 시작인데,, 🤤 비동기 너 왜이렇게 어렵니,,,
🤯 Async/Await
비동기 처리방식인 Promise, Callback 의 단점을 보완하기 위해 나온 것이 Async/Await
Async/Await 기본 문법
함수 앞에는 async 라는 예약어가 붙고 함수 내부의 비동기 처리 메서드 앞에는 await 키워드를 붙여서 사용한다. await 키워드 뒤에오는 비동기 처리 메서드는 꼭 프로미스 객체를 반환하는 메서드여아 한다.
await 키워드는 무조건 async 함수 내에 선언되어야 한다!
Promise 객체와의 비교
위의 함수는 프로미스 객체를 반환하는 함수이고 car() 함수를 실행하게 되면 프로미스가 이행상태가 되며 값으로는 money 가 된다.
밑의 carCashs() 함수를 실행하면 car() 함수의 값인 money 값이 변수 cash 에 담기게 되고, 콘솔에는 20000 이 출력 된다. await을 사용하지 않았더라면 .then 을 사용했어야 했다.
즉, await car() 구문이 car() 함수의 결과 값인 resolve(money) 가 되는 것이다.
여기서 알 수 있는 것이 Async/Await 문법을 사용하게 되면 비동기에 대한 사고를 하지 않아도 된다는 것이다.
Promise 의 reject 처럼 에러 구현하기
Async/Await 의 에러 처리는 프로미스의.catch() 비슷하게 try catch 라고 있다. 사용하는 방법은 try{ }catch{ }으로 사용하면 된다.
🤯 Node.js
Node.js 는 비동기 이벤트 기반 자바스크립트 런타임 환경을 말한다.
런타임 환경이란 프로그래밍 언어가 실행되는 환경을 말함.
자바스크립트가 브라우저에서 실행되면 런타임 환경은 브라우저임!
자바스크립트가 Node.js 에서 실행되면 런타임 환경은 Node.js 임!
Node.js 모듈이란?
모듈이란 다양한 기능을 하는 함수들 중 비슷한 기능을 가진 함수들을 묶어 파일로 관리하는 것이다.
연관을 가진 함수들을 파일 하나하나 모듈로 묶어 놓아 관리하기 때문에 개발효율성과 유지보수성이 향상된다는 장점이 있다.
-
종류
-
내장 모듈
Node.js 내부에 이미 제공하는 모듈
내장 모듈은 이미 있으므로 npm (Node Package Manager)을 사용하지 않아도 됨.
Node.js 내장 모듈 링크 -
외장 모듈
일반 Node.js 개발자들이 만들어 놓은 모듈
외장 모듈을 사용하기 위해서는 npm (Node Package Manager)을 사용함
-
내장 모듈을 사용하기 위해선 모듈을 불러오는 과정이 필요한데 코드 상단에 require("원하는 모듈 명") 을 작성해 준다.
사진의 fs 모듈 은 파일 시스템 모듈을 말한다. 파일 시스템과 관련된 함수들이 저장되어 있다!
fs.readFile메서드 fs.readFile(path[, options], callback)
fs 모듈 중 fs.readFile 메서드는 비동기적으로 파일 내용 전체를 읽는 메서드 입니다.
자세한건 Node.js 내장 모듈 링크 를 통해 알아보자
🤯 fetch API
비동기적 처리가 가장 많은 사례는 네트워크 요청이다. 네트워크 요청에는 그 형태가 다양하지만 가장 흔한 경우로는 URL 로 요청하는 것이다. 이때 URL로 네트워크 요청하는 것을 가능하게 해주는 API 가 바로 fatch API 이다.
fetch 사용 예시
fetch()는 2개의 매개변수를 받는데 첫번째는 URL이고 두번째로는 Option 을 받는다.
URL은 필수 매개변수이고 fatch는 Response로 분해할 수 있는 Promise를 리턴한다.
헷갈렸던 것!
promise 는 함수의 실행에 오류가 없으면 resolve() 값을 반환한다.
fetch 는 promise 를 반환하는데 이 promise 의 값으로는
Response를 얻을 수 있다.
Response에는 프라미스를 기반으로 하는 다양한 메서드가 있다. 이 메서드들을 사용하면 다양한 형태의 응답 본문을 처리할 수 있음!
- response.text() – 응답을 읽고 텍스트를 반환
- response.json() – 응답을 JSON 형태로 파싱
- response.formData() – 응답을 FormData 객체 형태로 반환
- response.blob() – 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 반환
- response.arrayBuffer() – 응답을 ArrayBuffer(바이너리 데이터를 로우 레벨 형식으로 표현한 것) 형태로 반환
response.text() 사용한 예
response.json() 사용한 예
fetch(url)의 promise 값인
response에response.json()을 하니해당 url 데이터를 JSON 형태로 파싱한 값이 출력 되는 걸 볼 수 있다.
