프로그래밍 잡동사니

얼마전 모던 자바스크립트 Deep Dive 완독을 목표로 3개월간 운영했던 스터디가 마무리되었다 교내 개발자들과 교류하자는 생각으로 동아리에 가입했다가 어쩌다 보니 스터디 운영까지 맡게 되었는데, 스터디원들을 만나고 커리큘럼을 짜는 과정에서 책임감이 생겨 끝까지 운영할 수 있었던 것 같다🙂 물론 일방적으로 멘토링하는 것이 아니라 나 자신도 공부를 목적으로 스터디를 운영했는데, 스터디에 단순히 참여만 하거나 혼자 공부할 때와 달리 독특한 경험을 할 수 있었다 스터디는 다음과 같은 방식으로 운영했다 0. 1주일에 2시간씩, 시험기간 제외 9주간 대면으로 진행 1. 스터디원들이 각각 책의 1챕터씩 맡아 총 3챕터 발표 2. 전체 요약/정리 및 각 챕터 주제별 심화 학습 멘토링 3. 주간 과제 피드백 + 다음주..

에러 처리 console.log('[Start]'); foo(); // ReferenceError: foo is not defined // 발생한 에러를 방치하면 프로그램은 강제 종료된다. // 에러에 의해 프로그램이 강제 종료되어 아래 코드는 실행되지 않는다. console.log('[End]'); 에러가 발생하지 않는 코드를 작성하는 것은 불가능하며, 에러를 방치하면 프로그램은 강제 종료된다 // DOM에 button 요소가 존재하지 않으면 querySelector 메서드는 에러를 발생시키지 않고 null을 반환한다. const $button = document.querySelector('button'); // null $button.classList.add('disabled'); // TypeErr..

제너레이터 ES6에 도입된 제너레이터(Generator)는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수이다 제너레이터 함수는 함수 호출자(caller)에게 함수 실행의 제어권을 양도(yield)할 수 있다 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다 제너레이터 함수를 호출하면 이터러블인 제너레이터 객체를 반환한다 // 제너레이터 함수 선언문 function* genDecFunc() { yield 1; } // 제너레이터 함수 표현식 const genExpFunc = function* () { yield 1; }; // 제너레이터 메서드 const obj = { * genObjMethod() { yield 1; } }; // 제너레이터 클래스 메서드 c..

전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 에러 처리가 곤란하며 여러 비동기 처리를 한 번에 하는 것에도 한계가 있다. ES6에서는 새로운 패턴으로 프로미스(Promise)를 도입해 콜백 패턴의 단점을 보완하고 비동기 처리 시점을 명확하게 표현한다 // 프로미스 생성 const promise = new Promise((resolve, reject) => { // Promise 함수의 콜백 함수 내부에서 비동기 처리를 수행한다. if (/* 비동기 처리 성공 */) { resolve('result'); } else { /* 비동기 처리 실패 */ reject('failure reason'); } }); Promise 생성자 함수가 인수로 전달받은 콜백 함수 내부에서 비동기 처리를..

타이머 자바스크립트는 타이머를 생성할 수 있는 setTimeout / setInterval, 타이머를 제거할 수 있는 clearTimeout / clearInterval 함수를 제공하며, 전역 객체의 메서드로 제공되는 호스트 객체로 비동기 처리 방식으로 동작한다 // 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다. setTimeout(() => console.log('Hi!'), 1000); // 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다. // 이때 콜백 함수에 'Lee'가 인수로 전달된다. setTimeout(name => console.log(`Hi! ${name}.`), 1000, 'Lee'); // 두 번째 인수(delay)를 생략하면 기본값 0이 지정된다. ..

브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지해 이벤트를 발생시키는데, 이 때 호출될 함수를 이벤트 핸들러라고 하며 브라우저에게 이벤트 핸들러 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다 Click me! 특정 이벤트에 대응하는 다양한 이벤트 핸들러 프로퍼티를 할당해 브라우저로 호출한다 Click me! 위와 같이 함수 호출문을 할당해 이벤트 핸들러를 등록하는 방식이 있지만 권장되지 않는다 Save { /* React */ } Save Save Save JSX 상에서는 직접 HTML에 사용하는 것이 아니기 때문에 문제는 없다 Click me! DOM을 가져와 이벤트 핸들러 프로퍼티에 함수를 바인딩 해주는 방식이 존재한다 Click me! addEventListener 메서드 방식은 캡처링/..

Set Set🔽 Set - JavaScript | MDN Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있습니다. developer.mozilla.org Set 객체는 중복되지 않는 유일한 값들의 집합으로, 배열과 다음과 같은 차이가 있다 const set1 = new Set([1, 2, 3, 3]); console.log(set1); // Set(3) {1, 2, 3} const set2 = new Set('hello'); console.log(set2); // Set(4) {"h", "e", "l", "o"} 이터러블을 인수로 전달받아 Set 객체를 생성할 수 있다. 이 때 중복 값은 제거된다 const set = new Set(); set.add(1).add(2..

이터러블 ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 자료구조를 위해 미리 정의한 규칙이다. ES6 이전의 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등은 통일된 규약 없이 다양한 방법으로 순회할 수 있는데, ES6에서는 순회 가능한 자료구조를 이터러블로 통일해 for…of문, 스프레드 문법, 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했다 const isIterable = v => v !== null && typeof v[Symbol.iterator] === 'function'; // 배열, 문자열, Map, Set 등은 이터러블이다. isIterable([]); // -> true isIterable(''); // -> true isIterable(new Map()); // ->..

DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다 노드 HTML 문서를 구성하는 개별적인 요소인 HTML 요소(element)는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 노드 객체로 변환된다. 이 때 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환된다 노드들은 계층 구조로, 비선형 자료구조인 트리 자료구조를 이룬다 DOM을 구성하는 노드 객체는 표준 빌트인 객체가 아닌 브라우저 환경에서 추가적으로 제공되는 호스트 객체이며, 프로토타입에 의해 다음과 같은 상속 구조를 갖는다 DOM API는 이러한 노드 타입에 따라 필요한 기능을 DOM API로 제공하고, 이를 통해 HTML의 구조나 내용, 스타일 ..

구글의 V8 엔진으로 빌드된 자바스크립트 런타임 환경인 Node.js의 등장으로 자바스크립트는 브라우저를 벗어나 서버 사이드에서도 사용될 수 있는 범용 개발 언어가 되었으며, 대부분의 프로그래밍 언어는 운영체제나 가상 머신 위에서 실행되지만 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행되어 파싱 및 렌더링 된다 파싱: 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 토큰으로 분해하고 문법적 의미와 구조를 반영해 트리 자료구조 형태를 생성하는 일련의 과정을 말한다 렌더링: HTML / CSS / JS로 작성된 문서를 파싱해 브라우저에 시각적으로 출력하는 것을 말한다 브라우저의 핵심 기능은 필요한 리소스(HTML, CSS, JS, 이미지, 폰트 등의 정적 파일, 서버에서 동적 생성한..