[Javascript] 콜백 함수 - 콜백 체이닝, 콜백 헬

 

수업을 듣다 문득 궁금해져서 시도해봤다. 함수 안에서 실행하는 또 다른 함수 안에서 실행하는 또 다른 함수 --- 가 가능할지?

function timeout(cb) {
  setTimeout(() => {
    console.log('seacrab')
  }, 1000)
}
timeout(() => {
  console.log('First')
})

이런 함수가 있으면 first가 먼저 console에 출력되고 1초 뒤에 seacrab이 출력된다.

first를 seacrab 다음에 출력 시키고 싶으면?

function timeout(cb) {
  setTimeout(() => {
    console.log('seacrab')
    cb()
  }, 1000)
}
timeout(() => {
  console.log('First')  // 이 인수가 위의cb()-매개변수(파라미터)에 들어간다.
})

이렇게 하면 되는데, 콜백함수 안에 또 콜백함수를 쓸 수 있는지 실험을 해봤었다.. (안 됨)

​

안 되는 이유 (추측) -> 이유를 아신다면 댓글ㄹ,, 아님 의견 남겨주세요 ㅎ

1. 콜백함수는 매개변수에 함수를 전달하는 일회성 함수를 사용하기 때문에 '익명 함수' 형태로 넣어준다. 일회성이므로 ...

​

콜백 함수 사용처

1. 이벤트 리스너로 사용
2. 고차 함수에 사용
3. 타이머 실행 함수로 사용

등등 ... 내가 사용했었던거를 예시로 드니까 감이 온다..

​

[참조 블로그]

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98

 

사실 어려운 부분이고 더 많은 예제를 보고 이해하기 위해 뜯어봤다.

그래서 궁금했던건 못하는 것 같은데 정확한 답을 위해 슬랙에 질문해보고자 한다.

​

답변을 받았다!!!!

 

 

오마이갓.. 질문하길 잘했다... 그냥 넘길뻔 했는데 확실히 알게 되어서 다행이다...

저렇게... 저런 키워드로 검색을 하는구나...! 일타이피다...

답변과 구글링 하는 꿀팁까지 챙겼다. ㅎ ㅎ (근데 나 개강하고 매일 빠짐없이 질문하는 중이다...ㅋ.ㅋ.ㅋ)

영어로 검색해서 블로그 다 뒤져야하나보다.. ! 영어 실력을 키우자....!!!!

사실 오늘도 오류 해결할때 스택오버플로우 들어가서 확인했었다 익숙해지자...

​

그렇다면 안 찾아볼순 없겠지. 조사를 해보겠다.

​

조사 조금 해옴 !

​

stack overflow랑 블로그를 뒤적뒤적해봤다.

콜백 체이닝시 promise 사용을 권장하는 내용이 많이 있었다.(이거 유튜브 클론코딩때 해봐서 안다..!!!)

근데 아직 왜 이걸 사용하는게 좋은지 전체적 코드 흐름을 파악하는 정도는 아니다.. 앞으로 모딥다도 열심히 읽어가면서 눈으로만 보지말고 확실하게 이해하고 쓸 수 있을 정도로 하고 넘어가야겠다.

​

콜백 헬은 콜백이 여러 수준으로 중첩되어 관리하기 힘들어지는 경우이고 비동기 작업에서 일반적으로 발생할 수 있다.

​

콜백 체이닝(callback hell) 단점 :

1. 확장성이 없음!!

2. 계속 콜백 함수를 추가해서 써야함.

3. 그래서 코드 해석도 힘들며 추가적 기능 구현, 유지보수가 힘듬..!

4. 다른 범위 지정 문제도 있음. (내부 약속에 의한 오류가 잡히지 않았을때 오류 숨기기 됨)

​

​

[참고 블로그] 조금 오래되긴 했지만 ...

https://www.derpturkey.com/chained-callback-pattern-in-javascript/

Chained callback pattern in Javascript

https://hungvu.tech/javascript-promise-chaining-avoid-callback-hell

JavaScript Promise Chaining - Avoid Callback Hell