웹 프론트엔드 개발자 면접 - Javascript (2)

웹 프론트엔드 개발자로서 면접을 볼 때 받게 될만한 기술 면접 질문리스트와 적절한 답변에 대해서 검색한 내용을 모두 취합하고 내용을 덧붙여서 포스팅을 작성해 보았습니다.

 

* HTML, CSS, Javascript 카테고리로 나누어서 진행됩니다.

 

(면접 질문과 그에 대한 답변을 얻은 곳의 출처는 하단에 표시하였습니다.)

 

Javascript

 

 

15. Closure 함수

 

독립적인 (자유) 변수를 가리키는 함수, 클로저 안에 정의된 함수는 만들어진 환경을 기억한다. 함수 내에서 함수를 정의하고 사용한 형태,

 

function closure() {
  let variable = 'hello';	// 자유변수
  
  return () => {
    return variable;
  }
}

 

- 외부에서 변수를 직접 접근하는 것을 제한할 수 있음(캡슐화)

 

- 클로저의 사용이 끝나면 참조를 제거하는 것이 좋다 -> 클로저 내부의 자유 변수를 저장하기 위한 메모리가 낭비되기 때문이다.

 

 

 

16. JSONP(JSON with Padding)

 

- 클라이언트가 아닌 각기 다른 도메인에 상주하는 서버로부터 데이터를 요청하기 위해 사용된다. CORS가 활성화 되기 이전의 데이터 요청 방법, 다른 도메인으로부터 데이터를 가져오기 위해 사용하는 방법

 

- Javascript는 서로 다른 도메인에 대한 요청을 보안상 제한하는데, 이 정책은 SOP(Same Origin Policy) 라고 한다.

 

- SOP 정책으로 인해서 생기는 이슈를 Cross-domain issue 라고 하는데, 크로스 도메인 이슈에 의해 ajax 요청이 허용 되지 않아 우회용으로 쓰임

 

- 동작원리

<script src=""> </script> 를 통해서 JSON 데이터의 값을 불러오려고 한다면, JSON 객체의 {}을 블록으로 인식하여 구문 오류를 발생시킴 -> 서버에서 데이터를 반환할 때 콜백함수를 감싸주는 처리가 필요함

 

 

17. CORS(Cross-Origin Resource Sharing)

 

- 추가적인 HTTP header를 사용해서 애플리케이션이 다른 origin의 리소스에 접근할 수 있도록 하는 메커니즘을 말함, 다른 origin에서 내 리소스에 함부로 접근하지 못하게 하기 위해 사용된다.

 

- 브라우저간 데이터를 주고받는 과정에서 도메인 이름이 서로 다른 사이트 간에 api 요청을 할 때, 공유를 설정하지 않았다면 CORS 에러 발생

 

- 어떤 요청이 CORS를 사용하나요?

 

1) XMLHttpRequest, Fetch API 호출

2) 웹 폰트

3) drawImage()

4) CSS Shapes

 

- 동작 : Scheme, Host, Port 만 동일하면 같은 출처임

 

ex) https:// (Scheme), github.com (Host), :8000 (Port)

 

 

18. 이벤트 루프

 

- 자바스크립트는 단일 스레드 기반의 언어, 그렇다면 비동기적 여러 동시적인 처리는 어떻게 할까? -> 이벤트 루프 기반의 비동기 방식으로 동시성을 지원한다.

 

- 태스크 큐 : 콜백함수들이 대기하는 큐 형태의 배열

 

- 이벤트 루프 : 호출 스택이 비워질 때마다 큐에서 콜백함수를 꺼내와서 실행, 태스크 큐에 태스크가 있는지 확인 -> 현재 실행중인 태스크가 있으면 실행 (반복)

 

=> 모든 비동기 방식의 API들은 이벤트 루프를 통해 콜백 함수를 실행한다.

 

- Promise : 마이크로 태스크가 존재하여, 일반 태스크 보다 더 높은 우선순위를 갖는 태스크임, 마이크로 태스크 큐에 마이크로 태스크가 관리됨

 

 

19. Javascript 의 원시타입(Primitive Data Type)

 

-  메모리 값의 복사 (참조 X), immutable, 메소드가 붙어있지 않음

 

