자주 나오는 프론트엔드 개발자 취업 면접 질문 및 답변 정리-1

 

 

What I Learned

 

 

프론트엔드 개발자로서 이직을 하기위해 공부한 기본 상식들과 용어, 인터뷰 질문들을 몇가지 모아서 정리해보았습니다.

 

 

 

---

 

 

1. 브라우저 렌더링 과정에 대해서 상세하게 설명해주세요.

 

 

 

 

1️⃣ 브라우저 주소창에 www.google.com  을 입력합니다.

2️⃣ 해당하는 구글 서버를 찾아갑니다.

3️⃣ DNS 서버에서 도메인 네임과 매칭될 실서버(IP주소)를 찾게됩니다. (이때, https 방식을 체크합니다.)

4️⃣ 서버의 기본설정이 대부분 index.html이기 때문에 서버에 해당 파일을 클라이언트로 보냅니다.

5️⃣ 브라우저는 텍스트로 이루어진 index.html 파일을 파싱합니다.

6️⃣ 한줄씩 읽으며 DOM, CSSOM 트리를 만들어나갑니다. (Obejct Model 만들기)

7️⃣ <link> 태그를 만나 CSS 요청이 발생하면, 요청과 응답과정을 거치고 CSS를 파싱합니다.

8️⃣ CSS 파싱이 끝나면 중단된 index.html을 다시 읽고 DOM 트리를 완성합니다.

9️⃣ 완성된 DOM트리와 CSSOM트리를 합쳐서 Render Tree를 렌더링합니다.

🔟 JavaScript는 중간 과정에서 HTML 파서는 <script> 태그를 만나면 JavaScript 코드를 실행하기 위해 파싱을 중단합니다.

➡️ 제어권한을 자바스크립트 엔진에게 넘기고 자바스크립트 코드 또는 파일을 로딩해 파싱하고 실행합니다.

 

이후에는,
· Layout 단계: 브라우저의 뷰포트(Viewport) 내에서 각 노드들의 정확한 위치와 크기를 계산합니다. 생성된 Render Tree 노드들이 가지고 있는 스타일과 속성에 따라서 브라우저 화면 출력을 계산하는 단계입니다. 레이아웃 단계에서는 %, vh, vw와 같이 상대적인 위치와 크기, 속성 등은 픽셀 단위로 변환이 됩니다.
 
· Paint 단계: Layout 계산이 완성되면 요소들을 실제 화면에 그리게 됩니다. 처리해야할 스타일이 복잡할수록 Paint 단계에 소요되는 시간이 길어집니다.

 

 

 

2. HTTP와 HTTPS 통신 방식의 차이를 설명해주세요.

 

 

http는 서버/클라이언트 모델에 따라 데이터를 주고 받기 위한 프로토콜 입니다. http와 https의 결정적 차이는 보안입니다. http 방식은 네트워크 상에서 허가받지 않은 사용자가 정보를 임의로 열람, 수정이 가능하고, https는 가능하지 않습니다. 속도면에서는 http 방식이 빠릅니다. http 방식은 민감한 정보를 다룰 때 항상 변조와 해킹 가능성을 생각해야 합니다. https는 데이터 암호화가 추가되어, 공개키/개인키 암호화 방식을 이용해 데이터를 암호화하기 때문에, 설치 및 인증서를 유지하는데 추가적인 비용이 발생됩니다. 따라서, 민감한 정보가 있는 페이지의 경우 https를 쓸 수 있습니다.

 

• 웹 프로토콜

웹 프로토콜은 웹에서 쓰이는 통신규약입니다. 그 중 HTTP는 브라우저가 웹 서버와 통신하기 위해 사용하는 주요 프로토콜입니다.

 

HTTP의 4가지 요청 형식
· GET: 문서를 요청. 서버가 클라이언트에 상태 정보와 복제된 문서를 보냄으로 응답을 합니다. (조회)
· POST: 데이터를 서버로 송신. 서버는 해당 데이터를 특정 아이템과 덧붙힙니다. (생성)
· HEAD: 상태 정보를 요청. GET과 동일한 형태로 응답합니다. 문서 복제는 하지 않습니다.
· PUT: 데이터를 서버로 송신. 서버가 특정 아이템을 완전히 대체합니다. (수정)

 

 

 

