[Day 24] 2022-0726 : 내장 함수 직접 구현하기, 비동기 Day

오늘 배운 것

• 자바스크립트의 각종 내장 함수를 직접 구현하며 동작 원리에 대해 심도있게 알 수 있었다. 
• 동기와 비동기, promise 와 async, await

새롭게 알게된 것

동기와 비동기

• 작업이 순차적으로 실행되는가, 혹은 그렇지 않은가의 차이이다. 동기적 코드에서는 뒤에 실행될 작업이 앞 작업이 끝나기를 기다리는 블로킹이 발생한다. 비동기적 코드에서는 이전 작업이 끝나는 것과 관계없이 작업을 실행할 수 있기 때문에 논블로킹 방식이라고 할 수 있다. 비동기 방식에서는 모든 작업들이 같은 순차적으로 실행되기 보다는 순서에 상관 없이 실행될 수 있다.
• 예시로, 이미지 태그가 있고, 이 이미지가 로드되자마자 실행되는 이벤트 리스너가 있고 그 다음에 작성된 코드가 있다고 하자. 이미지 태그는 src를 로드하는 것을 비동기적으로 처리 - 해당 이미지의 크기가 많이 큰데 이 이미지가 로드되기까지 기다렸다가 다음 코드가 실행되면 정말 느리게 동작할 것이다- 그리고 그 다음 라인의 이벤트 리스너는 이 이미지가 load 될 때 까지 기다리기 때문에, load 되기 이전에 먼저 맨 마지막에 작성된 일반 코드가 실행된다. 그 후에 이미지 load가 완료되면 이벤트 리스너의 콜백함수가 동작한다. 
• 다만 모든 콜백 함수와 모든 이벤트 리스너가 비동기적 방식은 아님에 유의해야 한다. 
• 동기적 작동 방식은 모든 코드가 이전 코드의 실행이 완료되기까지 기다리므로 마지막 코드가 실행되기까지 시간이 오래 소요된다. 하지만 비동기적 방식에서는 그런 것과 상관 없이 좀 더 유연하게 실행시킬 수 있기 때문에 더 빠르고 효율적으로 프로그램을 실행시킬 수 있다. 

AJAX

• Asynchronous JavaScript And XML 의 약자로, remote 웹 서버와 "비동기적"으로 통신하는 방법이다. Ajax 콜을 한다고 표현하는데, Ajax 콜을 통해서 서버에 데이터를 동적으로 요청할 수 있다. 이 말은 웹페이지 전체를 새로고침하지 않아도 데이터를 계속 새롭게 로드할 수 있다는 의미이다.
• 클라이언트 서버에서 데이터를 요청하는 HTTP 리퀘스트를 서버에 전송한다. 이 때 GET 혹은 POST 등으로 요청 방식을 구분할 수 있다.
• 웹 서버에서는 이 요청에 따라서 요청된 데이터를 클라이언트 측 (예를들면 브라우저)로 response 한다. 
• 이 때 데이터 요청을 보내게 될 웹 서버는 주로 webAPI 일 것이다. 그렇다면 API 그리고 웹 API는 무엇일까?

WEB API

• Application Programming Interface의 약자이다. 프로그램끼리 소통 - 데이터를 주고받을 수 있는 일종의 프로그램 조각이라고 비유할 수 있다. 
• Web API의 종류는 다양한데, 그 중 AJAX등을 사용해 클라이어트로부터 요청 받은 내용을 전달해주는 API들이 있다. 우리가 직접 이런 API를 제작할 수도 있고(백엔드 지식을 필요로 함) 혹은 다른 곳에서 만들어진 써드 파티 API를 사용할 수도 있다. 
• API의 데이터 포맷으로는, 이전에는 XML을 많이 사용했지만 최근에는 JSON을 더 많이 사용한다. 

콜백 지옥과 promise

• AJAX 콜로 response 받은 데이터를 이용해 컴포넌트를 생성하는 함수가 있다고 하자. 이 함수를 각각 다른 데이터로 여러번 호출해서 여러개의 컴포넌트를 생성할 수 있다. 이 때 앞서 설명한대로 AJAX는 비동기적 방식으로 작동한다. 즉 함수가 실행되어 종료되는 시점이 제각각 다르기 때문에 어떤때는 1,2,3 의 순서로 로드가 완료되어도 그 다음번에는 2,3,1 이렇게 순서가 뒤죽박죽이 될 수도 있다. 
• 어떤 호출이 먼저 끝날지 특정을 할 수 없을 때, 콜백 함수로 하나의 호출이 끝났을 경우에만 다른 호출이 실행되도록 실행 순서를 제어할 수 있다. 
• 하나의 콜백 함수의 인자로 다음에 실행할 비동기 작업을 전달하면 그 순서에 맞춰서 실행된다. 
• 이 때 앞의 비동기 작업(예를들면 그 AJAX 호출)은 성공(resolve) 혹은 실패(reject) 두가지 상태를 가질 수 있을 것이다. 성공했을 경우에는 다음 비동기 작업을 실행하거나, 성공했을 때 실행할 함수등을 전달하고 그렇지 못한 경우에는 에러처리를 해주어야 한다. 이를 콜백함수를 사용해 표현하면 아래 코드와 같다.

function isPositive(number, resolve, reject) {
  setTimeout(() => {
    if (typeof number === "number") {
      //성공 => resolve
      resolve(number >= 0 ? "양수" : "음수");
    } else {
      //실패 => reject
      reject("주어진 값이 숫자형 값이 아님.");
    }
  }, 2000);
}

isPositive(
  10,
  (res) => {
    console.log("성공적으로 수행됨:", res);
  },
  (err) => {
    console.log("실패하였음:", err);
  }
);

• 여러개의 콜백 함수들이 맞물려서 분간할 수 없는 것을 콜백 지옥이라고 하는데, 이를 해결하기 위해서 promise 객체라는 것을 사용할 수 있다. 

[JavaScript] Promise

SUMMARY

잘 한 점

• 공부한 부분은 조금이라도 정리하려고 한 것.

보완할 점

• 동기 / 비동기에 관련된 부분은 어느정도 이해가 되었는데 콜백지옥과 promise 객체, async / await에 대해선 정말 거의 이해가 되지 않는다. 내일 오전과 저녁시간을 활용해서 최대한 이해하고 넘어가는 것이 목표 + 주말에 시간을 내어서 관련 예제를 만들면서 학습해야겠다. 

느낀 점

• 오늘은 컨디션이 안좋아서 저녁에 집중을 하는 것이 너무 힘들었다. 또 내용이 방대한데 주어진 시간이 촉박해서 조급함도 생겼던 것 같다. 각기 다른 내용으로 3일간 페어를 하는데, 모르는게 너무 많은 것 같아서 짚고 넘어가지 않으면 안될 것 같은 그런 느낌도 든다 ㅠ. 
• 자바스크립트 내장함수를 직접 구현하는 과제를 했다. minimum 과제 까지는 빠르게 진행을 했는데, advanced한 부분이 많이 어려웠다. 처음에 클로저를 활용해 데코레이터 패턴을 만드는 문제가 있었는데 지금도 전혀 이해가 되지 않고 그 외에 많이 어려웠던 것은 여러개의 배열이 있을 때 교집합 배열과 차집합 배열을 생성하여 리턴하는 함수였다. 
• 오늘은 어려운 부분이 많아서 약간 멘붕이 온 것 같지만... 그래도 시간을 잘 활용해서 정리해봐야지..!