콜백
이렇게 콜백 함수를 지정하는 것이다. 원래 출력 값에 출력을 하려면
a(), b()를 출력을 해야한다. 하지만 callback으로 a(b)로 출력을 할 수 있는 것이다. 그래서 console.log 뒤에 callback함수를 지정하면 출력 값엔
A, B가 출력이 된다, 하지만 console.log를 뒤에 쓰고 callback을 앞에다 지정을 하면 B, A순으로 출력이 된다.
콜백 예제
1, 2는 위에 const a, b 부분에 들어가고, 나머지 value들은 다 c로 넘어가게 된다. 그래서 콜백 함수로 지정을 해 주고 setTimeout으로 1초 뒤에 값을 출력하라는 의미를 넣어주었다. 그래서 결과 값은 3, 10이 나온다. c(a + b)로 되어있는 값이 value로 넘어가서 console.log에 찍히는 것이다.
콜백으로 Image 나오게 하기
1. 우선 const로 imgEl이라는 변수의 이름을 만든다.
2. document.createElement('img')이미지태그를 자바스크립트 상에서 생성한다.
3. imgEl.srct상에서 url정보를 할당한다.
4. imgEl.addEventListener('load', () => {} 'load'라는 이벤트를 적용. 그리고 뒤쪽에다 적용하는 함수를 콜백함수라고 말한다.
5. const containerEl = document.querySelector('.container')로 HTML에 있는 container요소를 가져온다.
6. lodeImage()여기 소괄호 안에 이미지 정보를 넣는다.
7. 그리고 그 뒤에 또 () => {} 콜백 함수를 또 넣어준다.
8. 그리고 url 선언한 뒤에 cb를 선언해준다.
9. 그 다음에 콜백 함수에서 setTimeout을 지정하고 그 암에 cb(imgEl)을 넣고 1초 뒤에 선언하라는 의미를 넣어준다.
10. 그리고 innerHTML로 h1은 빈 문자로 넣고 그 안에 append를 이용해서 이미지를 출력하는 내용을 넣는다.
그럼 loding... 뜨다가 1초 뒤에 이미지가 출력이 되는 걸 확인할 수 있다.
느낀점
이 부분 콜백함수도 아직 너무 이해가 안되고, 너무 어렵다. 하지만 꾸준히 복습을 해 나간다면 익숙해 질 거라 생각하고, 더 복습을 해야겠다 라는 생각이 든다.
꾸준함이 제일 중요한 거 같다.