3. OOP 특징에 대해 설명해주세요. (상속, 캡슐화 등)

 

 

Object Oriented Programming 객체지향 프로그래밍이라고 하고 컴퓨터 프로그래밍 패러다임 중 하나입니다. 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고, 그 객체들간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법으로 OOP의 장점은 코드 재사용성입니다. 특징은 크게 4가지가 있다.

 

1️⃣ 상속: 클래스 개념에서 부모 클래스로부터 자식 클래스가 유산을 물려받는 것과 같이 부모의 메소드나 변수를 사용할 수 있다.

2️⃣ 다형성: 이름이 같은 함수가 있다고 할 때 해당 함수가 매개변수에 따라 다른 역할을 할 수 있다.

3️⃣ 캡슐화: 데이터를 은닉한다고 표현하는데, 외부에서 쉽게 데이터를 접근할 수 없도록 만들고 데이터 구조와 데이터 다루는 방법을 묶을 수 있다.

4️⃣ 추상화: 공통적인 속성이나 기능을 묶어서 이름을 붙힐 수 있다.

 

 

 

 

4. REST API에 대해 설명해주세요.

 

 

REST(Representational State Transfer)의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미하고 REST API는 이를 기반으로 만들어진 API를 의미합니다. 즉, REST란 HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)를 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다.

 

 

 

 

5. 점진적 향상법(Progressive Enhancement)와 우아한 성능저하법(Graceful Degradation)에 대해서 알려주세요.

 

 

사용자가 항상 최신 기술을 사용하는 브라우저에서 서비스를 이용하지는 않습니다. 특히 웹사이트를 만들 때는 최신 브라우저와 구식 브라우저를 모두 신경써야 합니다. 점진적 향상법과 우아한 성능저하법은 최신과 구식에 대응하기 위한 방법입니다. 점진적 향상법은 기본적으로 구식 기술 환경에서 동작할 수 있는 기능을 구현하고, 최신 기술을 사용할 수 있는 환경에서는 더 나은 사용자 경험을 제공할 수 있는 최신 기술을 제공하는 방법입니다. 즉, 구식 환경에서도 충분히 서비스를 사용할 수 있고, 최신 환경이라면 더 나은 기능들을 사용할 수 있도록 구현하는 것입니다. 구식 브라우저는 사용자에게 100 만큼의 기능을 제공, 최신 브라우저를 사용하는 사용자에게는 130 정도의 기능을 제공하도록 웹사이트를 만든다고 생각할 수 있습니다.

 

우아한 성능저하법은 점진적 향상법과는 반대입니다. 이는 최신 기술을 기반으로 기능을 구현한 뒤, 구형 기술에 기반한 환경에서도 유사하게 동작하도록 만드는 방법입니다. 최신 브라우저에서는 100 만큼의 기능을 제공하고, 구식 브라우저에서는 50 정도의 기능만 제공하는 웹사이트를 만드는 것입니다. img 태그에 alt 속성을 지정함으로써 이미지를 보여주지 못하는 환경에서는 이미지를 텍스트로 대체하는 것이 대표적인 예시입니다.

 

 

 

 

6. FOUC(Flash of Unstyled Content) 란 무엇인가요?

 

 

FOUC는 외부의 CSS 코드를 불러오기 전 스타일이 적용되지 않은 페이지가 잠시 나타나는 현상입니다. IE에서 자주 발생하는 현상으로 사용자 경험을 저하하는 요인이 됩니다. FOUC가 발생하는 주요 원인은 브라우저가 마크업에 참조된 파일들을 모아 DOM을 생성할 때 가장 빠르게 분석할 수 있는 부분(HTML)을 먼저 화면에 렌더링한 뒤 화면에 출력된 마크업 순서에 따라 스타일(CSS)을 적용하고 스크립트(JavaScript)를 실행하기 때문입니다.

 

