비동기 처리

* 영어표기가 디폴트, 이하 한글표기

* Angular 기준

---

비동기 처리가 뭔가요?

- 특정 코드의 연산이 끝날때까지 코드 실행을 멈추지 않고 다음 코드를 먼저 처리하는 방식

- 예를 들면 붕어빵을 먹으려는데, 나는 음료수를 사오고 친구가 줄을 기다리면 한번에 마실거 + 먹을거 해결 되는것

---

비동기 처리를 설명할때 대표적인 예시로 AJAX, SetTimeout 이 있다.

1. AJAX

- 무려 비동기 방식을 기반으로 웹 개발을 위한 기법 (HTMLm CSS 등등)

- 특정한 하나의 기술이 아닌 묶음 느낌

- 웹 화면을 예로 들면 이해가 쉬운데. 전에 포스팅한 글을 참고하면 좋다. (https://seo-developer.tistory.com/21)

장점	단점
● 빠른 속도 (붕어빵을 생각하자) ● 수신할 데이터 양을 조절가능 ● Client Side    사용자 쪽에 처리를 요청하고 다음 코드가 진행되는 느낌 ● 따라서 플러그인이 필요없다.	● 구동되는 환경이 제한됨    (그러나 최근엔 기기 스펙이 다 좋아서 왠만하면 가능) ● Http 클라이언트 기능이 한정됨 ● 페이지 이동없는 통신으로 인한 보안문제 ● 스크립트 기반이므로 디버깅이 불편

function getData() {

   var tableData;

   $.get ('http:// .......', function(response) {

        tableData = response;

   })

   return tableData;

}

하면. undefine 나옴. $ < 이게 AJAX 인데. 비동기로 처리되기 때문에 값이 들어오기 전에 return 되었기 때문이다.

참고: https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

 

 

2. SetTimeout 함수

- 처음에 이 함수를 썼을때. 분명 배운대로라면 코드에 적은 순서대로 출력되어야 하는데. SetTimeout 은 시간을 무시하는 것 처럼 반응해서 당황했지 않나요? 저는 그랬습니다.

- 사용해보고 이해하는게 빠른데. 중요한 내용은 이 친구도 비동기 처리 방식을 가지고 있기 때문이에요.순서 상관없이 설정한 시간에 맞춰서 함수가 출력됨

---

해결방법은 다음과 같다.

1. callback 함수

- 특정 로직이 끝난 뒤 사용할 수 있도록 만들어진 함수

1-1. 주의점은 콜백 지옥인데, ~하고 콜백 /, ~다음에 콜백/, ~또 하고 콜백 이런식으로 구조를 짜면

       가독성이 떨어지고. 로직 변경이 어려우므로.... 함부로 사용했다간 일이 고되진다.

 

2. promise 함수

- 쉽게 설명하면. 이 함수 안에 설정한 내용을 먼저 해결하고 출력해달라고 약속하는 역할인데. 위의 AJAX 경우처럼 undefine 이 안뜨게 하려면 이 방법을 사용하는게 좋겠죠?

- 사실 화면에는 문제가 없을지라도 콘솔창에 에러가 뜰 수 있는데. (제가 그랬음)

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'.

찾아보니 hook (lifecycle 을 활용해서 어디에 문제가 있는지 체크하는 방식) 의 변화를 감지하는 기능을 사용하면 된다곤 하지만.... promise 를 써도 같은 이치로 문제가 해결된다.