mimizae 님의 블로그

Promise는 왜 필요한가?JS는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용하는데 전통적인 콜백 패턴은콜백 헬로 인해 가독성이 나쁘고비동기 처리 중 발생하는 에러 처리가 곤란하며여러 개의 비동기 처리를 한 번에 처리하는 데에도 한계가 있다.이와 같은 콜백 패턴이 가진 단점을 보완하기 위해 ES6은 Promise를 도입했다.이제 콜백 패턴의 각 단점을 좀 더 자세히 알아보며 왜 Promise가 도입되어야 했는지 이해해 보자! 1. 비동기 처리를 위한 콜백 패턴의 단점1) 콜백 헬// GET 요청을 위한 비동기 함수const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onloa..

이전 글을 보고 와 주시면 감사하겠습니다! 🤩이벤트 전파란?DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 이 트리를 타고 전파된다! Apple Banana 0range 이 예제를 살펴 보며 빠르게 이해해 보자!ul 요소의 두 번째 자식 요소인 li 요소를 클릭해 이벤트를 발생시키면 이벤트 객체가 생성이 된다. 이렇게 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM 트리를 통해 전파된다. 이벤트 전파는 객체가 전파되는 방향!!에 따라 아래의 그림과 같이 3단계로 구분할 수 있다. 캡처링 단계: 이벤트가 상위 요소에서 하위 요소 방향으로 전파타깃 단계: 이벤트가 이벤트 타깃에 도달버블링 단계: 이벤트가 하위 요소에서 상위 요소 방향으로 전파 ..

이벤트 드리븐 프로그래밍이란?브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지해 이벤트를 발생시킨다. 예를 들어 클릭, 키보드 입력, 마우스 이동 등이 일어나면 브라우저는 이를 감지해 발생한 사건에 맞는 특정한 타입의 이벤트를 발생시킨다. 만약 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 그 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다. (애플리케이션이 이 이벤트들을 늘 주시할 수 없으니까!!) 이때!! 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라고 하고 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다. 사용자가 버튼을 클릭했을 때 함수를 호출하여 어떤 처리를 하고 싶다고 가정해 보자.이..

DOM Interface → 브라우저 구현 → JavaScript 주입 → JavaScript의 DOM 조작 위의 흐름, DOM과 브라우저와 JS의 연결성을 이 아티클을 작성하며 이해해 보도록 하자! 🔥🔥 브라우저의 렌더링은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다.DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료 구조이다. 이 정의를 조금만!! 더 풀어서 말하자면, 문서 객체 모델(DOM)은 HTML 문서 구조를 객체로 표현한 것이라는 의미이다!! DOM은 HTML 문서의 요소들을 트리 형태로 표현하며, 각각의 노드는 문서의 각 요소(HTML 태그, 속성, 텍스트 등)를 나타낸다. ..

이전 글을 읽고 와 주시면 감사하겠습니다! 👍🏻클로저의 활용클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다.상태가 의도치 않게 변경되지 않도록 상태를 은닉하고 특정 함수에게만 상태 변경을 허용하게 한다. 함수가 호출될 때마다 호출된 횟수를 누적해 출력하는 카운터 예제를 통해 깊이 이해해 보자. 여기에서는 호출된 횟수가 바로 안전하게 변경하고 유지해야 할 상태이다. // 카운트 상태 변수let num = 0;// 카운트 상태 변경 함수const increase = function(){ return ++num;};console.log(increase()); // 1console.log(increase()); // 2console.log(increase()); // 3 이 코드는 잘 동작하지만 오..

클로저는 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어의 중요한 특성이지, 자바스크립트 고유의 개념이 아니다. 그래서 클로저의 정의가 ECMAScript 사양에 등장하지 않지만, MDN에서 정의하는 클로저에 대한 설명을 발췌해 보자면, 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다 예제를 통해 이 정의를 이해해 보자. 일단 함수가 선언된 렉시컬 환경이라는 키워드를 꼭 기억해두자!!! const x = 1;function outerFunc(){ const x = 10; function innerFunc(){ console.log(x); //10 } innerFunc();}outerFunc(); 중첩 함수 innerFunc의 상위 스코프는 ..

this 키워드객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조이다. 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다.이때 자신이 속한 객체의 프로퍼티를 참조하려면 먼저!!! 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. (그래야 접근하지!) 아래와 같이 객체 리터럴 방식으로 생성한 객체의 경우, 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다.const circle = { // 프로퍼티: 객체 고유의 상태 데이터 radius: 5, // 메서드: 상태 데이터를 참조하고 조작하는 동작 getDiameter() { // 이 메서드가 자신이 속한 객체의 프로퍼..

실행 컨텍스트 공부 중 식별자 검색 과정을 공부하며 전역 객체와 전역 코드 평가 과정의 이해가 부족한 듯하여 보충합니다...!!!!! 전역 객체전역 객체는 js 엔진에 의해서 어떤 객체보다도 먼저 생성되어서 어떤 객체에도 속하지 않는 최상위 객체가 됨. 근데 이 객체가 표준 빌트인 객체(누구나 가지고 있는), 환경에 따른 호스트 객체(node.js인지 뭔지에 따라), 그리고 var 키워드로 선언한 전역 변수와 함수 선언문으로 선언된 전역 함수를 프로퍼티로 갖는다. 여기에서 표준 빌트인 객체란...Object, Array, Function, Math, Date, JSON, RegExp, Promise, Error, ... 등등아래와 같은 것!const arr = new Array(); // 표준 빌트인 ..