맨땅헤딩 프로그래밍

모던 자바스크립트 DeepDive 공부 내용 17차

해당 포스트가 마지막 정리 내용이다. 이번 정리 목차는 48 ~ 49장이다. 48장 모듈 모듈의 일반적 의미 - 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각 의미 - 자신만의 파일스코프(모듈스코프)를 가질 수 있어야 한다. - 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개 가능 이를 Export라 한다. - export된 모듈의 자산은 다른 모듈에서 재사용 가능 - export된 모듈의 자산을 사용하는 모듈을 모듈 사용자라 한다. - 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다. 이를 Import라 한다. - 재사용성이 좋아서 개발 효율성과 유지보수성을 높일 수 있다. 자바스크립트와 모듈 - JS는 웹페이지..

모던 자바스크립트 DeepDive 공부 내용 16차

이번 정리 목차는 44 ~ 47장이다. 44장 REST API - REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 - REST API는 REST를 기반으로 서비스 API 구현한 것 의미 REST API 구성 - 자원, 행위, 표현 3가지 요소로 구성, 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용 이해 가능 구성 요소 내용 표현 방법 자원 자원 URI(엔드포인트) 행위 자원에 대한 행위 HTTP 요청 메서드 표현 자원에 대한 행위의 구체적 내용 페이로드 REST API 설계 원칙 - URI는 리소스를 표현하는데 집중해야 한다. - 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다. 45장 프로미스 - 비동기 처리를 위해 콜백함수를 사용..

모던 자바스크립트 DeepDive 공부 내용 15차

이번 정리 목차는 42 ~ 43장이다. 42장 비동기 프로그래밍 동기 처리와 비동기 처리 - JS엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. - JS엔진은 싱글 스레드 방식으로 한번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하면 블로킹(작업 중단)이 발생한다. - 현재 실행 중인 태스크가 종료할 때까지 다음 태스크가 대기하는 방식이 동기 처리 실행 순서 보장 장점, 블로킹 되는 단점 - 현재 실행 중인 태스크가 종료 되지 않아도 다음 태스크 실행하는 방식이 비동기 처리 블로킹 발생하지 않는 장점, 실행 순서 보장 X 단점 - setTimeout, setInterval, HTTP요청, 이벤트 핸들러는 비동기 처리 방식으로 동작 - 비동기 처리는 이벤트 루프와 태스크 큐..

모던 자바스크립트 DeepDive 공부 내용 14차

이번 정리 목차는 38 ~ 39장이다. 38장 브라우저의 렌더링 과정 - 파싱: 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 문자열을 토큰으로 분해하고 문법적 의미와 구조를 반영하여 파스트리를 생성하는 일련의 과정 - 렌더링: HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적 출력 - 브라우저는 HTML, CSS, JS, 이미지, 폰트파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답 받는다. - 렌더링 엔진은 서버로부터 응답된 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성하고 이를 결합하여 렌더 트리 생성 - JS엔진은 서버로부터 응답된 JS를 파싱하여 AST(추상적구문트리)를 생성하고 바이트코드로 변환하여 실행한다. 이때 JS는 DOM API를 통해..

모던 자바스크립트 DeepDive 공부 내용 13차

이번 정리 목차는 33 ~ 37장이다. 33장 Symbol 심벌이란 - ES6에서 도입된 7번째 데이터 타입(문자열, 숫자, 불리언, undefined, null, 객체) - 다른 값과 중복되지 않는 유일무이한 값 - 유일한 프로퍼티 키를 만들기 위해 사용 심벌 값의 생성 - Symbol 함수 호출하여 생성, 외부에서 확인할 수 없고 다른 값과 절대 중복되지 않는 유일무이한 값 - new 연산자와 함께 호출하지 않는다 - 선택적으로 문자열을 인수로 전달 가능, 이 문자열은 디버깅 용도로만 사용, 심벌 값 생성에 어떤 영향도 주지 않음, 설명이 같더라도 생성된 심벌 값은 유일무이한 값 - 심벌 값도 객체처럼 접근하면 암묵적으로 래퍼 객체 생성 - 암묵적으로 심벌 값이 문자열이나 숫자 타입으로는 변환되지 않..

모던 자바스크립트 DeepDive 공부 내용 12차

이번 정리 목차는 27장, 31장, 32장이다. 27장 배열 배열 이란 - 여러 개의 값을 순차적으로 나열한 자료구조 - 배열이 가지고 있는 값을 요소(element), 배열의 요소는 index를 갖는다. - index로 배열의 요소에 접근할 때 사용, 0부터 시작 - 요소에 접근할 때에는 대괄호 표기법 사용 - 배열은 length 프로퍼티를 갖는다(배열 요소의 개수) - 배열은 객체타입, 인덱스와 length프로퍼티를 갖기에 for문 통해 순차적 요소 접근 가능 - 배열 리터럴, Array생성자 함수, Array.of, Array.from메서드로 생성 가능 구분 객체 배열 구조 프로퍼티 키와 프로퍼티 값 인덱스와 요소 값의 참조 프로퍼티 키 인덱스 값의 순서 X O Length 프로퍼티 X O 자바스크..

