August 07, 2021
display: none, block 보다 visibility 속성을 활용하면 transition 을 걸 수 있다. async 함수는 항상 실제 return statement 옆에 무엇이 정의되어 있든 간에 무엇이든 간에 Promise를 return 한다.
try - 항상 실행
catch - throw 실행 or Promise.reject 실행
finally - finally 문은 성공 여부와 상관 없이 항상 실행
catch 구문에는 예상한 에러들만 항상 떨어진다고 보장하기 어렵기때문에, 의도한 에러인지 파악하고 해당 에러만에 대해서만 처리하고 그렇지 않은 에러가 발생한 경우에는 throw문을 다시 작성해주는 것이 좋다.
ex)
여러개의 script를 순차적으로 불러오고 싶다면, 익히들 알고 있는 callback hell이 발생한다.
function loadMultipleKakakoSdk() {
loadScript(KAKAO_SDK_URL, (error, result) => {
if (error) {
return;
}
alert('kakao sdk#1 is loaded successfully');
loadScript(KAKAO_SDK_URL, (error2, result2) => {
if (error2) {
return;
}
alert('kakao sdk#2 is loaded successfully');
loadScript(KAKAO_SDK_URL, (error3, result3) => {
if (error3) {
return;
}
alert('kakao sdk#3 is loaded successfully');
})
})
});
}
promise로 여러개의 비동기 코드를 순차적으로 처리하려면 아래와 같이 한번의 nesting으로 처리할 수 있다.
function loadMultipleKakakoSdkPromise() {
loadScriptPromise(KAKAO_SDK_URL)
.then((script) => {
alert('kakao sdk#1 is loaded successfully')
return loadScriptPromise(KAKAO_SDK_URL)
})
.then(() => {
alert('kakao sdk#2 is loaded successfully')
return loadScriptPromise(KAKAO_SDK_URL)
})
.then(() => {
alert('kakao sdk#3 is loaded successfully')
});
}
async, await를 사용하면 아무런 nesting없이 promise를 동기적으로 실행할 수 있다.
async함수는 항상 실제 return statement 옆에 무엇이 정의되어 있든 간에 무엇이든 간에 Promise를 return한다.
순서가 상관없으면 Promise.all을 await하면 된다.
async function runPromiseWithAsyncAndAwait() {
await loadKakaoSdkPromise();
await loadKakaoSdkPromise();
await loadKakaoSdkPromise();
// await Promise.all([
// loadKakaoSdkPromise(),
// loadKakaoSdkPromise(),
// loadKakaoSdkPromise(),
// ])
}
stale된 API Request를 취소해야할까
ex)
// 해당 API를 사용하면 fetch시에 signal을 넘겨주기만 하면,
// 추후에 해당 signal을 가지고 있는 API request를 취소할 수 있다.
const fetchDog1Controller = new AbortController();
const fetchDog2Controller = new AbortController();
function fetchDog1WithSignal() {
// fetch의 경우 signal을 url 뒤에 두번째 인자로 넘겨주면 된다.
const { message } = fetchDog({ signal: fetchDog1Controller.signal })
.then(({ message }) => {
addDogImage(message, 'image from fetchDog1', 'result2');
});
}
function fetchDog2WithSignal() {
// 예시
// fetchDog1WithSignal이후에 fetchDog2WithSignal을 부른다고 쳤을 때에
// 아직 실행되고 있는 fetchDog1WithSignal이 존재한다면 abort시키고,
// fetchDog2WithSignal을 진행하도록 작성
fetchDog1Controller.abort();
return fetchDog({ signal: fetchDog2Controller.signal })
.then(({ message }) => addDogImage(message, 'image from fetchDog2', 'result2'));
}
CORS와 Simple Request란 무엇일까?
원격의 데이터베이스가 아니라 브라우저에도 데이터를 저장할 수 있습니다.