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

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

 

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

 

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

 

Javascript

 

 

1. AJAX (Asynchronous Javascript And XML)

 

- 브라우저에서 페이지 이동 없이 Javascript를 통해 HTTP REQUEST를 보내고 그 응답을 받아 처리할 수 있는 기능, Javascript 를 통한 비동기 통신, 클라이언트 - 서버간 XML 데이터를 주고 받는 기술

 

장점 및 단점

- 상호 작용성이 좋아짐

- 서버에 대한 요청이 줄어듦

- 동적 페이지 북마크가 어려워짐

- 필요한 부분만을 불러와 사용 가능 (JSON, XML 형태로 필요한 데이터만 받아옴)

 

 

2. JSON (JavaScript Object Notation)

 

- 서버 -> 브라우저로 정보를 보낼 때 JSON 파일로 (stringify) 보내고 브라우저는 이를 자바스크립트로 (parse) 파싱

 

 

3. 익명함수와 함수 즉시 호출

 

- 즉시호출(IIFE : Immediately-Invoked Function Expression) : (function() {}) ();

- 익명함수 : () => {}

 

 

4. Variable Scope (var, const, let)

 

- var : function 단위 스코프를 가짐, hoisting 으로 할당 후 선언가능, 할당 시 변수 선언 필요 없음

 

immutable

- const : 블록 단위 스코프를 가짐, 재선언 및 재할당 불가능, 선언과 동시에 값 할당 필수

- let : 블록 단위 스코프 변수 재할당만 가능, 할당하기전에 변수가 선언되어 있어야함

 

 

5. 객체지향 프로그래밍

 

- 추상화 : 

- 다형성 : 

- 캡슐화 : 

- 상속 : 

 

 

6. 함수형 프로그래밍

 

- 입출력이 순수 함수여야함, 부작용(부산물)이 없어야함 (원하지 않는 변수 변경 불가), 함수와 데이터를 중점으로 생각함

ex) map, filter, reduce,

 

 

7. 알아야할 함수들 (forEach, map, bind, apply, call)

 

- forEach : 배열의 요소 반복, 리턴 값이 없음

- map : 배열의 요소 반복, 함수 내용을 통해 새로운 배열 리턴, 원본 배열 변경 X

- bind : 함수가 가리키는 this를 바꾸고 호출하지는 않는 것, 함수를 호출은 하지 않고 함수만 반환함

- apply : this가 가리키는 것을 바꿈, 함수의 파라미터를 배열 객체로 준다, 유사배열 객체에 배열 메소드를 사용 가능하게 만들어 준다.

- call : this가 가리키는 것을 바꿈, 함수의 파라미터를 그래도 입력한다. 유사배열 객체에 배열 메소드를 사용 가능하게 만들어 준다.

 

 

8. 콜백함수

 

콜백 함수는 함수 안에서 특정시점에 호출되는 함수를 말합니다. 비동기식 처리방법, 함수 내의 처리가 끝나는 시점에서 함수를 호출하여 필요할 때만 함수를 호출해서 효율이 좋다.

 

 

9. Promise 함수

 

비동기적 실행의 성공과 실패를 분리해서 메소드를 실행하는 것이다. callback 메소드는 에러처리가 힘들기 때문에 Promise로 해결한다. (성공 : .then, 실패 : .catch), 비동기식 작업이 모두 완료되었을 때 작업을 진행하려면 Promise.all() 을 활용하면 된다.

 

 

10. 호스트 객체, 네이티브 객체

 

- 네이티브 객체 : 전역의 공통기능 제공, 애플리케이션 환경에 관계없이 사용 가능

 

ex) Object, String, Number, Function, Array, Date, Math 등

 

 

- 호스트 객체 : 실행환경에서 제공하는 객체 (OS, Web 브라우저에 따라 달라짐)

 

ex) 호스트 환경에서 정의된 객체 : window, fetch, HTMLElement

 

1) 전역객체 : 모든 객체의 유일한 최상위 객체, 브라우저 – window, 서버 – global

 

2) BOM(Browser Object Model) : 브라우저 탭, 창의 모델 생성, location, history 등

 

3) DOM(Document Object Model) : 현재 웹 페이지의 모델을 생성, DOM의 최상위 객체는 document 객체로 전체 문서를 표현

 

 

11. 변수 값 (undeclared, undefined, null, NaN, undefined)

 

- undeclared : 접근 가능한 스코프에 선언조차 되어있지 않은 상태

 

- undefined : 접근 가능한 스코프에 변수가 선언되었으나 아무런 값도 할당되지 않은 상태

 

- null : 객체, 비어있는 변수를 명시적으로 할당

 

- NaN : Not-a-Number의 약어로써, 표현 불가능한 수치형결과, 유효한 숫자가 아님

 

- undefined == null : true, undefined === null : false

 

 

12. attribute, property

 

- attribute : HTML 마크업에서 정의, 변하지 않음

- property : HTML DOM 에서 정의, 사용자가 값 변경시 변함, attribute 보다 접근이 빠름

 

 

13. this 객체

 

메소드를 호출한 객체가 저장되어 있는 속성

 

- 일반 함수에서 this -> window

 

- 중첩 함수에서 this -> window

 

- 이벤트에서 this -> 이벤트 객체

 

- 메소드에서 this -> 메소드 객체

 

- 메소드 내부의 중첩 함수에서 -> window

 

 

14. DOMContentLoaded, load, beforeunloaded, unload

 

- DOMContentLoaded : 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생, 이미지 파일, 스타일시트 등의 기타 자원은 기다리지 않음

 

window.addEventListener('DOMContentLoaded', () => {});

 

: document 객체에서 발생, <script> 안의 스크립트 처리가 끝난 후 발생, getComputedStyle 와 같은 스타일 시트를 불러오는 코드를 작성하면 스타일시트가 로드되기를 기다림, 브라우저 내장 자동완성(ID, PW 저장)

 

 

- load : HTML로 DOM 트리를 완성하였음, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생

 

window.onload = () => {}

 

: 스타일, 이미지 등의 리소스들이 모두 로드되었을 때 실행

 

 

- beforeunloaded : 사용자가 페이지를 떠날 때 발생

 

window.onbeforeunload = () => {}

 

: 다른 페이지로 이동하거나 창을 닫으려고 할 때 발생, 브라우저는 사용자에게 확인 요청

 

- unload -> 사용자가 페이지를 떠날 때, 문서를 완전히 닫을 때 실행

 

window.addEventListener('unload', () => {
  navigator.sendBeacon(url, data)
});

 

* navigator.sendBeacon(url, data) : 사용자가 페이지를 떠날 때, 사용자의 행동 분석 정보 수집 시 사용, 백그라운드에서 데이터 전송, POST, 64kb 이하

 

 

 

- 참고한 사이트

 

1. 질문 모음 사이트

 

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

 

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

 

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

 

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

 

프론트엔드 면접 질문 모음