modern-javascript-exam

KO | EN

gitlite — search

#javascript #python #react #llm #go #machine-learning #rust #linux #kubernetes #pytorch #security #ios #mcp #open-source

modern-javascript-exam

(★ 77)

코드숨 모던 자바스크립트 튜토리얼 정주행 스터디 질문 모음집

modern-javascript-exam 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 코드숨 모던 자바스크립트 정주행 스터디 질문모음집

https://ko.javascript.info/

## 3.1 Chrome으로 디버깅하기

* 디버깅을 할 줄 안다면 개발할 때 어떤 이점이 있을까요?
* 실행 추적에서 step, step over, step into, step out의 차이
* 브레이크포인트는 코드 작성할 때 잡아줄 수 있다? 없다?
* 중단점을 설정하기는 귀찮은데 해당 줄에서 실행을 재개하고 싶을 때 아주 유용한 옵션은?
* 디버깅을 유용하게 사용 해 본 사례가 있다면 공유 부탁드립니다. 전 안써봐서...
* Chrome 개발자 도구에서 자신이 사용하는 유용한 기능이 있다면?
* 여러분들은 디버깅 툴을 이용하는지, console.log로만 하고 있는지, 자바스크립트 도구 call stack 부분을 본적이 있는지요~

## 3.2 코딩 스타일

* 가독성이 좋고 이해하기 쉬운 코드를 만들려면 무엇을 해야할까요? 에러를 피하려면 어떻게 해야할까요?
* 정의한 함수의 끝에 세미콜론을 붙이는가?
* 호출부를 먼저 쓰고 헬퍼 함수를 나중에 두는 방식의 장점은?
* 문자열을 여러 줄로 쉽게 나눌 때, 어떤 걸 사용하면 좋을까요?
* 중첩레벨을 줄이는 자신만의 방법이 있다면?
* Linter를 왜 사용할까요?

## 3.3 주석

* 좋은 주석이란 무엇인가요?
* 주석에 들어가면 좋지 않은 내용은 무엇인가?
* 좋은 주석과 나쁜 주석을 설명해주세요
* 주석에 들어가면 좋지 않은 내용에는 어떤게 있을까요?
* (책의 설명과 상관없이 자신이 생각했을 떄) 좋은 주석이란?
* 주석에 들어가면 좋은 내용 과 주석에 들어가면 좋지 않은 내용 예로 뭐가 있을까요?

## 3.4 닌자 코드

* 유사한 뜻을 가진 단어 여러개를 같은걸 나타내는데 섞어서 사용하면 어떤 일이 발생하나요?
* 닌자코드를 작성해본 경험이 있는가?
* 닌자코드는 좋은 걸까요 나쁜 걸까요
* 닌자 코드 예시 중 가장 생각나는 예시는?
* 가장 찔렸던 구절이 있다면?
* 약어를 사용하여 코드의 양을 줄이면 좋은 방법인가요? O,X

## 3.5 테스트 자동화와 Mocha

* 테스트는 왜 해야할까요?
* BDD란 무엇인가?
* 테스트 자동화의 장점은?
* before와 beforeEach의 차이는?
* BDD와 TDD의 차이는?
* 테스트는 왜 할까요?

## 3.6 폴리필

* 바벨의 역할은 무엇인가요?
* 폴리필은 어떨 때 사용하는가?
* js 엔진에 구현이 누락된 새로운 기능을 쓸수 있게 해주는 스크립트의 명칭은?
* 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔주는 역할을 하는 것은?
* babel과 polyfill의 차이는 무엇인가요 ?
* 폴리필과 트랜스파일러의 차이는?
* 바벨을 왜 사용할까요?
* 자료구조와 자료형

## 4.1 객체

* 객체의 프로퍼티 이름에 제약사항이 있는가?
* const로 선언된 객체는 값을 변경할 수 있다? 없다?
* Object는 모든 프로퍼티에 대해서 객체가 추가한 순서 그대로 정렬된다.[O/X]
* 점 표기법과 대괄호 표기법의 가장 큰 차이점은 무엇일까요?
* 정수 프로퍼티를 사용할 때의 장단점은 무엇일까?
* 대괄호 표기법은 언제 사용하면 좋은가?(2가지)

## 4.2 참조에 의한 객체 복사

* 참조에 의해 저장되고 복사된다는 것은 무슨 의미인가요? 원시 타입이랑 무엇이 다른가요?
* 깊은 복사를 하기위해서는 어떻게 하면 되는가?
* 똑같은 내용의 객체를 서로 다른 변수로 선언한 뒤 비교 연산자로 비교하면 true? false?

```js
let a = {};
let b = {};
alert( a == b ); // 결과는?
```

* 리액트에서 중첩된 객체를 복사할 때 사용하는 라이브러리는 무엇이 있을까요?
* `Object.assign`을 활용하여 객체를 복사하는 코드를 작성해본다면?

```js
const array1 = [1,2,3];
const arrayCopy = array1;
1) array1 === arrayCopy ?
arrayCopy.push(4);
2) array1's values
arrayCopy = [...arrayCopy];
3) arrayCopy's values

const date = new Date();
const date2 = date;
date.setHours(10);
4) date.getHours()
5) date2.getHours()

// 각 답을 말하시오.(5문제)
```

## 4.3 가비지 컬렉션

* 도달가능성이란 무엇인가요?
* 가비지 컬렉션을 더 빠르게 하는 최적화 기법은 무엇이 있는가?
* 가비지 컬렉션은 개발자가 제어할 수 있다? 없다?
* (이 파트는 제가 아직 이해를 못해서 질문은 못만들겠어요ㅠ)
* 가비지 컬렉션은 어떤 기준으로 메모리를 관리하나요?
* (상상해본다면?!) 우리가 선언한 것들 (원시값, 객체, 함수) 중 몇 퍼센트는 계속 유지되고 몇 퍼센트가 가비지 컬렉션이 될까?
* 전역 객체의 변수와 전역 변수의 차이는 무엇인가요?

## 4.4 메서드와 'this'

* this를 사용할 때 주의할 점은 무엇인가요?
* 화살표 함수가 유용한 경우는 언제인가?
* 화살표 함수에서의 this는 무엇을 의미할까?
* 메서드 내부에서의 this 와 화살표 함수 내부에서의 this의 차이는?
* this의 과제 첫번째 문제가 이해되지 않습니다 ㅠ
* `this` 사용시, 화살표함수를 쓰면 좋은 경우를 설명해보기
* 1) 엄격모드일 때, this와 아닐 때 this는 어떻게 바인딩 되는가요? 2) 함수와 메서드의 차이가 무엇일까요?

## 4.5 'new' 연산자와 생성자 함수

* new로 실행한 함수로 그냥 실행한 함수가 동작이 어떻게 다른가요?
* 생성자함수의 관례
* 생성자 함수에서 기본으로 반환되는 값은?
* 생성자 함수의 2가지 관례는?
* 생성자 함수를 썼을 때 일어나는 일(알고리즘?)을 설명해본다면?
* 1) new 연산자를 사용하는 이유는 무엇일까요? 2) new 연산자를 이용하여 함수를 호출하면 어떤 동작을 하게 되나요?

