질문 고르기
HTML
- 일반적으로 CSS를 불러오기 위해
<link>요소를<head>요소의 자식 요소로 하고, JavaScript를 불러오기 위해<script>요소를<body>요소가 끝나기 직전에 위치시키는 이유가 무엇인가요? <li>요소는 왜<ul>요소의 자식 요소여야만 하나요?- id 속성과 class 속성의 차이에 대해서 설명해주세요.
CSS
- CSS box model에 대해서 설명해주세요.
- 간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요? (centering)
- 간단한 블로그에서 아래와 같은 레이아웃을 구성하려면 CSS를 어떻게 작성해야 하나요?
div.author-container
+--------+------+------+
| 글쓴이 | 빈칸 | 공유 |
+--------+------+------+JavaScript
- 스코프에 대해서 설명해주세요.
- 배열, 객체를
const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요. - 원시 자료형과 참조 자료형에 대해서 설명해주세요.
- 얕은 복사와 깊은 복사에 대해서 설명해주세요.
DOM
innerHTML메서드와textContent메서드의 차이에 대해서 설명해주세요.event.preventDefault메서드는 언제, 왜 사용하는지 설명해주세요.
고른 질문 답변 작성하기
- 우선 답변을 한 마디로 정리합니다.
나쁜 면접관은 없지만, 바쁜 면접관은 있습니다. 여러분 이력서도 제대로 읽고 들어오지 못하는 면접관이 있을겁니다. 아마 면접에 불려와서 조금은 짜증났을 수도 있습니다. 그래서 짧고 명료하게 해당 질문에 대한 답을 하는 것이 가장 좋습니다. (간단명료한 답변이 마음에 들었다면, 이후 내용은 맞다고 생각하고 넘어갈 수도 있습니다. 😉 )
예시 질문: 클로저에 대해서 설명해주세요.
클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다.
- 해당 질문의 중요한 포인트를 2-3개 선정합니다.
면접관은 “정말 이 개념을 잘 알고 있는가?”를 궁금해합니다. 아마 위 정의를 그대로 이야기하고 추가로 설명을 하지 않으면, “잘 모르는 것 같은데?”라고 의심할겁니다. 면접관이 꼬리질문을 하기 전에, 먼저 핵심 포인트에 대해서 고민해봅니다.
예시 질문: 클로저에 대해서 설명해주세요.
클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다.
어휘적 환경이 뭐죠?
함수가 선언된 주변 환경을 의미합니다. 주로 외부 함수(outer function)의 변수가 내부 함수(inner function)의 어휘적 환경에 포함됩니다. 그래서 내부 함수가 리턴되어도 나중에 클로저의 어휘적 환경에 접근하여 외부 함수의 변수에 접근할 수 있습니다.
그래서 클로저를 언제 쓰나요?
클로저는 사실 자바스크립트의 어떤 함수든 가지고 있습니다. 어떤 함수든 전역 변수에 접근할 수 있기 때문입니다. 그래서 언제나 쓰이고 있습니다.
자바스크립트에서 private 메서드를 구현하기 위해서도 클로저를 활용할 수 있습니다. 클로저 내에 있는 변수는 외부에서 접근할 수 없기 때문에, 클로져 내에 있는 변수를 활용 할 수 있는 private 메서드만 따로 노출시켜서 인터페이스처럼 사용할 수 있게 됩니다.
- 답변을 중요한 포인트와 함께 다시 정리합니다.
바쁜 면접관은 위 설명을 제대로 못 들었을 수도 있습니다. 그래서 다시 지금까지 했던 내용을 정리하면 좋습니다.
정리하면, 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이며 특히 private 메서드 구현을 위해 알아야 하는 개념입니다.
내가 선택한 질문, 답
Q. event.preventDefault 메서드는 언제, 왜 사용하는지 설명해주세요.
A. 브라우저에서 실행되는 이벤트에 따라 Default 기능들이 있는데, 이러한 고유동작을 막아주는 역할을 합니다.
default기능이 뭔지 알고싶다면 함수안에 console.dir(event)로 확인할 수 있습니다.
주로 사용되는 경우는,
a태그를 눌렀을 때 (href)링크로 이동하지 않게 할 경우와
체크박스를 선택하지 못하게 할 경우, 그리고
form 안에 submit역할을 하는 버튼을 눌렀어도 (작동은 되지만) 새로 실행하지 않게 하고 싶을 경우에 사용합니다.
submit내용 자세히 설명해주세요!
예를 들어,
event.preventDefault메서드를 사용하지 않으면
submit이벤트를 실행하면 브라우저에서 자동으로 받아오는 정보와 함수들이 있는데 이때 Default로 새로고침이 실행됩니다. (a태그의 디폴트는 링크이동입니다.)
(submit버튼을 누르면 form안의 내용이 잠깐 보였다가 동시에 창이 다시 실행되는 submit의 기본동작이 있기 때문에 초기 화면으로 돌아오게 됩니다.)
이를 event.preventDefault으로 막아준다면,
submit버튼을 눌러도 창이 다시 실행되지 않고, form안의 내용이 출력되어 남아있는 모습을 볼 수 있습니다.
(input)텍스트를 넣을 때 기본동작을 막으면 텍스트가 안넣어지나요?
텍스트를 적용하는 것은 이벤트가 막히지 않습니다.
e.stopPropagation과의 차이점은 무엇인가요?
e.preventDefault는 기본 고유 동작만 막을뿐 외부에서 들어온 동작을 직접적으로 막거나 하진 않습니다.
반대로 e.stopPropagation 는 기본동작을 막는 건 못하지만, 현재 이벤트 버블링 단계에서 상위 요소들로의 이벤트가 더 이상 전파되지 않도록 방지하는 역할을 합니다.
이벤트 버블링은 뭔가요?
이벤트 버블링은 브라우저가 이벤트를 감지하는 방식 때문에 생겨난건데,
특정 요소에서 이벤트가 발생했을 때 해당 이벤트가 최상위의 요소까지 전파되는 특성을 의미합니다.
예를 들어 맨 아래 요소를 클릭했는데 연결된 상위 요소들 모두 클릭된 효과를 가져옵니다.
