api 통신_콜백함수 & async/await

---

1. 동기 vs 비동기 방식

동기(Synchronous) 방식

• 작업이 순차적으로 실행됨
• 한 작업이 완료될 때까지 다음 작업은 대기
• FIFO(First In First Out) 큐와 유사한 동작

비동기(Asynchronous) 방식

• 작업이 병렬적으로 실행 가능
• 한 작업의 완료를 기다리지 않고 다음 작업 시작 가능
• JavaScript의 이벤트 루프 모델을 따름
  • Web API, 태스크 큐, 이벤트 루프의 상호작용

---

2. API 호출: 동기 vs 비동기

동기적 API 호출의 문제점

1. 화면 멈춤: API 응답 대기 중 UI 동결
2. 사용자 경험 저하: 사용자가 앱이 멈춘 것으로 인식
3. 리소스 낭비: 대기 시간 동안 다른 작업 불가
4. 성능 저하: 여러 API 호출 시 전체 로딩 시간 증가

비동기적 API 호출의 장점

1. 반응성 유지: API 호출 중에도 UI 반응 가능
2. 병렬 처리: 여러 API 동시 호출로 전체 로딩 시간 단축
3. 효율적인 리소스 사용: 대기 시간 동안 다른 작업 수행 가능
4. 개선된 사용자 경험: 점진적 로딩 가능

// 비동기 처리
console.log("페이지 렌더링 시작");
fetchApiData().then(data => {
    console.log("API 데이터 수신:", data);
});
console.log("다른 UI 요소 렌더링");

// 출력 순서:
// 1. "페이지 렌더링 시작"
// 2. "다른 UI 요소 렌더링"
// 3. "API 데이터 수신: [데이터]" (API 응답 후)

 

---

3. API 통신 방법

1. 콜백 함수

• 가장 기본적인 비동기 처리 방식
• 다른 함수의 인자로 전달되어 나중에 실행됨

function fetchData(callback) {
    setTimeout(() => {
        callback("데이터");
    }, 1000);
}

fetchData((data) => {
    console.log(data);
});

 

 

2. Promise

• 비동기 작업의 최종 완료 또는 실패를 나타내는 객체
• .then(), .catch() 메서드로 결과 처리

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("데이터");
        }, 1000);
    });
}

fetchData()
    .then(data => console.log(data))
    .catch(error => console.error(error));

 

 

3. Async/Await

• Promise를 기반으로 한 더 직관적인 비동기 처리 방식
• 비동기 코드를 동기 코드처럼 작성 가능

 

async function getData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

getData();

---

4. 콜백 함수 

1. 콜백의 본질:
   • 콜백 함수는 다른 함수에 인자로 전달되는 함수임.
   • 이 함수는 전달된 함수(주 함수)의 실행 과정 중 특정 시점에 호출됨.
2. "콜백"이라는 이름의 의미:
   • "나중에 호출된다(called back)"는 의미에서 유래.
   • 주 함수의 실행 중 어떤 조건이 만족되거나 작업이 완료되었을 때 "다시 호출"됨.
3. 비동기성과의 관계:
   • 콜백은 비동기 작업을 처리하는 데 자주 사용되지만, 반드시 비동기일 필요는 없음.
   • 비동기 작업에서 콜백을 사용하면, 작업이 완료된 후 결과를 처리할 수 있음.
4. 파일 위치의 무관성:
   • 콜백 함수가 다른 파일에 있을 수도 있고, 같은 파일에 있을 수도 있음.
   • 중요한 것은 함수가 인자로 전달되어 나중에 실행된다는 점.
5. 동기 vs 비동기 콜백:
   • 동기 콜백: 즉시 실행 (예: Array.prototype.map)
   • 비동기 콜백: 나중에 실행 (예: setTimeout, API 요청)

따라서, 콜백의 핵심은 함수를 인자로 전달하여 나중에 실행한다는 점임

∴ 

콜백 함수는 다른 함수에 인자로 전달되어, 그 함수의 실행이 끝난 후 호출되는 함수임

 

 

---

5. this와 _this의 이해

this 키워드

• JavaScript에서 this는 현재 실행 컨텍스트를 가리킴
• 함수 호출 방식에 따라 this의 값이 달라짐

콜백 함수에서의 this 문제

• 콜백 함수 내에서 this는 예상과 다른 객체를 가리킬 수 있음
• 이는 함수의 호출 컨텍스트가 변경되기 때문

_this 사용의 이유

1. 원래의 컨텍스트 유지
   • _this를 사용하여 원래 스코프의 this값을 저장
2. 콜백 내에서 올바른 컨텍스트 참조
   • 저장된 _this를 통해 원래 객체(예: Vue 컴포넌트 인스턴스)에 안전하게 접근

methods: {
  fetchData() {
    const _this = this;
    apiCall(function(response) {
      _this.data = response; // 여기서 this 대신 _this 사용
    });
  }
}

 

해결책

화살표 함수 사용

• 화살표 함수는 자신만의 this를 생성하지 않고 외부 스코프의 this를 유지

methods: {
  fetchData() {
    apiCall((response) => {
      this.data = response; // 화살표 함수로 this 유지
    });
  }
}

 

bind() 메서드 사용

methods: {
  fetchData() {
    apiCall(function(response) {
      this.data = response;
    }.bind(this));
  }
}

 

---

6. 요약

1. 동기와 비동기의 차이는 작업 처리 방식에 있음. 동기는 순차적, 비동기는 병렬적 처리가 가능함
2. API 호출은 대부분 비동기로 처리됨. 이는 애플리케이션의 반응성과 성능을 향상시키기 위함임.
3. API 통신 방법으로는 콜백 함수, Promise, Async/Await 등이 있음. 
4. 콜백 함수는 비동기 프로그래밍의 기본적인 개념으로, 다른 함수에 인자로 전달되어 나중에 실행되는 함수를 말함.
5. this와 _this의 사용은 JavaScript의 컨텍스트 관리와 관련. 특히 비동기 콜백에서 올바른 컨텍스트를 유지하는 데 중요.
6. 현대 웹 개발에서는 가독성과 에러 처리의 용이성 때문에 Promise나 Async/Await를 더 선호하는 추세. 또한 화살표 함수를 사용하여 this 바인딩 문제를 해결하는 경우가 많음.