## 4.6 옵셔널 체이닝 '?.'

* 옵셔넌 체이닝의 세가지 사용법에 대해 설명해주세요
* 옵셔널 체이닝은 왜 필요한가?
* 옵셔널 체이닝이 등장한 이유는?
* ?. 은 쓰기 뿐만 아니라 읽기나 삭제하기에는 사용할 수 있다. [O/X]
* 옵셔널 체이닝이 필요한 경우를 설명해본다면?
* 언제 사용하면 좋을까요?

## 4.7 심볼형

* 심볼형은 언제 사용하는가?
* Object.assign을 이용한 복사는 심볼형 데이터를 복사 한다? 안한다?
* 심볼은 문자형으로 자동 형 변환된다. [O/X]
* 숨김프로퍼티의 특징은?
* 1) 심볼형을 왜 사용할까요? 2) 동일한 심볼값을 만드는 방법과 전역 심볼을 만드는 방법은 무엇인가요?

## 4.8 객체를 원시형으로 변환하기

* hint의 세가지 종류는?
* alert 함수같이 문자열을 기대하는 연산을 수행할 때는(객체-문자형 변환), hint가 string이다. [O/X]
* 객체를 primitive type으로 변환할 때, hint가 될수 있는 세 가지를 나열해본다면?

```js
let obj = {
    toString() {
        return "3";
    }
};

console.log(obj + obj * obj + 2);
// 의 값은 무엇이 나올까요?
```

## 5.1 원시값의 메서드

* 원시값과 객체의 차이는 무엇인가요?
* 원시값이 객체처럼 사용되는 과정
* 원시형에 프로퍼티를 추가했을 때 엄격모드 / 비 엄격모드의 차이점
* 자바스크립트의 원시형 타입 7가지는?
* 1) 원시값 무엇이 있는지 말해주세요. 2) 원시값의 메서드가 객체의 메서드보다 좋을 땐 언제일까요?

## 5.2 숫자형

* 왜 0.1 + 0.2 는 0.3이 아니라 0.3000000000004 일까요?
* n진법 문자형으로 변환하는 메서드
* object.is 와 ===의 차이
* 정밀도 손실 개념을 설명해주세요
* isFinite(' ') 의 결과값은?
* isFinite('') 의 결과값은?

## 5.3 문자열

