코딩/개발 크리에이터 우리밋_woorimIT의 스터디 겸 강의 자료입니다. 함께 공부해요😁
PR은 언제든 환영입니다.

• 1.0.0 아마추어 | 생초급
• 2.0.0 주니어 | 초급
• 3.0.0 시니어 | 중급
• 4.0.0 프로 | 고급

안녕하세요. 우리밋_woorimIT입니다.
모던 자바스크립트의 아마추어부터 프로가 되기까지는 자바스크립트로 프로그래밍을 하는 모든 분들을 위한 자료입니다. 즉, 저를 위한 자료이기도 한 것이지요.

이후부터는 모자아프 로 줄여서 부르겠습니다.

현대 자바스크립트라고 하며, 뜻 그대로 자바스크립트의 현대 버전을 의미합니다. 왜 이렇게 나누어 부를까요?

결과적으로는 구 시대의 자바스크립트와 현 시대의 자바스크립트는 그 모양과 방식이 진화되었기 때문입니다.

자바스크립트는 대부분의 프로그래밍 언어와 탄생 목적이 다릅니다. 대부분의 프로그래밍 언어는 애플리케이션을 개발하기 위한 용도라면, 자바스크립트는 웹페이지를 동적으로 변화시키기 위한 단순한 보조 역할로서 개발이 되었습니다. 그러나 지금의 자바스크립트는 단순한 보조 역할을 넘어서서 프로그래밍의 거의 모든 영역을 대신할 수 있는 언어로 성장했습니다.

즉, 모던 자바스크립트는 자바스크립트의 진화에 따라 옳게 사용하는 모양과 방식을 일종의 형식화한 개념의 집합입니다.

이를 Chrome Dev Summit 2020에서는 다음과 같이 정의하였습니다.

모던 자바스크립트는 모든 모던 브라우저에서 지원하는 문법으로 작성된 자바스크립트 코드를 의미한다.

여기서 모던 브라우저는 시장 점유율 90%를 차지하는 Chrome, Firefox, Safari, Edge와 5%의 점유율을 가진 삼성 브라우저, 오페라를 포함합니다.

소위 말하는 좋은 코드를 구현할 수 있습니다. 그럼, 모던 자바스크립트가 아닌 구 자바스크립트는 좋은 코드가 아닌 것일까요? 사람에 따라 주관적인 견해의 차이는 있을 수 있지만, 객관적으로 바라봤을 때는 좋은 코드가 아니라고 할 수 있습니다.

자바스크립트는 태생적으로 편리함을 타고 났습니다. 따라서 초급자가 배우기에는 굉장히 쉽지만, 내부 동작을 이해하고 개발자의 입맛대로 코딩하기에는 다소 어려운 점들이 많습니다. 이에 대해서는 앞으로 배울 모던 자바스크립트를 이해한다면 모두가 공감할 수 있으리라 생각됩니다.

현 시대가 얘기하는 좋은 코드를 구현하기 위해서는 모던 자바스크립트가 필수적입니다.

모자아프에서 정의한 아마추어부터 프로의 정의는 다음과 같습니다.

1. 아마추어 : 본인이 무엇을 모르는지 모르고, 배워야만 할 수 있는 사람.
   • 추천 : 개발을 취미로 했거나 프로그래밍 언어에 대한 기초가 없는 사람들에게 추천합니다.
2. 주니어 : 본인이 무엇을 모르는지 알기에 배우지 않아도 할 수 있는 사람.
   • 추천 : 개발자가 될 것이며, 기반을 단단하게 닦고 싶은 사람들에게 추천합니다.
3. 시니어 : 남을 가르칠 수 있으며, 내부 동작을 이해하고, 현 시대가 말하는 좋은 코드를 짤 수 있는 사람.
   • 추천 : 자바스크립트 개발자가 될 것이며, 내부 동작을 이해하고, 좋은 코드를 짜고 싶은 사람들에게 추천합니다.
4. 프로 : 내부 동작을 활용하고, 현 시대가 말하는 좋은 코드의 문제를 개선할 수 있는 사람.
   • 추천 : 자바스크립트의 1인자가 되고 싶은 사람들에게 추천합니다.

모자아프를 통해 모던 자바스크립트 공부를 마쳤을 때에 여러분은, 분명 신세계에 발을 디디게 될 것입니다. 시니어 혹은 프로까지 공부를 마치셨다면, 다시 한 번 아마추어 자료를 흝어보세요. 분명 이전엔 보이지 않던 수만개의 로직이 머릿 속을 지나고 있을테니까요.

이제 모자아프의 세계로 떠나볼까요?

• 1.1.0 오리엔테이션
  • 1.1.1 오리엔테이션
  • 1.1.2 프로그래밍에 대하여
  • 1.1.3 좋은 코드에 대하여
• 1.2.0 자바스크립트에 대하여
  • 1.2.1 자바스크립트에 대하여
  • 1.2.2 ES6+에 대하여
