[혼공JS] 자바스크립트 - 콜백? 비동기? ajax & fetch ?

 

사실 저번에 명언 생성기 프로젝트를 진행하며 Ajax ,Fetch 메소드에 대해 이해한척 넘어가려 했으나

이는 올바른 공돌이의 자세가 아니므로 좀더 간략화된 저만의 해석으로 써보려합니다 (반박시 여러분 의견이 맞습니다.)

우선 제대로 이해하지 못하고 넘어간 콜백함수 그리고 전혀 모르는 용어들인 Ajax&Fetch, 비동기식과 동기식을 설명해보고자 합니다

 

콜백함수

참고 사이트 : https://ko.javascript.info/function-expressions

함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 "나중에 호출(called back)"하는 것이 콜백 함수의 개념

예제를 보면서 이해하면 쉽습니다

 

콜백예제

        function callThreeTimes(callback) {
            for(let i=0; i<3;i++){
                callback(i)
            }
            
        }
        function print(i) {
            console.log(`${i}번쨰 함수 호출`)
        }
        callThreeTimes(print)

1번 : callTreeTimes() 함수 실행!   (빨간 화살표에 집중해주세요)

2번 : for 문으로 반복되며 내부 함수 callback(0)을 호출합니다.  ==> print(0) 호출

참고: callTreeTimes(print)의 매개 변수로 넘어와서 callback == print입니다.

3번  i = 0 , 일때 print(o)이 실행됨  -- 0번째 함수 호출

그리고 이제 반복해서 2번째 함수가 호출될때까지 진행됨

 

callThreeTimes(print) 처럼 매개 변수에 함수가 들어가는 것!

그러니까 print가 콜백 함수인겁니다.

 

근데 이게 왜 필요함??? 이라 한다면 2가지 이유가 있습니다.

 

1. 추상화 : 만일 출력의 변화가 필요하다면 콜백 함수만 수정해주면 되기에 callThreeTimes() 함수 내부 로직을 변경하지 않고도 변경이 가능해집니다. 

즉 외부에서 주입되기에 자유롭게 변경이 가능해진다!

 

2, 비동기 처리를 위한 콜백 함수! -- 비동기 처리 후 나중에 호출할 함수를 뜻함

동기 비동기

참고 사이트 : https://poiemaweb.com/js-async

동기란 무엇이고 비동기란 무엇일까요?

간단하게 설명해주는 그림이 있습니다!

출처 : https://poiemaweb.com/js-async

 

동기식 :  하나하나 차례대로 반드시 앞선 태스크(명령)가 처리되어야 다음 태스크가 실행됨

비동기식 :  반대로 태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 태스크를 실행한다

 

즉 동기식은 들어오는대로 실행하고 나머지는 대기하는 형식이라면 ,

비동기식은 들어오는 대로 실행하되 처리시간이 길어지면 다른거 먼저 실행하는 것이다!

 

예제 : 순차적으로 실행된 동기식

function func1() {
  console.log('func1');
  func2();
}

function func2() {
  console.log('func2');
  func3();
}

function func3() {
  console.log('func3');
}

func1();

 

예제 : 비순차적으로 실행된 비동기식

function func1() {
  console.log('func1');
  func2();
}

function func2() {
  setTimeout(function() {
    console.log('func2');
  }, 0);

  func3();
}

function func3() {
  console.log('func3');
}

func1();

순서가 바뀌었다

 

아니 그럼 콜백함수는 어디서 비동기식에 쓰이는 거임?! 한다면

setTimeout 안에  function() {console.log('func2');} 이 콜백함수이다.

 

ajax & fetch

참고 사이트 : https://ko.javascript.info/fetch

다음은 ajax & fetch 인데 둘 모두 서버에서 추가 정보를 비동기적으로 가져올 수 있게 해주는 메소드를 말합니다.

그리고 이 두 메소드를 사용하면 웹페이지를 다시 갱신하지 않아도 일부 데이터만을 갱신하는 것이 가능합니다.

 

다만 이 두가지 메소드의 차이점은

fetch : 자바스크립트 내장 라이브러리 메소드 , 프로미스 기반

ajax :  Jquery를 사용해야 간편하고 호환성이 보장되는 메소드

이라고 보면 될꺼 같다.

 

두 메소드의 기본적인 사용법

 

 

fetch

fetch(url, options)
  .then(response => response.json())
  .then(result => /* 결과 처리 */)

 

ajax

function ajax(url, callback) {
  $.ajax({
    url: url,
    method: 'GET',
    dataType: 'json',
    success: function(result) {
      callback(result);
    },
    error: function(xhr, status, error) {
      console.error('Request failed with status:', status);
      // 에러 처리
    }
  });
}


ajax(url, function(result) {
  // 결과 처리
});
```

 

메소드 : GET, POST ,DELETE, PUT 등이 있으며 이를 사용해서 만들면 RESTAPI라고 한다.

 

RestAPI와 Promise등등은 나중에.....

 

 

---

요약

콜백함수 : 비동기식 처리에서 응답을 받고나서 처리할 함수를 적는 것

                또는 함수에 함수로 인자를 전달하여 순차적으로 처리하게끔 하는것

 

동기식 :  순차적인 실행 방식

비동기식 :  비순차적으로 유도리 있게 실행하는 방식

 

Ajax & fetch : 서버와 통신하는 메소드 , 좀 더 쉬워 보이는걸 사용해보자!

                       JQuery 모르면 fetch , JQuery를 알고있다면? 그래도 fetch 쓰자

                      어딘가 AXIOS라는것도 있던데.... 그것도 나중에 써보겠다.