1. 답변을 한 마디로 정리하기
2. 해당 질문의 중요한 포인트를 2~3개 선정하기 (꼬리질문 준비)
3. 답변을 중요한 포인트와 함께 다시 정리하기
4. 예시를 들어 설명하면 면접관에게 더 잘 와닿을 수 있다.
모르는 것은 애매하게 대답하는 것 보다 모른다고 이야기 하는게 더 낫다.
다만, 면접은 어필하는 자리이니 아는 만큼은 최대한 이야기 하는게 좋다.
”제가 아는 선에서 최선을 다해서 답변해보겠습니다.”여태까지 배운 내용에 대한 질문 목록이다.
아래 질문 중 최소 1개 이상 선택해서 답변을 준비해보자.
HTML
-
일반적으로 CSS를 불러오기 위해
<link>요소를<head>요소의 자식 요소로 하고, JavaScript를 불러오기 위해<script>요소를<body>요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?<link>를<head>안에 넣는 것은 최적화된 웹사이트를 구축할 때 적절한 명세의 일부입니다.
웹 페이지가 처음 로드되면 HTML과 CSS가 동시에 파싱됩니다.HTML과 CSS의 정보가 담긴 부분이 우선적이고 점진적으로 렌더링되기 때문에 유의미한 정보가 담긴 화면(first meaningful paint)을 유저에게 최대한 빠르게 전달할 수 있습니다.
link 요소를 문서 최하단에 위치했을 때, 몇몇 브라우저(IE 등)은 스타일이 변경되면 페이지의 요소를 다시 그리는 것을 피하기 위해 점진적 렌더링을 금지시킵니다.
이 때문에 유저는 비어있는 하얀 페이지에서 멈추게 됩니다. 또는 CSS 스타일이 적용되지 않은 내용이 잠깐 보일 수 있습니다.웹 브라우저가 작성된 코드를 해석하는 과정에서
<script>를 만나면 HTML 해석을 잠시 멈추고 script 요소를 먼저 실행합니다.
스크립트를 맨 아래에 위치시키면 HTML을 먼저 파싱하여 사용자에게 표시할 수 있습니다.JS로 DOM 요소를 다룰 때 body 요소가 끝나기 직전에 위치하지 않는 경우, 스크립트 요소 아래에 있는 코드를 읽지 못해 오류가 발생할 수 있습니다.
스크립트를 head 요소의 자식으로 넣어야 하는 경우, defer 속성을 사용하면 HTML 파싱을 마친 후 스크립트를 실행하는 것과 같은 효과가 있습니다.
<li>요소는 왜<ul>요소의 자식 요소여야만 하나요?li 요소는 목록의 아이템을 보여주기 위한 요소입니다. 때문에 목록을 담는 ul 요소의 자식 요소여야 합니다.
ul 요소의 자식 요소로 위치하지 않더라도 화면 상에 문제가 발생하진 않으나, 각 요소의 의미에 맞게 HTML을 작성하는 것이 작성자 이외의 다른 개발자가 와서 보더라도 쉽게 이해할 수 있기 때문에 li 요소를 ul 요소의 자식 요소로 위치시키는 것이 중요합니다.- id 속성과 class 속성의 차이에 대해서 설명해주세요.
id 속성은 고유하며, class 속성은 고유하지 않습니다.
class 속성은 여러 HTML 요소에 사용할 수 있습니다.
하지만, 하나의 HTML 요소에 적용된 id 값은 동일 페이지의 다른 요소에 적용되어서는 안됩니다. id 속성은 해당 HTML 요소가 유일함을 확인할 수 있는 수단이기 때문입니다.
id로 DOM 요소를 가져오는 메소드가 getElementsById가 아닌 getElementById인 이유입니다.
CSS
-
CSS box model에 대해서 설명해주세요.
-
간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요? (centering)
-
간단한 블로그에서 아래와 같은 레이아웃을 구성하려면 CSS를 어떻게 작성해야 하나요?
div.author-container +--------+------+------+ | 글쓴이 | 빈칸 | 공유 | +--------+------+------+
JavaScript
- 스코프에 대해서 설명해주세요.
- 배열, 객체를
const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요.배열과 객체는 참조 자료형이기 때문에 선언 시 배열(혹은 객체)의 주소 값이 할당됩니다.
const 키워드로 선언 시 해당 변수에 할당된 값을 변경할 수 없으나, 배열과 객체는 주소 값을 변경하지 않으면서 heap에 저장된 데이터를 조작할 수 있기 때문에 const 키워드로 선언한 배열과 객체의 요소나 속성을 추가, 변경할 수 있습니다. - 원시 자료형과 참조 자료형에 대해서 설명해주세요.
- 얕은 복사와 깊은 복사에 대해서 설명해주세요.
객체 혹은 배열의 얕은 복사는 복사본이 원본과 같은 주소를 공유합니다. 때문에 원본이나 복사본 중 하나를 수정하면, 수정하지 않은 쪽도 함께 수정이 됩니다.
깊은 복사는 복사본이 원본과 같은 주소를 공유하지 않고, 주소 안에 있는 데이터를 복사합니다. 때문에, 원본이나 복사본 중 어느쪽을 수정하더라도 서로 영향을 받지 않습니다.
DOM
innerHTML메서드와textContent메서드의 차이에 대해서 설명해주세요.event.preventDefault메서드는 언제, 왜 사용하는지 설명해주세요.event.preventDefault 메서드는 해당 이벤트객체가 실행될 때의 기본 동작을 무시해야할 때 사용합니다.
예를들어, submit 이벤트 발생 시 웹 브라우저는 기본적으로 reload 되는데, reload 시키지 않고 다른 동작을 실행 시켜야 할 때 사용합니다.
