JavaScript

Attribute & Property 브라우저는 웹페이지를 만나면 HTML을 읽어서(parsing) DOM 객체를 생성함 이 때 HTML의 element 노드에서 대부분의 표준 attribute는 DOM 객체의 property가 됨 예) ` in HTML => body.id="page"` in DOM attribute와 property는 항상 1:...

Map Map 키가 있는 데이터를 저장하는 자료구조 키에 다양한 자료형을 허용함 Map의 주요 메서드 new Map() : Map을 생성함 map.set(key, value) : key에 해당하는 값으로value를 저장함 map.get(key) : key에 해당하는 값을 반환함 map.has(key) : key...

Event Propagation 이벤트 흐름에는 3가지 단계가 있음 캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계 타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계 버블링 단계 : 이벤트가 상위 요소로 전파되는 단계 위와 같은 DOM 트리에서 ``를 클릭하면 이벤트가 최상위 조상부터 시작해서 아래로 전파되고(캡처링 단계)...

실행 컨텍스트(Execution Context) 자바스크립트의 동작원리를 담고 있는 핵심 개념 JavaScript가 스코프를 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식 Closure의 동작 방식 Task Queue와 함께 동작하는 Event Handler와 비동기 처리의 동작 방식 소스코드의 타입 ECMAScript...

1. 변수(Variable) 변수(Variable) 하나의 값을 저장하기 위해 확보한 메모리 공간을 식별하기 위해 붙인 이름 값의 위치를 가리키는 상징적인 이름 변수는 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간 주소로 치환되어 실행됨 변수는 하나의 값을 저장하기 위한 메커니즘임 객체나 배열 같은 ...

1. 함수 함수(function) : 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의함 매개변수(parameter) : 함수 내부로 입력을 전달받는 변수 인수(argument) : 함수의 입력값 반환값(return value) : 함수의 출력값 함수 정의(function def...

1. 스코프 스코프(Scope) 식별자가 유효한 범위 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됨 JavaScript 엔진이 식별자를 검색할 때 사용하는 규칙 JavaScript 엔진은 스코프를 통해 어떤 변수를 참조해야...

let, const 키워드와 블록 레벨 스코프 1. var 키워드로 선언한 변수의 문제점 1.1 var 키워드로 선언한 변수는 같은 스코프 내에서 중복 선언을 허용함 var 키워드로 변수를 중복 선언하면 초기화문 유무에 따라 다르게 동작함 초기화가 있는 변수 선언문은 JavaScript 엔진에 의해 var 키워드가 없는 것처럼 동작함 초기...

Closure 1. 렉시컬 스코프 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하는 스코프 상위 스코프에 대한 참조는 함수 정의가 평가 되는 시점에 함수가 정의된 환경에 의해 결정됨 함수 렉시컬 환경의 외부 렉시컬에 대한 참조에 저장할 참조값은 함수가 정위된 환경에 의해 결정함 함수 객체의 내부 슬롯 [[Environment]] ...

1. SPA Single-Page Application(SPA) 웹 브라우저에서 새 페이지 전체를 불러오지 않고, 웹 서버로부터 받은 새 정보를 사용하여 현재 웹 페이지를 동적으로 다시 작성하면서 사용자들과 상호 작용하는 웹 어플리케이션 또는 웹 사이트 장점 배포가 간단함 새 페이지 요청시 필요한 데이터만 전달받아 페이지를 갱신하므로...

1. this 객체 프로퍼티 객체의 상태를 나타냄 메서드 객체의 동작을 나타냄 프로퍼티를 참조하고 변경할 수 있어야 함 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 함 this 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencin...

Module 모듈 애플리케이션을 구성하는 요소 재사용 가능한 코드 조각 파일 단위로 분리되어 있음 기능별로 분리되어 작성되므로 코드의 단위를 명확히 분리함 기능을 개선하거나 수정하기 쉽기 때문에 유지보수성이 높음 재사용성이 좋음 JavaScript는 파일마다 독립적인 스코프를 갖지 않고 전역 객체를 공유...

Event Loop Event Loop & Concurrency 브라우저는 single-thread에서 event-driven 방식으로 동작함 thread가 하나이므로, 하나의 작업(task)만 처리할 수 있음 실제 동작하는 웹 어플리케이션은 많은 작업을 동시에 처리되는 것처럼 동작함 : 동시성(Concurrency) Event...

Promise JavaScript는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용함 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 에러 처리가 곤란함 ES6에서 비동기 처리를 위한 다른 패턴으로 프로미스를 도입함 콜백 패턴이 가진 단점을 보완함 비동기 처리 시점을 명확하게 표현 가능함 1. 비동기 처리를 위한 콜백 ...

1. 제네레이터(Generator) ES6에서 도입된 함수 코드 블록의 실행을 일시 중시했다가 필요한 시점에 재개할 수 있는 특수한 함수 1.1 제네레이터와 일반 함수의 차이점 | | 일반 함수 | 제네레이터 | |:----:|:----------:|:----------:| |함수의 제어권 | 함수를 호출하면 제어권이 함수에게 넘어가므로, 함수 호출자...

Symbol ES6에서 도입된 7번째 데이터 타입 변경 불가능한 원시 타입의 값 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용 기존에 작성된 코드에 영향을 주지 않고 새로운 프로퍼티를 추가할 수 있으므로, 하위 호환성이 보장됨 Symbol 값의 생성 Symbol 함수 Symbol 함수를 호출하여 심벌 값을 생성함 ...

이터러블(iterable) 이터레이션 프로토콜(iteration protocol) ES6에서 도입된 프로토콜 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙 ES6 이전의 순회 가능한 데이터 컬렉션(배열, 문자열, 유사 배열 객체, DOM 컬렉션 등)은 통일된 규약이 없어서 for 문, ...

브라우저의 렌더링 과정 웹 어플리케이션의 클라이언트 사이드 JavaScript는 브라우저에서 HTML, CSS와 함께 실행됨 브라우저의 렌더링 과정 브라우저는 HTML, CSS, JavaScript, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받음 브라우저의 렌더링 엔진은 서버로부터 응답받은 HTML과 C...

변수 다루기 var를 지양하기 var로 선언한 변수 함수 스코프를 가짐 중복 선언할 수 있음 var를 사용했을 때 문제점 코드를 실행했을 때, 예측하지 못한 값이 나올 수 있음 var를 지양하는 방법 var 대신 let, const를 사용해서 변수를 선언하기 let과 const로 선언한 변수 블록 스...

타입 다루기 타입 검사 JavaScript Type primitive Type boolean number string undefined symbol null reference Type array object fu...

경계 다루기 min-max 최소값과 최대값을 상수로 명시적으로 지정해야 함 상수 이름을 보고 의미를 파악하기 쉬움 최소값과 최대값은 값의 포함여부를 컨벤션으로 정해야 함(이상-초과/이하-미만) 네이밍에 최소값과 최대값 포함 여부를 표현함 begin-end begin 동일한 값, 고정됨 end 다른 값, 포함되거나 포함되지 않...

1. 비동기적으로 실행되는 것을 동기적으로 코딩하는 방법이 있나요? 네, async, await 키워드를 사용해서 비동기적으로 실행되는 것을 동기적으로 코딩할 수 있습니다. 1.1 배열을 순회하면서 비동기 처리를 동기적으로 처리하는 방법에 대해 설명해주세요. 비동기 처리 결과가 필요하지 않다면, forEach 메서드와 async/await을 함께 사용...