자바스크립트16 [모던 자바스크립트 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] 12장 함수 12.1 함수란? 함수는 자바스크립트에서 가장 중요한 핵심 개념 수학의 함수는 "입력"을 받아 "출력"을 내보내는 일련의 과정을 정의한 것이다. 예를들어 f(x, y) = x + y 라는 함수를 정의하고 이 함수에 두 개의 입력 2, 5를 전달하면 함수는 정의된 일련의 과정, 즉 x + y를 실행하여 7을 출력한다 //함수 정의 //f(x + y) = x + y function add(x, y){ return x + y; } //함수 호출 //f(2, 5) = 7 add(2, 5); //7 프로그래밍 언어의 함수는 일련의 과정을 문statement으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 함수는 함수 정의를 통해 생성한다. 함수 정의만으로 함수가 실행되는 것은 아니다. 인수를.. 2023. 8. 8. [모던 자바스크립트 Deep Dive] 11장 원시 값과 객체의 비교 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값이 복사되어 전달된다. => 값에 의한 전달 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. => 참조에 의한 전달 11.1 원시값 11.1.1 변경 불가능한 값 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다. 원시 값은 변경 불가능하다는 말은 원시 값 자체를 변경할 수 없다는 것이지 변수 값을 변경할 수 없다는 것이 아니다. const o = {}; //const 키워드를 사용해 선언한 변수에 할당한 원시값(상수)는 변경할 수 없다. //const 키워드를 사용해 선언한 변수에 할당한 객체는 변경할 수 있다. o.a = 1; console.log(o); //{a: 1} 변수 값을 변경하기 위해 원시 값을 재할당.. 2023. 8. 7. [모던 자바스크립트 Deep Dive] 10장 객체 리터럴 10.1 객체란? 자바스크립트는 객체 기반의 프로그래밍 언어, 자바스크립트를 구성하는 "모든 것"이 객체다. 자바스크립트에서 원시값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체다. 원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조다. 원시값은 변경 불가능한 값이지만 객체는 변경 가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키key와 값value으로 구성된다. var person = { name: 'Lee', //=>프로퍼티 age: 20 //프로퍼티 키: 프로퍼티 값 }; 객체는 프로퍼티의 집합 함수도 프로퍼티 값으로 사용할 수 있으며, 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메.. 2023. 8. 5. [모던 자바스크립트 Deep Dive] 9장 타입 변환과 단축 평가 9.1 타입 변환이란? 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환explicit coercion 또는 타입 캐스팅type casting이라 한다. 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것을 암묵적 타입 변환implicit coercion 또는 타입 강제 변환type coercion이라 한다. 타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다. 9.2 암묵적 타입 변환 자바스크립트 엔진은 표현식을 평가할 때 개발자의 의도와는 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환(암묵적 타입 변환)할 때가 있다. 암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은.. 2023. 8. 1. [모던 자바스크립트 Deep Dive] 8장 제어문 제어문control flow statement은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다. 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다. 8.1 블록문 블록문은 0개 이상의 문을 중괄호로 묶은 것 자바스크립트는 블록문을 하나의 실행 단위로 취급한다. //제어문 var x = 1; if (x < 10){ x++; } //함수 선언문 function sum(a, b){ return a + b; } 8.2 조건문 조건문은 주어진 조건식의 평가 결과에 따라 코드 블록(블록문)의 실행을 결정한다. *조건식은 불리언 값으로 평가될 수 있는 표현식 8.2.1 if ... else 문 if ... else 문은 주어진 조건식의 평가결과에 따라 실행할 코드 블록을.. 2023. 7. 31. 이전 1 2 다음