# 마스터님 기술면접 자료
#### Object.create의 역할은 무엇인가요?
```javascript
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
}
출처: https://unikys.tistory.com/320 [All-round programmer]
```
- 여기서 보면 function안의 F 함수는 아무런 초기화도 하지 않는 기본 함수가 되고, 이 F의 prototype만 인자로 받는 객체로 수정하여 새로운 객체를 생성하여 리턴하게 된다. 여기서 주의할 점은 바로 Object.create() 함수의 인자 o는 상속을 할 객체가 아닌, prototype으로 설정할 객체라는 점이다. 따라서, 간단한 사용법은 아래와 같다.
- MDN 설명
- Object.create() 메서드는 지정된 프로토타입 객체 및 속성(property)을 갖는 새 객체를 만듭니다.
#### 9. = 보다, === 를 써야할때는?
- `=`할당에 사용
- `==` vs `===`
- `==` 로 비교 시 type을 변경한 뒤 비교한다.(원시값과 비교할때)
- 문자열 == 숫자, 숫자 == 문자열
- 문자를 숫자로 변경한 뒤 비교
```javascript
1 == '1' //true
'1' == 1 //true
```
- boolean은 false -> 0, true -> 1로 변경
```javascript
true == 1 //true
false == 0 //true
true == 2 //false
```
- null, undefine은 정확히 어떤 타입으로 변하는지 모름
```javascript
null == undefine //true
```
- 객체 == primitive(원시값)
- 객체는 valueOf과 toString로 타입변경
- 객체끼리 비교하면 참조값을 봄(타입변환 없음)
- 주의: 원시값과 비교할때만 타입변함!!
```javascript
function Dog(name) {
this.name = name;
}
const dog1 = new Dog('Gabby');
dog1 == 'Gabby' //false
```
```javascript
function Dog(name) {
this.name = name;
}
Dog.prototype.toString = function dogToString() {
return '' + this.name;
}
const dog1 = new Dog('Gabby');
dog1 == 'Gabby' //true
```
```javascript
function Dog(name) {
this.name = name;
}
Dog.prototype.valueOf = function dogToString() {
return '' + this.name;
}
const dog1 = new Dog('Gabby');
dog1 == 'Gabby' //true
```
- `===`
- 자료형도 비교함
따라서, 말그대로 엄밀하게(strict) 비교하고 싶으면 `===`를 사용하면됨
참고링크
- [할당 연산자 - MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators)
- [비교 연산자 - MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)
- [원시값 - MDN](https://developer.mozilla.org/ko/docs/Glossary/Primitive)
- [동치 비교 및 동일성](https://developer.mozilla.org/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness)
---
아직 안된 것들
---
#### 브라우저의 렌더링 동작과정을 짧게 설명해보세요.
- [브라우저의 동작 과정을 자세하게 설명하는 링크(렌더링 포함)](https://d2.naver.com/helloworld/59361)
#### 자바스크립트에서 모듈내의 private한 속성을 만드는 방법을 아는대로 쓰세요.
6. JS에서 재귀호출로 인한 stack overflow를 막을 수 있는방법은?
7. closure 와 스코프관계를 설명해보세요.
8. 본인이 경험한 OOP관점에서의 객체분리를 설명하고, 느낀 장점을 말해보세요.
9. = 보다, === 를 써야할때는?
10. DFS, BFS를 통한 트리탐색방법 중 본인이 경험(사용)했던 방식은 무엇이고, 동작원리를 짧게 설명해보세요. 9. ES6의 Class extends 내부 동작원리에 대해서 설명해보세요.
11. 객체를 탐색하는 방법에 대해서 2가지를 작성해보세요.
12. NodeList 타입을, Array에 있는 reduce메서드를 사용하는 방법은? 12. arrow 함수의 this가 결정되는 방식을 설명해보세요.
13. immutable과 mutable은 무엇이 다른것인가요?
14. undefined와 null의 차이점을 설명하세요.
15. 아래처럼 동작하는 flatten함수를 reduce를 활용해서 만들어보세요.
17. 객체를 복사해서 새로운 객체를 만들고 싶습니다. 코드를 구현해보세요. (객체의 깊이는 1단계만 있다고 가정)
18. 18. Array.from 이 모든 브라우저에서 동작하도록 polyfill코드를 만들어보세요.
19. 프로그래밍 요구사항을 받았을때, 구현하기 전까지 어떤 과정을 거치시나요?
20. prototype 의 동작방식에 대해서 설명해보세요.
21. 순환되는 캐로셀UI의 구현 원리에 대해서 설명해보세요.
22. Event 객체에 대해서 설명해보세요.
23. 웹사이트의 초기 로딩속도를 더 빠르게 하기 위해서 무엇을 해야 할까요?
24. 최근 가장 깊게 공부하고 있는 부분은 무엇인가요? 그 부분에 대해서 간단하게 설명해보세요. 25. Array.from 이 모든 브라우저에서 동작하도록 polyfill코드를 만들어보세요.
26. 브라우저의 렌더링 동작과정을 짧게 설명해보세요.
27. arrow 함수의 this가 결정되는 방식을 설명해보세요.
28. 비동기의 장점을 설명해보세요.
29. 본인이 즐겨하는 디버깅 방법을 설명해보세요.
30. bind 가 필요한 상황을 간단한 코드로 보여주세요.
31. CommonJS 스펙에 대해 설명해보세요.
32. node의 middleware의 동작방식을 설명해보세요.
33. 본인이 생각하는 좋은 객체지향프로그래밍에 대해서 설명해보세요.
34. 클로저로 동작되는 상황을 예시코드로 보여주세요.
35. React의 virtual DOM 은 뭐에요?
36. React의 렌더링 방식은 무엇인가요?
37. React의 초기화면 느린 부분은 어떻게 해결해야해요?
38. SSR은 무엇인가요? 어떻게 구현하죠?
# 예상질문
1. WebRTC가 뭔가요?
2. socket.io의 구동방식
3. socket의 연결을 유지하는 방법이 뭔가요?
4. HTTP와 socket 통신의 차이는 무엇인가
Sign in with Wallet
Connect another wallet