• 1.3.0 자바스크립트 개발환경과 실행방법
  • 1.3.1 실행 환경
  • 1.3.2 웹 브라우저
  • 1.3.3 Node.js
  • 1.3.4 비주얼 스튜디오 코드
• 1.4.0 변수
  • 1.4.1 변수와 상수에 대하여
  • 1.4.2 var, let, const
  • 1.4.3 식별자 네이밍 규칙
• 1.5.0 데이터 타입
  • 1.5.1 데이터 타입에 대하여
  • 1.5.2 숫자 타입
  • 1.5.3 문자열 타입
  • 1.5.4 불리언 타입
  • 1.5.5 undefined 타입
  • 1.5.6 null 타입
  • 1.5.7 심벌 타입
  • 1.5.8 객체 타입
• 1.6.0 연산자
  • 1.6.1 산술 연산자
  • 1.6.2 할당 연산자
  • 1.6.3 비교 연산자
  • 1.6.4 논리 연산자
  • 1.6.5 typeof 연산자
• 1.7.0 제어문
  • 1.7.1 블록문
  • 1.7.2 조건문
  • 1.7.3 반복문
• 1.8.0 타입 변환
  • 1.8.1 타입 변환에 대하여
  • 1.8.2 암묵적 타입 변환과 명시적 타입 변환에 대하여
• 1.9.0 객체
  • 1.9.1 객체에 대하여
  • 1.9.2 객체 생성
  • 1.9.3 프로퍼티와 메서드
  • 1.9.4 프로퍼티 접근, 추가, 수정, 삭제
• 1.10.0 함수
  • 1.10.1 함수에 대하여
  • 1.10.2 함수를 왜 사용할까
  • 1.10.3 매개변수와 인수
  • 1.10.4 좋은 함수
• 1.11.0 배열
  • 1.11.1 배열에 대하여
  • 1.11.2 배열 생성
  • 1.11.3 요소 접근, 추가, 수정, 삭제
• 1.12.0 보너스 | for의 종류
  • 1.12.1 for...in문
  • 1.12.2 for...of문
  • 1.12.3 forEach 고차함수
• 마무리하며

• 2.1.0 오리엔테이션
  • 2.1.1 오리엔테이션
• 2.2.0 변수
  • 2.2.1 변수 선언의 실행 시점과 호이스팅
  • 2.2.2 값의 할당과 재할당
• 2.3.0 표현식과 문
  • 2.3.1 값
  • 2.3.2 리터럴
  • 2.3.3 표현식
  • 2.3.4 문
• 2.4.0 데이터 타입
  • 2.4.1 문자열과 템플릿 리터럴
  • 2.4.2 데이터 타입이 왜 필요한가
  • 2.4.3 동적 타입과 정적 타입
• 2.5.0 연산자
  • 2.5.1 삼항 조건 연산자
  • 2.5.2 그 외의 연산자
  • 2.5.3 연산자 우선 순위
• 2.6.0 제어문
  • 2.6.1 break 문
  • 2.6.2 continue 문
• 2.7.0 타입 변환과 단축 평가
  • 2.7.1 암묵적 타입 변환
  • 2.7.2 명시적 타입 변환
  • 2.7.3 단축 평가
• 2.8.0 객체
  • 2.8.1 ES6에 추가된 객체 리터럴
  • 2.8.2 원시 값과 객체의 비교
• 2.9.0 함수
  • 2.9.1 함수 리터럴
  • 2.9.2 함수 생성 시점과 호이스팅
  • 2.9.3 Function 생성자 함수
  • 2.9.4 ES6 화살표 함수
  • 2.9.5 참조에 의한 전달과 외부 상태의 변경
  • 2.9.6 다양한 함수의 형태
  • 2.9.7 순수 함수와 비순수 함수
• 마무리하며

• 3.1.0 오리엔테이션
  • 3.1.1 오리엔테이션
• 3.2.0 스코프
  • 3.2.1 스코프에 대하여
  • 3.2.2 스코프의 종류
  • 3.2.3 스코프 체인
  • 3.2.4 함수레벨 스코프와 블록 레벨 스코프
  • 3.2.5 렉시컬 스코프
• 3.3.0 변수
  • 3.3.1 변수의 생명 주기
  • 3.3.2 전역 변수의 문제점
  • 3.3.3 전역 변수의 사용을 억제하라
  • 3.3.4 var 키워드의 문제
  • 3.3.5 let 키워드
  • 3.3.6 const 키워드
  • 3.3.7 var vs. let vs. const
• 3.4.0 프로퍼티 어트리뷰트
  • 3.4.1 내부 슬롯과 내부 메서드
  • 3.4.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체
  • 3.4.3 데이터 프로퍼티와 접근자 프로퍼티
  • 3.4.4 프로퍼티 정의
  • 3.4.5 객체 변경 방지
