모던 자바스크립트 Deep Dive

• 저자 : 이웅모
• 자바스크립트의 기본 개념과 동작 원리

스터디

마님	굉스터	진채영	창근	지호

• 2023년 12월 5일 ~
• 주 1회 월요일 자정까지 각자 챕터 요약
• 주 1회 화요일 오전 9시 발표 및 Q&A 진행
• 진행 후 발표자 요약본 README.md 변경 및 Q&A 요약

목차

01. 프로그래밍

• 1.1 프로그래밍이란?
• 1.2 프로그래밍 언어
• 1.3 구문과 의미

02. 자바스크립트란?

• 2.1 자바스크립트의 탄생
• 2.2 자바스크립트의 표준화
• 2.3 자바스크립트 성장의 역사
• 2.4 자바스크립트와 ECMAScript
• 2.5 자바스크립트의 특징
• 2.6 ES6 브라우저 지원 현황

03. 자바스크립트 개발 환경과 실행 방법

• 3.1 자바스크립트 실행 환경
• 3.2 웹 브라우저
• 3.3 Node.js
• 3.4 비주얼 스튜디오 코드

04. 변수

• 4.1 변수란 무엇인가? 왜 필요한가?
• 4.2 식별자
• 4.3 변수 선언
• 4.4 변수 선언의 실행 시점과 변수 호이스팅
• 4.5 값의 할당
• 4.6 값의 재할당
• 4.7 식별자 네이밍 규칙

05. 표현식과 문

• 5.1 값
• 5.2 리터럴
• 5.3 표현식
• 5.4 문
• 5.5 세미콜론과 세미콜론 자동 삽입 기능
• 5.6 표현식인 문과 표현식이 아닌 문

06. 데이터 타입

• 6.1 숫자 타입
• 6.2 문자열 타입
• 6.3 템플릿 리터럴
• 6.4 불리언 타입
• 6.5 undefined 타입
• 6.6 null 타입
• 6.7 심벌 타입
• 6.8 객체 타입
• 6.9 데이터 타입의 필요성
• 6.10 동적 타이핑

07. 연산자

• 7.1 산술 연산자
• 7.2 할당 연산자
• 7.3 비교 연산자
• 7.4 삼항 조건 연산자
• 7.5 논리 연산자
• 7.6 쉼표 연산자
• 7.7 그룹 연산자
• 7.8 typeof 연산자
• 7.9 지수 연산자
• 7.10 그 외의 연산자
• 7.11 연산자의 부수 효과
• 7.12 연산자 우선순위
• 7.13 연산자 결합 순서

08. 제어문

• 8.1 블록문
• 8.2 조건문
• 8.3 반복문
• 8.4 break 문
• 8.5 continue 문

09. 타입 변환과 단축 평가

• 9.1 타입 변환이란?
• 9.2 암묵적 타입 변환
• 9.3 명시적 타입 변환
• 9.4. 단축 평가

10. 객체 리터럴

• 10.1 객체란?
• 10.2 객체 리터럴에 의한 객체 생성
• 10.3 프로퍼티
• 10.4 메서드
• 10.5 프로퍼티 접근
• 10.6 프로퍼티 값 갱신
• 10.7 프로퍼티 동적 생성
• 10.8 프로퍼티 삭제
• 10.9 ES6에서 추가된 객체 리터럴의 확장 기능

11. 원시 값과 객체의 비교

• 11.1 원시 값
• 11.2 객체

12. 함수

• 12.1 함수란?
• 12.2 함수를 사용하는 이유
• 12.3 함수 리터럴
• 12.4 함수 정의
• 12.5 함수 호출
• 12.6 참조에 의한 전달과 외부 상태의 변경
• 12.7 다양한 함수의 형태

13. 스코프

• 13.1 스코프란?
• 13.2 스코프의 종류
• 13.3 스코프 체인
• 13.4 함수 레벨 스코프
• 13.5 렉시컬 스코프

14. 전역 변수의 문제점

• 14.1 변수의 생명 주기
• 14.2 전역 변수의 문제점
• 14.3 전역 변수의 사용을 억제하는 방법

15. let, const 키워드와 블록 레벨 스코프

