- 디버깅을 할 줄 안다면 개발할 때 어떤 이점이 있을까요?
- 실행 추적에서 step, step over, step into, step out의 차이
- 브레이크포인트는 코드 작성할 때 잡아줄 수 있다? 없다?
- 중단점을 설정하기는 귀찮은데 해당 줄에서 실행을 재개하고 싶을 때 아주 유용한 옵션은?
- 디버깅을 유용하게 사용 해 본 사례가 있다면 공유 부탁드립니다. 전 안써봐서...
- Chrome 개발자 도구에서 자신이 사용하는 유용한 기능이 있다면?
- 여러분들은 디버깅 툴을 이용하는지, console.log로만 하고 있는지, 자바스크립트 도구 call stack 부분을 본적이 있는지요~
- 가독성이 좋고 이해하기 쉬운 코드를 만들려면 무엇을 해야할까요? 에러를 피하려면 어떻게 해야할까요?
- 정의한 함수의 끝에 세미콜론을 붙이는가?
- 호출부를 먼저 쓰고 헬퍼 함수를 나중에 두는 방식의 장점은?
- 문자열을 여러 줄로 쉽게 나눌 때, 어떤 걸 사용하면 좋을까요?
- 중첩레벨을 줄이는 자신만의 방법이 있다면?
- Linter를 왜 사용할까요?
- 좋은 주석이란 무엇인가요?
- 주석에 들어가면 좋지 않은 내용은 무엇인가?
- 좋은 주석과 나쁜 주석을 설명해주세요
- 주석에 들어가면 좋지 않은 내용에는 어떤게 있을까요?
- (책의 설명과 상관없이 자신이 생각했을 떄) 좋은 주석이란?
- 주석에 들어가면 좋은 내용 과 주석에 들어가면 좋지 않은 내용 예로 뭐가 있을까요?
- 유사한 뜻을 가진 단어 여러개를 같은걸 나타내는데 섞어서 사용하면 어떤 일이 발생하나요?
- 닌자코드를 작성해본 경험이 있는가?
- 닌자코드는 좋은 걸까요 나쁜 걸까요
- 닌자 코드 예시 중 가장 생각나는 예시는?
- 가장 찔렸던 구절이 있다면?
- 약어를 사용하여 코드의 양을 줄이면 좋은 방법인가요? O,X
- 테스트는 왜 해야할까요?
- BDD란 무엇인가?
- 테스트 자동화의 장점은?
- before와 beforeEach의 차이는?
- BDD와 TDD의 차이는?
- 테스트는 왜 할까요?
- 바벨의 역할은 무엇인가요?
- 폴리필은 어떨 때 사용하는가?
- js 엔진에 구현이 누락된 새로운 기능을 쓸수 있게 해주는 스크립트의 명칭은?
- 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔주는 역할을 하는 것은?
- babel과 polyfill의 차이는 무엇인가요 ?
- 폴리필과 트랜스파일러의 차이는?
- 바벨을 왜 사용할까요?
- 자료구조와 자료형
- 객체의 프로퍼티 이름에 제약사항이 있는가?
- const로 선언된 객체는 값을 변경할 수 있다? 없다?
- Object는 모든 프로퍼티에 대해서 객체가 추가한 순서 그대로 정렬된다.[O/X]
- 점 표기법과 대괄호 표기법의 가장 큰 차이점은 무엇일까요?
- 정수 프로퍼티를 사용할 때의 장단점은 무엇일까?
- 대괄호 표기법은 언제 사용하면 좋은가?(2가지)
- 참조에 의해 저장되고 복사된다는 것은 무슨 의미인가요? 원시 타입이랑 무엇이 다른가요?
- 깊은 복사를 하기위해서는 어떻게 하면 되는가?
- 똑같은 내용의 객체를 서로 다른 변수로 선언한 뒤 비교 연산자로 비교하면 true? false?
let a = {};
let b = {};
alert( a == b ); // 결과는?- 리액트에서 중첩된 객체를 복사할 때 사용하는 라이브러리는 무엇이 있을까요?
Object.assign을 활용하여 객체를 복사하는 코드를 작성해본다면?
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문제)- 도달가능성이란 무엇인가요?
- 가비지 컬렉션을 더 빠르게 하는 최적화 기법은 무엇이 있는가?
- 가비지 컬렉션은 개발자가 제어할 수 있다? 없다?
- (이 파트는 제가 아직 이해를 못해서 질문은 못만들겠어요ㅠ)
- 가비지 컬렉션은 어떤 기준으로 메모리를 관리하나요?
- (상상해본다면?!) 우리가 선언한 것들 (원시값, 객체, 함수) 중 몇 퍼센트는 계속 유지되고 몇 퍼센트가 가비지 컬렉션이 될까?
- 전역 객체의 변수와 전역 변수의 차이는 무엇인가요?
- this를 사용할 때 주의할 점은 무엇인가요?
- 화살표 함수가 유용한 경우는 언제인가?
- 화살표 함수에서의 this는 무엇을 의미할까?
- 메서드 내부에서의 this 와 화살표 함수 내부에서의 this의 차이는?
- this의 과제 첫번째 문제가 이해되지 않습니다 ㅠ
this사용시, 화살표함수를 쓰면 좋은 경우를 설명해보기-
- 엄격모드일 때, this와 아닐 때 this는 어떻게 바인딩 되는가요? 2) 함수와 메서드의 차이가 무엇일까요?
- new로 실행한 함수로 그냥 실행한 함수가 동작이 어떻게 다른가요?
- 생성자함수의 관례
- 생성자 함수에서 기본으로 반환되는 값은?
- 생성자 함수의 2가지 관례는?
- 생성자 함수를 썼을 때 일어나는 일(알고리즘?)을 설명해본다면?
-
- new 연산자를 사용하는 이유는 무엇일까요? 2) new 연산자를 이용하여 함수를 호출하면 어떤 동작을 하게 되나요?
- 옵셔넌 체이닝의 세가지 사용법에 대해 설명해주세요
- 옵셔널 체이닝은 왜 필요한가?
- 옵셔널 체이닝이 등장한 이유는?
- ?. 은 쓰기 뿐만 아니라 읽기나 삭제하기에는 사용할 수 있다. [O/X]
- 옵셔널 체이닝이 필요한 경우를 설명해본다면?
- 언제 사용하면 좋을까요?
- 심볼형은 언제 사용하는가?
- Object.assign을 이용한 복사는 심볼형 데이터를 복사 한다? 안한다?
- 심볼은 문자형으로 자동 형 변환된다. [O/X]
- 숨김프로퍼티의 특징은?
-
- 심볼형을 왜 사용할까요? 2) 동일한 심볼값을 만드는 방법과 전역 심볼을 만드는 방법은 무엇인가요?
- hint의 세가지 종류는?
- alert 함수같이 문자열을 기대하는 연산을 수행할 때는(객체-문자형 변환), hint가 string이다. [O/X]
- 객체를 primitive type으로 변환할 때, hint가 될수 있는 세 가지를 나열해본다면?
let obj = {
toString() {
return "3";
}
};
console.log(obj + obj * obj + 2);
// 의 값은 무엇이 나올까요?- 원시값과 객체의 차이는 무엇인가요?
- 원시값이 객체처럼 사용되는 과정
- 원시형에 프로퍼티를 추가했을 때 엄격모드 / 비 엄격모드의 차이점
- 자바스크립트의 원시형 타입 7가지는?
-
- 원시값 무엇이 있는지 말해주세요. 2) 원시값의 메서드가 객체의 메서드보다 좋을 땐 언제일까요?
- 왜 0.1 + 0.2 는 0.3이 아니라 0.3000000000004 일까요?
- n진법 문자형으로 변환하는 메서드
- object.is 와 ===의 차이
- 정밀도 손실 개념을 설명해주세요
- isFinite(' ') 의 결과값은?
- isFinite('') 의 결과값은?
- Single quotes 나 Double quotes대신에 Back tick( ` )을 쓰면 좋은 경우가 어떤 경우가 * 있을까요?
- 특정 언어에 적합한 비교 기준 사용해 문자열을 비교하려면 어떤 메서드를 써야 하는가?
- substring, substr 차이
- 백틱을 이용한 문자열의 특징 두가지를 설명해주세요
- 문자열의 특정 위치를 접근할 때, [] 로 접근하는 방법과 charAt() 을 사용하여 접근하는 방법이 있습니다. 만약 찾고자하는 자리가 없는 자리일 경우 각각 무엇을 반환할까요?
- 객체로도 똑같이 동작하게 만들 수 있지만 배열을 써야하는 이유는 무엇일까요?
- 배열을 복사하게 되면 shallow copy가 되는가 deep copy가 되는가?
- 배열을 객체처럼 쓰지 말아야하는 이유
- 자바스크립트에서 배열 요소는 같은 자료형만 허용한다? 아니다?
- 배열은 특별한 종류의 객체이다? O , X
let arr = [ 1, 2, 15 ];
arr.sort();
// 의 결과가 1, 15, 2인 이유는 무엇인가요?- forEach 내부 함수에서 첫번째, 두번째, 세번째 매개변수가 각각 무슨 역할을 하는가?
- includes와 indexOf/lastIndexOf의 차이
- 기존 배열을 변형시키는 배열 메서드를 하나만 설명해주세요
- slice는 새로운 배열을 반환하나요? O, X
- 객체와 배열을 typeof 로 비교할 경우 둘다 객체로 나옵니다. 그럼 어떻게 구분할 수 있을까요?
- iterable 객체란 무엇인가요?
- iterable은 무엇인가?
- iterable 객체와 유사배열의 차이
- 문자열을 배열로 만들 수 있는 방법 중 split() 을 이용한 방법 말고 또 뭐가 있을까요?
- 객체와 맵의 차이는 무엇인가요?
- 셋은 언제 사용되나요?
- 맵과 객체의 차이점
- 맵과 셋의 차이
- 일반 객체와 맵의 차이점은?
- 맵의 키로 객체를 키로 사용할 수 있나요?
- 위크맵과 위크셋을 어디에 활용할 수 있을까요?
- 맵과 위크맵, 셋과 위크셋의 차이점
- 순환참조 안되는이유
- 위크맵, 위크셋은 구성 요소 전체를 대상으로 하는 메서드를 지원한다? 안한다?
- 위크맵과 맵의 차이점은 무엇일까요?
5.9 Object.keys, values, entries
- Object.keys, values, entries 각각 무슨 일을 하는지 설명해주세요
- Object의 메서드인 keys, value, entries에 대해서 설명
- 해당 메소드들을 적용할 수 있는 자료구조의 종류
- 객체에 배열 전용 메서드를 적용하는 방법은?
- map.keys 와 Object.keys // 즉, 맵과 객체의 반환값 차이는 뭘까요?
- 디스트럭처링을 이용해서 함수에 객체를 전달할 때, 그냥 변수를 펼쳐서 전달하는 것과 객체로 전달했을 때 * 어떤 장점이 있을까요?
- 기본값을 사용해도 괜찮을 경우 인자로 무엇을 넘겨주면 되는가?
- 함수 매개변수를 구조 분해할 때 기본값을 설정해주는 두가지 방법은?
- [guest, admin] = [admin, guest] 는 뭘 하는건가요?
5.11 Date 객체와 날짜
- YYYY-MM-DDTHH:mm:ss.sssZ 각 문자열이 무엇을 나타내는지 설명해주세요
- Date 객체에 자동고침이란?
- Date 객체를 만들지 않고도 시차를 측정할 방법과 장점
- Date 객체에서 날짜나 시간만 따로 저장하는 것은 가능하다? 불가능하다?
- getDay() 의 0 은 뭘 나타낸걸까요?
- 전날을 알고 싶을 경우 어떻게 하면 될까요?
- JSON.parse의 reviver는 무엇인가요? 언제 사용하나요?
- JSON.stringify(value[, replacer, space]) 에서 replacer의 용도
- JSON.stringify를 사용할 때 주의하셔야 할 점
- reviver 개념에 대해 설명해주세요
- JSON.stringify() 를 이용하여 문자열로 변하는 메서드를 사용했을 때, 무시되는 프로퍼티 3가지가 무엇이 있을까요?
- 재귀 호출이 어떻게 동작하는지 내부 동작 설명
- 실행 컨텍스트란?
- 재귀적 자료 구조의 예시를 들어주세요
- 재귀의 장점은 무엇입니까!!!ㅣ
- 나머지 매개변수가 중간에 있어도 상관 없는가?
- arguments의 특징, arguments로 배열 메소드를 사용하기 위한 방법
- 나머지 매개변수와 전개 문법의 사용 패턴에 대해 설명해주세요
- 전개 문법은 어떤 객체에만 사용할 수 있나요?
- 클로저란 무엇인가?
- 클로저란?
- 클로저에 대해 설명해주세요
- 클로저란 무엇인가요?
- 호이스팅이란?
- 즉시 실행 함수 표현식를 사용했던 이유
- var를 권장하지 않는 이유는?
- var 키워드를 이용할 경우 일어나는 현상은 무엇이 있을까요?
- 표준화 시도를 하고있는 전역 객체 이름은?
- 모던 자바스크립트에서 전역변수를 사용할때 권장되는 방식
- 전역 객체를 가급적 사용하지 않는 이유는?
- 전역 객체의 보편적인 이름은 무엇일까요? 표준 스펙이도 들어있습니다.
- 전역 변수는 다른 곳에서도 자유롭게 쓸 수 있게 하기 위해서 자주 사용하는게 좋다 O, X
- 기명 함수 표현식은 어떨 때 유용한가?
- 자바스크립트의 다형성을 구현하는 방법
- 기명 함수 표현식 사용 이유
- 함수 표현식에 이름을 붙이면 유리한 점은?
- new Function으로 정의한 함수는 어떤 장점이 있는가?
- new Function을 이용해 만든 함수와 일반 함수의 차이점
- new Function 문법으로 함수 생성시 특징은?
- 기존에 사용하던 방법과 new Function을 사용해 함수를 만드는 방법의 가장 큰 차이는 뭘까요?
- setTimeout과 setInterval의 차이점
- 중첩 setTimeout이 setInterval에 비해 가지는 장점
- 스케줄링 메서드에 명시된 시간이 보장되지 않는 경우 세가지는?
- 중첩 setTimeout과 setInterval 을 이용하여 1초마다 작업을 수행한다고 했을 때, 차이점은 무엇일까요?
- call과 apply 메서드는 무슨 일을 하는가?
- 데코레이터 함수란?
- 데코레이터가 무엇일까요?
- 메서드를 콜백으로 전달할 때 ’this 정보가 사라지는’ 문제를 어떻게 해결 할 수 있는가?
- 메서드를 전달할 때, 컨텍스트도 제대로 유지하려면 어떻게 해야 할까요?
- 함수의 컨텍스트를 고정해서 넘길 때 사용하는 방법 두가지는?
function sayHi() { alert(this.name); }
sayHi.test = 5;
let bound = sayHi.bind({ name: '윤석님!' });
alert(bound.test);
// 의 값과 이유를 알려주세요.- 화살표 함수는 어떤 경우 사용하면 유용한가?
- 화살표 함수가 일반 함수와 다른 점은?
- 화살표 함수에는 일반 함수와 달리 무엇과 무엇이 없을까요?
- 객체의 프로퍼티 플래그인 writable, enumerable, configurable이 각각 무엇인지 설명해주세요
- 프로퍼티 전체를 대상으로 하는 제약사항을 만드는 메서드은 무엇이 있는가?
- 평범한 방식으로 객체를 생성했을 때, 프로퍼티 플래그들의 값은?
- (데이터) 프로퍼티의 플래그에는 어떤 것들이 있으며, 각각은 어떤 정보들을 저장하나요?
- 객체 프로퍼티 플래그 3가지를 말하시오
- 프로퍼티 setter는 매개변수를 몇개를 받을 수 있나요?
- 접근자 프로퍼티가 도움이 되는 상황은 언제인가?
- getter, setter를 활용하면 편리한 점을 설명해주세요
- 접근자 프로퍼티 (accessor property)의 설명자에는 어떤 것들이 있나요?
- 객체 프로퍼티는 무엇과 무엇으로 나눠질까요?
- object에서 프로퍼티를 읽으려고 하는데 해당 프로퍼티가 없으면 자바스크립트는 어떻게 동작하나요?
- __proto__는 표준인가?
- 상속 관계인 'solarSystem', 'mars' 에서 mars.foo를 호출하면 this는 어떤 객체를 나타낼까?
- setter안에 있는 this에는 어떤 객체가 바인딩 될까요?
- proto 는 [[Prototype]]의 무엇이자 무엇일까요?
- new F()를 이용해서 새로운 객체를 만들었을 때 F.prototype은 어떤 역할을 하나요?
- prototype 체인 상에서 중복된 메서드가 있을 때, 메서드를 호출하면 어떤 메서드가 실행되나요?
- 함수가 정의될 때 발생하는 2가지 상황
- Earth.prototype = solarSystem은 어떤 의미인지 설명해주세요
- F.prototype의 값은 객체나 null만 가능하다 아니다 (OX)
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); // ??- prototype을 이용해서 폴리필을 추가하는 방법에 대해서 설명해주세요
- 내장 객체의 메서드는 어디에 저장되는가?
- 모든 내장 객체는 Object.prototype을 상속 받는다? 안받는다?
- 체인 상의 프로토타입엔 중복 메서드가 있을 수 있다. 이렇게 중복 메서드가 있을 때는 어떻게 하는가요?
- 무엇과 무엇은 레퍼 객체가 없나요?
- Object.create의 descriptors의 역할
- 기존 객체의 [[Prototype]]을 변경하면 성능이 저하되는 이유는?
Object.create(proto, [descriptors])의 역할은 무엇인가요?- __ proto __ 가 왜 나쁠까요? 간단하게 말해보기
- 클래스가 단순한 편의 문법이 아닌 이유는 무엇인가요?
- 자바스크립트의 객체는 클래스 기반인가?
- 자바스크립트에서 클래스의 타입은 무엇으로 표시되나?
- 순수 함수로 클래스 역할을 하는 함수를 선언하는 방법과 비교했을 때, class 키워드를 사용하는 방법이 가진 차이는 무엇인가요?
- 일반 함수와 클래스 키워드를 사용하여 new 했을 때 차이점은?
- 부모 클래스 생성자에서 오버라이드 할 수 있는 메서드를 호출하면 안되는 이유는 무엇인가요?
- 상속이란 무엇인가?
- 화살표 함수는 this나 super를 갖는다? 안갖는다?
- 화살표 함수에는 super를 사용할 수 있다 or 없다 (OX)
- 클래스 상속에서 화살표함수와 일반 함수의 차이점이 있을까요?
- 정적 메서드는 언제 사용하나요?
- 정적 메서드가 필요한 상황은 언제인가?
- 정적 프토퍼티는 데이터를 클래스 수준에 저장하고 싶을 때 사용한다(T/F)
- 정적 메서드는 언제 사용할까요?
- 클래스에서 상속을 받지 않았을 때, 무엇을 암묵적으로 상속받나요?
- 객체 지향 프로그래밍에서 내부 인터페이스(internal interface)와 외부 인터페이스(external * interface)는 각각 무엇을 의미하나요? 이걸 구분해서 얻는 장점은 무엇인가요?
- 캡슐화의 장점이 무엇인가?
- 캡슐화의 이점에 대해 설명해주세요
- 왜 캡슐화를 해야하나요?
- protected의 표기 방법과 private 의 표기 방법은 무엇일까요?
- 내장 객체 간의 상속과 extends를 사용한 상속의 차이는 무엇인가요?
- 내장 객체 상속과 extends를 사용한 상속의 차이점
- 내장 클래스는 정적클래스를 상속받을수 있다(T/F)
- 내장 클래스의 종류 2가지 말해볼까요?
- 내장클래스는 정적 메서드를 상속 받을 수 없나요?
- obj instanceof Class는 어떻게 동작하나요?
- porlimorphic 함수란 무엇인가?
- instanceOf는 상속관계도 확인시켜 준다(T/F)
- instanceof 의 쓰임은?
class A extend B {}
console.log(A instanceOf B);
console.log(A instanceOf A);
// 각각 결과값은? 더 나아가서 왜 그런지?
- 다중 상속을 허용하지 않는 자바스크립트에서 믹스인은 어떤 역할을 하나요?
- 믹스인이란 무엇이고 왜 필요한가?
- 믹스인 개념에 대해 설명해주세요
- 믹스인이란 무엇이며 어떤 용도로 사용되나요?
- try, catch, finally 가 어떻게 동작하는지 설명해주세요.
- try..catch...finally 구조의 동작 흐름에 대해 설명하시오
- 에러객체의 주요 프로퍼티 두 가지는?
- try catch 는 컴파일 타임에 동작한다. O,X
- 에러 감싸기를 사용하는 이유는 무엇인가요? 어떤 장점이 있나요?
- 모든 에러를 포함할 수 있는 추상 에러를 하나 만들어서 해당 추상 에러를 던지고, 구체적인 에러 정보는 추상 에러의 프로퍼티로 넘기는 객체지향프로그래밍의 에러 핸들링 기법 중 하나인 이것은 무엇일까요?
- 커스텀 에러와 에러 확장이 필요한 이유는 무엇일까요?
- 콜백헬이 무엇이고 언제 발생하는지 설명해주세요.
- 중첩 콜백이 안좋은 이유
- '콜백 기반(callback-based)' 비동기 프로그래밍이 무엇인지, 콜백 지옥은 무엇인지 설명해주세요.
- 콜백 기반 비동기 처리의 문제점은 무엇일까요?
- 프라미스의 3가지 상태에 대해서 설명해주세요.
- callback 기반 코드보다 Promise 를 사용한 코드가 나은 점은?
- Promise가 처리 되었을 때(settled), 성공/에러 케이스에 대하여 각각 state과 result가 어떻게 될까요?
- 콜백과 프라미스의 차별점
- 프라미스 체이닝이란 무엇인지 설명해주세요
- 프라미스 체이닝을 언제 사용하는지, 어떻게 사용하는지 설명해주세요.
- 프라미스 하나에 then() 메서드를 여러 개 연결하면 이를 프라미스 체이닝이라고 하나요?
- 프라미스에서 에러를 어떻게 핸들링 하는지 설명해주세요
- .catch 는 프라미스에서 발생한 모든 에러를 다룹니다. [O/X]
- 브라우저 환경에서 전역에러에 대하여 처리하는 이벤트는 무엇일까요?
- 암시적 try...catch가 뭔가요?
- 프라미스의 정적 메서드 5가지를 나열하고 각각에 대해서 설명해주세요
- Promise.all과 Promise.allSettled 차이
Promise.all은 언제 사용하나요?- Promise 정적 메서드 5가지를 말하고 그 중 3개의 요청 중 하나가 실패해도 결과를 받아 볼 수 있는 API는 뭔가요?
- 콜백으로 구현된 코드를 어떻게 프라미스로 만들 수 있는지 설명해주세요
- 프로미스화는 콜백을 여러번 호출하는 함수에 적용하기 적합하다 [O/X]
- 프라미스화(promisification)란 무엇인지 설명해주세요.
- 마이크로태스크 큐란 무엇인지 설명해주세요
- 어떤 코드 조각을 .then/catch/finally가 호출된 이후에 실행하고 싶다면 [______]을 체인에 추가하고 이 안에 코드 조각을 넣으면 된다.
- .then/catch/finally 핸들러는 항상 현재 코드가 종료되고 난 후에 호출됩니다. 어떤 코드 조각을 .then/catch/finally가 호출된 이후에 실행하고 싶다면 어떻게 해야할까요?
- 마이크로태스크 큐에 오류 발생시 프로미스 작업이 없으면 어떤 이벤트를 호출하나요?
- async await의 사용법에 대해서 설명해주세요
- function 앞에 async 키워드를 앞에 추가할 경우의 효과 2가지
async함수를 사용할 때의 두 가지 효과는 무엇일까요?- async를 붙이면 해당 함수는 항상 프로미스를 반환하나요? O,X
- 제너레이터가 반환하는 값에는 어떤 의미가 있나요?
- async await을 babel로 뜯어보면 제네레이터로 만들어져 있는가?
- 제너레이터의 특성 두가지를 설명해주세요
- 제너레이터는 웹 개발에서 언제 유용할까요?
- 제너레이터를 쓰면 이점은 무엇일까요
- 일반 제너레이터와 async 제너레이터의 사용 방법의 차이를 설명해 주세요.
- async 제네레이터의 유스케이스는 어떤 경우가 있을까?
- 비동기식 제너레이터와 동기식 제너레이터의 차이를 설명해주세요
- async 제너레이터 언제 사용할까요?
- 이터레이터와 async 이터레이터의 차이는?
- 비동기는 Symbol.iterator 대신, 무엇을 써야할까
- 일반 스크립트에서 this는 전역 객체를 가리키는 것과 다르게 모듈에서 this는 무엇을 가리키나요?
- html script에서 모듈을 사용하려면 type 프로퍼티에 attribute로 무엇을 사용해야 하는가?
- 모듈 최상위 레벨의 this는 전역객체다?아니다?
- 일반 스크립트와 모듈의 차이점은 무엇일까요? (아는만큼만!)
- webpack 과 같은 빌드 툴의 역할은 무엇이 있을까요?
- const react = require('react') 는 어떤 모듈을 사용한 것일까요?
- import * 를 사용하면 한꺼번에 import를 할 수 있지만 각각 하나씩 명시해주는게 더 좋은 이유는 무엇인가요?
- 이름을 바꿔서 모듈을 가져오는 방법은?
- import/export문은 블록{} 내부에서 동작한다?안한다?
- named export와 default export 차이점은 무엇일까요? (아는만큼만!)
- 모듈에서 무언가를 가져오고 싶을 때,
import * as <obj>를 써서 통째로 가져오기 보다는import {...}를 사용해서 가져올 대상을 명시하는 것이 좋습니다. 왜그럴까요? - import {default as User, sayHi} from './user.js'; 가 무엇을 의미하나요
- 동적으로 모듈을 불러오려면 어떻게 해야되는지 설명해 주세요
- import() 표현식을 사용할 때 변수를 복사하거나 call/apply를 사용하는것이 가능한가?
- import()는 함수 호출이다?아니다?
- 동적으로 모듈 가져오기 위해 사용하는 방법은 무엇인가요?
import를 사용하여 모듈을 동적으로 가져올 수 있을까요? 동적으로 가져오려면 어떻게 해야할까요?- import 반환값으로 프로미스를 반환하나요?
- Proxy의 정의에 대해서 설명해 주세요.
- proxy의 target과 handler는 각각 무엇인가?
- proxy의 역할은 무엇이며, proxy의 trap이란 무엇인가요?
- Proxy가 무엇이고, Reflect가 무엇인지 간략하게 소개하시오
- eval 사용하지 않는 대신 어떤 대안이 있나요?
- eval을 모던 프로그래밍에서 사용하지 않는 이유는?
- eval을 사용하면 좋지 않은 점은?
- eval이 가진 문제점은 무엇인가요?
- 과거에
eval을 사용했던 이유는 무엇이며, 왜 이제는 사용하지 않도록 권장하는걸까요? - Eval is evil 인정하나여?
- 커링의 정의에 대해 설명해 주세요.
- 커링은 무엇인가?
- 커링에 대해 설명해주세요
- 커링 언제 쓸까요? (제가 궁금해서 질문합니다ㅠ)
- 커링이란 무엇이며, 함수를 커링한 경우 어떤 장점이 있을까요?
- 커링은 무엇이고 언제 사용하나요? 어디에서 쓰이는지 말해볼까요
- 참조 타입이란 무엇인가요?
- 참조 타입은 어떨떄 사용하여야 하는가?
- 참조 타입이 왜 필요한가? 또는 언제 사용되나? (제가 궁금해서 질문합니다ㅠ)
- 자바스크립트의 "참조 타입"이란 무엇인가요?
- 점 연산자 또는 대괄호 연산자로 이어진 함수를 호출 할 때, 참조 타입 반환값을 반환하는데 참조 타입은 무엇을 담고 있나요
- BigInt타입이 일반 Number타입과 다르게 동작하는 부분을 설명해주세요.
- BigInt는 길이의 제약이 있는가?
- 빅인트는 길이 제약이 있다?없다?
- 순수 bigint 의 대안으로 제시되는 라이브러리는?
- BigInt란 무엇인지 설명하고, BitInt의 연산의 결과는 어떤 타입인지 말해주세요.
- Bigint 는 1n +1 값이 어떻게 되나요?
- 브라우저 환경에서 window 객체의 2가지 역할에대해서 설명해주세요
- BOM은 무엇인가?
- 자바스크립트의 호스트 환경이 웹브라우저인 경우,
window객체의 역할 두 가지는?
- DOM 트리는 무엇으로 이루어져 있나요?
- 총 12가지의 노드 타입 중 실무에서 주로 다루는 4가지 노드는 무엇인가?
- 12가지 노드 타입 중 네 가지 이상을 나열해보세요.
- DOM의 자식 노드들을 탐색할 때 childNodes와 children의 차이를 설명해주세요
- DOM 컬렉션을 통해 자식노드를 교체할 수 있는가?
- 해당 요소의 자식 노드 중 element 노드 컬렉션만을 가져오고 싶을 때는, 어떤 프로퍼티를 사용해야 할까요?
- getElementBy로 시작하는 모든 메서드는 살아있는 컬렉션을 반환합니다. 살아있는 컬렉션이란 무엇을 의마하나요?
- getElement*, querySelector* 는 각각 무엇을 기준으로 요소들을 검색하는가?
querySelectorAll의 검색기준은 무엇이며, 반환된 컬렉션은 갱신 가능한지 이야기해주세요.
- 특정 요쇼 내의 텍스트만 가져오려면 어떤 속성을 사용해야 하나요?
- HTML에서 모든 <태그>를 제외한 텍스트만 읽을 때 무슨 DOM 노드 프로퍼티를 사용하는가?
innerHTML과textContent에 어떤 문자열을 할당한다고 할 때, 둘의 차이는 무엇일까요?
- 비표준 속성인 dataset이 만들어진 배경에 대해서 설명해주세요.
- DOM 프로퍼티는 직접 만들 수 있는가?
- DOM property와 HTML attribute의 차이를 설명하고 둘의 관계를 설명해주세요.
- DOM 요소에 텍스트를 삽입하는 3가지 방법을 설명해주세요
- 노드를 삽입하거나 삭제하려면 가각 무엇을 사용해야 하는가?
- element node를 생성하기 위한 단계를 설명하고, 여기서 쓰이는 DOM 프로퍼티 혹은 메서드가 무엇인지 말해주세요.
- DOM 객체의 클래스 목록을 가져오는 방법에 대해서 설명해주세요.
- 클래스를 하나만 추가하거나 제거하고 싶을 때 사용하는 프로퍼티와 메서드는 무엇인가?
- DOM property를 활용하여 element의 style을 변경하는 방법 두 가지를 이야기 해주세요.
- content width는 스크롤의 길이를 포함한 길이일까요? 아니면 포함하지 않은 길이일까요?
- 스크롤을 움직이기 위한 프로퍼티 2개는 각각 무엇인가?
getComputedStyle이 아닌 기하 프로퍼티를 사용해서 너비와 높이 정보를 얻어야하는 이유는 무엇일까요?
- window.innerWidth/Height 대신에 documentElement.clinetHeight/Width를 사용해야 하는 이유는 무엇인가요?
- 현재 스크롤 위치를 파악하기 위한 프로퍼티는 무엇인가?
document.documentElement.clientWidth/clientHeight을 통해 얻는 너비/높이값과window.innerWidth/Height을 통해 얻는 너비/높이값의 차이는?
- Relative to the window와 Relative to the document에 대해서 설명해주세요
- document.elementFromPoint(x, y)가 무슨 역할을 하는가?
- clientX/clientY와 pageX/pageY의 차이는 무엇인가요?
- 이벤트 핸들러를 등록할 수 있는 3가지 방법에 대해서 설명해주세요
- DOM 이벤트 흐름에는 3가지 단계가 있는데 각 단계가 무엇을 의미하는지 설명해 주세요
- 버블링의 원리가 무어신가?
- 이벤트 버블링이 무엇인지 설명해주세요.
- 이벤트 핸들링 패턴인 이벤트 위임에 대해서 설명해 주세요
- 이벤트 위임은 어떤 알고리즘으로 동작하는가?
- 이벤트 위임이 무엇인지 설명하고, 이벤트 위임을 사용할 때의 장점을 이야기해주세요.
- 브라우저의 기본 동작을 막을 수 있는 두 가지 방법에 대해서 설명해 주세요
- 브라우저의 기본 동작을 취소할 수 있는 두가지의 방법은 각각 무엇인가?
- event.preventDefault()의 역할은 무엇이며, React에서 event.preventDefault()를 사용해야하는 때의 예시를 한가지 설명해주세요.
- 커스텀 이벤트를 만드는 방법에 대해서 설명해 주세요
- 커스텀 이벤트는 어떨 때 주로 사용하는가?
- 커스텀 이벤트를 만들때 사용해야하는 생성자는 무엇이며, 해당 생성자의 detail 프로퍼티는 어떤 역할을 할까요?
- MacOS에서 Ctrl 대신 Cmd키를 사용해야 하는 이유는 무엇인가요?
- 복사를 막기 위해서는 어떻게 해야하는가?
- 마우스 이벤트 객체 안에는 마우스가 아닌 장치의 입력 여부도 알 수 있다(T/F)
ondblclick을 활용하여 글자 위에서 마우스 더블클릭에 대한 이벤트를 처리할 때, 더블클릭한 텍스트도 선택되는 부수효과가 일어납니다. 이를 방지하기 위해서는 어떻게 해야할까요?
- 마우스 이벤트들에 대해서 언제 발생하는지 설명해주세요
- mouseenter/mouseleave와 mouseover/mouseout의 차이점 두가지
- mouseover/out 그리고 mouseenter/leave 이벤트 간의 차이점을 버블링과 연관지어 설명해주세요
- mouse over/out과 mouseenter/leave의 차이는?
- Drag n Drop으로 순서를 정렬하는 프로그램을 작성해보세요
- Drang'n'Drop의 플로우를 설명하라
- 드래그앤드롭 알고리즘의 이벤트 흐름을 설명해주세요
- 드래그앤드랍을 구현하는 알고리즘을 설명해주세요.
- mouse event대신 point event를 써야하는 이유는 무엇인가요?
- 포인터 이벤트의 프로퍼티는 무엇이 있는가?
- 마우스 이벤트에는 없는 포인터 이벤트의 추가 기능은?
- 포인터 이벤트가 나오게된 배경은? (왜 마우스이벤트가 아니라 포인터이벤트를 사용해야하나요?)
- event.key와 event.code가 무엇인지 설명해주세요.
- event.code와 event.key의 차이점
- 키보드 이벤트가 없는 키의 예시를 들어보고 이유를 설명해주세요
- 키보드 이벤트가 발생하지 않는 키는 무엇일까요?
- scroll 이벤트가 발생했을 때 event.preventDefault로 스크롤을 막을 수 없는 이유는 무엇인가요?
- scroll을 막는 방법은?
- onscroll 이벤트로 스크롤을 막을 수 없는 이유는?
- 스크롤을 막기 위하여 사용해야하는 메서드는 무엇이고, 사용할 때 주의해야할 점이 있다면?
- form 객체에 접근하여 각 요소들을 어떻게 탐색할 수 있는지 설명해 주세요
- fieldset이란 무엇인가?
- 원하는 폼이나 폼 요소를 찾기위한 프로퍼티를 예시를 들어 설명해주세요
- form을 접근하는 방법 두 가지는?
- 기본적으로 focus 할 수 없는 tag들은 무엇이 있고, focus할 수 있도록 하려면 무엇을 해야 하는지 설명해 주세요
- tabindex란 무엇인가?
- 현재 포커싱 되어 있는 요소를 사용하려면?
- focus, blur는 버블링하지 않습니다. 이 문제를 해결하기 위한 두 가지 해결책은 무엇이있을까요?
- change 이벤트와 input 이벤트의 차이에 대해서 설명해주세요
- change, input 이벤트의 차이
- 클립보드에 저장된 데이터를 읽고 쓰는 이벤트는?
onchange와oninput이벤트의 차이는?
- submit 이벤트는 언제 발생하는지 설명해 주세요
- submit의 두가지 방법
- submit 이벤트의 취지에 대해 설명해주세요
- form을 제출하는 방법 두가지는?
- DOMContentLoaded, load, beforeunload, unload 이벤트가 각각 언제 발생되는지 설명해 주세요
- DOMContentLoaded, / load, / beforeunload, unload 각각 어떨 때 발생하는가?
- HTML 문서의 생명주기에 관여하는 세가지 주요 이벤트를 설명해 주세요
- HTML의 생명 주기에 관여하는 이벤트들이 어떤 것이 있는지 각 주기별로 나열해주세요.
- 페이지를 렌더링하는 것을 막지 않고 스크립트를 로딩하는 두 가지 방법을 소개하고, 차이를 설명해주세요.
- async 스크립트가 여러개일 경우 어떤순서로 실행되는가?
- defer, async의 공통점과 차이점을 설명해주세요
- script를 다운받을 때, 페이지 렌더링을 막지 않기 위한 방법 두가지가 무엇이 있는지, 그 두가지가 어떤 차이가 있는지 설명해주세요.
- 외부리소스를 참조할 경우 onerror에서 상세한 에러 메세지를 볼 수 없는 이유는 무엇인가요?
- onload와 onerror는 각각 어떤경우인가?
- load, error 이벤트를 가지는 리소스의 종류를 열거해보세요.
- 외부리소스를 불러올 때, 성공적으로 불러왔는지 추적하는 메서드와 에러를 추적하는 메서드는?
- MutationObserver로 어떤 일을 할 수 있는지 설명해 주세요
- MutationObserver은 무슨 역할을 하는가?
- Mutation observer 객체가 하는 일에 대해 설명해주세요.
- MutationObserver는 어떤 역할을 하며 어떤 상황에서 사용하면 좋을까요?
- Selection객체와 Range객체에 대해서 설명해 주세요
- DOM node란 무엇인가
- document에서 특정부분을 selection 할 때 사용하는 오브젝트 두가지는?
- 이벤트 루프 알고리즘에 대해서 설명해 주세요
- 작업 진척 상태를 보여주는 인디게이터를 어떻게 만들 수 있을까?
- 매크로 태스크와 마이크로 태스크의 스케줄링 방법을 설명해주세요
- 이벤트루프 알고리즘에 대해서 설명해주세요.
- popup이 쓸모있는 경우는 어떤 경우인지 설명해 주세요
- 팝업의 사용 사례가 줄어든 이유와 현대에서도 쓰이는 사례와 이유를 설명 해주세요.
- 최근에는 팝업 윈도우를 잘 사용하지 않지만, OAuth를 사용할때는 팝업을 사용합니다. 이유가 무엇일까요?
- 팝업과 모달의 차이점이 무엇일까요
- Same Origin이라는 것은 무엇을 의미하나요?
- same origin 식별에 대해 설명해주세요.
- URL에서 "동일한 출처"에 해당하는 경우와 그렇지 않은 경우에 대해서 설명해주세요.
- Same Origin이란 무엇일까요
- clickjacking attack이란 무엇이고 어떻게 대처해야 할까요?
- 클릭잭킹 공격에 대해 설명해주세요.
- 클릭재킹이란 무엇인지, 이를 방지하기 위한 방법은 어떤 것이 있는지 설명해주세요.
- 클릭재킹공격이 무엇일까요
- Array에는 있지만 ArrayBuffer에는 없는 method 두 개는 무엇인가요?
- ArrayBuffer에 대해 설명해주세요.
- ArrayBuffer는 직접 수정하는 것이 불가능합니다. 어떻게 하면 버퍼의 내용을 읽거나 쓸 수 있을까요?
- ArrayBuffer 데이터를 조작하려면 어떻게 해야되는가요
- new TextEncoder().encode('ABC') 의 결과는 무엇일까요?
- JS에서 텍스트 디코딩과 인코딩에 대해 설명해주세요
- TextDecoder란 어떤 역할을 하나요?
- 텍스트 디코더와 텍스트 인코더는 무엇인가요
- Blob이란 무엇이고 무엇으로 이루어져 있는지 설명해 주세요
- Blob과 binary object의 차이를 설명해주세요
- Blob의 내용을 보여주기 위하여 URL을 생성하기 위해서는 어떻게 해야할까요?
- Blob은 무엇과 무엇으로 구성되어있나요
- 파일을 읽을 때 내가 읽을 파일에 따라 어떤 method를 적절하게 사용해야 할까요?
- File 객체와 Blob 객체의 관계를 설명해주세요.
- FileReader는 어떤 데이터 포맷을 읽을 수 있나요?
- FileReader 객체를 통해 무엇을 할 수 있나요?
- fetch 요청은 두 개의 부분으로 나누어져 있는데 각각 무엇인지 설명해 주세요
- fetch가 반환하는 응답을 어떤 형식으로 변환할 수 있는지 설명해주세요
- POST 요청의 요청 본문(body)에는 어떤 것들이 들어갈 수 있을까요?
- fetch는 무엇인가요
- FormData를 만들 때 같은 이름으로 여러개를 만들 수 있나요? 예를들어 formData.append(name, value)를 여러번 실행하면 어떻게 되나요?
- FormData 객체는 HTML 태그 없이도 CRUD를 지원한다(T/F)
- FormData의 append 메서드와 set메서드의 차이는?
- formData의 장점은 무엇인가요?
- 특정 파일을 다운로드 받을 때 진행사항을 표기하려면 어떻게 해야하나요?
- fetch 메서드로 다운로드 진행 과정을 알 수 있는 과정을 설명해주세요
- 요청에 대한 응답의 progress를 확인하기 위해서는 어떻게 해야할까요?
- Download progress을 어떻게 구현할 수 있나요
- Promise는 중간에 중단이라는 개념이 없는데, fetch를 어떻게 중단할 수 있을까요?
- 비동기 작업에서 중단을 하기 위한 built-in 객체는?
- JavaScript의 promise에는 "중단"이라는 개념이 없습니다. promise와 같이 비동기적인 태스크를 중단시키기 위해서는 어떻게 해야할까요?
- fetch에서 AbortController를 사용하는 방법은?
- CORS 요청하는 과정을 설명해 주세요
- simple/non-simple request를 구분하는 이유는?
- Cross-Origin Request(크로스 오리진 요청)에서 simple 요청과 non-simple요청의 차이는?
- CORS는 무엇인가요?
- Fetch API의 keepalive 옵션은 언제 사용하나요?
- fetch API의 기능들을 생각나는대로 설명해 주세요
- fetch API의 옵션 중, referrerPolicy 옵션은 무엇을 나타내는지 설명해주세요.
- referrer, mode, credentials, cache, redirect, integrity, keepalive 를 간단하게 설명하시오
- encodeURI와 encodeURIComponent 함수의 차이를 설명하고, 언제 사용해야 하는지 설명해 주세요
- 문자열 대신 URL 오브젝트를 사용할 때의 장점은 무엇이있을까요?
- URL 객체를 사용하는 이유와 장점은?
- fetch 메서드가 나왔음에도 사용되는 이유는?
- 왜 이제는 HTTP요청을 위하여 XML을 잘 쓰지 않을까요?
- XMLHttpRequest 보다 더 좋은 기술은 무엇이 있나요?
- 파일 업로드 일시중지/재진행 기능 원리를 설명해주세요.
- fetch 메서드는 파일을 업로드하기는 쉽지만, 연결이 유실된 후 업로드를 재개하는 기능을 제공해주지 않습니다. 무엇을 사용하면 이 문제를 해결할 수 있을까요?
- Resumable file upload 에서 나온 알고리즘 순서를 말해주세요
- Long polling을 사용해 얻는 이점은 무엇인가요?
- 어떤 경우에 롱 폴링이 적합하지 않은가요?
- 롱폴링이란 무엇이고 어디에 사용하면 좋은가요?
- regular polling의 어떤 점을 개선 시켜 Long Polling이 나왔나요?
- websocket에서 다룰 수 있는 4가지 이벤트에 대해서 설명해 주세요
- 웹소켓에는 CORS 제약이 있다(T/F)
- WebSocket이 무엇이고 어떤 특징을 가지고 있는지 이야기해주세요.
- 웹 소켓이 무엇인가요
- EventSource와 Websocket은 무엇이 다른가요?
- 서버와 연결을 유지하고 이벤트를 받기위해 사용하는 객체는?
- WebSocket과 EventSource의 차이는 무엇일까요?
- EventSource 객체는 수동으로 영구 연결을 설정해줘야한다. (O,X)
- XSRF 공격이란 무엇이고 어떻게 방어할 수 있나요? 세션쿠키란 무엇인가요?
- localStorage와 sessionStorage의 차이는?
- localStorage와 비교했을 때 IndexedDB가 갖는 장점은?
- 베이어 곡선의 장점은?
- javascript과 비교했을 때 CSS로 애니메이션을 구현하는 것의 장점은?
- requestAnimationFrame의 역할은?
- 컴포넌트의 조건은?
- custom element를 등록하는 메서드는?
- Shadow DOM이란 무엇이며 언제 사용하는가?
- template 요소의 역할은 무엇이고, 사용하려면 어떻게 해야할까요?
- custom element를 shadow DOM으로 옮겼을 때, CSS 스타일이 적용되지 않습니다. 이 문제를 어떻게 해결할까요?
- ShadowDOM 여부와 상관없이 CSS를 적용하고 싶은 경우 어떻게 해야할까?
- ShadowDOM의 경계를 넘어 이벤트가 버블링이 되도록 하기 위해서는 어떤 프로퍼티를 true로 만들어야할까?
- 다음코드의 출력 결과는?
console.log("He was, She was, We were".replace(/Was/gi, "is"));- 다음코드의 출력 결과는?
console.log("Hi\nHello\nBye".match(/.Bye/g));- 다음코드의 출력 결과는?
console.log("$3000 vs ₩3500000".match(/\p{Sc}/gu));- 다음코드의 출력 결과는?
console.log(/Friday$/.test("Hello It's Friday"));- m 플래그는 언제 사용할까?
- 다음코드의 출력 결과는?
console.log("1, 23 4 53-1433".match(/\b\d\d\b/g));- 다음코드의 출력 결과는?
console.log("Hello *^^*".match(/\*\^\^\*/g));- 다음코드의 출력 결과는?
console.log("A1 B3 C3 F9 Z9".match(/\b[^A-C1-3][^A-C1-3]\b/g));- 다음코드의 출력 결과는?
console.log("1 12 123 1234 12345 123456".match(/\d{3,}/g));- Regular expression에서 matching mode를 greedy가 아니라 lazy로 바꾸려면 어떤 연산자를 쓰면 될까요?
- replace 메서드와 정규표현식을 사용하여 "Hello Hi"를 "Hi, Hello"로 만들어주세요.
- 다음 코드의 출력 결과는?
console.log(`She said, "Hello, I'm Lucy", and he said, "Bye"`.match(/(['"])(.*?)\1/g));- 다음 코드의 출력 결과는?
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));- 다음 코드의 출력 결과는?
console.log("카카오택시는 10000원 우버는 $20".match(/(?<=\$)\d+|\d+(?=원)/g));- 정규표현식의 역추적이란 무엇이고, 역추적을 방지하는 방법은?
- 다음 코드의 출력 결과는?
let regexp = /\w+/y;
regexp.lastIndex = 6;
console.log(regexp.exec("hello hi bye"));- 다음 string을 split 메서드와 정규표현식을 활용하여, [12, 34, 56, 33] array로 만들어주세요
const str = "12, 34,\n56, \n 33" ;