본문 바로가기

프로그래밍언어/JavaScrpit29

[모던 자바스크립트 Deep Dive] 48장 모듈 48.1 모듈의 일반적 의미 모듈module이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. 자신만의 파일 스코프를 갖는 모듈의 자산은 캡슐화되어야 한다 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. 이를 export라 한다. 모듈 사용자는 모듈이 공개export한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다. 이를 import라 한다. 48.2 자바스크립트와 모듈 자바스크립트 파일을 여러 개의 파일로 분리하여 script 태그로 로드해도 분리된 자바스크립트 파일들은.. 2024. 2. 25.
[모던 자바스크립트 Deep Dive] 44장 REST API REST REpresentational State Transfer는 HTTP/1.0과 1.1의 스펙 작성에 참여했고 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이 필딩의 2000년 논문에서 처음 소개되었다. 발표 당시의 웹이 HTTP를 제대로 사용하지 못하고 있는 상황을 보고 HTTP의 장점을 최대한 활용할 수 있는 아키텍쳐로서 REST를 소개했고 이는 HTTP 프로토콜을 의도에 맞게 디자인하도록 유도하고 있다. REST의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful" 이라고 표현한다. 즉, REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐고, REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. 44.1 REST API의.. 2024. 2. 24.
[모던 자바스크립트 Deep Dive] 43 Ajax 43.1 Ajax란? Ajax Asynchronous JavaScript and XML란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에서 제공하는 web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. 이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링 하는 방식으로 동작했다. 따라서 화면이 전환되면서 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링했.. 2024. 2. 24.
[모던 자바스크립트 Deep Dive] 42장 비동기 프로그래밍 42.1 동기 처리와 비동기 처리 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 이는 함수를 실행할 수 있는 창구가 단 하나이며, 동시에 2개 이상의 함수를 동시에 실행할 수 없다는 것을 의미한다. 실행 컨텍스트 스택의 최상위 요소인 "실행 중인 실행 컨텍스트"를 제외한 모든 실행 컨텍스트는 모두 실행 댁 ㅣ중인 태스크tast 들이다. 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업 중단)이 발생한다. 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 동기synchronous 처리 라고 한다. .. 2024. 2. 18.
[모던 자바스크립트 Deep Dive] 39장 DOM(2) 39.4 노드 정보 취득 노드 객체에 대한 정보 취득 프로퍼티 Node.prototype.nodeType Node.protytype.nodeName 39.5 요소 노드의 텍스트 조작 39.5.1 nodeValue 지금까지 살펴본 토드 탐색, 노드 정보 프로퍼티는 모두 읽기 전용 접근자 프로퍼티다. 지금부터 살펴볼 Node.prototype.nodeValue 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티다. 노드 객체의 nodeValue 프로퍼티를 참조하면 노드 객체의 값을 반환한다. 노드 객체의 값이란 텍스트 노드의 텍스트다. 39.5.2 textContent Node.prototype.textContent 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티로서 요소.. 2024. 2. 17.
[모던 자바스크립트 Deep Dive] 39장 DOM(1) 브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하면 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. 39.1 노드 39.1.1 HTML 요소와 노드 객체 HTML 요소 HTML element는 HTML 문서를 구성하는 개별적인 요소를 의미한다. hello 시작 태그(start tag) class 어트리뷰트 이름(attribute name) "greeting" 어트리뷰트 값(attribute value) Hello 콘텐츠(content) 종료 태그(end tag) HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는.. 2024. 2. 11.
[모던 자바스크립트 Deep Dive] 38장 브라우저의 렌더링 과정 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 자바스크립트 프리그래밍이 가능하다. 이를 위해 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브라우저에 렌더링하는지 살펴보자. 파싱parsing 파싱(구문 분석syntax analysis)은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰token으로 분해(어휘 분석lexical analysis)하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리parse tree/syntax tree를 생성하는 일련의 과정을 말한다. .. 2024. 1. 14.
[모던 자바스크립트 Deep Dive] 25장 클래스 25.1 클래스는 프로토타입의 문법적 설탕인가? ES6에 도입된 클래스는 기존 프로토타입 기반 객체지향 프로그래밍보다 자바나 C#과 같은 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 더욱 빠르게 학습할 수 있도록 클래스 기반 객체지향 프로그래밍언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제시한다. 클래스는 생성자 함수와 매우 유사하게 동작하지만 다음과 같이 몇 가지 차이가 있다. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 하지만 생성자 함수를 new 연산자 없이 호출하면 일반 함수로서 호출된다. 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다. 하지만 생성자 함수는 extends와 super 키워드를 지원하지 않는다. 클래스는 호이스팅이 발생하지 않는 것처럼.. 2023. 9. 14.
[모던 자바스크립트 Deep Dive] 24장 클로저 클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. MDN에서는 클로저에 대해 다음과 같이 정의하고 있다. 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합니다. const x = 1; function outerFunc(){ const x = 10; function innerFunc(){ console.log(x); //10 } innerFunc(); } outerFunc(); 중첩 함수 innerFunc의 상위 스코프는 외부 함수 outerFunc의 스코프다. 따라서 중첩 함수 innerFunc 내부에서 자신을 포함하고 있는 외부 함수 outerFunc의 x 변수에 접근할 수 있다. 24.1 렉시컬 스코프 자바스크립트 엔진.. 2023. 8. 29.
[모던 자바스크립트 Deep Dive] 23장 실행 컨텍스트 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 23.1 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 소스코드 타입 설명 전역 코드 전역에 존재하는 소스코드를 말한다. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 함수 코드 함수 내부에 존재하는 소스코드를 말한다. 함수 내부에 중첩된 함수, 클래스 등의 코드는 포함되지 않는다. eval 코드 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드를 말한다. 모듈 코드 모듈 내부에 존재하는 소스코드를 말한다. 모듈 내부의 함수, 클래스 등의 내부 코드는 포함되지 않는다. 23.2 소스코드의 평가와 실행 모든 소스코드는 실행에 앞서 평가 과정을 거치며 코드를 실행하기 .. 2023. 8. 19.
[모던 자바스크립트 Deep Dive] 22장 this 22.1 this 키워드 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. //객체 리터럴 const circle = { radius: 5, getDiameter(){ //this는 메서드를 호출한 객체를 가리킨다. return 2 * this.radius; } }; consol.. 2023. 8. 17.
[모던 자바스크립트 Deep Dive] 21장 빌트인 객체 21.1 자바스크립트 객체의 분류 자바스크립트 객체는 다음과 같이 크게 3개의 객체로 분류할 수 있다. 표준 빌트인 객체 ECMAScript 사양에 정의된 객체 호스트 객체 ECMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행 환경에서 추가로 제공하는 객체 사용자 정의 객체 사용자가 직접 정의한 객체 21.2 표준 빌트인 객체 자바스크립트는 Object, String Number, Boolean, Symbol, Date, Math, RegExp, Array, Map/Set, WeakMap/WeakSet, Function, Promise, Reflect, Proxy, JSON, Error 등 40여 개의 표준 빌트인 객체를 제공한다. Math, Reflect, JSON을 제외한 표준 빌트인 객.. 2023. 8. 16.

티스토리툴바