웹 프론트엔드 개발자 면접 질문 리스트 - HTML

웹 프론트엔드 개발자로 취직하기 위해서는 코딩테스트, 웹 과제, 토이 프로젝트 등을 통해 프로그램을 개발하고 시험을 준비하면서 기업이 필요로하는 능력을 키워야합니다.

 

 

하지만 개발을 통해서 멋진 포트폴리오를 만드는 것도 중요하지만 취업의 마지막 관문인 면접에서는 어떤 질문을 받게 될까요?

 

 

면접을 준비하는 입장으로서 저도 궁금합니다만...

 

 

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

 

 

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

 

 

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

 

 

HTML

 

1. window 객체란 무엇인가요?

 

- 실행 시 가장 상위에 존재하는 객체, 변수 또는 함수 선언시 이 window 객체안에 선언된다. window 객체의 프로퍼티 통해 브라우저에 접근 가능합니다.

 

ex) window 객체

window.location : 브라우저의 주소

window.location.href : 현재 브라우저 창에 입력된 주소,

window.navigator : 브라우저 정보

window.document : 문서의 HTML/CSS 접근가능한 접근자

 

 

2. DOM (Document Object Model)

 

- Javascript에서 document 로 접근 가능하다. 자식의 최상위 문서는 HTML

 

 

3. 블록요소와 인라인요소

 

- 블록요소 : 여러 줄에 걸쳐 작성, 여러 요소 포함

ex) <div>, <p>, <article>

 

- 인라인요소 : 한 줄에 모든 내용 작성

ex) img, button, a

 

 

4. DOCTYPE (DTD : Document Type Definition)

 

- 문서의 종류를 선언하는 태그, HTML이 어떤 버전으로 작성되었는지를 미리 선언하여 웹 브라우저가 내용을 올바르게 표시할 수 있도록 해주는 것이 DTD

 

 

5. 표준모드와 쿼크모드

 

- 쿼크모드 : 브라우저가 출력하고자 하는 문서가 최신이 아니라고 판단하면 쿼크모드로 렌더링한다. 이전 브라우저에 맞는 비표준적인 방법의 CSS를 적용한다.

 

- 표준모드 : 브라우저가 출력하고자 하는 문서가 최신이라고 판단하면 표준모드로 렌더링을 하는데 CSS2 스펙에 따라 CSS가 적용된 것을 의미한다.

 

 

6. Cookie

 

- 클라이언트에 대한 정보를 이용자의 하드에 저장하기 위해 사이트에서 클라이언트의 웹 브라우저에 전송하는 정보

 

- 장점 : 모든 브라우저가 지원

- 단점 : 보안이 취약, 쿠키 자체 용량이 적음(4 KB)

 

 

7. 웹 스토리지

 

1) 로컬 스토리지 : 클라이언트에 대한 정보를 영구저장

2) 세션 스토리지 : 세션이 종료되면 삭제 (브라우저 종료시 삭제)

 

- 장점 : 쿠키보다 향상된 용량 (5 MB), 상대적으로 보안에 안전

- 단점 : 모든 브라우저가 지원하지 않음

 

 

8. HTML5 에서 추가된 기능

 

- 멀티미디어 기능 향상 : 2D, 3D 구현 가능, 플러그인 없이 음악, 영상 재생 가능

- 시멘틱 태그, 마크업

- 오프라인 및 저장소 : 인터넷이 없어도 애플리케이션 동작 가능

 

 

9. SPA (Single Page Application)

 

- 최소 한 번 페이지를 전체 로드한 후 데이터만 변경하여 사용 가능한 애플리케이션

- 단일 페이지로 구성된 웹 애플리케이션, 화면 이동 시 필요한 데이터를 서버사이드에서 HTML로 전달받지 않고(서버사이드 렌더링 X), 필요한 데이터만 서버로부터 JSON으로 전달받아 동적으로 렌더링 하는 방식

 

- 기존 애플리케이션 : 화면이동 시 필요한 HTML을 서버사이드에서 받아 처음부터 다시 로딩하므로 시간이 걸린다.

- SPA : 화면 구성에 필요한 모든 HTML 을 클라이언트가 가지고 있고 서버사이드에서는 데이터를 요청하여 JSON 으로 받아 필요한 부분만 수정

 

- 장점 :

