<modern_JS_Deep_Dive>
1.[modern JS Deep Dive] - 모던 자바스크립트 deep dive 스터디 시작!
1회독을 결심하며...
2.[modern JS Deep Dive] - 1장 . 프로그래밍
modern JS Deep Dive - 1장 . 프로그래밍
3.[modern JS Deep Dive] - 2장 . 자바스크립트란?
modern JS Deep Dive - 2장 . 자바스크립트란?jsDeepDive
4.[modern JS Deep Dive] - 3장 . 자바스크립트 개발 환경과 실행 방법
modern JS Deep Dive - 3장 . 자바스크립트 개발 환경과 실행 방법 jsDeepDive
5.[modern JS Deep Dive] - 4장 . 변수
jsDeepDive
6.[modern JS Deep Dive] - 5장 . 표현식과 문
jsDeepDive
7.[modern JS Deep Dive] - 6장 . 데이터 타입
modern JS Deep Dive - 5장 . 표현식과 문 javaDeepDive
8.[modern JS Deep Dive] - 7장 . 연산자
modern JS Deep Dive - 5장 . 표현식과 문 javaDeepDive
9.[modern JS Deep Dive] - 8장 . 제어문
modern JS Deep Dive - 5장 . 표현식과 문 javaDeepDive
10.[modern JS Deep Dive] - 9장 . 타입 변환과 단축 평가
modern JS Deep Dive - 5장 . 표현식과 문 javaDeepDive
11.[modern JS Deep Dive] - 10장 . 객체 리터럴
modern JS Deep Dive - 5장 . 표현식과 문 javaDeepDive
12.[modern JS Deep Dive] - 11장 . 원시 값과 객체의 비교
modern JS Deep Dive - 5장 . 표현식과 문 javaDeepDive
13.[modern JS Deep Dive] - 12장 . 함수
함수란 프로그래밍에서의 함수 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 프로그래밍 언어의 함수도 입력을 받아서 출력을 내보낸다. 이때 함수 내부로 입력을 전달받는 변수를 매개변수, 입력은 인수, 출력을 반환값 함수는 값이며, 여러 개 존재할 수 있으므로 특정 함수를 구별하기 위한 식별자인 함수 이름을...
14.[modern JS Deep Dive] - 13장 . 스코프
스코프 스코프 > - 식별자가 유효한 범위 : 모든 식별자(변수이름, 함수이름, 클래스이름, 등은 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할수 있는 유효 범위가 결정됨. -스코프라는 개념이 없다면 같은 이름을 갖는 변수는 충돌을 일으키므로 프로그
15.[modern JS Deep Dive] - 14장 . 전역변수의 문제점
변수의 생명주기 지역 변수의 생명 주기 변수는 생명주기가 있다. ⇒ 생명주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다. 변수는 자신이 선언된 위치에서 생성되고 소멸한다. 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하...
16.[modern JS Deep Dive] - 15장 . let, const키워드와 블록 레벨 스코프
var 키워드로 선언한 변수의 문제점 > ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이였다. > 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능하다. (재할당 됨) ⇒ 의도치 않게 먼저 선언된 변수 값이 재할당 되어 변경되는 부작용이 발생했다. 초기화 문 변수 선언과 동시에 초기값을 할당 하는...
17.[modern JS Deep Dive] - 16장 . 프로퍼티 어트리뷰트
내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호([[… ]] 로 감싼 이름들이 내부 슬롯과 내
18.[modern JS Deep Dive] - 17장 . 생성자 함수에 의한 객체 생성
Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 반드시 Object 생성자함수로 빈 객체를 생성해야하는 것은 아니다. 특별한 이유가 없는이상 객체 리터럴로 객체를 생성한다. 생성자 함수 > **new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 ...
19.[modern JS Deep Dive] - 18장 . 함수와 일급 객체
일급 객체 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 변수나 자료구조에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 위의 조건을 모두 만족하므로 일급 객체다 함수가 일급 객
20.[modern JS Deep Dive] - 19장 . 프로토타입
modern JS Deep Dive - 13장 . 스코프 jsDeepDive
21.[modern JS Deep Dive] - 20장 . strict mode
strict mode란? 암묵적 전역 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다 이때 전역 객체의 x 프로퍼티는 마치 전역 변수처럼 사용할 수 있다. 개발자의 의도와 상관없이 발생한 암묵적 전역은 오류를 발생시키는 원인이 될 가능성이 크므로, var,let,const 키워드를 사용하여 변수를 선언한 다음 사용해야 한다. ...
22.[modern JS Deep Dive] - 21장 . 빌트인 객체
자바스크립트 객체의 분류 > 표준 빌트인 객체(네이티브 객체) > Ecmascript 사양에 정의된 객체, 애플리 케이션 전역의 공통 기능을 제공, 표준 빌트인 객체는 전역객체의 프로퍼티로서 제공됨. 따라서 선언 없이 전역 변수처럼 언제나 참조가능 > 호스트 객체 > ecma 사양에 정의되어 있지 않지만, 자바스크립트 실행환경(호스트환경. 브라우져, ...
23.[modern JS Deep Dive] - 22장 . this
this 키워드 > 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합 자료구조이다. > this 의 존재 이유 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할수 있어야 한다. 이때 메서
24.[modern JS Deep Dive] - 23장 . 실행 컨텍스트
소스코드의 타입 > 4가지 타입의 소스코드(실행가능한 코드) 는 타입에 따라 과정과 관리 내용의 차이가 있는 실행 컨텍스트를 생성한다. > 1. 전역코드 전역 변수, 전역 함수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성한다. 전역 변수, 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩 하고 참조하기 위해 전역 객체와 연결되어야 한다. 이...
25.[modern JS Deep Dive] - 25장 . 클래스
modern JS Deep Dive - 13장 . 스코프 jsDeepDive
26.[modern JS Deep Dive] - 26장 . ES6 함수의 추가 기능
modern JS Deep Dive - 13장 . 스코프 jsDeepDive
27.[modern JS Deep Dive] - 27장 . 배열
배열 이란 생성하기 배열 리터럴 Array 생성자 함수 , Array.of , Array.from메서드 접근하기 대괄호 표기법 arr[0] 타입 : object 객체와의 차이 요소 추가, 갱신 요소 삭제 자바스크립트 배열은 배열
28.[modern JS Deep Dive] - 31장 . RegExp
정규 표현식 이란? 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어 정규 표현식은 문자열을 대상으로 패턴 매칭 기능 (특정 패턴과 일치하는 문자열을 검색 or 추출 또는 치환할 수 있는 기능)을 제공한다. 정규 표현식의 생성 정규 표현식 리터럴 방식과 RegExp 생성자 함수 두가지 방법으로 정규 표현식 객체를 생성할 수 있다....
29.[modern JS Deep Dive] - 32장 . String
String 생성자 함수 표준 빌트인 객체인 String 은 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메서드를 제공한다. 표준 빌트인 객체이므로 new 연산자와 함께 호출 하여 String 인스턴스를 생성할 수 있다. 문자열이 아닌 인수를 전달할경우 강제로 문자열로 변환후, 해당 문자열을 할당한 래퍼 객체를 생성한다. ⇒ 명시적 타입 변환...
30.[modern JS Deep Dive] - 33장 . 7번째 데이터 타입 Symbol
심벌이란? ES6 에서 도입된 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다. 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 심벌 값의 생성 Symbol 함수 리터럴 표기법을 통해 생성할수 없고, Symbol 함수를 호출하여 생성해야 한다. 이때 생성된 심벌 값은 외부로 노출되...
31.[modern JS Deep Dive] - 34장 . 이터러블
이터레이션 프로토콜 ES6 에서 도입되었다. 순회 가능한 데이터 컬렉션을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. 이터러블 프로토콜 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나, 프로토타입 체인을 통해 상속받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이...
32.[modern JS Deep Dive] - 35장 . 스프레드 문법
스프레드 문법 ES6 에서 도입되었다. 하로 뭉쳐 있는 여러 값들의 집합을 펼처서 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션과 같이 for …of 문으로 순회할 수 있는 이터러블에 한정된다. 이터러블 문법의 결과는 값이 아니라 값들의 목록 이기 때문에, 변수에 할당...
33.[modern JS Deep Dive] - 36장 . 디스트럭처링 할당
디스트럭처링: 이터러블, 혹은 객체 리터럴에서 필요한 값만 추출하여 변수에 할당 배열의 디스트럭처링 > ▫️배열 디스트럭처링 할당의 대상은 이터러블 이여야 하며, 순서대로 할당된다. ▫️순서대로 할당 되므로 변수의 개수와 이터러블의 요소 개수가 반드시 일치 할 필요
34.[modern JS Deep Dive] - 37장 . Set과 Map
Set > Set 객체는 중복되지 않은 유일한 값들의 집합이다. 배열과 유사하지만, 수학적 집합을 구현하기 위한 자료구조라는 차이가 있다. > 배열과 Set 객체 차이 Set 은 수학적 집합을 구현하기 위한 자료구조로서, 교집합, 합집합, 차집합, 여집합등을 구현할 수 있다. Set 객체 다루기 생성 set 생성자 함수로 생성한다. Set 생성...
35.[modern JS Deep Dive] - 38장 . 브라우져의 렌더링 과정
modern JS Deep Dive - 26장 . ES6 함수의 추가 기능 jsDeepDive
36.[modern JS Deep Dive] - 41장 . 타이머
modern JS Deep Dive - 26장 . ES6 함수의 추가 기능 jsDeepDive
37.[modern JS Deep Dive] - 42장 . 비동기 프로그래밍
modern JS Deep Dive - 26장 . ES6 함수의 추가 기능 jsDeepDive
38.[modern JS Deep Dive] - 43장 . Ajax
Ajax 란? > 자바스크립트를 사용하여 브라우져가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신해서 웹페이지를 동적으로 갱신하는 프로그래밍 방식 > 브라우져에서 제공하는 Web API 인 XMLHttpRequest 객체를 기반으로 동작한다 XMLHttpRequest 은 HTTP 비동기 통신을 위한 메서드와 프로퍼티를...
39.[modern JS Deep Dive] - 44장 . REST API
RESTful 로이 필딩이 HTTP의 장점을 최대한 활용할 수 있는 아키텍쳐로서 REST를 소개했고, HTTP 프로토콜을 의도에 맞게 디자인 하도록 유도하고 있다. REST 의 기본 원칙을 성실히 지킨 서비스 디자인을 RESTful 이라고 표현한다. 결론 : REST는 HTTP 를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐고,...
40.[modern JS Deep Dive] - 45장 . 프로미스
modern JS Deep Dive - 26장 . ES6 함수의 추가 기능 jsDeepDive
41.[modern JS Deep Dive] - 46장 . 제너레이터와 async/await
modern JS Deep Dive - 45장 . 프로미스 jsDeepDive
42.[modern JS Deep Dive] - 47장 . 에러 처리
에러가 발생하지 않는 코드를 작성하는 것은 불가능 하다작성한 코드에서는 언제나 에러나 예외적인 상황이 발생할 수 있다는 것을 전제하고 이에 대응하는 코드를 작성하는 것이 중요하다.예외적인 상황이 발생하면 반환하는 값 (null or -1)을 if문이나 단축 평가 또는
43.[modern JS Deep Dive] - 48장 . 모듈
모듈의 의미 모듈 : 애플리 케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각, 기능을 기준으로 파일 단위로 분리함 특징 자신만의 파일 스코프(모듈 스코프) 를 가질수 있어야함 따라서 다른 모듈에서 접근할 수 없고, 개별적 존재로서 애플리케이션과 분리되어 존재함. 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개...
44.[modern JS Deep Dive] - 49장 . 트랜스파일러, 모듈 로더
브라우져별 지원 현황 ES6+와 ES.NEXT의 최신 ECMAScript 사양을 사용하여 프로젝트를 진행하려면 최신 사양으로 작성된 코드를 경우에 따라 IE를 포함한 구형 브라우져에서 문제 없이 동작 시키기 위한 개발환경을 구축할 필요성이 있다. 또한 대부분의 프로젝트가 모듈을 사용하므로 모듈 로더도 필요하다 ES6모듈 (ESM)은 대부분의 모던 브라우...