분류 전체보기

[JS] 모던 자바스크립트 Deep Dive - 41. 타이머

호출 스케줄링함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하기 위해 타이머 함수를 사용하는 것자바스크립트는 타이머를 생성할 수 있는 타이머 함수 setTimeout과 setInterval, 타이머를 제거할 수 있는 타이머 함수 clearTimeout과 clearInterval을 제공한다.타이머 함수 setTimeout과 setInterval은 모두 일정 시간이 경과된 이후 콜백 함수가 호출되도록 타이머를 생성한다.즉, 타이머 함수 setTimeout과 setInterval이 생성한 타이머가 만료되면 콜백 함수가 호출된다.자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에 두 가지 이상의 태스크를 동시에 실행할 수 없다.즉, 자바스크립트 엔진은 싱글 스..

[JS] 모던 자바스크립트 Deep Dive - 40. 이벤트

이벤트 드리븐 프로그래밍프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식어플리케이션과 사용자는 이벤트와 그에 대응하는 함수를 통해 상호작용할 수 있다.  브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 어플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에 알려 호출을 위임한다. ✅ 이벤트 핸들러이벤트가 발생했을 때 호출될 함수✅ 이벤트 핸들러 등록이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것이벤트 타입이벤트의 종류를 나타내는 문자열✅마우스 이벤트이벤트 타입이벤트 발생시점click마우스 버튼을 클릭했을 때dblclick마우스 버튼을 더블 클릭했을 때mousedo..

[TS] TypeScript 기초 문법

타입스크립트 (TypeScript)자바스크립트를 더 안전하게 사용할 수 있도록 타입 관련 기능들을 추가한 언어타입 시스템타입과 관련된 언어의 문법 체계즉, 프로그래밍 언어를 사용할 때 타입과 관련하여 지켜야 하는 규칙들을 모아둔 체계✅ 정적 타입 시스템 코드 실행 전에 모든 변수의 타입을 고정적으로 결정모든 변수에 일일이 타입을 지정해주어야 하기 떄문에 타이핑 양이 증가하고 유연한 프로그래밍이 불가하다.엄격하고 고정적인 시스템C, JAVA✅ 동적 타입 시스템 코드를 실행하기 전에는 타입을 결정하지 않고 코드를 실행하고 나서 그때 그때마다 유동적으로 변수의 타입을 결정=== 변수의 타입을 직접 정의하지 않는다변수의 타입이 어떤 하나의 타입으로 고정되지 않고 현재 변수에 담긴 값에 따라 동적으로 달라진다. ..

[JS] 모던 자바스크립트 Deep Dive - 39. DOM

DOM (Document Object Model)HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API즉, 프로퍼티와 메서드를 제공하는 트리 자료구조노드✅HTML 요소와 노드 객체HTML 요소HTML 문서를 구성하는 개별적인 요소HTML 요소는 중첩 관계를 가지므로 HTML 요소의 콘텐츠 영역에는 텍스트뿐만 아니라 다른 HTML 요소도 포함될 수 있다. 이떄 HTML 요소 간 중첩 관계에 의한 계층적인 부자관계가 형성된다. 이 부자 관계를 반영하여 HTML 문서의 구성요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성한다. 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요..

[JS] CEOS 1주차 - 스코프와 클로저

✅ 스코프 (Scope)식별자가 유효한 범위모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 1️⃣ 전역 스코프 (Global Scope)함수나 블록에서 가장 바깥에 있는 영역코드의 어느 부분에서든 참조가 가능하다.2️⃣ 지역 스코프 (Local Scope)함수나 블록 내부 등 특정 영역자신이 위치한 지역 스코프와 하위 지역 스코프에서만 참조가 가능하다.📍함수 스코프 (Function Scope)함수 블록만 지역 스코프로 인정함수 외 if, for, while, try/catch 등의 블록은 인정Xvar x = 10;if (true) { var x = 42;}console.log(x); // 42📍블록 스코프 (Block Scope)모든 코드..

[JS] 모던 자바스크립트 Deep Dive - 38. 브라우저의 렌더링 과정

요청과 응답💡브라우저의 핵심 기능필요한 리소스를 서버에 요청하고 서버로부터 응답받아 브라우저에 시각적으로 렌더링하는 것즉, 렌더링에 필요한 리소스는 모두 서버에 존재하므로 필요한 리소스를 서버에 요청하고 서버가 응답한 리소스를 파싱하여 렌더링하는 것브라우저의 주소창에 URL을 입력하고 엔터를 누르면 URL의 호스트 이름이 DNS를 통해 IP 주소로 변환되고 이 IP 주소를 갖는 서버에게 요청을 전송한다. 반드시 브라우저의 주소창을 통해 서버에 정적 파일만을 요청할 수 있는 것은 아니며, 자바스크립트를 통해 동적으로 서버에 정적/동적 데이터를 요청할 수도 있다.HTTP 1.1과 HTTP 2.0📍HTTP (Hyper Text Transfer Protocol)웹에서 브라우저와 서버가 통신하기 위한 프로토콜..

[JS] 모던 자바스크립트 Deep Dive - 37. Set과 Map

Set중복되지 않는 유일한 값들의 집합(set)Set 객체는 배열과 유사하지만 아래와 같은 차이가 있다.구분배열Set 객체동일한 값을 중복하여 포함할 수 있다.OX요소 순서에 의미가 있다.OX인덱스로 요소에 접근할 수 있다.OXSet의 특성은 수학적 집합의 특성과 같아 Set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다.✅Set 객체의 생성Set 생성자 함수로 생성Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않는다. 중복을 허용하지 않는 Set 객체의 특성을 활용하여 배열에서 중복된 요소를 제거할 수 있다.✅요소 개수 확인Set.prototype.size 프로퍼티를 사용하여 요소의 개수를 확인할 수 ..

[JS] 모던 자바스크립트 Deep Dive - 36. 디스트럭처링 할당

디스트럭처링 할당 (Destructuring Assignment)구조화된 배열과 같은 이터러블 또는 객체를 destructuring하여 1개 이상의 변수에 개별적으로 할당하는 것a.k.a 구조 분해 할당배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. 배열 디스트럭처링 할당다음은 ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법이다.// E55 var arr = [1, 2, 3]; var one = arr[0]; var two = arr[1]; var three = arr[2];console.log(one, two, three); // 1 2 3ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 ..

[JS] 모던 자바스크립트 Deep Dive - 35. 스프레드 문법

스프레드 문법 (Spread Syntax)하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만드는 문법... 의 형태로 사용한다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments와 같이 for...of 문으로 순회할 수 있는 이터러블에 한정된다.// ... [1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(-> 1, 2, 3). console.log(...[1, 2, 3]); // 1 2 3// 문자열은 이터러블이다. console.log(...'Hello'); // H e l l o// Map과 Set은 이터러블이다. console.log(...new Map..

[JS] 모던 자바스크립트 Deep Dive - 34. 이터러블

이터레이션 프로토콜 (Iteralion Protocol) 순회 가능한(iterable) 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙ES6에서 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for ... of문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화하였다.이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있다.1️⃣이터러블 프로토콜(Iterable Protocol)Well-known Symbol인 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속 받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준..