우당탕탕 개발기록

1. 모듈의 일반적 의미 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각.일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다.  →  이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프를 가질 수 있어야 한다. 자신만의 파일 스코프를 갖는 모듈의 모든 자산 (변수, 함수, 객체 등)은 캡슐화되어 다른 모듈에서 접근할 수 없다. 즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. 이를 export라 한다. 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할수 있다.이를 import라 한다. 2. 자바스크립트와 모듈ES6에서는 클라이언트 사이드 자바..

1. 비동기 처리를 위한 콜백 패턴의 단점1. 콜백 헬비동기 함수란 함수 내부에 비동기로 동작하는 코드를 포함한 함수를 의미한다.비동기 함수는 비동기 처리 결과를 외부에 반환할 수 없고, 상위 스코프의 변수에 할당할 수도 없다.따라서 비동기 함수의 처리 결과에 대한 후속 처리는 비동기 함수 내부에서 수행해야 한다.콜백 함수를 통해 비동기 처리 결과에 대한 후속 처리를 수행하는 비동기 함수가 비동기 처리 결과를 가지고 또 다시 비동기 함수를 호출해야 하는 경우 콜백 함수 호출이 중첩되고 복잡도가 높아지는 현상이 발생하는데 이를 콜백 헬이라 한다.  2. 에러 처리의 한계비동기 처리를 위한 콜백 패턴의 문제점 중에서 가장 심각한 것은 에러 처리가 곤란하다는 것이다.try { setTimeout(() => {..

1. 동기 처리와 비동기 처리①함수를 호출하면 ②함수 코드가 평가되어 ③함수 실행 컨텍스트가 생성된다. 이때 생성된 함수 실행 컨텍스트는 ④실행 컨텍스트 스택에 푸시되고 ⑤함수 코드가 실행된다. 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 ⑥실행 컨텍스트 스택에서 팝되어 제거된다. 함수가 호출된 순서대로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문이다.== "함수의 실행 순서는 실행 컨텍스트 스택으로 관리한다."자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 즉, 동시에 2개 이상의 함수를 동시에 실행할 수 없다. 따라서 현재 실행 중인 함수가 종료하면 비로소 다른 함수가 실행되기 시작한다. 이를 싱글 스레드 방식으로 동작한다고 한다...

1. 호출 스케일링함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용하는데, 이를 호출 스케줄링이라 한다.자바스크립트는 타이머를 생성할 수 있는 함수와 타이머를 제거할 수 있는 함수를 제거하지만 이는 ECMAScript 사양에 정의된 빌트인 함수는 아니고, 호스트 객체*에 해당한다. 타이머 생성 함수 : setTimout, setInterval타이머 제거 함수 : clearTimeout, clearIntervalsetTimout과 setInterval 모두 일정 시간이 경과된 이후(=setTimeout과 setInterval이 생성한 타이머가 만료되면) 콜백 함수가 호출된다.setTimout 함수가 생성한 타이머는 단 한 번 동작하고, setI..

1. 이벤트 드리븐 프로그래밍브라우저는 클릭, 마우스 이동 등 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다.이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라고 한다.이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다.프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라고 한다. 2. 이벤트 타입이벤트 타입이란 이벤트의 종류를 나타내는 문자열을 의미한다.1. 마우스 이벤트 2. 키보드 이벤트 3. 포커스 이벤트focusin, focusout 이벤트는 addEventListener 메소드 방식을 사용해 등록해야 한다.(다른 방식으로 등록하는 경우 크롬, 사파리에서 정상 작동 X. 등록 방식에 대해선..

브라우저 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다.DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메소드를 제공하는 트리자료구조이다.1. 노드1. HTML 요소와 노드 객체HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. 이 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다.HTML 요소의 어트리뷰트 → 어트리뷰트 노드 HTML 요소의 텍스트 콘텐츠 → 텍스트 노드HTML 문서는 요소들의 집합으로 이루어지며, HTML 요소는 중첩 관계를 갖는다. 중첩 관계라 함은 HTML의 콘텐츠 영역(시작 태그와 종료..

보호되어 있는 글입니다.

JavaScript의 Set과 Map은 ES6에서 도입된 컬렉션 객체다. Set은 중복되지 않는 유일한 값을 저장하고, Map은 키-값 쌍을 저장한다.1. SetSet은 중복되지 않는 유일한 값들의 집합이다.Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다.Set은 수학적 집합을 구현하기 위한 자료구조다. 따라서 Set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다. 1. Set 객체의 생성Set 객체는 Set 생성자 함수(new Set())로 생성한다. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다.const set1 = new Set();console.log(set1); // ✅ Set(0) {};Set 생성자 함수는 이터러블을 인수로 전달받아 Set..

'구조 분해 할당'이라고도 하는 디스트럭처링 할당은 ES6에서 도입된 JavaScript 문법으로, 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 이는 배열이나 객체의 값을 쉽게 추출하여 변수에 할당할 수 있게 하여 코드의 가독성을 높이고, 더 간결하게 작성할 수 있게 도와준다. 1. 배열 디스트럭처링 할당배열의 요소를 변수에 할당하고자 할 때 사용한다.배열 디스트럭처링 할당 대상(우측)은 이터러블이어야 하며, 형태는 배열 리터럴이어야 한다.배열 디스트럭처링 할당 기준은 배열의 인덱스 즉, 배열 내 요소의 순서대로이다.// 배열 리터럴로 생성된 배열을 arr에 할당const arr = [1, 2, 3, ..

심벌Symbol은 ES6부터 도입된 7번째 데이터 타입이다. 변경 불가능한 원시 타입의 값이며 다른 값과 중복되지 않는 유일무이한 값이다.따라서 이름 충돌 위험이 없는 프로퍼티 키를 만들기 위해 사용된다. 심벌 값의 생성1. Symbol 함수심벌 값은 Symbol 함수를 호출하여 생성한다.다른 원시값은 리터럴 표기법을 통해 값을 생성할 수 있지만 심벌 값은 Symbol 함수를 호출하여 생성해야 한다. Symbol 함수는 new 연산자와 함께 호출하지 않는다.(=Constructor X =인스턴스 생성 X)이 때 Symbol 함수를 통해 생성된 심벌 값은 외부로 노출되지 않아 확인 할 수 없으며, 다른 값과 절대 중복되지 않는다.심벌 값도 다른 데이터 타입처럼 객체처럼 접근하면 암묵적으로 래퍼 객체를 생성..