• 15.1 var 키워드로 선언한 변수의 문제점
• 15.2 let 키워드
• 15.3 const 키워드
• 15.4 var vs. let vs. const

16. 프로퍼티 어트리뷰트

• 16.1 내부 슬롯과 내부 메서드
• 16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체
• 16.3 데이터 프로퍼티와 접근자 프로퍼티
• 16.4 프로퍼티 정의
• 16.5 객체 변경 방지

17. 생성자 함수에 의한 객체 생성

• 17.1 Object 생성자 함수
• 17.2 생성자 함수

18. 함수와 일급 객체

• 18.1 일급 객체
• 18.2 함수 객체의 프로퍼티

19. 프로토타입

• 19.1 객체지향 프로그래밍
• 19.2 상속과 프로토타입
• 19.3 프로토타입 객체
• 19.4 리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입
• 19.5 프로토타입의 생성 시점
• 19.6 객체 생성 방식과 프로토타입의 결정
• 19.7 프로토타입 체인
• 19.8 오버라이딩과 프로퍼티 섀도잉
• 19.9 프로토타입의 교체
• 19.10 instanceof 연산자
• 19.11 직접 상속
• 19.12 정적 프로퍼티/메서드
• 19.13 프로퍼티 존재 확인
• 19.14 프로퍼티 열거

20. strict mode

• 20.1 strict mode란?
• 20.2 strict mode의 적용
• 20.3 전역에 strict mode를 적용하는 것은 피하자
• 20.4 함수 단위로 strict mode를 적용하는 것도 피하자
• 20.5 strict mode가 발생시키는 에러
• 20.6 strict mode 적용에 의한 변화

21. 빌트인 객체

• 21.1 자바스크립트 객체의 분류
• 21.2 표준 빌트인 객체
• 21.3 원시값과 래퍼 객체
• 21.4 전역 객체

22. this

• 22.1 this 키워드
• 22.2 함수 호출 방식과 this 바인딩

23. 실행 컨텍스트

• 23.1 소스코드의 타입
• 23.2 소스코드의 평가와 실행
• 23.3 실행 컨텍스트의 역할
• 23.4 실행 컨텍스트 스택
• 23.5 렉시컬 환경
• 23.6 실행 컨텍스트의 생성과 식별자 검색 과정
• 23.7 실행 컨텍스트와 블록 레벨 스코프

24. 클로저

• 24.1 렉시컬 스코프
• 24.2 함수 객체의 내부 슬롯
• 24.3 클로저와 렉시컬 환경
• 24.4 클로저의 활용
• 24.5 캡슐화와 정보 은닉
• 24.6 자주 발생하는 실수

25. 클래스

• 25.1 클래스는 프로토타입의 문법적 설탕인가?
• 25.2 클래스 정의
• 25.3 클래스 호이스팅
• 25.4 인스턴스 생성
• 25.5 메서드
• 25.6 클래스의 인스턴스 생성 과정
• 25.7 프로퍼티
• 25.8 상속에 의한 클래스 확장

26. ES6 함수의 추가 기능

• 26.1 함수의 구분
• 26.2 메서드
• 26.3 화살표 함수
• 26.4 Rest 파라미터
• 26.5 매개변수 기본값

27. 배열

• 27.1 배열이란?
• 27.2 자바스크립트 배열은 배열이 아니다
• 27.3 length 프로퍼티와 최소 배열
• 27.4 배열 생성
• 27.5 배열 요소의 참조
• 27.6 배열 요소의 추가와 갱신
• 27.7 배열 요소의 삭제
• 27.8 배열 메서드
• 27.9 배열 고차 함수

28. Number

• 28.1 Number 생성자 함수
• 28.2 Number 프로퍼티
• 28.3 Number 메서드

29. Math

• 29.1 Math 프로퍼티
• 29.2 Math 메서드

30. Date

• 30.1 Date 생성자 함수
• 30.2 Date 메서드
• 30.3 Date를 활용한 시계 예제

31. RegExp

• 31.1 정규 표현식이란?
• 31.2 정규 표현식의 생성
• 31.3 RegExp 메서드
• 31.4 플래그
• 31.5 패턴
• 31.6 자주 사용하는 정규표현식

32. String