FOUC를 해결하기 위해서는 head 태그 안에 CSS를 링크하고, @import의 사용을 자제해야 합니다. 또한 자바스크립트를 head 태그 안에서 로드하는 것도 방법이 될 수 있습니다. 어떤 방법으로도 해결되지 않는다면 FOUC가 발생하는 구역을 숨겼다가 브라우저가 준비됐을 때 다시 보여주는 방법이 있습니다.

 

 

 

 

7. CSS 애니메이션과 JavaScript 애니메이션의 차이는 무엇인가요?

 

 

자바스크립트는 메인 쓰레드가 무거운 작업을 하고 있을 때, 애니메이션 처리의 우선순위를 미뤄두는 반면 CSS는 독립적인 쓰레드가 애니메이션을 처리해줍니다. 때문에 CSS 애니메이션은 최적화가 쉽습니다. 하지만 항상 CSS 애니메이션이 우수한 것은 아니기때문에 UI 요소가 작은 경우 CSS를 사용하고, 애니메이션을 세밀하게 제어해야하는 경우에는 자바스크립트를 사용하는 것이 좋습니다.

 

 

 

 

8. 동일출처정책(Same-Origin Policy)와 CORS(Cross-Origin Resource Sharing)에 대해 설명해주세요.

 

 

동일출처정책은 한 출처의 문서와 다른 출처의 문서와 상호작용하지 못하도록 하는 정책입니다. 두 문서의 프로토콜, 포트, 호스트가 같으면 동일출처라고 합니다. CORS는 어떤 웹페이지에 있는 자바스크립트가 해당 도메인이 아닌 다른 도메인에 XMLHttpRequests 요청을 허용하는 기법을 말합니다. 브라우저는 서버와 통신할 때마다 서로에 대한 정보를 HTTP 헤더를 통해 전달합니다. CORS는 HTTP 헤더에 정보를 추가해 브라우저가 서버가 서로 통신해야 한다는 사실을 알게 합니다. CORS를 통하지 않을 경우, Cross-Domain 요청은 동일출처정책에 의해 브라우저가 금지합니다. CORS는 다른 출처에서 온 요청을 허용할 지 결정하기 위해 브라우저와 서버가 상호교류하는 방법을 정의한 것입니다.

 

 

 

 

9. Cookie, sessionStorage, localStorage의 차이점에 대해 설명해주세요.

 

 

쿠키(Cookie), 세션 저장소(sessionStorage), 로컬 저장소(localStorage)는 브라우저에 데이터를 저장하기 위한 공간입니다. HTML5 이전에는 쿠키를 주로 사용했습니다. 하지만 쿠키는 많은 양의 데이터를 저장할 수 없고, 동일한 도메인에 페이지를 요청할 대마다 서버로 함께 전송되며, 변조가 쉬워 보안이 취약합니다. 그래서 HTML5 부터는 저장소 객체(Storage Object)에 정의하고 있습니다. 저장소 객체는 세션 저장소와 로컬 저장소 두 가지를 제공합니다. 로컬 저장소에 데이터를 저장하면 창이나 탭을 닫아서 세션이 종료되도 데이터가 보존되고, 열려 있는 모든 창이나 탭이 데이터를 공유하게 됩니다. 세션 저장소는 반대입니다. 일반적으로 브라우저는 저장소에 5mb 정도의 공간을 할당하며, 데이터는 키-값 쌍을 이용하는 저장소 객체의 속성으로 저장됩니다. 또한 브라우저는 데이터를 보호하기 위해 동일추처정책에 의거, 서로 다른 페이지는 같은 도메인에 저장된 데이터에만 접근이 가능하도록 제한하고 있습니다.

 

 

 

 

---

 

 

 

 

자바스크립트에 대한 질문

 

 

• 자바스크립트의 Number Type과 다른 언어들과의 차이점은 무엇인가요? 왜 하나만 존재하나요?

 

다른 언어에는 int, double 등의 다양한 숫자 타입이 있지만, 자바스크립트는 정수만을 위한 타입은 없고 모든 수를 실수로 표현합니다.

 

 

 

• 자바스크립트의 원시 타입은 몇가지이고 종류는 무엇이 있나요?

 

Boolean, String, number, undefined, null, symbol 이렇게 6가지 종류가 있습니다. undefined는 선언만 되어있고 값은 없는 상태입니다. null은 자료형이 객체이며 빈 값을 의미합니다.

 

 

 

