프론트엔드 개발자로 면접을 준비하면서 나올 수 있는 질문 리스트를 틈틈이 작성해 보고자 한다. 첫 번째로 웹 브라우저와 HTML 관련된 질문 리스트를 적어 본다. 참고로 이는 화상 면접이나 전화 면접에서 나올 만한 예상 질문들을 정리하는 내용으로, 경력 3년 이하 주니어 개발자 면접을 대비하기 위함이기에 너무 자세하고 깊은 내용보다는 간결하고 핵심적인 내용 위주로 적어보았다.
Web Browser
브라우저의 동작 원리를 간단하게 설명해 주세요.
브라우저의 기본적인 역할은 HTML, CSS 명세에 따라 HTML 파일을 해석해서 표시하는 것이다. 브라우저를 구성하는 요소는 사용자 인터페이스, 브라우저 엔진(크롬, 사파리는 Webkit, 파이어폭스는 Gecko), 렌더링 엔진, 통신, UI 백엔드, 자바스크립트 해석기, 자료 저장소 등이 있다. 렌더링 엔진은 먼저 HTML 문서를 파싱해서 DOM 트리를 구축한다. 그리고 CSS 마크업을 파싱해서 앞서 구축한 DOM 트리와 함께 렌더링 트리를 만든다. 렌더링 트리는 화면에 보여줄 것들만 가지고 있는 트리로, 구축이 되면 순차적으로 화면에 배치한다. 부모에서 자식 순서로 배치는 진행된다. 배치가 완료되면 그리기를 시작한다.
CORS가 무엇이며 어떻게 해결을 할 수 있는지 설명해 보세요. (D사 화상면접)
다른 도메인에서 리소스 요청 시 cross-origin HTTP 에 의해 요청을 하는데, 대부분의 브라우저는 보안 상의 이유로 이 요청을 제한한다. 이를 동일 오리진 정책(Same Origin Policy)이라고 한다. 요청을 보내기 위해서는 요청 보내는 대상과 프로토콜이 같아야 하고, 포트도 같아야 한다. JSONP(JSON-padding)을 통해 해결하거나 특정 HTTP 헤더를 추가하여 이 이슈를 해결할 수 있다. 이와 같이 타 도메인 간 자원을 공유할 수 있게 해주는 것을 Cross Origin Resource Sharing, 줄여서 CORS라고 한다.
크로스 브라우징이 무엇인가요?
크로스 브라우징은 웹 표준에 따라 서로 다른 OS 또는 플랫폼에 대응하는 것을 말한다. 브라우저별 렌더링 엔진이 다른 상황 등 어떠한 상황 속에서도 문제 없이 동작하게 하는 것을 목표로 한다. 프론트엔드 개발자는 여러가지 전략을 세울 수가 있는데, feature detection(기능 탐지)을 사용해서 해당 기능이 해당 브라우저에 있는지를 확인하는 방법을 사용할 수도 있다. 특히 한 쪽 환경에 최적화를 하는 것 보다, 전체적인 웹 표준을 지키는 데에 노력해야 한다.
서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이에 대해 설명하시오.
서버 사이드 렌더링은 전통적인 웹 방식을 의미하며 페이지가 새로고침 될 때마다 서버로부터 리소스를 전달받아 화면에 렌더링 하는 방식이다. 하지만 React, Vue 등의 라이브러리가 등장하면서 훨씬 더 좋은 성능의 SPA 방식의 개발 환경을 선호하기 시작하였다. CSR에서 서버는 단지 JSON 파일을 보내주는 역할만 할 뿐이며, html을 그리는 역할은 클라이언트에서 수행한다. 하지만, CSR은 자바스크립트가 모든 동작을 수행한 후에 화면에 내용이 나타나므로 초기 구동속도는 SSR에 비해 느리다는 단점이 있다. SEO를 할 수 없고 보안적으로 취약하다는 문제점도 나타난다.
빈 화면에서 렌더링이 완료 되기까지 너무 오래 걸린다는 피드백이 있을 때, 어떻게 하면 이 문제를 해결할 수 있을까요?(단, 캐시는 이미 적용 됨) (V사 필기시험)
script 파일을 body tag 가장 하단에 위치시키거나 script 태그에 async 속성을 부여한다. 또는 네트워크 리소스 블라킹을 통해 불필요한 무거운 파일들을 제한한다.
HTML
쿠키와 세션 스토리지, 로컬 스토리지의 차이를 설명해 주세요.
기본적으로 쿠키와 로컬 스토리지, 세션 스토리지는 모두 브라우저에서 데이터 저장소의 역할을 하는 것들이다. 웹에서 로그인을 하기 위해서는 토큰을 발급받아 API를 호출해야 한다. 하지만 반복되는 작업을 계속 하게 되는 것이 비효율적이고, 이를 보완하기 위해 쿠키를 서버와 클라이언트에 생성해서 토큰 발급 없이 쿠키만 가지고 서버에 요청을 할 수 있게 된다. 쿠키는 저장 공간이 4KB로 작은 편인데 이러한 단점을 보완하여 만든 것이 웹 스토리지이다.
웹 스토리지는 서버에 클라이언트 데이터를 저장하지 않는다. 웹 스토리지에는 로컬 스토리지와 세션 스토리지가 있는데 로컬 스토리지는 브라우저에 정보가 계속해서 남아있는 반면, 세션 스토리지는 해당 세션이 끝나면, 즉 브라우저가 닫히면 데이터가 사라진다. 웹 스토리지는 데스크탑 기준 5~10MB의 저장 공간을 가지고 있어서 쿠키에 비해 훨씬 저장공간이 크다는 장점이 있다. 웹 스토리지는 반면 HTML5부터 지원하기 때문에 이전 브라우저에서는 지원이 되지 않는다는 단점이 있다.
프로그레시브 렌더링(Progressive Rendering)이 무엇인가요?
프로그레시브 렌더링은 컨텐츠를 가능한 빨리 표시하기 위해 성능을 향상시키는 기술이다. 인터넷 속도가 느리거나 불안정한 모바일 환경이 아직 많이 남아있기 때문에 이럴 때 유용하게 사용한다. 대표적으로 레이지 로딩이 있다. 이미지를 한 번에 로드하는 것이 아니라, 자바스크립트를 통해 사용자가 표시하려는 부분만 스크롤 시에 이미지를 로드하는 것이다.
다국어 페이지는 어떤 방식으로 제공하나요?
SSR의 경우 HTTP 요청 시 클라이언트에서 Accept-Language 헤더와 같이 기본 언어 설정에 대한 정보를 보낸다. 서버는 이 정보를 사용해 해당 언어로 된 문서 버전을 반환한다. 반환된 문서는 lang 속성을 선언한다. CSR 시 클라이언트 사이드에서 해당 언어 팩(JSON 등)을 가져와 출력한다.
SEO는 무엇인가요?
검색 엔진 최적화란 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 하는 작업을 말한다. SPA를 개발하는 경우 여러 가지 이점이 있음에도 불구하고 SEO가 잘 되지 않는다는 약점이 있다. 따라서 정보 제공을 목적으로하는 웹 페이지는 SPA 방식이 불리할 수 있으며, React나 Angular 같은 프레임워크는 서버 렌더링을 통해 SEO에 대응할 수 있는 기술을 지원하므로 선별적으로 사용하면 된다.
<section>과 <article>의 차이는 무엇인가요?
section은 보통 비슷한 특성의 컨텐츠를 담는 구역을 설정할 때 사용한다. 예를 들어, header, footer 사이에 sidebar나 content를 담는 식이다. 반면 article은 관련성이 없고 독립적인 내용들을 담을 때 사용한다. 예를 들어, section 안에서 서로 다른 기사들을 나열해야 할 때 각각의 기사를 article로 담는 식이다.
HTML5 tag를 설명해 주세요. (D사 화상면접)
모든 HTML 문서는 <!DOCTYPE> 선언으로 시작한다. HTML5의 경우 <!DOCTYPE html> 이런 식으로 말이다. 이 선언은 태그는 아니지만 브라우저가 어떤 타입을 받아들여야 할지를 알려주는 정보이다.
여러가지 태그가 있는데 주요한 것들 위주로 살펴보면, HTML5의 필수 태그는 html, head, body 등이 있다. html 태그는 HTML문서의 가장 최상단에 위치하는 태그이며, head 태그에는 style, script, title, link, meta 태그 등이 들어간다. body 태그는 HTML 문서의 내용이 들어간다.
meta 태그에 대해서 조금 더 살펴보면, meta 태그는 head 부분에서 다른 태그들(script, style, link, title 등)로 나타낼 수 없는 메타데이터를 나타내는 태그를 의미한다. <meta name="keywords" content="ABC"> 와 같이 검색 엔진을 위한 키워드나 <meta name="description" content="OWEN">과 같이 문서에 대한 설명 등에 사용된다. 화면에는 별다르게 표시되는 내용이 없지만, 검색 엔진이나 브라우저에서 읽힌다.
Sementic tag에 대해서 설명해 주세요. (D사 화상면접)
시멘틱 태그는 HTML5에 도입이 되었는데, 개발자와 브라우저에게 의미있는 태그를 제공하는 것을 의미한다. 예를 들어 <div> 태그는 non-sementic 태그이고, <table>, <article>은 sementic 태그에 속한다. 시멘틱 태그는 태그만 보고 대략적으로 들어갈 내용을 유추할 수 있다는 장점이 있다. 헤더와 푸터를 설정할 때에도 과거에는 <div id="header"></div> 와 같이 했던 것을 이제는 <header> 하나로 깔끔하게 정리할 수 있다.
참고자료
'Web Frontend Developer' 카테고리의 다른 글
| Vue.js로 간단한 Trello 클론 만들어 보기 - Part1 (0) | 2020.05.25 |
|---|---|
| <FE면접질문> #3. JavaScript (Part 1) (0) | 2020.05.22 |
| [TroubleShooting] Content-type: x-www-form-urlencoded에서 POST 데이터 보내기 (0) | 2020.05.21 |
| <FE면접질문> #2. CSS (1) | 2020.05.18 |
| Vue.js #1 Vue.js Intro & 라이프 사이클 (0) | 2020.03.18 |
