호밀밭의 파수꾼

ES6에서 비동기 처리를 위한 패턴으로 Promise라는 객체가 등장했다. 현재는 Promise를 활용한 Fetch API나 Axios같은 비동기 통신 라이브러리를 통해 비동기 처리 시점이 명확해지며 ES8에 등장한 async/await 구문으로 더욱더 직관적인 형태로 발전했다. 그렇다면 Promise가 생기기 전에는 어떻게 비동기 처리를 했을까? 콜백 패턴 Promise가 등장하기 이전에는 주로 콜백함수를 통해 비동기를 구현했다. 비동기 함수가 서버와의 응답을 끝냈을때의 후속 처리를 할 함수를 인자로 받는 형식이다. 만약 독자들의 블로그 DB에서 포스트 목록을 가져온다고 생각해 보자. 테스트를 진행하기 위해서 필자가 getUserRepository함수를 만들었으며 해당 함수는 success와 fail ..

Reference 모던 자바스크립트 Deep Dive W3Schools mdn web docs_ 우리가 웹 페이지에서 마우스를 움직여 어떤 요소를 클릭하거나 해당 요소의 입력창에 무언가를 입력하는 등 수많은 이벤트가 웹에서 발생합니다. 간단한 예시를 하나 들자면 치킨 햄버거 피자 querySelector로 노드를 취득한 뒤 addEventListener로 'click'이벤트가 발생했을 시 해당 노드의 텍스트 노드 값과 스타일 값을 변경하도록 이벤트 타깃(. hamburger)에 이벤트 핸들러((e) => {...})를 등록했습니다. 실제로 햄버거를 클릭해보면 See the Pen Untitled by Antoliny0919 (@antoliny0919) on CodePen. 햄버거였던 텍스트가 스시로 바뀌..