모던 자바스크립트 DeepDive 공부 내용 11차

이번 정리 목차는 25장이다. 25장 클래스 클래스는 프로토타입의 문법적 설탕인가? - JS는 프로토타입 기반 객체지향언어 - 객체지향 프로그래밍에 익숙한 프로그래머가 빠르게 학습할 수 있도록 하기위한 새로운 객체 생성 메커니즘이 클래스이다. - 클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 한 것 - 클래스와 생성자 함수 모두 프로토타입 기반 인스턴스를 생성하지만 동작은 다름 - 클래스는 new연산자 없이 호출하면 에러 - Extends와 super 키워드 제공 - 호이스팅이 발생하지 않는 것처럼 동작, 변수 호이스팅 발생 - 암묵적 strict모드 지정 - constructor, 프로토타입 메서드, 정적 메서드 모두 열거되지 않음, - [[Enumerable]]..

모던 자바스크립트 DeepDive 공부 내용 10차

이번 정리 목차는 24장이다. 24장 클로저 클로저란? 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. function outerFunc() { var x = 10; var innerFunc = function () { console.log(x); }; innerFunc(); } outerFunc(); // 10 outerFunc 함수 내부에서 중첩 함수 innerFunc가 정의되고 호출되었다. 이때 중첩 함수 innerFunc의 상위 스코프는 외부 함수 outerFunc의 스코프다. 따라서 중첩 함수 innerFunc 내부에서 자신을 포함하고 있는 외부 함수 outerFunc의 변수 x에 접근할 수 있다. 만약 innerFunc 함수가 outerFunc 함수의 내부에서 정의된 중첩 함수가 ..

모던 자바스크립트 DeepDive 공부 내용 9차

이번 정리 목차는 23장이다. 23장 실행 컨텍스트 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 4가지 타입이 소스코드는 실행 컨텍스트를 생성한다. - 전역 코드(global code) : 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. - 함수 코드(function code) : 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 내부코드는 포함되지 않는다. - eval 코드(eval code) : 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드 - 모듈 코드(module code) : 모듈 내부에 존재하는 소스코드. 모듈 내부의 함수, 클래스 등의 내부 코드는 포함되지 않는다. 구분..

모던 자바스크립트 DeepDive 공부 내용 8차

이번 정리 목차는 20 ~ 22장이다. 20장 strict mode 스트릭 모드란 - 선언하지 않은 변수에 값을 할당하면 엔진은 암묵적으로 전역 객체에 프로퍼티를 동적 생성하여 전역 변수처럼 사용 가능한 것을 암묵적 전역이라 한다. - 코드의 오류를 줄여 안정적인 코드를 만들기 위해 strict mode가 추가됨 - ESLint도구 사용해도 유사한 효과 얻을 수 있음 - 린트 도구는 스트릭모드가 제한하는 오류는 물론 코딩 컨벤션을 설정 파일 형태로 정의하고 강제할 수 있기에 더 강력한 효과 얻음으로 린트 도구 쓰자 - ES6에 클래스와 모듈은 기본적으로 스트릭모드 적용됨 스트릭 모드 적용 - 적역의 선두 또는 함수 몸체의 선두에 “use strict”; 추가 - 전역의 선두에 추가하면 스크립트 전체에 스..

모던 자바스크립트 DeepDive 공부 내용 7차

이번 정리 목차는 19장이다. 19장 프로토타입 JS는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍 지원하는 멀티 패러다임 프로그래밍 언어이다 JS는 객체 기반 프로그래밍 언어이며 JS를 이루고 있는 거의 모든 것이 객체이다. 원시타입 값을 제외한 나머지 값들이 모두 객체 객체지향 프로그래밍 - 실체(사물이나 개념)는 특징이나 성질을 나타내는 속성을 가지고 있고 이를 통해 실체를 인식하거나 구별 - 다양한 속성 중 필요한 속성만 간추려 내어 표현하는 것을 추상화 - 객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적 자료구조 - 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임이다. 상속과 프로토타입 - 상속은 어떤 객체의 프로퍼티 또는 메서드를 다른 객체에서 사용할..

모던 자바스크립트 DeepDive 공부 내용 6차

이번 정리 목차는 16 ~ 18장이다. 16장 프로퍼티 어트리뷰트 내부 슬롯과 내부 메서드 - 이중대괄호[[]]로 감싼 이름들이 내부 슬롯과 내부 메서드 - 엔진에서 실제로 동작하지만 개발자가 직접 접근 X - 간접적 접근 수단 제공하기는 함 - 모든 객체는 [[Prototype]]이라는 내부 슬롯 갖는다. __proto__ 통해 간접 접근 가능 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 - 엔진은 프로퍼티를 생성할 때 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의 - 프로퍼티 상태: 프로퍼티 값, 값 갱신 가능 여부, 열거 가능 여부, 재 정의 가능 여부의미 - 어트리뷰트 종류: value, Writable, Enumerable, Configurable - Object.getOwnPro..