Javascript Roadmap Questions

Published:

오늘은 저도 공부할 겸 학습거리를 하나 제공해드리려 합니다.

자바스크립트 초심자를 대상으로 학습 로드맵을 제공하는 뉴스레터입니다. 총 7개의 챕터로 좋은 내용들을 전달해주었는데, 자바스크립트 학습의 단계를 Baby -> Child -> Teenage -> Adult 로 구분하여 각 단계별로 익혀야 할 개념들을 소개하고, 챕터 말미에 각 단계별로 진도 확인을 위한 질문들을 제시했습니다.

이 질문의 내용이 아주 좋다고 생각하여 자바스크립트의 기초를 복습할 겸 질문의 답을 정리해보는 학습을 하고자 합니다. 대부분 질문의 답은 MDN에서 얻을 수 있지만, 답을 찾고 관련된 글을 읽으면서 다시 한번 자바스크립트의 기초를 다지는 계기가 되리라 생각합니다.

Baby phase

  1. 자바스크립트의 6가지 기본(원시) 타입은? (ES6에서 한개 더 늘어나서 총 여섯개입니다)
  2. 자바스크립트에서 변수를 선언하고 할당하는 방법은?
  3. const, let, var 로 변수를 선언할 때의 차이점은?
  4. 아래의 연산자는 어떤 역할을 하는가?
    1. +
    2. -
    3. *
    4. /
    5. %
  5. 아래의 비교연산자의 역할은?
    1. ===
    2. !==
    3. >
    4. >=
    5. <
    6. <=
  6. 다음의 조건문은 어떻게 사용하는가?
    1. if
    2. if else
    3. else
  7. for 루프를 사용하는 방법은?
  8. **배열(Array)**은 무엇인가?
    1. 배열에 값을 넣는 방법은?
    2. 배열의 값을 불러오는 방법은?
    3. 배열의 값을 제거하는 방법은?
    4. 배열의 모든 값을 순회하는 방법은?
  9. **객체(Object)**란 무엇인가?
    1. 객체에 값을 넣는 방법은?
    2. 객체의 값을 불러오는 방법은?
    3. 객체의 속성을 제거하는 방법은?
    4. 객체의 모든 값을 순회하는 방법은?
    5. 객체의 메서드(method)란 무엇인가?
    6. 메서드를 정의하는 방법은?
    7. 메서드를 호출/실행하는 방법은?
  10. **함수(Function)**란 무엇인가?
    1. 함수를 정의하는 방법은?
    2. 함수를 호출/실행하는 방법은?
    3. 함수에 인자(arguments)를 전달하는 방법은?
    4. 함수 안에서 return 키워드는 어떤 역할을 하는가?

Child phase

  1. 자바스크립트의 스코프(Scope)란?
    1. 왜 전역 변수를 최소화해야 하는가?
    2. 클로저(Closure)란 무엇인가?
    3. 클로저를 왜 사용하는가?
  2. 콜백이란 무엇인가?
    1. 콜백을 어떻게 사용하는가?
    2. 콜백을 어떻게 작성하는가?
    3. 콜백을 받아들이는 함수를 작성하는 방법은?
    4. setTimeout 은 콜백을 받는 함수인가?
  3. 비동기 자바스크립트
    1. 자바스크립트에서 동기와 비동기의 의미는 무엇인가?
    2. 자바스크립트로 비동기 코드를 작성하는 방법은?
    3. 이벤트 루프가 무엇인가?
    4. 이벤트 루프가 어떻게 동작하는가?
  4. DOM 메서드에 관한 질문들
    1. 엘리먼트(Element)란?
    2. 노드(Node)란?
    3. 엘리먼트를 선택하는 방법은?
    4. 여러 엘리먼트를 선택하는 방법은?
    5. 모든 브라우저에서 엘리먼트를 순회하는 방법은?
    6. 부모 엘리먼트를 선택하는 방법은?
    7. 형제 엘리먼트를 선택하는 방법은?
    8. 엘리먼트에 클래스를 추가/제거하는 방법은?
    9. 엘리먼트에 특정 클래스가 있는지 확인하는 방법은?
    10. 어떤 상황에서 엘리먼트에 클래스를 추가하는가?
    11. 엘리먼트에 속성을 추가/제거하는 방법은?
    12. 엘리먼트에 특정 속성이 있는지 확인하는 방법은?
    13. 어떤 상황에서 엘리먼트에 속성을 추가/제거하는가?
    14. HTML 엘리먼트를 자바스크립트로 생성하는 방법은?
    15. 특정 엘리먼트 바로 앞에 새로운 엘리먼트를 생성하는 방법은?
    16. 엘리먼트의 스타일을 변경하는 방법은?
    17. 엘리먼트의 스타일을 자바스크립트로 바꾸어도 되는가? 왜 되는가/되지 않는가?
    18. 엘리먼트의 내용을 가져오는 방법은?
  5. 이벤트
    1. 이벤트 리스너(Event listener)를 추가하는 방법은?
    2. 왜 이벤트 리스너를 추가하는가?
    3. 이벤트 리스너를 제거하는 방법은?
    4. 언제 이벤트 리스너를 제거하는가? 왜 제거하는가?
    5. 자주 사용되는 마우스 이벤트의 종류는?
    6. 자주 사용되는 키보드 이벤트의 종류는?
    7. 자주 사용되는 폼(Form) 이벤트의 종류는?
    8. 이벤트 대상의 값을 가져오는 방법은?

Teenage phase

  1. OOP
    1. this 의 컨텍스트는 어떻게 바뀌는가? 얼마나 많은 컨텍스트가 있는가?
    2. 자바스크립트의 프로토타입이란 무엇인가?
    3. 자바스크립트에서 객체를 생성하는 방법은?
    4. 모듈 패턴은 무엇이며 어떻게 사용하는가?
    5. 팩토리 패턴은 무엇이며 어떻게 사용하는가?
  2. 함수형 프로그래밍
    1. 불변성(Immutability)란 무엇인가?
    2. 배열의 어떤 메서드가 불변성을 가지고 있는가?
    3. 자바스크립트의 객체를 직접 수정하지 않고 속성을 변경하는 방법은?
    4. 순수 함수(Pure function)란?
    5. 한 개의 함수는 얼마나 많은 행동을 담고 있는게 좋은가?
    6. 함수의 부작용(Side effects)이란?
    7. 순수 함수를 작성할 때 부작용을 다루는 방법은?
  3. AJAX
    1. 자바스크립트 프라미스(Promise)란?
    2. 프라미스를 연결하는 방법은?
    3. 프라미스를 사용할 때 에러를 처리하는 방법은?
    4. Fetch API를 사용하는 방법은?
    5. CRUD란 무엇인가?
    6. Github에서 자신의 저장소 목록을 가져오는 API를 어떻게 호출하는가?
  4. Best practices
    1. 전역 변수를 피해야 하는 이유는?
    2. 비교 연산자에서 == 대신 === 를 사용해야 하는 이유는?
    3. 간결한 코드를 작성하기 위해 삼항연산자를 어떻게 사용하는가?
    4. 간결한 코드 작성을 돕는 ES6 기능은 무엇이 있는가?
    5. 이벤트 버블링/캡처링이란?
    6. 이벤트 전달(delegate)이란?
    7. 이벤트 리스너를 제거하는 방법은? 언제 제거하는가?