* Single quotes 나 Double quotes대신에 Back tick( ` )을 쓰면 좋은 경우가 어떤 경우가 * 있을까요?
* 특정 언어에 적합한 비교 기준 사용해 문자열을 비교하려면 어떤 메서드를 써야 하는가?
* substring, substr 차이
* 백틱을 이용한 문자열의 특징 두가지를 설명해주세요
* 문자열의 특정 위치를 접근할 때, [] 로 접근하는 방법과 charAt() 을 사용하여 접근하는 방법이 있습니다. 만약 찾고자하는 자리가 없는 자리일 경우 각각 무엇을 반환할까요?

## 5.4 배열

* 객체로도 똑같이 동작하게 만들 수 있지만 배열을 써야하는 이유는 무엇일까요?
* 배열을 복사하게 되면 shallow copy가 되는가 deep copy가 되는가?
* 배열을 객체처럼 쓰지 말아야하는 이유
* 자바스크립트에서 배열 요소는 같은 자료형만 허용한다? 아니다?
* 배열은 특별한 종류의 객체이다? O , X

## 5.5 배열과 메서드

```js
let arr = [ 1, 2, 15 ];
arr.sort();

// 의 결과가 1, 15, 2인 이유는 무엇인가요?
```
* forEach 내부 함수에서 첫번째, 두번째, 세번째 매개변수가 각각 무슨 역할을 하는가?
* includes와 indexOf/lastIndexOf의 차이
* 기존 배열을 변형시키는 배열 메서드를 하나만 설명해주세요
* slice는 새로운 배열을 반환하나요? O, X
* 객체와 배열을 typeof 로 비교할 경우 둘다 객체로 나옵니다. 그럼 어떻게 구분할 수 있을까요?

## 5.6 iterable 객체

* iterable 객체란 무엇인가요?
* iterable은 무엇인가?
* iterable 객체와 유사배열의 차이
* 문자열을 배열로 만들 수 있는 방법 중 split() 을 이용한 방법 말고 또 뭐가 있을까요?

## 5.7 맵과 셋

* 객체와 맵의 차이는 무엇인가요?
* 셋은 언제 사용되나요?
* 맵과 객체의 차이점
* 맵과 셋의 차이
* 일반 객체와 맵의 차이점은?
* 맵의 키로 객체를 키로 사용할 수 있나요?

## 5.8 위크맵과 위크셋

* 위크맵과 위크셋을 어디에 활용할 수 있을까요?
* 맵과 위크맵, 셋과 위크셋의 차이점
* 순환참조 안되는이유
* 위크맵, 위크셋은 구성 요소 전체를 대상으로 하는 메서드를 지원한다? 안한다?
* 위크맵과 맵의 차이점은 무엇일까요?

5.9 Object.keys, values, entries

* Object.keys, values, entries 각각 무슨 일을 하는지 설명해주세요
* Object의 메서드인 keys, value, entries에 대해서 설명
* 해당 메소드들을 적용할 수 있는 자료구조의 종류
* 객체에 배열 전용 메서드를 적용하는 방법은?
* map.keys 와 Object.keys // 즉, 맵과 객체의 반환값 차이는 뭘까요?

## 5.10 구조 분해 할당

* 디스트럭처링을 이용해서 함수에 객체를 전달할 때, 그냥 변수를 펼쳐서 전달하는 것과 객체로 전달했을 때 * 어떤 장점이 있을까요?
* 기본값을 사용해도 괜찮을 경우 인자로 무엇을 넘겨주면 되는가?
* 함수 매개변수를 구조 분해할 때 기본값을 설정해주는 두가지 방법은?
* [guest, admin] = [admin, guest] 는 뭘 하는건가요?

5.11 Date 객체와 날짜

* YYYY-MM-DDTHH:mm:ss.sssZ 각 문자열이 무엇을 나타내는지 설명해주세요
* Date 객체에 자동고침이란?
* Date 객체를 만들지 않고도 시차를 측정할 방법과 장점
* Date 객체에서 날짜나 시간만 따로 저장하는 것은 가능하다? 불가능하다?
* getDay() 의 0 은 뭘 나타낸걸까요?
* 전날을 알고 싶을 경우 어떻게 하면 될까요?

## 5.12 JSON과 메서드

* JSON.parse의 reviver는 무엇인가요? 언제 사용하나요?
* JSON.stringify(value[, replacer, space]) 에서 replacer의 용도
* JSON.stringify를 사용할 때 주의하셔야 할 점
* reviver 개념에 대해 설명해주세요
* JSON.stringify() 를 이용하여 문자열로 변하는 메서드를 사용했을 때, 무시되는 프로퍼티 3가지가 무엇이 있을까요?

## 6.1 재귀와 스택

* 재귀 호출이 어떻게 동작하는지 내부 동작 설명
* 실행 컨텍스트란?
* 재귀적 자료 구조의 예시를 들어주세요
* 재귀의 장점은 무엇입니까!!!ㅣ

## 6.2 나머지 매개변수와 전개 문법

* 나머지 매개변수가 중간에 있어도 상관 없는가?
* arguments의 특징, arguments로 배열 메소드를 사용하기 위한 방법
* 나머지 매개변수와 전개 문법의 사용 패턴에 대해 설명해주세요
* 전개 문법은 어떤 객체에만 사용할 수 있나요?

## 6.3 변수의 유효범위와 클로저

* 클로저란 무엇인가?
* 클로저란?
* 클로저에 대해 설명해주세요
* 클로저란 무엇인가요?

## 6.4 오래된 'var'

* 호이스팅이란?
* 즉시 실행 함수 표현식를 사용했던 이유
* var를 권장하지 않는 이유는?
* var 키워드를 이용할 경우 일어나는 현상은 무엇이 있을까요?

## 6.5 전역 객체

* 표준화 시도를 하고있는 전역 객체 이름은?
* 모던 자바스크립트에서 전역변수를 사용할때 권장되는 방식
* 전역 객체를 가급적 사용하지 않는 이유는?
* 전역 객체의 보편적인 이름은 무엇일까요? 표준 스펙이도 들어있습니다.
* 전역 변수는 다른 곳에서도 자유롭게 쓸 수 있게 하기 위해서 자주 사용하는게 좋다 O, X

## 6.6 객체로서의 함수와 기명 함수 표현식

* 기명 함수 표현식은 어떨 때 유용한가?
* 자바스크립트의 다형성을 구현하는 방법
* 기명 함수 표현식 사용 이유
* 함수 표현식에 이름을 붙이면 유리한 점은?

## 6.7 'new Function' 문법

* new Function으로 정의한 함수는 어떤 장점이 있는가?
* new Function을 이용해 만든 함수와 일반 함수의 차이점
* new Function 문법으로 함수 생성시 특징은?
* 기존에 사용하던 방법과 new Function을 사용해 함수를 만드는 방법의 가장 큰 차이는 뭘까요?

## 6.8 setTimeout과 setInterval을 이용한 호출 스케줄링

* setTimeout과 setInterval의 차이점
* 중첩 setTimeout이 setInterval에 비해 가지는 장점
* 스케줄링 메서드에 명시된 시간이 보장되지 않는 경우 세가지는?
* 중첩 setTimeout과 setInterval 을 이용하여 1초마다 작업을 수행한다고 했을 때, 차이점은 무엇일까요?

## 6.9 call/apply와 데코레이터, 포워딩

* call과 apply 메서드는 무슨 일을 하는가?
* 데코레이터 함수란?
* 데코레이터가 무엇일까요?

## 6.10 함수 바인딩

* 메서드를 콜백으로 전달할 때 ’this 정보가 사라지는’ 문제를 어떻게 해결 할 수 있는가?
* 메서드를 전달할 때, 컨텍스트도 제대로 유지하려면 어떻게 해야 할까요?
* 함수의 컨텍스트를 고정해서 넘길 때 사용하는 방법 두가지는?

```js
function sayHi() { alert(this.name); }
sayHi.test = 5;

let bound = sayHi.bind({ name: '윤석님!' });

alert(bound.test);

// 의 값과 이유를 알려주세요.
```

## 6.11 화살표 함수 다시 살펴보기

* 화살표 함수는 어떤 경우 사용하면 유용한가?
* 화살표 함수가 일반 함수와 다른 점은?
* 화살표 함수에는 일반 함수와 달리 무엇과 무엇이 없을까요?

## 7.1 프로퍼티 플래그와 설명자

* 객체의 프로퍼티 플래그인 writable, enumerable, configurable이 각각 무엇인지 설명해주세요
* 프로퍼티 전체를 대상으로 하는 제약사항을 만드는 메서드은 무엇이 있는가?
* 평범한 방식으로 객체를 생성했을 때, 프로퍼티 플래그들의 값은?
* (데이터) 프로퍼티의 플래그에는 어떤 것들이 있으며, 각각은 어떤 정보들을 저장하나요?
* 객체 프로퍼티 플래그 3가지를 말하시오

## 7.2 프로퍼티 getter와 setter

* 프로퍼티 setter는 매개변수를 몇개를 받을 수 있나요?
* 접근자 프로퍼티가 도움이 되는 상황은 언제인가?
* getter, setter를 활용하면 편리한 점을 설명해주세요
* 접근자 프로퍼티 (accessor property)의 설명자에는 어떤 것들이 있나요?
* 객체 프로퍼티는 무엇과 무엇으로 나눠질까요?

## 8.1 프로토타입 상속

* object에서 프로퍼티를 읽으려고 하는데 해당 프로퍼티가 없으면 자바스크립트는 어떻게 동작하나요?
* __proto__는 표준인가?
* 상속 관계인 'solarSystem', 'mars' 에서 mars.foo를 호출하면 this는 어떤 객체를 나타낼까?
* setter안에 있는 this에는 어떤 객체가 바인딩 될까요?
* __proto__ 는 [[Prototype]]의 무엇이자 무엇일까요?

## 8.2 함수의 prototype 프로퍼티

* new F()를 이용해서 새로운 객체를 만들었을 때 F.prototype은 어떤 역할을 하나요?
* prototype 체인 상에서 중복된 메서드가 있을 때, 메서드를 호출하면 어떤 메서드가 실행되나요?
* 함수가 정의될 때 발생하는 2가지 상황
* Earth.prototype = solarSystem은 어떤 의미인지 설명해주세요
* F.prototype의 값은 객체나 null만 가능하다 아니다 (OX)

```js
function User(name) {
this.name = name;
}
User.prototype = {};

let user = new User('hi');
let user2 = new user.constructor('wow');

console.log(user2.name); // ??
console.log(user2); // ??
```

## 8.3 네이티브 프로토타입

* prototype을 이용해서 폴리필을 추가하는 방법에 대해서 설명해주세요
* 내장 객체의 메서드는 어디에 저장되는가?
* 모든 내장 객체는 Object.prototype을 상속 받는다? 안받는다?
* 체인 상의 프로토타입엔 중복 메서드가 있을 수 있다. 이렇게 중복 메서드가 있을 때는 어떻게 하는가요?
* 무엇과 무엇은 레퍼 객체가 없나요?

## 8.4 프로토타입 메서드와 __proto__가 없는 객체

* Object.create의 descriptors의 역할
* 기존 객체의 [[Prototype]]을 변경하면 성능이 저하되는 이유는?
* `Object.create(proto, [descriptors])`의 역할은 무엇인가요?
* __ proto __ 가 왜 나쁠까요? 간단하게 말해보기

## 9.1 클래스와 기본 문법

* 클래스가 단순한 편의 문법이 아닌 이유는 무엇인가요?
* 자바스크립트의 객체는 클래스 기반인가?
* 자바스크립트에서 클래스의 타입은 무엇으로 표시되나?
* 순수 함수로 클래스 역할을 하는 함수를 선언하는 방법과 비교했을 때, class 키워드를 사용하는 방법이 가진 차이는 무엇인가요?
* 일반 함수와 클래스 키워드를 사용하여 new 했을 때 차이점은?

## 9.2 클래스 상속

* 부모 클래스 생성자에서 오버라이드 할 수 있는 메서드를 호출하면 안되는 이유는 무엇인가요?
* 상속이란 무엇인가?
* 화살표 함수는 this나 super를 갖는다? 안갖는다?
* 화살표 함수에는 super를 사용할 수 있다 or 없다 (OX)
* 클래스 상속에서 화살표함수와 일반 함수의 차이점이 있을까요?

## 9.3 정적 메서드와 정적 프로퍼티

* 정적 메서드는 언제 사용하나요?
* 정적 메서드가 필요한 상황은 언제인가?
* 정적 프토퍼티는 데이터를 클래스 수준에 저장하고 싶을 때 사용한다(T/F)
* 정적 메서드는 언제 사용할까요?
* 클래스에서 상속을 받지 않았을 때, 무엇을 암묵적으로 상속받나요?

## 9.4 private, protected 프로퍼티와 메서드

* 객체 지향 프로그래밍에서 내부 인터페이스(internal interface)와 외부 인터페이스(external * interface)는 각각 무엇을 의미하나요? 이걸 구분해서 얻는 장점은 무엇인가요?
* 캡슐화의 장점이 무엇인가?
* 캡슐화의 이점에 대해 설명해주세요
* 왜 캡슐화를 해야하나요?
* protected의 표기 방법과 private 의 표기 방법은 무엇일까요?

## 9.5 내장 클래스 확장하기

* 내장 객체 간의 상속과 extends를 사용한 상속의 차이는 무엇인가요?
* 내장 객체 상속과 extends를 사용한 상속의 차이점
* 내장 클래스는 정적클래스를 상속받을수 있다(T/F)
* 내장 클래스의 종류 2가지 말해볼까요?
* 내장클래스는 정적 메서드를 상속 받을 수 없나요?

## 9.6 'instanceof'로 클래스 확인하기

* obj instanceof Class는 어떻게 동작하나요?
* porlimorphic 함수란 무엇인가?
* instanceOf는 상속관계도 확인시켜 준다(T/F)
* instanceof 의 쓰임은?

```
class A extend B {}

console.log(A instanceOf B);
console.log(A instanceOf A);
// 각각 결과값은? 더 나아가서 왜 그런지?
```

## 9.7 믹스인

* 다중 상속을 허용하지 않는 자바스크립트에서 믹스인은 어떤 역할을 하나요?
* 믹스인이란 무엇이고 왜 필요한가?
* 믹스인 개념에 대해 설명해주세요
* 믹스인이란 무엇이며 어떤 용도로 사용되나요?

## 10.1 'try..catch'와 에러 핸들링

* try, catch, finally 가 어떻게 동작하는지 설명해주세요.
* try..catch...finally 구조의 동작 흐름에 대해 설명하시오
* 에러객체의 주요 프로퍼티 두 가지는?
* try catch 는 컴파일 타임에 동작한다. O,X

## 10.2 커스텀 에러와 에러 확장

* 에러 감싸기를 사용하는 이유는 무엇인가요? 어떤 장점이 있나요?
* 모든 에러를 포함할 수 있는 추상 에러를 하나 만들어서 해당 추상 에러를 던지고, 구체적인 에러 정보는 추상 에러의 프로퍼티로 넘기는 객체지향프로그래밍의 에러 핸들링 기법 중 하나인 이것은 무엇일까요?
* 커스텀 에러와 에러 확장이 필요한 이유는 무엇일까요?

## 11.1 콜백

* 콜백헬이 무엇이고 언제 발생하는지 설명해주세요.
* 중첩 콜백이 안좋은 이유
* '콜백 기반(callback-based)' 비동기 프로그래밍이 무엇인지, 콜백 지옥은 무엇인지 설명해주세요.
* 콜백 기반 비동기 처리의 문제점은 무엇일까요?

## 11.2 프라미스

* 프라미스의 3가지 상태에 대해서 설명해주세요.
* callback 기반 코드보다 Promise 를 사용한 코드가 나은 점은?
* Promise가 처리 되었을 때(settled), 성공/에러 케이스에 대하여 각각 state과 result가 어떻게 될까요?
* 콜백과 프라미스의 차별점

## 11.3 프라미스 체이닝

* 프라미스 체이닝이란 무엇인지 설명해주세요
* 프라미스 체이닝을 언제 사용하는지, 어떻게 사용하는지 설명해주세요.
* 프라미스 하나에 then() 메서드를 여러 개 연결하면 이를 프라미스 체이닝이라고 하나요?

## 11.4 프라미스와 에러 핸들링

* 프라미스에서 에러를 어떻게 핸들링 하는지 설명해주세요
* .catch 는 프라미스에서 발생한 모든 에러를 다룹니다. [O/X]
* 브라우저 환경에서 전역에러에 대하여 처리하는 이벤트는 무엇일까요?
* 암시적 try...catch가 뭔가요?

## 11.5 프라미스 API

* 프라미스의 정적 메서드 5가지를 나열하고 각각에 대해서 설명해주세요
* Promise.all과 Promise.allSettled 차이
* `Promise.all`은 언제 사용하나요?
* Promise 정적 메서드 5가지를 말하고 그 중 3개의 요청 중 하나가 실패해도 결과를 받아 볼 수 있는 API는 뭔가요?

## 11.6 프라미스화

* 콜백으로 구현된 코드를 어떻게 프라미스로 만들 수 있는지 설명해주세요
* 프로미스화는 콜백을 여러번 호출하는 함수에 적용하기 적합하다 [O/X]
* 프라미스화(promisification)란 무엇인지 설명해주세요.

## 11.7 마이크로태스크

* 마이크로태스크 큐란 무엇인지 설명해주세요
* 어떤 코드 조각을 .then/catch/finally가 호출된 이후에 실행하고 싶다면 [______]을 체인에 추가하고 이 안에 코드 조각을 넣으면 된다.
* .then/catch/finally 핸들러는 항상 현재 코드가 종료되고 난 후에 호출됩니다. 어떤 코드 조각을 .then/catch/finally가 호출된 이후에 실행하고 싶다면 어떻게 해야할까요?
* 마이크로태스크 큐에 오류 발생시 프로미스 작업이 없으면 어떤 이벤트를 호출하나요?

## 11.8 async와 await

* async await의 사용법에 대해서 설명해주세요
* function 앞에 async 키워드를 앞에 추가할 경우의 효과 2가지
* `async` 함수를 사용할 때의 두 가지 효과는 무엇일까요?
* async를 붙이면 해당 함수는 항상 프로미스를 반환하나요? O,X

## 12.1 제너레이터

* 제너레이터가 반환하는 값에는 어떤 의미가 있나요?
* async await을 babel로 뜯어보면 제네레이터로 만들어져 있는가?
* 제너레이터의 특성 두가지를 설명해주세요
* 제너레이터는 웹 개발에서 언제 유용할까요?
* 제너레이터를 쓰면 이점은 무엇일까요

## 12.2 async 이터레이터와 제너레이터

* 일반 제너레이터와 async 제너레이터의 사용 방법의 차이를 설명해 주세요.
* async 제네레이터의 유스케이스는 어떤 경우가 있을까?
* 비동기식 제너레이터와 동기식 제너레이터의 차이를 설명해주세요
* async 제너레이터 언제 사용할까요?
* 이터레이터와 async 이터레이터의 차이는?
* 비동기는 Symbol.iterator 대신, 무엇을 써야할까

## 13.1 모듈 소개

* 일반 스크립트에서 this는 전역 객체를 가리키는 것과 다르게 모듈에서 this는 무엇을 가리키나요?
* html script에서 모듈을 사용하려면 type 프로퍼티에 attribute로 무엇을 사용해야 하는가?
* 모듈 최상위 레벨의 this는 전역객체다?아니다?
* 일반 스크립트와 모듈의 차이점은 무엇일까요? (아는만큼만!)
* webpack 과 같은 빌드 툴의 역할은 무엇이 있을까요?
* const react = require('react') 는 어떤 모듈을 사용한 것일까요?

## 13.2 모듈 내보내고 가져오기

* import * 를 사용하면 한꺼번에 import를 할 수 있지만 각각 하나씩 명시해주는게 더 좋은 이유는 무엇인가요?
* 이름을 바꿔서 모듈을 가져오는 방법은?
* import/export문은 블록{} 내부에서 동작한다?안한다?
* named export와 default export 차이점은 무엇일까요? (아는만큼만!)
* 모듈에서 무언가를 가져오고 싶을 때, `import * as <obj>`를 써서 통째로 가져오기 보다는 `import {...}` 를 사용해서 가져올 대상을 명시하는 것이 좋습니다. 왜그럴까요?
* import {default as User, sayHi} from './user.js'; 가 무엇을 의미하나요

## 13.3 동적으로 모듈 가져오기

* 동적으로 모듈을 불러오려면 어떻게 해야되는지 설명해 주세요
* import() 표현식을 사용할 때 변수를 복사하거나 call/apply를 사용하는것이 가능한가?
* import()는 함수 호출이다?아니다?
* 동적으로 모듈 가져오기 위해 사용하는 방법은 무엇인가요?
* `import`를 사용하여 모듈을 동적으로 가져올 수 있을까요? 동적으로 가져오려면 어떻게 해야할까요?
* import 반환값으로 프로미스를 반환하나요?

## 14.1 Proxy와 Reflect

* Proxy의 정의에 대해서 설명해 주세요.
* proxy의 target과 handler는 각각 무엇인가?
* proxy의 역할은 무엇이며, proxy의 trap이란 무엇인가요?
* Proxy가 무엇이고, Reflect가 무엇인지 간략하게 소개하시오

## 14.2 Eval: 문자열 코드 실행하기

* eval 사용하지 않는 대신 어떤 대안이 있나요?
* eval을 모던 프로그래밍에서 사용하지 않는 이유는?
* eval을 사용하면 좋지 않은 점은?
* eval이 가진 문제점은 무엇인가요?
* 과거에 `eval`을 사용했던 이유는 무엇이며, 왜 이제는 사용하지 않도록 권장하는걸까요?
* Eval is evil 인정하나여?

## 14.3 커링

* 커링의 정의에 대해 설명해 주세요.
* 커링은 무엇인가?
* 커링에 대해 설명해주세요
* 커링 언제 쓸까요? (제가 궁금해서 질문합니다ㅠ)
* 커링이란 무엇이며, 함수를 커링한 경우 어떤 장점이 있을까요?
* 커링은 무엇이고 언제 사용하나요? 어디에서 쓰이는지 말해볼까요

## 14.4 참조 타입

* 참조 타입이란 무엇인가요?
* 참조 타입은 어떨떄 사용하여야 하는가?
* 참조 타입이 왜 필요한가? 또는 언제 사용되나? (제가 궁금해서 질문합니다ㅠ)
* 자바스크립트의 "참조 타입"이란 무엇인가요?
* 점 연산자 또는 대괄호 연산자로 이어진 함수를 호출 할 때, 참조 타입 반환값을 반환하는데 참조 타입은 무엇을 담고 있나요

## 14.5 Bigint

* BigInt타입이 일반 Number타입과 다르게 동작하는 부분을 설명해주세요.
* BigInt는 길이의 제약이 있는가?
* 빅인트는 길이 제약이 있다?없다?
* 순수 bigint 의 대안으로 제시되는 라이브러리는?
* BigInt란 무엇인지 설명하고, BitInt의 연산의 결과는 어떤 타입인지 말해주세요.
* Bigint 는 1n +1 값이 어떻게 되나요?

# 파트 2

## 1.1 브라우저 환경과 다양한 명세서

* 브라우저 환경에서 window 객체의 2가지 역할에대해서 설명해주세요
* BOM은 무엇인가?
* 자바스크립트의 호스트 환경이 웹브라우저인 경우, `window` 객체의 역할 두 가지는?

## 1.2 DOM 트리

* DOM 트리는 무엇으로 이루어져 있나요?
* 총 12가지의 노드 타입 중 실무에서 주로 다루는 4가지 노드는 무엇인가?
* 12가지 노드 타입 중 네 가지 이상을 나열해보세요.

## 1.3 DOM 탐색하기

* DOM의 자식 노드들을 탐색할 때 childNodes와 children의 차이를 설명해주세요
* DOM 컬렉션을 통해 자식노드를 교체할 수 있는가?
* 해당 요소의 자식 노드 중 element 노드 컬렉션만을 가져오고 싶을 때는, 어떤 프로퍼티를 사용해야 할까요?

## 1.4 getElement*, querySelector*로 요소 검색하기

* getElementBy로 시작하는 모든 메서드는 살아있는 컬렉션을 반환합니다. 살아있는 컬렉션이란 무엇을 의마하나요?
* getElement*, querySelector* 는 각각 무엇을 기준으로 요소들을 검색하는가?
* `querySelectorAll`의 검색기준은 무엇이며, 반환된 컬렉션은 갱신 가능한지 이야기해주세요.

## 1.5 주요 노드 프로퍼티

* 특정 요쇼 내의 텍스트만 가져오려면 어떤 속성을 사용해야 하나요?
* HTML에서 모든 <태그>를 제외한 텍스트만 읽을 때 무슨 DOM 노드 프로퍼티를 사용하는가?
* `innerHTML`과 `textContent`에 어떤 문자열을 할당한다고 할 때, 둘의 차이는 무엇일까요?

## 1.6 속성과 프로퍼티

* 비표준 속성인 dataset이 만들어진 배경에 대해서 설명해주세요.
* DOM 프로퍼티는 직접 만들 수 있는가?
* DOM property와 HTML attribute의 차이를 설명하고 둘의 관계를 설명해주세요.

## 1.7 문서 수정하기

* DOM 요소에 텍스트를 삽입하는 3가지 방법을 설명해주세요
* 노드를 삽입하거나 삭제하려면 가각 무엇을 사용해야 하는가?
* element node를 생성하기 위한 단계를 설명하고, 여기서 쓰이는 DOM 프로퍼티 혹은 메서드가 무엇인지 말해주세요.

## 1.8 스타일과 클래스

* DOM 객체의 클래스 목록을 가져오는 방법에 대해서 설명해주세요.
* 클래스를 하나만 추가하거나 제거하고 싶을 때 사용하는 프로퍼티와 메서드는 무엇인가?
* DOM property를 활용하여 element의 style을 변경하는 방법 두 가지를 이야기 해주세요.

## 1.9 요소 사이즈와 스크롤

* content width는 스크롤의 길이를 포함한 길이일까요? 아니면 포함하지 않은 길이일까요?
* 스크롤을 움직이기 위한 프로퍼티 2개는 각각 무엇인가?
* `getComputedStyle`이 아닌 기하 프로퍼티를 사용해서 너비와 높이 정보를 얻어야하는 이유는 무엇일까요?

## 1.10 Window sizes and scrolling

* window.innerWidth/Height 대신에 documentElement.clinetHeight/Width를 사용해야 하는 이유는 무엇인가요?
* 현재 스크롤 위치를 파악하기 위한 프로퍼티는 무엇인가?
* `document.documentElement.clientWidth/clientHeight`을 통해 얻는 너비/높이값과 `window.innerWidth/Height`을 통해 얻는 너비/높이값의 차이는?

## 1.11 Coordinates

* Relative to the window와 Relative to the document에 대해서 설명해주세요
* document.elementFromPoint(x, y)가 무슨 역할을 하는가?
* clientX/clientY와 pageX/pageY의 차이는 무엇인가요?

## 2.1 브라우저 이벤트 소개

* 이벤트 핸들러를 등록할 수 있는 3가지 방법에 대해서 설명해주세요

## 2.2 버블링과 캡처링

* DOM 이벤트 흐름에는 3가지 단계가 있는데 각 단계가 무엇을 의미하는지 설명해 주세요
* 버블링의 원리가 무어신가?
* 이벤트 버블링이 무엇인지 설명해주세요.

## 2.3 이벤트 위임

* 이벤트 핸들링 패턴인 이벤트 위임에 대해서 설명해 주세요
* 이벤트 위임은 어떤 알고리즘으로 동작하는가?
* 이벤트 위임이 무엇인지 설명하고, 이벤트 위임을 사용할 때의 장점을 이야기해주세요.

## 2.4 브라우저 기본 동작

* 브라우저의 기본 동작을 막을 수 있는 두 가지 방법에 대해서 설명해 주세요
* 브라우저의 기본 동작을 취소할 수 있는 두가지의 방법은 각각 무엇인가?
* event.preventDefault()의 역할은 무엇이며, React에서 event.preventDefault()를 사용해야하는 때의 예시를 한가지 설명해주세요.

## 2.5 커스텀 이벤트 디스패치

* 커스텀 이벤트를 만드는 방법에 대해서 설명해 주세요
* 커스텀 이벤트는 어떨 때 주로 사용하는가?
* 커스텀 이벤트를 만들때 사용해야하는 생성자는 무엇이며, 해당 생성자의 detail 프로퍼티는 어떤 역할을 할까요?

## 3.1 마우스 이벤트

* MacOS에서 Ctrl 대신 Cmd키를 사용해야 하는 이유는 무엇인가요?
* 복사를 막기 위해서는 어떻게 해야하는가?
* 마우스 이벤트 객체 안에는 마우스가 아닌 장치의 입력 여부도 알 수 있다(T/F)
* `ondblclick`을 활용하여 글자 위에서 마우스 더블클릭에 대한 이벤트를 처리할 때, 더블클릭한 텍스트도 선택되는 부수효과가 일어납니다. 이를 방지하기 위해서는 어떻게 해야할까요?

## 3.2 Moving the mouse: mouseover/out, mouseenter/leave

* 마우스 이벤트들에 대해서 언제 발생하는지 설명해주세요
* mouseenter/mouseleave와 mouseover/mouseout의 차이점 두가지
* mouseover/out 그리고 mouseenter/leave 이벤트 간의 차이점을 버블링과 연관지어 설명해주세요
* mouse over/out과 mouseenter/leave의 차이는?

## 3.3 Drag'n'Drop with mouse events

* Drag n Drop으로 순서를 정렬하는 프로그램을 작성해보세요
* Drang'n'Drop의 플로우를 설명하라
* 드래그앤드롭 알고리즘의 이벤트 흐름을 설명해주세요
* 드래그앤드랍을 구현하는 알고리즘을 설명해주세요.

## 3.4 Pointer events

* mouse event대신 point event를 써야하는 이유는 무엇인가요?
* 포인터 이벤트의 프로퍼티는 무엇이 있는가?
* 마우스 이벤트에는 없는 포인터 이벤트의 추가 기능은?
* 포인터 이벤트가 나오게된 배경은? (왜 마우스이벤트가 아니라 포인터이벤트를 사용해야하나요?)

## 3.5 Keyboard: keydown and keyup

* event.key와 event.code가 무엇인지 설명해주세요.
* event.code와 event.key의 차이점
* 키보드 이벤트가 없는 키의 예시를 들어보고 이유를 설명해주세요
* 키보드 이벤트가 발생하지 않는 키는 무엇일까요?

## 3.6 Scrolling

* scroll 이벤트가 발생했을 때 event.preventDefault로 스크롤을 막을 수 없는 이유는 무엇인가요?
* scroll을 막는 방법은?
* onscroll 이벤트로 스크롤을 막을 수 없는 이유는?
* 스크롤을 막기 위하여 사용해야하는 메서드는 무엇이고, 사용할 때 주의해야할 점이 있다면?

## 4.1 폼 프로퍼티와 메서드

* form 객체에 접근하여 각 요소들을 어떻게 탐색할 수 있는지 설명해 주세요
* fieldset이란 무엇인가?
* 원하는 폼이나 폼 요소를 찾기위한 프로퍼티를 예시를 들어 설명해주세요
* form을 접근하는 방법 두 가지는?

## 4.2 Focusing: focus/blur

* 기본적으로 focus 할 수 없는 tag들은 무엇이 있고, focus할 수 있도록 하려면 무엇을 해야 하는지 설명해 주세요
* tabindex란 무엇인가?
* 현재 포커싱 되어 있는 요소를 사용하려면?
* focus, blur는 버블링하지 않습니다. 이 문제를 해결하기 위한 두 가지 해결책은 무엇이있을까요?

## 4.3 이벤트: change, input, cut, copy, paste

* change 이벤트와 input 이벤트의 차이에 대해서 설명해주세요
* change, input 이벤트의 차이
* 클립보드에 저장된 데이터를 읽고 쓰는 이벤트는?
* `onchange`와 `oninput` 이벤트의 차이는?

## 4.4 Forms: event and method submit

* submit 이벤트는 언제 발생하는지 설명해 주세요
* submit의 두가지 방법
* submit 이벤트의 취지에 대해 설명해주세요
* form을 제출하는 방법 두가지는?

## 5.1 DOMContentLoaded, load, beforeunload, unload 이벤트

* DOMContentLoaded, load, beforeunload, unload 이벤트가 각각 언제 발생되는지 설명해 주세요
* DOMContentLoaded, / load, / beforeunload, unload 각각 어떨 때 발생하는가?
* HTML 문서의 생명주기에 관여하는 세가지 주요 이벤트를 설명해 주세요
* HTML의 생명 주기에 관여하는 이벤트들이 어떤 것이 있는지 각 주기별로 나열해주세요.

## 5.2 defer, async 스크립트

* 페이지를 렌더링하는 것을 막지 않고 스크립트를 로딩하는 두 가지 방법을 소개하고, 차이를 설명해주세요.
* async 스크립트가 여러개일 경우 어떤순서로 실행되는가?
* defer, async의 공통점과 차이점을 설명해주세요
* script를 다운받을 때, 페이지 렌더링을 막지 않기 위한 방법 두가지가 무엇이 있는지, 그 두가지가 어떤 차이가 있는지 설명해주세요.

## 5.3 Resource loading: onload and onerror

* 외부리소스를 참조할 경우 onerror에서 상세한 에러 메세지를 볼 수 없는 이유는 무엇인가요?
* onload와 onerror는 각각 어떤경우인가?
* load, error 이벤트를 가지는 리소스의 종류를 열거해보세요.
* 외부리소스를 불러올 때, 성공적으로 불러왔는지 추적하는 메서드와 에러를 추적하는 메서드는?

## 6.1 Mutation observer

* MutationObserver로 어떤 일을 할 수 있는지 설명해 주세요
* MutationObserver은 무슨 역할을 하는가?
* Mutation observer 객체가 하는 일에 대해 설명해주세요.
* MutationObserver는 어떤 역할을 하며 어떤 상황에서 사용하면 좋을까요?

## 6.2 Selection and Range

* Selection객체와 Range객체에 대해서 설명해 주세요
* DOM node란 무엇인가
* document에서 특정부분을 selection 할 때 사용하는 오브젝트 두가지는?

## 6.3 이벤트 루프와 매크로·마이크로태스크

* 이벤트 루프 알고리즘에 대해서 설명해 주세요
* 작업 진척 상태를 보여주는 인디게이터를 어떻게 만들 수 있을까?
* 매크로 태스크와 마이크로 태스크의 스케줄링 방법을 설명해주세요
* 이벤트루프 알고리즘에 대해서 설명해주세요.

# 파트 3

## 1.1 Popups and window methods

* popup이 쓸모있는 경우는 어떤 경우인지 설명해 주세요
* 팝업의 사용 사례가 줄어든 이유와 현대에서도 쓰이는 사례와 이유를 설명 해주세요.
* 최근에는 팝업 윈도우를 잘 사용하지 않지만, OAuth를 사용할때는 팝업을 사용합니다. 이유가 무엇일까요?
* 팝업과 모달의 차이점이 무엇일까요

## 1.2 Cross-window communication

* Same Origin이라는 것은 무엇을 의미하나요?
* same origin 식별에 대해 설명해주세요.
* URL에서 "동일한 출처"에 해당하는 경우와 그렇지 않은 경우에 대해서 설명해주세요.
* Same Origin이란 무엇일까요

## 1.3 The clickjacking attack

* clickjacking attack이란 무엇이고 어떻게 대처해야 할까요?
* 클릭잭킹 공격에 대해 설명해주세요.
* 클릭재킹이란 무엇인지, 이를 방지하기 위한 방법은 어떤 것이 있는지 설명해주세요.
* 클릭재킹공격이 무엇일까요

## 2.1 ArrayBuffer, binary arrays

* Array에는 있지만 ArrayBuffer에는 없는 method 두 개는 무엇인가요?
* ArrayBuffer에 대해 설명해주세요.
* ArrayBuffer는 직접 수정하는 것이 불가능합니다. 어떻게 하면 버퍼의 내용을 읽거나 쓸 수 있을까요?
* ArrayBuffer 데이터를 조작하려면 어떻게 해야되는가요

## 2.2 텍스트 디코더와 텍스트 인코더

* new TextEncoder().encode('ABC') 의 결과는 무엇일까요?
* JS에서 텍스트 디코딩과 인코딩에 대해 설명해주세요
* TextDecoder란 어떤 역할을 하나요?
* 텍스트 디코더와 텍스트 인코더는 무엇인가요

## 2.3 Blob

* Blob이란 무엇이고 무엇으로 이루어져 있는지 설명해 주세요
* Blob과 binary object의 차이를 설명해주세요
* Blob의 내용을 보여주기 위하여 URL을 생성하기 위해서는 어떻게 해야할까요?
* Blob은 무엇과 무엇으로 구성되어있나요

## 2.4 File and FileReader

* 파일을 읽을 때 내가 읽을 파일에 따라 어떤 method를 적절하게 사용해야 할까요?
* File 객체와 Blob 객체의 관계를 설명해주세요.
* FileReader는 어떤 데이터 포맷을 읽을 수 있나요?
* FileReader 객체를 통해 무엇을 할 수 있나요?

## 3.1 fetch

* fetch 요청은 두 개의 부분으로 나누어져 있는데 각각 무엇인지 설명해 주세요
* fetch가 반환하는 응답을 어떤 형식으로 변환할 수 있는지 설명해주세요
* POST 요청의 요청 본문(body)에는 어떤 것들이 들어갈 수 있을까요?
* fetch는 무엇인가요

## 3.2 FormData

* FormData를 만들 때 같은 이름으로 여러개를 만들 수 있나요? 예를들어 formData.append(name, value)를 여러번 실행하면 어떻게 되나요?
* FormData 객체는 HTML 태그 없이도 CRUD를 지원한다(T/F)
* FormData의 append 메서드와 set메서드의 차이는?
* formData의 장점은 무엇인가요?

## 3.3 Fetch: Download progress

* 특정 파일을 다운로드 받을 때 진행사항을 표기하려면 어떻게 해야하나요?
* fetch 메서드로 다운로드 진행 과정을 알 수 있는 과정을 설명해주세요
* 요청에 대한 응답의 progress를 확인하기 위해서는 어떻게 해야할까요?
* Download progress을 어떻게 구현할 수 있나요

## 3.4 Fetch: Abort

* Promise는 중간에 중단이라는 개념이 없는데, fetch를 어떻게 중단할 수 있을까요?
* 비동기 작업에서 중단을 하기 위한 built-in 객체는?
* JavaScript의 promise에는 "중단"이라는 개념이 없습니다. promise와 같이 비동기적인 태스크를 중단시키기 위해서는 어떻게 해야할까요?
* fetch에서 AbortController를 사용하는 방법은?

## 3.5 fetch와 Cross-Origin 요청

* CORS 요청하는 과정을 설명해 주세요
* simple/non-simple request를 구분하는 이유는?
* Cross-Origin Request(크로스 오리진 요청)에서 simple 요청과 non-simple요청의 차이는?
* CORS는 무엇인가요?

## 3.6 Fetch API

* Fetch API의 keepalive 옵션은 언제 사용하나요?
* fetch API의 기능들을 생각나는대로 설명해 주세요
* fetch API의 옵션 중, referrerPolicy 옵션은 무엇을 나타내는지 설명해주세요.
* referrer, mode, credentials, cache, redirect, integrity, keepalive 를 간단하게 설명하시오

## 3.7 URL objects

* encodeURI와 encodeURIComponent 함수의 차이를 설명하고, 언제 사용해야 하는지 설명해 주세요
* 문자열 대신 URL 오브젝트를 사용할 때의 장점은 무엇이있을까요?
* URL 객체를 사용하는 이유와 장점은?

## 3.8 XMLHttpRequest

* fetch 메서드가 나왔음에도 사용되는 이유는?
* 왜 이제는 HTTP요청을 위하여 XML을 잘 쓰지 않을까요?
* XMLHttpRequest 보다 더 좋은 기술은 무엇이 있나요?

## 3.9 Resumable file upload

* 파일 업로드 일시중지/재진행 기능 원리를 설명해주세요.
* fetch 메서드는 파일을 업로드하기는 쉽지만, 연결이 유실된 후 업로드를 재개하는 기능을 제공해주지 않습니다. 무엇을 사용하면 이 문제를 해결할 수 있을까요?
* Resumable file upload 에서 나온 알고리즘 순서를 말해주세요

## 3.10 Long polling

* Long polling을 사용해 얻는 이점은 무엇인가요?
* 어떤 경우에 롱 폴링이 적합하지 않은가요?
* 롱폴링이란 무엇이고 어디에 사용하면 좋은가요?
* regular polling의 어떤 점을 개선 시켜 Long Polling이 나왔나요?

## 3.11 WebSocket

* websocket에서 다룰 수 있는 4가지 이벤트에 대해서 설명해 주세요
* 웹소켓에는 CORS 제약이 있다(T/F)
* WebSocket이 무엇이고 어떤 특징을 가지고 있는지 이야기해주세요.
* 웹 소켓이 무엇인가요

## 3.12 Server Sent Events

* EventSource와 Websocket은 무엇이 다른가요?
* 서버와 연결을 유지하고 이벤트를 받기위해 사용하는 객체는?
* WebSocket과 EventSource의 차이는 무엇일까요?
* EventSource 객체는 수동으로 영구 연결을 설정해줘야한다. (O,X)

## 4.1 쿠키와 document.cookie

* XSRF 공격이란 무엇이고 어떻게 방어할 수 있나요?
세션쿠키란 무엇인가요?

## 4.2 localStorage와 sessionStorage

* localStorage와 sessionStorage의 차이는?

## 4.3 IndexedDB

* localStorage와 비교했을 때 IndexedDB가 갖는 장점은?

## 5.1 베지어 곡선

* 베이어 곡선의 장점은?

## 5.2 CSS 애니메이션

* javascript과 비교했을 때 CSS로 애니메이션을 구현하는 것의 장점은?

## 5.3 JavaScript animations

* requestAnimationFrame의 역할은?

## 6.1 궤도의 높이에서

* 컴포넌트의 조건은?

## 6.2 Custom elements

* custom element를 등록하는 메서드는?

## 6.3 Shadow DOM

* Shadow DOM이란 무엇이며 언제 사용하는가?

## 6.4 Template element

* template 요소의 역할은 무엇이고, 사용하려면 어떻게 해야할까요?

## 6.5 Shadow DOM slots, composition

* custom element를 shadow DOM으로 옮겼을 때, CSS 스타일이 적용되지 않습니다. 이 문제를 어떻게 해결할까요?

## 6.6 Shadow DOM styling

* ShadowDOM 여부와 상관없이 CSS를 적용하고 싶은 경우 어떻게 해야할까?

## 6.7 Shadow DOM and events

* ShadowDOM의 경계를 넘어 이벤트가 버블링이 되도록 하기 위해서는 어떤 프로퍼티를 true로 만들어야할까?

## 7.1 패턴과 플래그

* 다음코드의 출력 결과는?

```js
console.log("He was, She was, We were".replace(/Was/gi, "is"));
```

## 7.2 문자 클래스

* 다음코드의 출력 결과는?
```js
console.log("Hi\nHello\nBye".match(/.Bye/g));
```

## 7.3 유니코드: 'u' 플래그와 \p{...} 클래스

* 다음코드의 출력 결과는?

```js
console.log("$3000 vs ₩3500000".match(/\p{Sc}/gu));
```

## 7.4 앵커: 문자열의 시작 ^과 끝 $

* 다음코드의 출력 결과는?

```js
console.log(/Friday$/.test("Hello It's Friday"));
```

## 7.5 앵커 ^와 $의 여러 행 모드, 'm' 플래그

* m 플래그는 언제 사용할까?

## 7.6 Word boundary: \b

* 다음코드의 출력 결과는?

```js
console.log("1, 23 4 53-1433".match(/\b\d\d\b/g));
```

## 7.6 Word boundary: \b

## 7.7 Escaping, special characters

* 다음코드의 출력 결과는?
```js
console.log("Hello *^^*".match(/\*\^\^\*/g));
```

## 7.8 Sets and ranges [...]

* 다음코드의 출력 결과는?
```js
console.log("A1 B3 C3 F9 Z9".match(/\b[^A-C1-3][^A-C1-3]\b/g));
```

## 7.9 Quantifiers +, *, ? and {n}

* 다음코드의 출력 결과는?

```js
console.log("1 12 123 1234 12345 123456".match(/\d{3,}/g));
```

## 7.10 Greedy and lazy quantifiers

* Regular expression에서 matching mode를 greedy가 아니라 lazy로 바꾸려면 어떤 연산자를 쓰면 될까요?

## 7.11 Capturing groups

* replace 메서드와 정규표현식을 사용하여 "Hello Hi"를 "Hi, Hello"로 만들어주세요.

## 7.12 Backreferences in pattern: \N and \k<name>

* 다음 코드의 출력 결과는?

```js
console.log(`She said, "Hello, I'm Lucy", and he said, "Bye"`.match(/(['"])(.*?)\1/g));
```

## 7.13 Alternation (OR) |

* 다음 코드의 출력 결과는?

```js
console.log("00:01 10:10 23:59 24:24 25:25 1:2 1:22".match(/([01]\d|2[0-3]):[0-5]\d/g));
```

## 7.14 Lookahead and lookbehind

* 다음 코드의 출력 결과는?

```js
console.log("카카오택시는 10000원 우버는 $20".match(/(?<=\$)\d+|\d+(?=원)/g));
```

## 7.15 Catastrophic backtracking

* 정규표현식의 역추적이란 무엇이고, 역추적을 방지하는 방법은?

## 7.16 Sticky flag "y", searching at position

* 다음 코드의 출력 결과는?

```js
let regexp = /\w+/y;
regexp.lastIndex = 6;
console.log(regexp.exec("hello hi bye"));
```

## 7.17 Methods of RegExp and String

* 다음 string을 split 메서드와 정규표현식을 활용하여, [12, 34, 56, 33] array로 만들어주세요

```js
const str = "12, 34,\n56, \n 33" ;
```

modern-javascript-exam

modern-javascript-exam 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

modern-javascript-exam

modern-javascript-exam 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README