호밀밭의 파수꾼

[JS] 비동기 처리를 위한 Promise 객체 ES6에서 비동기 처리를 위한 패턴으로 Promise라는 객체가 등장했다. 현재는 Promise를 활용한 Fetch API나 Axios같은 비동기 통신 라이브러리를 통해 비동기 처리 시점이 명확해지며 ES8에 등장한 async/awa tcitr-antoliny.tistory.com 콜백 패턴의 단점을 극복하기 위해 등장한 Promise객체와 ES8버전에서 등장한 async/await 구문으로 인하여 비동기처리와 관련된 코드의 가독성이 뛰어나게 좋아졌다. 오늘은 비동기 처리 코드의 형식을 동기 형식과 유사하게 바꿔 한 단계 더 성장한 가독성을 자랑하는 async/await과 관련해서 포스팅을 작성하고자 한다. 동기 형식 일단 먼저 기존의 Promise객체를 ..

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

★ 포스팅을 작성하기에 앞서 spread문법은 iterable, iterator와 관련된 선수지식을 필요로 합니다. ★ [JS] 이터러블(Iterable), 이터레이터(Iterator) ES6에서 이터레이션 프로토콜이라는게 도입되었다. 이전에는 순회 가능한 데이터들 예를 들면 배열이나, 문자열 같은 객체들은 통일된 규약 없이 나름의 개별적인 구조로 각자 다양한 방법으로 tcitr-antoliny.tistory.com 두 개의 배열을 각각 순회하여 각 배열에 있는 값들을 새로운 배열에 추가하고 싶다. 가장 먼저 생각나는 방법은 함수를 만든 뒤 내부에서 for문을 통해 값을 줄 배열을 순회하면서 push함수로 새로운 배열에 값을 추가하는 방식이었다. var arrA = [1, 2, 3]; var arrB =..

ES6에서 이터레이션 프로토콜이라는게 도입되었다. 이전에는 순회 가능한 데이터들 예를 들면 배열이나, 문자열 같은 객체들은 통일된 규약 없이 나름의 개별적인 구조로 각자 다양한 방법으로 값을 순회할 수 있었다. 하지만 ES6에 이터레이션 프로토콜이 등장하면서 순회가능한 객체들을 iterable한 객체라고 하며 해당 객체들만이 누릴 수 있는 순회와 관련된 문법(스프레드, 디스트럭처링 ...)이 사용될 수 있도록 통합되어졌다. Iterable 사실 파이썬 iterable, iterator와 관련해서 필자가 포스팅을 작성한 적이 있는데 사실 JS도 똑같은 개념이다. iterable, iterator 단어의 뜻 그대로 각각 "반복할 수 있는", "반복자"이며 파이썬에서는 해당 객체에 __iter__ 매직 메서드..

가끔 프런트엔드 부분 개발을 진행하다 보면 사용자가 잘못된 접근을 했을 때나 아니면 성공적으로 무언가를 완료했을 때 등등 Alert나 Confirm을 통해 사용자와 상호작용을 해야 할 때가 있습니다. 하지만 일반적으로 제공해 주는 Alert와 Confirm은 따분하기 그지없는 디자인으로 이쁜 디자인의 웹을 개발하려고 하는 개발자의 심기를 건드리는 부분인데요. 다행히도 마음 아파할 필요 없이 우리가 직접 Alert, Confirm을 제작하면 됩니다. 제작하기 전에 먼저 생각해야 할 점은 Alert, Confirm과 같은 모달창의 특성은 배경화면 위에 존재하는 요소이며 해당 요소가 존재할 때는 배경화면과의 상호작용은 금지되고 오직 Modal하고만 상호작용 할 수 있는 구조가 되어야 합니다. 배경화면 위에 또..

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