ex) Boolean, String, Number, Null, Undefine, Symbol(ES6)

 

- 원시타입 이외에는 전부 mutable value 또는 객체이다. (Object, Array, Function)

 

 

20. Javascript 의 Number Type는 다른 언어들과 차이점은?

 

- Javascript의 Number Type는 엔진이 원할때마다 암시적 변환이 가능, 타입의 유연성

 

 

21. 실행 컨택스트(Execution Context)에 대해서 설명

 

- scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 Javascript의 핵심원리

 

 

22. ES6 스펙에 대한 지원, 크로스 브라우징 이슈에 대한 해결방법은?

 

- Babel 을 통한 ES6 문법 -> ES5 로 변환하기, 트랜스 파일, React와 같은 라이브러리는 ES6를 사용하기 때문에 바뀌는 추세임

 

 

23. ES6에서 추가된 스펙

 

- const 기본, 변경가능한 변수는 let

- var 사용 하지 않음

- set, weakset으로 중복되는 값이 있는지 탐색 가능

 

 

24. 기능 검출(Feature detection)과 기능 추론(Feature inference)

 

- 기능 검출 : 스크립트가 호출하는 기능을 사용자의 브라우저가 지원하는지 체크하는 것

 

if('localStorage' in window)

 

- 기능 추론 : 만약 기능을 브라우저가 지원한다면 다른 기능도 존재할 것이라고 추론하는 것

 

if('localStorage' in window){
	window.sessionStorage.setItem("this-should-exist-too", 1);
}

 

: localStorage를 지원한다면 sessionStorage도 지원할 것이라 추론

 

 

25. 이벤트 버블링, 캡처링, 위임

 

1) 이벤트 버블링 : 한 엘리먼트에서 이벤트가 감지되었을 때, 해당 엘리먼트의 계층구조를 따라 올라가면서 Root Element까지 이벤트가 전달되는 것을 말한다.

 

- 이벤트가 발생하는 가장 안쪽부터 바깥쪽, 하위에서 상위노드로 이벤트가 전파되는 과정

 

- window -> 이벤트 요소까지

 

- event.stopPropagation() 을 통해 Stop Bubbling 이 가능

 

 

2) 이벤트 캡처링 : 이벤트 버블링과 반대 방향으로 이벤트가 전달됨

 

- 상위 노드부터 하위 노드로 이벤트가 전달되는 형태, 이벤트 요소 -> window 까지

- addEventListener(‘click’, () => {}, true), 함수의 3번째 인자를 true로 설정하면 캡처링 활성화

 

3) 이벤트 위임 : 하위 요소에 각각 이벤트를 붙이지 않고, 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식

 

- ul -> li의 모든 태그에 일일이 이벤트 리스너를 추가하는 것이 아니라, ul 태그에 이벤트 리스너 하나만을 추가하여 모든 li 태그에 같은 이벤트가 적용되도록 하는 것

 

 

26. use strict

 

ES6에서 새로 추가된 기능, 자바스크립트 코드에 엄격한 검사 진행, 파일전체 또는 특정 함수에서만 적용 가능

 

- 사용법 : 'use strict'; 코드 사용

- strict mode : 실수로 글로벌 변수 생성 금지, NaN에 할당하는 것은 예외를 발생시킴, 삭제 불가능한 프로퍼티를 삭제하려할 때 예외 발생, 함수 파라미터는 모두 이름이 달라야함

 

 

27. immutable

 

- OOP에서 immutable는 생성 후 그 상태를 바꿀 수 없는 객체를 말한다.

 

- mutable : 값에 대한 메모리 주소를 참조하기 때문에 값을 변경하면 모든 곳에서 side effect 발생으로 버그 유발 가능성 존재

 

 

 

- 참고한 사이트

 

1. 질문 모음 사이트

 

프론트엔드 개발자 면접 질문 모음

 

프론트엔드 직군 웹개발자 면접질문 모음 답변 달아보기 — yoyounn18

 

프론트엔드 개발자 기술면접 인터뷰 질문 모음(업데이트)

 

프론트엔드 개발자 면접 질문(기술면접) 정리

 

프론트엔드 면접 질문 모음