javascript12 [JavaScript] 비동기 처리 동기 처리와 비동기 처리자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖습니다. 함수를 실행할 수 있는 창구가 단 하나이며 동시에 2개 이상의 함수를 동시에 실행할 수 없다는 것을 의미합니다. 이처럼 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작합니다. 싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹이 발생합니다. 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 동기 처리라고 합니다. (실행 순서가 보장되지만 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹되는 단점이 있다.) 반면 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 .. 2023. 10. 31. [JavaScript] 이벤트 이벤트 드리븐 프로그래밍이란?브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킵니다. 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임합니다. 이때 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라고 하고 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 합니다. 이처럼 이벤트와 그에 대응하는 함수를 통해 사용자와 상호작용할 수 있으며 이와 같이 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라 합니다. 이벤트 전파란?DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파.. 2023. 10. 30. [JavaScript] DOM DOM(Document Object Model)은 HTML, CSS, JavaScript로 작성된 문서를 파싱 하여 브라우저에 시각적으로 출력하는 렌더링 과정의 핵심 결과물입니다. DOM은 HTML 문서의 계층적 구조와 정보를 표현하고, DOM 트리는 노드들의 계층 구조로 구성됩니다. DOM은 HTML 요소의 집합인 요소 노드(Element Node), HTML 요소의 콘텐츠인 텍스트 노드(Text Node), HTML 요소의 속성인 어트리뷰트 노드(Attribute Node) 등으로 구성됩니다. 어트리뷰트 노드는 어트리뷰트가 지정된 HTML 요소의 요소 노드와 연결되어 있으며 부모 노드가 없고, 요소 노드의 형제 노드는 아닙니다. 따라서 어트리뷰트 노드에 접근하여 어트리뷰트를 참조하거나 변경하려면 먼저.. 2023. 10. 27. [JavaScript] 브라우저의 렌더링 과정 1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받습니다.렌더링에 필요한 리소스는 모두 서버에 존재하므로 필요한 리소스를 서버에 요청하고 서버에 응답한 리소스를 파싱 하여 렌더링 합니다. 그러므로 서버에 요청을 전송하기 위해 브라우저는 주소창을 제공합니다. 브라우저의 주소창에 URL을 입력하고 엔터 키를 누르면 URL의 호스트 이름이 DNS를 통해 IP주소로 변환되고 IP 주소를 갖는 서버에게 요청을 전송합니다. ** 파싱은 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정입니다. 2.. 2023. 10. 26. [JavaScript] 클래스 클래스란?ES6에서는 기존의 프로토타입 기반 객체 지향 프로그래밍 모델을 위한 문법 설탕으로 클래스가 도입되었습니다. 즉, 클래스는 객체를 정의하고 프로토타입을 다루는 기존의 방식보다 더 편리하고 간결하게 객체 지향 프로그래밍을 할 수 있도록 제공된 구문입니다. 클래스는 class 키워드를 사용하여 정의하고 클래스 이름은 파스칼 케이스를 사용하는 것이 일반적입니다. 클래스는 함수로 평가됩니다. 클래스 선언문으로 정의한 클래스는 런타임 이전에 먼저 평가되어 함수 객체를 생성합니다. 이때 클래스가 평가되어 생성된 함수 객체는 생성자 함수로서 호출할 수 있는 함수입니다(constructor). 프로토타입과 생성자 함수는 단독으로 존재할 수 없기 때문에 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토.. 2023. 10. 23. [JavaScript] 실행 컨텍스트 실행 컨텍스트란?자바스크립트 엔진은 소스코드를 “소스코드의 평가”와 “소스코드의 실행” 과정으로 나누어 처리합니다. 소스코드 평가 과정에서 실행 컨텍스트를 생성하고 변수, 함수 등의 선언만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록합니다. 소스코드 평가 과정이 끝나면 선언문을 제외한 소스코드가 순차적으로 실행되기 시작합니다(런타임). 이때 소스코드 실행에 필요한 정보를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득합니다. 변수 값의 변경 등 소스코드의 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록합니다. 이와 같이 코드가 실행되려면 스코프, 식별자, 코드 실행 순서 등의 관리가 필요합니다. 이 모든 것을 관리하는 것이 실행 컨텍스트입니다. 실행 .. 2023. 10. 22. [JavaScript] this this란?객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶는 복합적인 자료구조입니다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태(프로퍼티)를 참조하고 변경할 수 있어야 합니다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 합니다. 또한 생성자 함수 방식으로 인스턴스를 생성하는 경우에도 생성자 함수를 정의하는 시점에도 생성할 인스턴스를 가리키는 식별자가 필요합니다. 따라서 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자인 this를 자바스크립트에서 지원해 줍니다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다. this는 자.. 2023. 10. 20. [JavaScript] 프로토타입 프로토타입이란?프로토타입은 어떤 객체의 상위(부모) 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티(메서드 포함)를 제공합니다. 프로토타입을 상속받은 하위 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있습니다. 모든 객체는 [[Prototype]]이라는 내부 슬롯을 가지며, 이 내부 슬롯의 값은 프로토타입의 참조입니다. [[Prototype]]에 저장되는 프로토타입은 객체 생성 방식에 의해 결정됩니다. 프로토타입은 생성자 함수가 생성되는 시점에 생성됩니다. 생성자 함수로서 호출할 수 있는 함수, 즉 constructor는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성됩니다. 생성자로서 호출할 수 없는 함수, non-constructor는 프로토.. 2023. 10. 18. [JavaScript] 함수 함수란?프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의하는 것입니다. 함수 내부로 입력을 전달받는 변수를 매개변수, 입력을 인수, 출력을 반환값이라 합니다. 함수를 정의하는 방법에는 4가지가 있습니다.// 1. 함수 선언문function add(x, y) { return x + y;}// 2. 함수 표현식const add = function (x, y) { return x + y;}// 3. Function 생성자 함수 const add = new Function("x", "y", "return x+y");// 4. 화살표 함수 (ES6)const add = (x, y) => x + y; 함수 선언문과 함수 표현식의 차이점함수 선언문과 함수 표현식은 .. 2023. 10. 16. [JavaScript] 데이터 타입 데이터 타입은 왜 필요한가?값은 메모리에 저장하고 참조할 수 있어야 합니다. 메모리에 값을 저장하려면 먼저 확보해야 할 메모리 공간의 크기를 결정해야 합니다. 자바스크립트 엔진은 데이터 타입, 즉 값의 종류에 따라 정해진 크기의 메모리 공간을 확보합니다. 또한 값을 참조할 때 한 번에 읽어야 하는 메모리 공간의 크기를 결정하기 위해, 메모리에서 읽어 들인 2 인수를 어떻게 해석할지 결정하기 위해 데이터 타입이 필요합니다. 데이터 타입이란?자바스크립트에서 값은 데이터 타입을 가집니다. 애플리케이션은 데이터를 입력받아 처리하고 출력하는데, 이때 데이터의 종류를 구별하는 것이 중요하며, 이것이 데이터 타입의 역할입니다. 변수는 이러한 데이터를 담는 공간 또는 식별자이며, 변수 자체는 타입이 고정되어 있지 않.. 2023. 10. 14. 이전 1 2 다음
