[면접] 프론트엔드 개발자 기술 면접 문제 정리1

호이스팅(hoisting)이란?

자바스크립트에서 선언된 변수, 함수들 모두 끌어올려 유효 범위 내의 최상단에 선언하는 것을 말함

함수 호이스팅이 발생하는 원인 : 자바스크립트 변수 생성과 초기화(선언과 할당)가 분리되어 진행되기 때문

 

클라이언트 사이드 렌더링과 서버 사이드 렌더링

서버 사이드 렌더링 :

서버에 HTML 파일을 저장해 두었다가, 요청이 발생할 때 모든 파일을 브라우저에 전달하는 방식

클라이언트 사이드 또는 유니버셜 앱 HTML을 서버를 통해 렌더링

 

클라이언트 사이드 렌더링 :

서버에서 HTML 파일을 처리하지 않고, 브라우저의 자바스크립트를 사용해 렌더링 하는 것을 의미

주로 DOM을 사용하여 브라우저에서 렌더링

 

JS를 body 맨 밑에 둬야 하는 이유는 무엇인가요?

자바스크립트 코드를 body 태그 맨 뒤에 선언하게 되면, 무거운 코드가 있다고 하더라도 html태그와 CSS가 모두 동작한 다음 불러오기 때문에 미완성된 화면이 오랫동안 지속되지 않음. 

 

JS를 head에 둬야 하는 경우가 있을까요?

문서를 초기화하거나 설정하는 가벼운 스크립트들이 자주 사용됨.

DOM 구조에 필요한 스크립트 document.onload와 같은 로드 이벤트

 

스코프란?

변수에 접근할 수 있는 범위

전역 변수(global variables) : 어디에서든 사용할 수 있는 변수

지역변수(local variables) : 함수 스코프에서만 사용할 수 있는 변수

 

함수 스코프란?

함수 내에서만 유요한 범위를 갖게 하는 스코프

함수에서 선언한 변수들은 해당 함수 내에서만 접근할 수 있음

자바스크립트는 함수 스코프를 따르는 언어

 

블록 스코프란?

블록 단위 (if-else 문, while문, for문, try-catch문) 내에서만 유효한 범위를 갖게 하는 스코프

자바스크립트는 원래 함수 스코프를 따르지만, let과 const의 등장 이후로 블록 스코프 형성도 가능해짐

 

==와 ===의 차이점은 무엇인가요?

== : 추상 동등 연산자, 연산자는 타입 변환이 필요한 경우 타입 변환을 한 후에 동등한 지 비교 

=== : 완전 동등 연산자, 연산자는 타입 변환을 하지 않으므로 두 값이 같은 타입이 아닌 경우 false를 반환 

 

컨텍스트(context)란?

this 키워드 값이 무엇인지를 나타내는 용어 즉 함수가 속해있는 객체가 무엇인지 의미

(만약 함수가 글로벌 스코프에서 선언되었다면, 이때의 컨텍스트는 global(window))

 

이벤트 버블링이란?

하위 엘리먼트에서 상위 엘리먼트로 이벤트가 전파되는 특성

 

이벤트 캡처링이란?

상위 엘리먼트에서 하위 엘리먼트로 이벤트가 전파되는 특성

 

event.stopPropagation()

이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막음

 

이벤트 위임이란?

부모 요소에 이벤트 리스너를 붙이는 것

이벤트 리스너를 부모 요소(element)에 붙이는 것

하위 요소에 이벤트가 발생하면 이벤트 버블링 때문에 부모 요소에 연결된 리스너가 실행됨 

 

이벤트 위임의 장점은?

• 사용하는 메모리의 양이 감소. 이벤트가 발생하는 모든 요소마다 리스너를 추가할 필요가 없고 부모에 하나만 추가하면 되기 때문에.
• 이벤트 발생하는 요소가 추가되고 제거될 때마다 리스너를 추가하고 제거할 필요가 없음.

 

inline vs inline block 차이점?

inline은 text크기만큼만 공간을 점유하고 줄 바꿈을 하지 않음.
inline-block은 inline속성과 block속성의 특징을 둘 다 가지고 있음. inline속성과 다르게 width, height 적용 가능하고 line-height를 커스텀하게 적용할 수 있음.

 

모듈이란?

프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위들

Math.js라는 자바스크립트 파일이 있으면 여기에는 SUM(), SUBSTRACT()드의 메서드들이 있는 것

 

DOM에서 id와 Class의 차이

id는 유일한 값, class는 여러 번 중복이 가능하며 여러 번 값은 띄어쓰기로 구분하여 넣을 수 있음

 

메서드 체이닝이란?

여러 메서드를 이어 호출하는 것장점은 코드가 간결해지지만, 디버깅이 복잡할 수 있음

 

SPA(Single Page Application)란?

단일 페이지 애플리케이션(SPA)은 현재 웹 개발의 트렌드

브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식

 

this 용법을 아는 대로 설명해주세요.

this는 '자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수' 

this는 함수의 호출 방식에 따라 특정 객체를 바인딩

1. 생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스와 바인딩
2. Call, Apply, Bind 메서드 사용 시, 함수의 첫 번째 인수로 전달하는 객체에 바인딩
3. Object.method 형태와 같이 객체 내에서 호출할 경우, this는 해당 객체와 바인딩
4. 위 세 가지를 제외한 일반적인 함수 호출의 경우, this는 전역 객체와 바인딩
5. ES6의 화살표 함수 내에서 this가 사용될 경우, this는 상위 스코프의 this와 바인딩

 

DOCTYPE 이란 무엇인가요?

문서 형식 선언(Document Type Declaration) 

문서의 종류를 선언하는 태그

- Doctype 무선언 -> 쿼크 모드로 렌더링 -> 브라우저마다 다른 결과물 출력

- Doctype 선언    -> 표준 모드로 렌더링 -> 브라우저 별로 같은 레이아웃으로 결과물 출력

 

쿼크 모드 
오래된 웹 페이지의 하위 호환성 유지를 위해 사용되며, W3C나 IETF의 표준을 엄격하게 준수하지 않는다. 같은 코드라도 웹 브라우저마다 다르게 해석해서 다른 결과물을 보여준다.

 

 

자바스크립트와 관련한 same-origin 정책에 대해 설명

다른 도메인의 스크립트를 사용한 해킹 방지

동일 출처 원칙(same-origin policy)은 자바스크립트가 서로 다른 도메인 사이에 리퀘스트를 날리는 것을 방지

이 정책은 다른 도메인의 악의적인 스크립트가 타겟 웹페이지에서 DOM을 통해 민감한 정보를 가져가는 것을 방지

 

웹사이트의 전역 scope를 건드리지 않고 그대로 두는 것이 좋은 이유는?

변수와 함수 이름의 충돌을 방지하기 위해

모든 스크립트는 전역 스쿠프에 접근할 수 있다. 만약 모든 사람이 변수 선언에 전역 네임스페이스를 사용한다면 충돌이 매우 많이 발생할 것이다. 

 

Webpack이란?

html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 함

쉽게 말하면, 필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어 주는 것

 

그럼 Webpack을 왜 사용해야 할까?

옛날에는 페이지마다 새로운 html을 요청해서 뿌려 주는 방식이었다면, 요새는 SPA 하나의 html 페이지에 여러 개의 자바스크립트 파일들이 포함함. 파일을 컴파일할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸리기 때문에 그 부분을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해줌.