15일 일지

오늘은 4주차 내용들을 최대한 이해하면서 진행을 했었는데 콜백 함수와 관련된 내용이다.

 

콜백함수의 의미와 사용 방법, 그리고 왜 많이 쓰면 안좋은지 설명하면서 코드에서의 동기적과 비동기적의 의미

 

그리고 그것을 해결하기 위한 방법을 배우는 내용이였는데 결국 코드가 실행되는 구조를 알고 있어야 쉽게 이해 할 수 있고

 

그래서 3주차 내용이 매우 중요했다.

 

 

콜백 함수란

 

thisbinding을 활용한 콜백 함수

 

콜백 지옥이란

 

promise를 활용한 콜백 함수

 

제너레이터 함수와 async,await을 활용한 콜백 함수

 

그러면 콜백 함수는 왜 쓰는가 하면 목적은 제어권을 넘겨주는데 있는 것이고 그러면 일일히 실행 하는 것이 아닌 실행을 맡겨 줄 수 있다.

하지만 너무 쓰게 되면 콜백 지옥에 빠지게 되고 결국 원하는 값을 얻기 위해 하드코딩을 하게 되는데

이를 막기 위해서 동기와 비동기의 의미를 이해하고 promise, generator, async - await 원하는 방법으로 막으면 된다.

 

4주차 숙제!!

 

class HttpError extends Error {

constructor(response) {

super(`${response.status} for ${response.url}`);

this.name = "HttpError";

this.response = response;

}

}

async function loadJson(url) {

let response = await fetch(url);

if (response.status == 200) {

return response.json();

} else {

throw new HttpError(response);

}

}

async function koreanMovie() {

let title;

while (true) {

try {

res = await loadJson(

`https://klassic-quote-api.mooo.com/v1/random-quote`

);

break;

} catch (err) {

if (err instanceof HttpError && err.response.status == 404) {

alert("무언가 에러가 발생했군요!");

} else {

throw err;

}

}

}

alert(`${res.author}: ${res.quote}`);

return res;

}

koreanMovie();

 

----------------------------------------------------------------------------------------------------------------------

오늘의 학습 요약

 

콜백 함수와 관련된 내용이다. 3주차를 완벽하게 이해 했으면 이해가 빨랐을 것 같다. 결국 콜백함수로 넘겨주는거 부터 동기와 비동기 모두 코드의 구조를 잘 이해해야 하기 때문 내일은 5주차로 넘어가는데 슬슬 느끼는건 코드를 뜯어보는 습관을 가지는게 좋을 것 같다는 생각이다. 내일 5주차 마무리 하고 주말동안은 지금까지 배운 내용을 코드를 강의에서처럼 이렇게 뜯어보세요~~ 하는게 아니라 직접 뜯어보는 시간을 가져야겠다.