반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- JWT #토큰 #refreshToken #accessToken #Token #token #localStorage #sessionStorage
- react
- React #controlled component #비제어 컴포넌트 #제어 컴포넌트
- 백준 #직각삼각형
- rate limit
- React #리액트 이벤트 주기 #리액트 이벤트
- react #useCallback #react Hook
- 노마드 코더 #타입스크립트 #typescript #class
- #useRef #언제 쓰는데?
- 백준 #적록색약
- html entities
- React #effect hook #useEffect
- React-Query
- useState #Hooks
- raect typescript #react #typescript #styled-component
- 빡킹독
- react fragment
- RateLimit
- donwstream #upstream #origin
- 이친수
- 버블링 #갭쳐링 #이벤트 #JS
- React #Hook rules #Hook 규칙
- DP #c++
- axios
- 플로이드 #c++
- interceptors
- 다익스트라 #파티 #백준
- npm #not being able to find a file #npm install Error
- 얕은 복사 #깊은 복사 #shallow copy #deep copy
- 코드스테이츠 #알고리즘 #그리디
Archives
- Today
- Total
꿈꾸는 개발자
콜백함수에 대한 이해 본문
-codding apple 영상 참고:
function first(parameter) {
console.log("1");
parameter();
}
function second() {
console.log("2");
}
first(second); //callback함수는 동기일 수도 비동기일 수도 있다=>
//callback함수를 사용하는 이유: 함수를 순차적으로 실행하기 위해서 사용을 한다!
//다른 사람이 작성한 코드를 가져와(여기에서는 first()) 그 다음 바로 내가 원하는 코드를 작성할 때
//이 경우 function second => callback함수를 실행하면 된다!
//위처럼 callback을 중복하다 보면 이제 callback hell이 발생하게 된다=>이럴 때는 promise로 해결하는 게 바람직하다!
//.then()을 통해서 순차적으로 실행할 수도 있다(callback hell로 구성된 부분을)
//아니면 async/await 등을 활용해서 작성을 하면 되기도 한다!
-생활코딩 영상 참고:
- 위 설명을 보면 val의 경우 즉시 실행되는 것이 아니라, function fn의 매개변수로서 나중에 실행되는 형태를 띄고 있다. 이러한 함수를 콜백(callback function)함수 라고 지칭한다! => 단, 콜백함수는 항상 비동기적으로 실행되는 것이 아니라, 동기일 수도 비동기일 수도 있다. setTimeout()과 같은 함수의 경우 콜백함수는 비동기적으로 실행된다!
- 참고로 자바스크립트의 함수는 일급 객체에 해당 한다. 단적인 예로, JS에서 함수는 변수의 값으로, 매개변수로, 즉 값으로 처리 되기 때문에, 일급의 자격을 갖게 된다고 보면 된다.
위 예시 나온 것처럼 filter는 parameter로 callback함수를 받는다=> callback함수의 경우 매개변수로 element(필수)를 받고, 나머지는 [] 대괄호로 감싸져 있는 것은 필수에 해당하지 않는다!
const arr = [1, 2, 3, 4, 5];
function myfilter(callback, arr) {
//1.callback은 true or false를 return 하는 함수이다!=>callback이 true일 때만 element를 저장해 새로운 함수를 return 한다!ㄴ
let newArr = [];
for (let i = 0; i < arr.length; i++) {
if (callback(arr[i])) {
newArr.push(arr[i]);
}
}
return newArr;
}
-- filter함수를 예상해서 자체적인 newfilter함수를 만들기!
드림코딩 엘린 영상 참고:
JS 엔진의 관점에서 위의 코드를 분석해 왜 해당 순서로 출력됐는지 분석할 수 있어야 한다!