JS 기술면접 스터디 1주차: 이벤트 위임부터 코드구성까지

개발 프로젝트 동아리 활동 중 JS기술 면접을 대비하고 싶은 사람들과 함께 지난 7주간 모여 스터디를 진행했습니다.

 

질문 리스트는 front-end-interview-handbook에서 가져왔으며 매주 모여 일정 분량의 질문에 대한 답변을 준비하고 서로 돌아가며 말하고 이를 서로 보완하고 지적하는 식으로 진행하였습니다.

 

이 스터디를 하면서 JavaScript에 대해 피상적으로 알고 있던 내용을 문장으로 정리할 수 있었고 그러면서 동시에 모르는 내용이나 안다고 생각했던 내용에 대해서도 개념을 확실히 잡을 수 있었습니다.

 

이 글은 스터디 내용을 복기하고 정리하는 글로 아주 상세한 기술내용은 담고 있지 않습니다. 관련해서는 이후에 따로 정리할 계획입니다.

 

첫주차 질문은 이벤트 위임, this, 프로토타입 상속, ES6, IIFE, 클로저, 루프, 익명함수, 코드구성 등에 대한 내용입니다.

1. 이벤트 위임에 대해 설명하세요

이벤트 버블링과 캡쳐링을 이용한 방법으로 이벤트 리스너를 해당 요소에 추가하는 대신 그 상위 요소에 추가하여 위임하는 것을 말합니다. 요소가 동적으로 추가될 때 이벤트 리스너가 붙지 못하는 문제를 막아주고, 이벤트 리스터의 남발로 인한 메모리 낭비를 줄여줍니다.

• 참고자료
  • https://poiemaweb.com/js-event#6-이벤트의-흐름
  • https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/

 

2. this 가 JavaScript에서 어떻게 작동하는지 설명하세요.

this는 상황에 따라 다르게 작동하는데, 일반함수의 경우 window(전역객체)를 가리킵니다. 콜백함수나 메소드의 내부함수일 경우에도 마찬가지여서 let that = this;를 이용하거나 bind, call, apply 메소드를 이용해 명시적으로 this를 정해줄 수 있습니다. 생성자 함수나 메소드의 경우 호출한 객체를 가리킵니다.
react 내 다른 컴포넌트에서 클래스 메소드를 사용할 경우 bind를 통해 this를 정해주지 않으면 메소드가 최종 정의된 this의 맥락을 모르기 때문에 this를 window(전역객체)로 인식하여 에러가 발생합니다. this를 정의 당시 환경으로 정해주는 화살표 함수를 이용할 수도 있습니다.

• 참고자료
  • react에서 bind를 왜 쓰는지(https://www.zerocho.com/category/React/post/578232e7a479306028f43393)
  • https://poiemaweb.com/js-this

 

3. 프로토타입 상속이 어떻게 작동하는지 설명하세요.

어떤 메서드나 변수를 참조했을때 해당 객체에 그것이 없다면 그 객체의 prototype 프로퍼티가 가리키는 곳에 가서 그 메스드와 변수를 찾습니다. 그래도 없으면 앞의 과정을 반복하며 계속 상속하는 상위 객체를 찾아 끝까지 가서도 없으면 undefined를 반환합니다.

• 참고자료
  • MDN 상속과 프로토타입(https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain)
  • 질문리스트에서의 답
  • 프로토타입 체인(https://poiemaweb.com/js-prototype#4-prototype-chain)

 

4. AMD vs CommonJS에 대해 어떻게 생각하나요?

ES6의 모듈 시스템을 구현하기 위한 방식의 두가지 방향입니다.(내용 추가 및 이해 필요)

• 참고자료
  • 질문리스트에서의 답

 

5. 다음 코드가 IIFE로 작동하지 않는 이유를 설명하고 개선해보세요.

function foo(){ }();

JavaScript 파서는 위 코드를 function foo(){ }와 ();로 해석하며 앞은 함수 정의, 뒤는 함수 호출인데 이름이 없어 Uncaught SyntaxError: Unexpected token ) 오류를 발생시킵니다.
위 코드는 (function foo(){ })();나 (function foo(){ }())로 수정하면 정상 작동합니다.

 

6. null, undefined, undeclared의 차이점은 무엇이고 이 상태에 대한 확인은 어떻게 할 것인가?

null은 null이 할당된 상태, undefined는 선언이 되었으나 할당이 안 되어 있는 상태, undeclared는 키워드(var, let, const)없이 선언된 변수를 말합니다.
typeof와 ===를 이용해 각각의 상태를 확인할 수 있습니다.

• 참고자료
  • 질문리스트에서의 답

 

7. 클로저는 무엇이며, 어떻게/왜 사용하나요?

클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다. 구체적으로 말하면 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말합니다.
이를 조금 더 간단히 말하면 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다라고 말할 수 있습니다.
주로 상태 유지, 전역 변수의 사용 억제, 정보의 은닉 등에 활용할 수 있습니다.

이 답변은 MDN과 poiemaweb의 내용을 거의 그대로 가져왔습니다. 꼭 참고하자.

• 참고자료
  • https://poiemaweb.com/js-closure
  • MDN 클로저(https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures)

 

8. .forEach루프와 .map() 루프 사이의 주요 차이점을 설명할 수 있나요? 왜 둘 중 하나를 선택할 것인가요?

forEach는 리턴값이 따로 없고 콜백함수에 따라 원본을 변경합니다. map은 리턴값이 있고 콜백함수에 따라 원본을 변경하지 않고 원본과 같은 길이의 새로운 배열을 반환합니다. map 등의 ES6 요소는 IE10 이하 등의 브라우저에서 작동하지 않기 때문에 forEach를 쓰거나 라이브러리를 사용해야 합니다.
reduce나 filter 같은 루프도 유용합니다.

• 참고자료
  • MDN Array.prototype.forEach()
  • MDN Array.prototype.map()
  • MDN Array.prototype.reduce()
  • MDN Array.prototype.filter()

 

9. 익명 함수의 일반적 사용 사례는 무엇인가요?

IIFE로 써서 전역 오염을 방지하거나, 다른 곳에서 쓰이지 않고 한 번만 쓰이는 함수에 익명함수를 쓰며 보통 콜백함수가 이에 속합니다.

 

10. 코드를 어떻게 구성하나요?(모듈패턴, 고전적 상속?)

vanilla JavaScript로 구성할 때는 주로 class를 활용하며, 최근 사용하는 react에서는 컴포넌트의 크기를 줄이고 서버와의 통신을 하는 컴포넌트를 일원화하거나 줄이려고 노력합니다.

 

 

틀렸거나 더 좋은 설명이 있다면 댓글로 알려주세요. 많은 분들에게 큰 도움이 될 거에요.

 

도움이 되셨다면 좋아요와 댓글 부탁드립니다. 감사합니다~