• 32.1 String 생성자 함수
• 32.2 length 프로퍼티
• 32.3 String 메서드

33. 7번째 데이터 타입 Symbol

• 33.1 심벌이란?
• 33.2 심벌 값의 생성
• 33.3 심벌과 상수
• 33.4 심벌과 프로퍼티 키
• 33.5 심벌과 프로퍼티 은닉
• 33.6 심벌과 표준 빌트인 객체 확장
• 33.7 Well-known Symbol

34. 이터러블

• 34.1 이터레이션 프로토콜
• 34.2 빌트인 이터러블
• 34.3 for ... of 문
• 34.4 이터러블과 유사 배열 객체
• 34.5 이터레이션 프로토콜의 필요성
• 34.6 사용자 정의 이터러블

35. 스프레드 문법

• 35.1 함수 호출문의 인수 목록에서 사용하는 경우
• 35.2 배열 리터럴 내부에서 사용하는 경우
• 35.3 객체 리터럴 내부에서 사용하는 경우

36. 디스트럭처링 할당

• 36.1 배열 디스트릭처링 할당
• 36.2 객체 디스트릭처링 할당

37. Set과 Map

• 37.1 Set
• 37.2 Map

38. 브라우저의 렌더링 과정

• 38.1 요청과 응답
• 38.2 HTTP 1.1과 HTTP 2.0
• 38.3 HTML 파싱과 DOM 생성
• 38.4 CSS 파싱과 CSSOM 생성
• 38.5 렌더 트리 생성
• 38.6 자바스크립트 파싱과 실행
• 38.7 리플로우와 리페인트
• 38.8 자바스크립트 파싱에 의한 HTML 파싱 중단
• 38.9 script 태그의 async/defer 어트리뷰트

39. DOM

• 39.1 노드
• 39.2 요소 노드 취득
• 39.3 노드 탐색
• 39.4 노드 정보 취득
• 39.5 요소 노드의 텍스트 조작
• 39.6 DOM 조작
• 39.7 어트리뷰트
• 39.8 스타일
• 39.9 DOM 표준

40. 이벤트

• 40.1 이벤트 드리븐 프로그래밍
• 40.2 이벤트 타입
• 40.3 이벤트 핸들러 등록
• 40.4 이벤트 핸들러 제거
• 40.5 이벤트 객체
• 40.6 이벤트 전파
• 40.7 이벤트 위임
• 40.8 DOM 요소의 기본 동작 조작
• 40.9 이벤트 핸들러 내부의 this
• 40.10 이벤트 핸들러에 인수 전달
• 40.11 커스텀 이벤트

41. 타이머

• 41.1 호출 스케줄링
• 41.2 타이머 함수
• 41.3 디바운스와 스로틀

42. 비동기 프로그래밍

= 42.1 동기 처리와 비동기 처리 = 42.2 이벤트 루프와 태스크 큐

43. Ajax

• 43.1 Ajax란?
• 43.2 JSON
• 43.3 XMLHttpRequest

44. REST API

• 44.1 REST API의 구성
• 44.2 REST API 설계 원칙
• 44.3 JSON SERVER를 이용한 REST API 실습

45. 프로미스

• 45.1 비동기 처리를 위한 콜백 패턴의 단점
• 45.2 프로미스의 생성
• 45.3 프로미스의 후속 처리 메서드
• 45.4 프로미스의 에러 처리
• 45.5 프로미스 체이닝
• 45.6 프로미스의 정적 메서드
• 45.7 마이크로태스크 큐
• 45.8 fetch

46. 제너레이터와 async/await

• 46.1 제너레이터란?
• 46.2 제너레이터 함수의 정의
• 46.3 제너레이터 객체
• 46.4 제너레이터의 일시 중지와 재개
• 46.5 제너레이터의 활용
• 46.6 async/await

47. 에러 처리

• 47.1 에러 처리의 필요성
• 47.2 try ... catch ... finally 문
• 47.3 Error 객체
• 47.4 throw 문
• 47.5 에러의 전파

48. 모듈

• 48.1 모듈의 일반적 의미
• 48.2 자바스크립트와 모듈
• 48.3 ES6 모듈(ESM)

49. Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축

• 49.1 Babel
• 49.2 Webpack