1) 부분 데이터를 받아 필요한 부분만을 렌더링 하기 때문에 효율적이다.

2) 데이터 변경 시 화면 전체를 다시 렌더링 할 필요가 없다.

 

- 단점 :

1) 처음 화면을 로딩할 때 모든 화면이 로딩되어 있어야 한다.

2) 앱 규모가 커지면 .js 파일이 너무 커짐

 

 

10. REST API

 

- 구성 : 자원(URI), 행위(HTTP METHOD), 표현

- HTTP METHOD : POST(생성), GET(조회), PUT(수정), DELETE(삭제) (CRUD)

- 디자인 가이드 : URI는 정보의 자원을 표현해야 한다, 자원의 행위는 HTTP METHOD로 표현한다.

- / 를 통한 계층 관계 표현

- 명사 위주의 url 이름, 클라이언트 - 서버 구조가 확실해짐

- REST 란 자원을 이름으로 구분하여 자원의 형태를 공유하는 것을 의미

- api란 데이터와 기능을 집약해놓은 것, url로 json 호출

 

 

11. 점진적 향상법(progressive enhancement)과 우아한 성능저하법(graceful degradation)

 

- 점진적 향상법 : 많은 테스트를 통해 기능을 점진적으로 향상시키는 것, 구식 브라우저에서 사용가능한 환경으로 코드를 작성한 후 최신브라우저를 사용하는 사용자에게 추가기능 제공 (HTML -> CSS -> JS)

 

- 우아한 성능저하법 : 최신 기기에서 동작하는 기능을 만들고 나서, 오래된 기기에서 동작하기 위해 유사한 기능을 만들어 동작하게 하는 것, 별도의 버전을 만들어 놓는 것 (babel을 통해 ES6 -> ES5 코드로 변경하는 것)

 

 

12. FOUC (Flash Of Unstyled Content)

 

- 외부의 CSS 코드를 불러오기 전 스타일이 적용되지 않은 페이지가 나타나는 현상, IE 에서 자주 발생하는 현상으로 사용자 경험 저하 요인, 브라우저가 DOM을 생성할 때 HTML -> CSS -> JS 순으로 코드를 적용하기 때문이다.

 

- 해결하는 방법 : head태그 안에 CSS를 링크, @import 의 사용을 자제, head태그 안에 JS 코드를 로드하는 것, FOUC가 실행 될 때 브라우저가 준비가 끝나면 렌더링 하는 방식

 

 

13. ARIA(Accessible Rich Internet Applications)와 스크린리더

 

- ARIA는 접근가능한 인터넷 어플리케이션을 의미합니다. 장애인을 위한 접근성 향상 방법을 정의하는 것

- 스크린리더 : 시각장애인이 컴퓨터를 사용할 때 나타나는 정보들을 음성으로 출력해주는 프로그램

 

 

14. 코드 의존성과 DRY원칙

 

- 코드 의존성 : 다른 스크립트에 의존적인 스크립트를 작성하는 것, jQuery

- DRY(Don’t Repeat Yourself) : 소프트웨어 개발원칙, 같은 코드가 2번 이상 사용될 경우에는 함수, 객체 등을 만들어 재사용한다. 코드 중복 <-> 코드 재사용

 

 

15. data-* 속성

 

- HTML5에 추가된 데이터 속성, 특정한 데이터를 DOM 요소에 저장하기 위한 목적, hidden으로 태그를 숨겨 값을 저장할 필요가 없어짐

 

 

16. script 태그의 async와 defer

 

- HTML5 에서 추가된 기능, 브라우저가 script 태그를 만나면 해당 스크립트를 내려받고 해석하고 실행할 때까지 HTML 코드 parsing 작업을 뒤로 미루게 되어 페이지 로딩이 느려지게 된다.

 

- async, defer : 스크립트에 적용하면 parsing 작업의 중단 없이 동시에 내려받게 되며, onload 핸들러를 통해서 일반적인 초기화 작업 가능, async : window의 load event 전 내려받는 즉시 바로 실행, defer : 문서의 parsing 작업이 끝난 후 DOMContentLoaded event 전에 문서에 삽입된 순서에 따라 실행됨

 

 

 

- 참고한 사이트

 

1. 질문 모음 사이트

 

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

 

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

 

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

 

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

 

프론트엔드 면접 질문 모음