• null, undefined, undeclared의 차이는 무엇인가요?

 

null은 어떠한 값도 가리키지 않는다는 의미의 원시값입니다. 변수를 선언하고 null을 할당한 경우 변수가 어떠한 값도 가지지 않았다는 의미가 됩니다. undefined는 변수가 선언됐지만 값이 할당되지 않았다는 의미하는 값입니다. 즉, null은 개발자로부터 할당되는 값이고, undefined는 할당이 되지 않은 상태입니다. undeclared와 똑같이 표기되기 때문에 변수가 초기화되지 않았다는 것인지, 아예 선언되지 않았다는 것인지 확인할 필요가 있습니다.

 

 

 

• 실행 컨텍스트(Execution Context)에 대해서 설명해주세요.

 

자바스크립트의 코드들이 실행되기 위한 환경입니다. 전역 컨텍스트와 함수 컨텍스트가 존재하며, 전역 컨텍스트가 생성된 후 함수 호출시마다 함수 컨텍스트가 생성됩니다. 컨텍스트 생성시 변수 객체, Scope 체인, this가 생성됩니다. 컨텍스트 생성 후 함수가 실행이 되는데, 사용되는 변수들을 변수 객체 안에서 값을 찾고 값이 존재하지 않는다면 Scope 체인을 따라 올라가면서 찾게 됩니다. 함수 실행이 마무리가 되면 해당 컨텍스트는 사라집니다. 페이지가 종료되면 전역 컨텍스트도 사라집니다. 즉, 자바스크립트의 코드가 실행되기 위해서는 변수 객체, Scope 체인, this 등의 정보들을 담고 있는 곳을 실행 컨텍스트라고 부릅니다.

 

 

 

• 네이티브 객체(Native object), 호스트 객체(Host object), Built-in 객체에 대해 설명해주세요.

 

객체는 크게 세가지로 구분됩니다. 네이티브 객체는 ECMAScript 명세에 정의된 객체로, 자바스크립트의 모든 엔진에 구현된 표준객체입니다. BOM(Browser Object Model)과 DOM등은 모두 네이티브 객체이며, 자바스크립트 엔진을 구동하는 측에서 빌드되는 객체입니다. 호스트 객체는 개발자가 정의한 객체입니다. 마지막으로 빌트인 객체는 자브스크립트 엔진을 구성하는 기본 객체들을 포함합니다. Number, String, Array, Date 등의 내장 객체들이 있습니다.

 

 

 

• var, let, const의 차이점을 설명해주세요.

 

var은 함수 레벨 스코프를 지원합니다. let과 const는 블록 스코프를 가지고 공통적으로 재선언이 되지 않습니다.. 하지만 let는 재할당이 가능하고, const는 선언과 동시에 할당이 되기에 재할당은 불가능합니다.

 

 

 

• Prototype 기반 상속에 대해 설명해주세요.

 

자바스크립트는 클래스라는 개념이 없기 때문에 프로토타입(Prototype)이 클래스를 대신해 객체 지향 프로그래밍의 핵심을 맡고 있습니다. (ES6부터 클래스 문법이 추가되었기 때문에 프로토타입에 직접 접근할 힐요가 없어졌습니다. 그러나 프로토타입은 자바스크립트의 기반이기 때문에 알아두는 것이 좋습니다.) 자바스크립트에서는 이 프로토타입을 통해 다른 객체지향 언어에서 쓰이는 클래스를 구현할 수 있습니다.

 

 

 

• 자바스크립트의 호이스팅(Hoisting)은 어떻게 생기는지 설명해주세요.

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것

 

호이스팅은 변수를 선언하고 초기화했을 때, 선언 부분이 최상단으로 끌어올려지는 현상을 말합니다. let/const 변수 선언과 함수 표현식에는 호이스팅이 발생하지 않고, var 변수 선언과 함수 선언부분만 호이스팅이 일어납니다. var 변수/함수의 선언만 위로 끌어올려지고 할당은 올리지지 않습니다.

 

 

 

• 클로저는 무엇인지 원리와 왜 사용하는지 설명해주세요.

 

