14장. 외부 API를 연동하여 뉴스 뷰어 만들기

- 웹 애플리케이션에서는 서버쪽 데이터가 필요할 때 Ajax 기법을 사용하여 서버의 API를 호출하여 데이터를 수신함.

 

- JS에서는 비동기 작업을 할 때 가장 흔히 사용하는 방법이 콜백 함수를 사용하는 것임.

 

- Promise는 콜백 지옥을 형성하지 않게 하는 방안으로 ES6에 도입된 기능임.

-> Promise 객체를 생성하고 이를 반환하는 함수에 .then으로 콜백 요청 가능

 

- async/await는 Promise를 더 쉽게 사용할 수 있게 해주는 ES8 문법임.

-> 함수의 앞부분에 async 키워드를 추가하고 해당 함수 내부에 Promise의 앞부분에 await 키워드를 사용함.

(이러면 Promise가 끝날 때까지 기다리고, 결과 값을 특정 변수에 담을 수 있음.)

 

- .prettierrc 예시

{
	"singleQuote":true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80,
}

- VSC에서 파일 자동 불러오기 기능

//jsconfig.json
{
	"compilerOptions": {
    	"target": "es6"
    }
}

- useEffect에 등록하는 함수에 async를 붙이면 안된.(∵ useEffect에서 반환해야 하는 값은 뒷정리 함수이기 때문임.)

 

- useEffect 내부에서 async/await를 사용하고 싶다면, 함수 내부에 async 키워드가 붙은 또 다른 함수를 만들어서 사용해 주어야 함.

 

-usePromise를 사용하면 Promise의 대기 , 완료 결과, 실패 결과에 대한 상태를 관리할 수 있다.