동기 vs 비동기

1️⃣ 동기

요청, 결과가 동시에 일어난다
순서에 맞춰 진행, 동시 처리 불가능
→ 직관적 간단 설계 가능

2️⃣ 비동기

동시에 일어나지 않는다

동시 처리 가능, 하지만 속도 저하
→ 복잡하지만 자원을 효율적으로 사용할 수 있다
콜백 함수 사용

• ex) AJAX
  브라우저 내에서 비동기 기능을 제공하는 기법
  동적으로 페이지 변화 시켜준다
  웹 페이지 전체를 로딩하지 않고 웹 페이지 일부분만 갱신해준다(가벼워진다)
  - 좋아요, 추천수 등
  
  
  ex) 사용자가 버튼을 눌렀는데 서버에서 응답이 없다
  동기 : 데이터 로드 될 때까지 아무 동작을 안 한다
  비동기 : 데이터 로드 될 때까지 로딩 화면 등을 통해 유저친화 효과를 줄 수 있다

콜백 함수, 프로미스(Promise)

1️⃣ 콜백 함수

비동기 처리를 위한 하나의 패턴

loadScript(script, callback)를 호출할 때, 함께 호출할 callback 함수가 준비되어 있어야야 한다.
loadScript를 호출하기 이전에 호출 결과로 무엇을 할지 미리 알고 있어야 한다

❗️콜백 헬(콜백 지옥) : 가독성이 안 좋은 코드, 여러 개의 비동기 처리를 한번에 처리하면서 생긴 문제
→ 해결방법 : 프로미스 등장

2️⃣ 프로미스(Promise)

ES6 비동기 처리를 위한 또 다른 패턴
언제 처리 할 지를 명시할 수 있어서 유용하다
프라미스를 이용하면 흐름이 자연스럽다

loadScript(script)로 스크립트를 읽고, 결과에 따라 그다음(.then)에 무엇을 할지에 대한 코드를 작성하면 된다

let promise = new Promise(function(resolve, reject) {
  // executor (제작 코드, '가수')
});

HTML속성, DOM프로퍼티를 이용한 이벤트 핸들러 할당 방식은 하나 이벤트에 복수 핸들러를 할당할 수 없다