클로저란 함수와 해당 함수가 선언된 렉시컬 환경의 조합입니다. 자바스크립트에서는 함수 안에 또 다른 함수를 선언할 수 있는데, 함수 안의 함수인 내부함수 (inner function)은 외부함수(outer function)의 지역변수에 접근할 수 있습니다. 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수는 외부함수에 접근할 수 있습니다. 이러한 매커니즘을 클로저라고 합니다.

 

 

 

• 자바스크립트 모듈 패턴(Module Pattern)이란 무엇인가요?

 

모듈 패턴(Module Pattern)은 코드 설계 방법을 말합니다. 여기서는 객체를 public과 private으로 나누는 캡슐화가 핵심입니다. 자바스크립트는 public 이나 private와 같은 접근 제한자를 제공하지 않지만, 클로저를 이용해 구현할 수 있습니다. private method는 코드 접근을 제한할 수 있을 뿐만 아니라 추가적인 자바스크립트가 다른 스크립트와 이름이 충돌하는 것을 막을 수 있습니다. 매우 기본적인 방법은 모든 코드를 익명함수 안에 집어넣어 private 스코프로 만드는 것 입니다. 하지만 이렇게 하면 코드를 재사용하기 불편해지기 때문에 별도의 네임스페이스를 적용해야 합니다.

 

 

 

• use strict 이란 무엇인가요?

 

ES6에 새로 추가된 기능으로, 스크립트에 "use strict;" 구문을 추가하면 strict mode에서 실행하게 됩니다. strict mode는 코딩 실수를 찾아 예외를 발생시키고, 전역 객체에서 접근하는 것과 같은 위험한 액션을 막습니다. 스크립트 전체에 적용할 수도 있고, 특정 함수에만 적용할 수도 있습니다.

 

 

 

• Call stack과 Task queque는 무엇인가요?

 

자바스크립트 엔진은 요청이 들어올 때마다 요청을 순차적으로 call stack에 담아 하나씩 처리하게 됩니다. call stack는 하나만 존재하기 때문에 요청도 하나씩만 처리가 가능합니다. task queque는 처리해야 하는 task를 임시로 저장하는 큐입니다. call stack이 비워지면 task queue에 있던 task들이 순서대로 call stack에 push 됩니다. 가령 setTimeout() 함수로 10초의 딜레이를 둔다면, 그동안 setTimeout()이 처리할 task는 task queue에 쌓이고 다른 부분의 스크립트들이 실행됩니다. 따라서 딜레이를 0으로 주어도 setTimeout()의 task는 다른 것들보다 나중에 처리됩니다.

 

 

 

• 추상적 같음 비교(Abstract equality comparison)과 엄격한 같음 비교(Strict equality comparison)에 대해서 설명해주세요.

 

추상적 같음 비교(==)는 두 변수를 같은 데이터 타입으로 변환한 다음 값을 비교하는 반면, 엄격한 같음 비교(===)는 두 변수의 값과 데이터 타입을 함께 비교합니다. 따라서 값과 타입이 완전히 일치해야 true를 반환합니다. 엄격한 같음 비교를 사용한 비교 결과는 예측이 쉽고 타입 강제가 일어나지 않기 때문에 추상적 같음 비교를 사용하는 것보다 낫습니다.

 

 

 

• 이벤트 흐름(Event flow)이란 무엇인가요?

 

HTML 요소가 다른 요소의 내부에 중첩되어 있을 때 자식 요소를 클릭하면 부모 요소를 클릭한 셈이 됩니다. 이처럼 이벤트는 흐름을 가지고 있으며, 이것을 이벤트 흐름이라고 부릅니다. 이벤트 흐름에는 두가지 방식이 있습니다. 먼저 이벤트 버블링(Event Bubbling)은 이벤트가 직접적으로 발생한 노드로부터 시작해 바깥 노드로 이벤트가 퍼져 나가는 방식을 말합니다. 대부분의 브라우저가 기본적으로 이 방식을 지원합니다. 반대로 이벤트 캡쳐링(Event Captureing)은 바깥 노드로부터 시작해서 안쪽으로 퍼지는 방식입니다. IE8 혹은 이전 버전에서는 지원되지 않습니다.