AJAX _ 비동기 통신의 시작 Callback 함수

Eunsu·2021년 11월 2일

@ Ajax / HTTP

목록 보기

2/3

🟦 callback 함수란?

🔸 콜백함수란 다른 함수의 인자로 넘기는 함수를 말한다.
콜백함수는 바로 실행되는 것이 아니라, 파라미터로 만든 함수를 전달해준다. 브라우저가 요청할 때 다시 불러주는 함수라 콜백함수임.

🔸 비동기 데이터 전송에서 콜백함수가 필요한 이유는, 클라이언트에서 서버에 데이터를 요청하고 성공, 실패에 따라 어떠한 코드를 실행한다. 이 코드는 성공, 실패에 따라 실행되므로 바로 실행되는게 아니라 결과값에 따라 브라우저에 보여지는 것이기 때문에 비동기 통신에 콜백함수로 요청해 코드를 짜고 나중에 실행하는 것이다.

setTimeout(() => console.log('what?'),1000)
console.log(1);
console.log(2);
// 1
// 2
// what

callback function = () => console.log('what?')

💜 Synchronous Callback & ASynchronous Callback

const $ = require("jquery");
const API = "https://jsonplaceholder.typicode.com/users";
$.ajaxSetup({
  dataType: "json"
});
$.get(API, (users) => {
  console.log("show users");
  users.map(user => user.name).forEach(name => document.body.append(name));
  console.log('finish')
});
console.log('loading...')
//loading...
//show uers
//finish

✔ 비동기callback

$.get(API, (users) => {
  console.log("show users");
  users.map(user => user.name).forEach(name => document.body.append(name));
  console.log('finish')
});

✔ 동기callback

  users.map(user => user.name).forEach(name => document.body.append(name));

🔸 콜백은 JavaScript가 고차함수를 잘 지원한다는 특징 때문에 가장 많이 사용되는 비동기 프로그래밍 양식이다. 하지만 콜백만으로는 복잡한 비동기 데이터 흐름를 표현하기가 어려워서 많은 프로그래머들이 힘들어했고, 결국 콜백 지옥(callback hell)이라는 용어까지 생겨났다.

🔹 고차함수란?
고차함수(Higher-order function)은 ‘다른 함수를 전달인자로 받거나 함수실행의 결과를 함수로 반환하는 함수’를 뜻한다.

대표적으로는 Array.map(),filter(),reduce()

💔 Callback Hell(콜백지옥)

◼ Test예제 만들기

1. 사용자의 정보 받아오기
2. loginUser 코드 실행해서 성공하면 onSuccess에 id 전달
3. getRoles 코드 실행
4. 성공하면 onSuccess로 {name, role}받기

◾ Class UserStarage

class UserStorage {
 loginUser(id, password, onSuccess, onError) {
   setTimeout(() => {
     if (id === "eunsu" && password === "1234") {
       onSuccess(id, password);
     } else {
       onError(new Error("not a found"));
     }
   }, 1000);
 }
 getRoles(user, onSuccess, onError) {
   setTimeout(() => {
     if (user === "eunsu") {
       onSuccess({ name: user, role: "guest" });
     } else {
       onError(new Error("no access"));
     }
   }, 1000);
 }
}

loginUser (id,pw,onsuccessCallback,onErrorCallback)
loginUser 성공했다면 getRoles(id,onsuccessCallback,onErrorCallback) 넘기기

◾ index.html

`

login
`
◾ index.js

const userId = document.getElementById("userId"),
  userPw = document.getElementById("userPw"),
  btn = document.getElementById("btn");
  //변수 불어오기
const handleSubmit = () => {
//use class 생성자
  const user = new UserStorage(),
    { loginUser, getRoles } = user;
  //id, pw 넘기기
  loginUser(
    userId.value,
    userPw.value,
    // 성공했을 때(onSuccess)
    //getRoles에 정보 전달.
    (user) => getRoles(userId.value,(user) => {
      const elem= document.createElement('h1');
      elem.innerText=`Hello ${user.name}! you are ${user.role}`
        document.body.append(elem);
   //getRoles 실패했을 때
    },(error) => {
      console.log('error')
    }),
    //login 실패했을 때
    (error) => console.log("error")
  );
};
btn.addEventListener("click", handleSubmit);

이렇게 콜백함수가 성공, 실패 할때 계속 타고 들어가 코드도 길어지고 가독성도 떨어짐. 애러가 났을 때도 찾기 힘들고, 디버깅도 어려움!

💙 결론

콜백함수는 바로 순차적으로 실행되는 함수가 아니라, 요청했을 때, 필요할 때 불러준다.

데이터 통신, 이벤트 요청 함수로 사용된다. (무조건 비동기적인 실행은 아니다.)

서버의 요청결과를 모르기 때문에 어떤 일이 일어날때(success, error 등등) 해야할 일들을 코드로 작성해 놓고 서버의 요청에 따라 해당 함수를 다시 call back 한다. 그래서 콜백함수를 사용함.

💫 출처 / 참고

https://helloworldjavascript.net/pages/285-async.html [hello world js]
https://medium.com/@kwoncharles/js-%EB%B9%84%EB%8F%99%EA%B8%B0-async-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-1-7dc99ecf4ca6
https://wayhome25.github.io/nodejs/2017/02/18/nodejs-06-Asynchronous-synchronous/ [초보개발자]
https://www.youtube.com/watch?v=s1vpVCrT8f4&t=762s [엘리 JS강좌]
https://jsonplaceholder.typicode.com/ [Free APIS]

Eunsu

function = (Develope) => 'Hello World'

이전 포스트

AJAX _ 비동기 데이터 통신

다음 포스트