[FE 취업 생존 키트] 3주차 세션

JS에서 Error 처리

• catch문에서 주로 의도한 에러처리를 하지만 그렇지 않은 에러는 throw로 다시 던져서 상위의 에러 핸들링 로직에서 처리하게 하는게 좋다.
• Error 객체를 extends해서 Custom Error 객체를 만들 수 있다.

JS 비동기 처리

• 일반적인 콜백의 경우, 비동기에서 완료 시점이 정확히 언제인지 알 수 없기 때문에 순차적으로 여러번 부를 때 완료되면 그 다음을 부르고 완료되면 또 다음을 부르면서 콜백 헬이 발생한다.
• Promise화를 시켜 Promise chaining을 사용한다면 그냥 콜백을 사용했을 때 보다 적은 nesting으로 부를 수 있다.

Promise

• all : 순서를 보장하지 않고 여러개를 한번에 처리한다. 모든 요청이 성공해야 결과를 받을 수 있다.
• allSettled : 성공하든 실패하든 모든 요청에 대한 결과를 준다.
• race : 가장 먼저 완료된 요청에 대한 결과를 준다.

Promise의 Error 처리

• then의 두번째 인자 함수를 사용

promise().then(
	() => { //success },
    	(error) => { //바로 직전의 rejected promise의 reason이 넘어온다.}
);

• catch문 사용

promise().catch((error) => { // rejected promise가 생길 때마다 넘어온다. });

async, await

nesting 없이 promise를 동기적으로 실행하게 해준다.
async 함수는 항상 Promise를 return한다.

API Request 취소

• stale된 API Request를 취소하면 resource를 아끼고 일관적인 데이터를 전달할 수 있다. (요청한 데이터가 언제 올지 모르고, 나중에 온 데이터는 유효하지 않을 수 있음)
• AbortController API를 사용해서 Fetch API Request를 취소할 수 있다.

const abortController = new AbortController();
fetch(URL, { signal: abortController.signal } // signal을 두번째 인자로 넘겨준다.
abortController.abort(); // 실행되고 있는 abortController 시그널의 요청이 있다면 취소시킨다.

CORS와 Simple Request

• CORS: 도메인에서 다른 도메인의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
• Simple Request: CORS를 실행할 때 OPTIONS없이 바로 request를 실행시키는 request이며 GET, POST만 지원하고 헤더 작성에 제한이 있다. round trip을 한번으로 줄여준다.

Browser에 데이터 저장하기

• sessionStorage / localStorage: 다른 탭에서 발생한 storage의 변화를 storage 이벤트를 통해서 확인할 수 있다.
• indexedDB
• local-storage-fallback: 브라우저별로 적절한 storage를 골라서 사용해주는 라이브러리

API 데이터 캐싱 & 상태에 따른 UI 처리

• API request를 통해서 받아온 데이터를 특정 시간동안 (staleTime) 캐시된 버전을 사용하고 데이터가 stale된 것을 확인하면 새롭게 받아온다.
• API를 가져올 때 loading, complete, error 상태를 구분해서 UI를 처리한다.