이벤트 버블링과 비동기처리

⭐ 이벤트 버블링, 이벤트 캡쳐링, 이벤트 위임

• 이벤트 캡쳐링 : 하위 엘리먼트에 이벤트 핸들러가 있을 때, 상위 엘리먼트부터 시작해서 하위 엘리먼트까지 이벤트가 전달되는 방식 (상 -> 하)

• 이벤트 버블링 : 하위 엘리먼트에 이벤트가 발생할 때 그 엘리먼트부터 시작해서 상위 요소까지 이벤트가 전달되는 방식 (하 -> 상)

• 자바스크립트에서 동작방식은 이벤트 버블링

• 이벤트 버블링을 막기 위해선 e.stopPropagation() 을 사용하면 됨

• 이벤트위임 : 비슷한 방식으로 여러 요소들을 다뤄야할 때 주로 사용, 하위 엘리먼트들이 여러 개 있을 때 하위 엘리먼트들에 각각 이벤트 핸들러를 달지 않고 상위 엘리먼트에만 이벤트 핸들러를 달아 하위 엘리먼트들을 제어하는 방식

• 이벤트 위임 장점
  -- 동적으로 엘리먼트를 추가할 때마다 핸들러를 고려할 필요가 없음
  -- 상위 엘리먼트에 하나만 추가하면 되므로 깔끔함

하지만 이벤트 위임이 무조건적으로 좋은 것은 아니기 때문에 상황에 맞게 잘 사용하도록 해야함

이벤트 버블링과 이벤트 캡처링 동작 예시

결과 
li 클릭
ul 클릭
div 클릭

즉, 기본적으로는 동작방식이 이벤트 버블링, 이 방식을 이벤트 캡쳐링으로 바꾸기 위해선 addEventListener()의 마지막 인자로 { capture : true } 를 전달 해주면 됨

이렇게 하면 먼저 이벤트 캡처링이 적용된 엘리먼트부터 콘솔에 찍히고 그 다음 다시 이벤트 버블링 (이게 기본 동작이니)

결과 
ul 클릭
li 클릭
div 클릭

⭐ AJAX (Asynchronous Javascript And Xml)

• 비동기식 자바스크립트와 xml의 약자, 여기서 XML이 있는 이유는 예전엔 데이터 포맷으로 XML을 많이 활용 하여서

• 사용자가 AJAX가 적용된 UI와 상호작용하면 서버에 AJAX 요청을 보내고 서버는 DB에서 데이터를 가져와 JS에 정의되어 있는대로 HTML/CSS와 데이터를 융합하여 만든 DOM객체를 업데이트

• 자바스크립트 라이브러리 중 하나, XMLHttpRequest 객체를 활용해서 전체 페이지를 새로 고치는 것이 아닌 페이지 일부만을 변경 하기 위한 데이터 로드 기법

• 즉, 자바스크립트를 통해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신

⭐ Fetch

• fetch은 ES6부터 도입이 됐고 AJAX 비동기 통신 구현할 수 있다. IE를 지원하지 않는 것이 차이 그래도 XMLHttpRequest보다 훨씬 직관적

• fetch는 ES6의 비동기 통신 방법, 자체적으로 Promise 객체를 반환하기에 Promise와 함께 사용하기 편리

⭐ Promise

• ES6부터 도입된 프로미스는 한 마디로 내용은 실행 되었지만 결과를 아직 반환하지 않은 객체

• 원래 자바스크립트는 비동기 처리를 하기 위한 패턴으로 콜백 함수를 사용하였지만 이런 패턴은 콜백 헬로인해 가독성이 나쁘고 발생한 에러의 처리가 곤란함

• Promise가 비동기 처리에 성공하면 resolve 메서드를 호출해서 처리결과를 then으로 반환

• 비동기 처리에 실패하면 reject 메서드를 호출해서 에러 메세지를 catch로 전달

• 후속처리 메서드 then, catch 모두 Promise를 반환하고 then을 사용하여 메서드 체이닝을 통해 콜백 헬을 해결할 수 있음

• Promise는 result와 state란 두 개의 숨김 프로퍼티를 갖고 있고 result는 resolve(value)가 호출되면 value가 되고 reject(error)가 호출되면 error를 가짐 state가 갖는 값은 3개임
  -- Pending (대기) : 이행하지도, 거부하지도 않은 상태
  -- fulfilled (이행) : 연산이 성공적으로 완료됨
  -- refect (거부) : 연산이 실패

⭐ Async / Await

• ES8의 공식 스펙으로 비교적 최근 문법

• function앞에 async를 붙이면 해당 함수는 항상 Promise를 반환, Promise가 아닌 값을 반환하더라도 이행 상태 (fulfilled)의 Promise로 값을 감싸 이행된 Promise가 반환

• 자바스크립트는 await 키워드를 만나면 프로미스가 처리 (settled) 될 때까지 대기, 이후 처리된 값이 반환되므로 then, cathc를 써줄 필요가 없다

• await을 동시에 처리하고 싶다면 Promise.all([실행함수, 실행함수 ...]) 이렇게 보내면 되지만 .all을 사용시 단점은 모두가 실행이 완료 됐을 때 저들 중 한 개라도 에러가 발생시에 어디서 에러가 발생했는지 알 수 없다는 것, 그래서 allSettled를 사용하는 것이 더 좋음
  

• 에러 처리는 try...catch를 활용해야 하고 만약 try...catch가 없는데 에러가 발생하면 프로미스가 거부 상태가 됨

⭐ async/await 동작원리 (async만 일시정지)

• async 함수가 호출되면 async가 콜 스택에 쌓여 실행

• 이때 await을 만나면 async 함수는 일시 정지하고 async를 마이크로 큐로 이동

• 콜 스택에서 async가 우선은 나갔으니 다음에 쌓일 콜스택에 함수 먼저 수행

• 동기적인 함수들의 실행이 모두 끝나고 콜 스택이 비어있을 때, 이벤트 루프는 마이크로 큐에 있는 async 함수를 Call Stack으로 이동 (await들 실행)

• 해당 함수가 await 됐던 시점부터 다시 실행, 그래서 위 같은 과정 때문에 비동기 코드가 동기처럼 작동하는 것

• 여기서 가장 큰 착각은 async라고 동기적인 부분이 없는 것은 아님, await을 만나기 전엔 다 동기처리 (Promise도 마찬가지) ⭐