• 3.5.0 함수
  • 3.5.1 생성자 함수
  • 3.5.2 함수와 일급 객체
  • 3.5.3 함수 객체의 프로퍼티
• 3.6.0 프로토타입
  • 3.6.1 객체지향 프로그래밍
  • 3.6.2 상속과 프로토타입
  • 3.6.3 프로토타입 객체
  • 3.6.4 리터럴 객체의 생성자 함수와 프로토타입
  • 3.6.5 프로토타입의 생성 시점
  • 3.6.6 객체 생성 방식에 따른 프로토타입의 결정
  • 3.6.7 프로토타입 체인
  • 3.6.8 프로토타입 기반의 오버라이딩
  • 3.6.9 프로토타입의 교체
  • 3.6.10 instanceof 연산자
  • 3.6.11 직접 상속
  • 3.6.12 정적 프로퍼티와 정적 메서드
  • 3.6.13 in 연산자
  • 3.6.14 for ... in 문
• 3.7.0 this
  • 3.7.1 this에 대하여
  • 3.7.2 함수 호출 방식과 this 바인딩
• 3.8.0 실행 컨텍스트
  • 3.8.1 실행 컨텍스트에 대하여
  • 3.8.2 실행 컨텍스트 스택
  • 3.8.3 실행 컨텍스트의 흐름
  • 3.8.4 실행 컨텐스트와 블록 레벨 스코프
• 3.9.0 클로저
  • 3.9.1 렉시컬 스코프
  • 3.9.2 함수 객체의 내부 슬롯
  • 3.9.3 클로저와 렉시컬 환경
  • 3.9.4 클로저의 활용
  • 3.9.5 캡슐화와 정보 은닉
  • 3.9.6 자주 발생하는 실수
• 3.10.0 ES6 함수
  • 3.10.1 함수의 구분
  • 3.10.2 메서드
  • 3.10.3 화살표 함수
  • 3.10.4 나머지 매개변수
  • 3.10.5 매개변수 기본 값
• 마무리하며

• 4.1.0 오리엔테이견
  • 4.1.1 오리엔테이션
• 4.2.0 빌트인 객체
  • 4.2.1 자바스크립트 객체의 분류
  • 4.2.2 표준 빌트인 객체
  • 4.2.3 원시값과 래퍼 객체
  • 4.2.4 전역 객체
• 4.3.0 클래스
  • 4.3.1 클래스에 대하여
  • 4.3.2 클래스 호이스팅
  • 4.3.3 인스턴스 생성
  • 4.3.4 메서드
  • 4.3.5 클래스의 인스턴스 생성 과정
  • 4.3.6 프로퍼티
  • 4.3.7 클래스 상속
• 4.4.0 Symbol
  • 4.4.1 심볼에 대하여
  • 4.4.2 심볼 값 생성
  • 4.4.3 심볼과 상수
  • 4.4.4 심볼과 프로퍼티 키
• 4.5.0 이터러블
  • 4.5.1 이터러블과 이터레이터
  • 4.5.2 빌트인 이터러블
  • 4.5.3 for ... of 문
  • 4.5.4 이터러블과 유사 배열 객체
  • 4.5.5 이터레이션 프로토콜의 필요성
  • 4.5.6 사용자 정의 이터러블
• 4.6.0 스프레드 문법
  • 4.6.1 스프레드 문법에 대하여
  • 4.6.2 사용 환경에 따른 차이
• 4.7.0 구조 분해 (디스트럭처링) 할당
  • 4.7.1 배열의 구조 분해
  • 4.7.2 객체의 구조 분해
• 4.8.0 비동기 프로그래밍
  • 4.8.1 동기 처리와 비동기 처리
  • 4.8.2 이벤트 루프와 태스크 큐
• 4.9.0 프로미스
  • 4.9.1 프로미스에 대하여
  • 4.9.2 프로미스의 생성
  • 4.9.3 프로미스의 메서드
  • 4.9.4 프로미스의 에러 처리
  • 4.9.5 프로미스의 정적 메서드
  • 4.9.6 마이크로태스크 큐
• 4.10.0 제너레이터와 async/await
  • 4.10.1 제너레이터에 대하여
  • 4.10.2 제니레이터 함수 정의
  • 4.10.3 제너레이터 객체
  • 4.10.4 제너레이터의 일시 중지와 재개
  • 4.10.5 제너레이터의 활용
  • 4.10.6 async/await
• 4.11.0 에러 처리
  • 4.11.1 에러 처리의 필요성
  • 4.11.2 try/catch/finally 문
  • 4.11.3 Error 객체
  • 4.11.4 throw 문
  • 4.11.5 에러의 전파
• 4.12.0 모듈
  • 4.12.1 모듈에 대하여
  • 4.12.2 자바스크립트와 모듈
  • 4.12.3 ES6 모듈(ESM)
• 마무리하며