면접질문
- 처음 대답은 신중하게 대답을 하여서 꼬리질문 방지하기.
- 질문에 대한 답변을 할 때에는 그 내용을 잘 이해했는지 어필하기
- 만약 답변을 모른다면, 어설프게 아는척하기보단 아는선에서 최대한 답하고 모르는대로 답변하기.
- ex. "아는 부분은 여기까지이지만 더 열심히 배워서 발전하겠습니다."
HTML
1. 일반적으로 CSS를 불러오기 위해
<link>요소를<head>요소의 자식 요소로 하고, JavaScript를 불러오기 위해<script>요소를<body>요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?
✅ <head>안에 <link>를 넣는 이유
-
페이지가 처음 로드 되면 HTML과 CSS가 동시에 파싱되기 때문에.
- HTML은 DOM(Document Object Model)을 만들고, CSS는 CSSOM(CSS Object Model)을 만든다.
- 2가지는 모두 웹사이트에서 시각적인 부분을 만드는데, 필요하므로 빠른 first meaningful paint를 할 수 있게 해준다.
- 문서 최하단에 두는 것은 이에 반하는 행동으로 점진적인 렌더링을 하는 경우 몇몇 브라우저는 스타일이 변경되면 페이지 요소를 다시 그리는 것을 막기 위해 렌더링을 차단하는데, 문서 최 하단에 stylesheet가 있다면 사용자는 빈화면을 보게될 것이다.
✅ </body> 직전에 <script>를 넣는 이유
-
<script>는 다운로드되고 실행되는 동안HTML파싱을 차단하기 때문에HTML이 끝난 마지막 부분에<script>를 작동을 시켜야 정상적으로 돌아갈 수 있다.- 스크립트를 맨 아래에 두면 html를 먼저 파싱하여 사용자에게 노출시킬 수 있다.
2.
<li>요소는 왜<ul>요소의 자식 요소여야만 하나요?
-
<li>요소는 말 그대로 list의 item들을 보여주기 위한 요소 이기에, 목록을 담는<ul>(unordered list)요소의 자식 요소여야 합니다.ul대신ol로도li를 사용할 수 있다. (순서가 중요한 목록에는<ol>태그로 마크업 된 목록의 항목을 숫자로 표시)
3.
id속성과class속성의 차이에 대해서 설명해 주세요.
-
id 속성과 class 속성의 차이는 고유성에 있습니다.
- id는 고유한 하나의 요소를 정하는데 사용하고, class는 여러 요소들에 사용할 수 있습니다.
-
하나의 HTML 요소에 적용된 id의 값은 다른 요소에는 적용되어선 안됩니다.
- 어떤 요소에 id 속성을 부여한다는 것은 그 HTML 요소가 유일함을 확인할 수 있는 수단이기 때문입니다.
- getElementById는 있어도, getElementsById는 없는 이유입니다.
-
id의 값이 같은 HTML 요소가 여러 개 있으면 웹 표준에 어긋나기 때문에, 협업하는 다른 개발자나 검색엔진에 혼란을 줍니다.
-
✅ 정리하면, id는 하나의 HTML 요소에만 사용할 수 있고, class는 여러 HTML 요소에 사용할 수 있습니다.
CSS
1. CSS box model에 대해서 설명해 주세요.
- CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정합니다.
Content: 콘텐츠 경계(content edge)가 감싼 영역으로, 글이나 이미지, 비디오 등 요소의 실제 내용을 포함합니다.Padding: 안쪽 여백 경계(padding edge)가 감싼 영역Border: 테두리 경계(border edge)가 감싼 영역Margin: 바깥 여백 경계(margin edge)가 감싼 영역
2. 간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요? (centering)
-
저는 로그인 폼 컴포넌트를 중간에 위치시키기 위해서 flexbox를 사용하는 것이 가장 좋은 방법 중 하나라고 생각합니다.
- 로그인 폼 컴포넌트를 감싸는 래퍼 요소가 있다면, 그 래퍼 요소에 display속성값을 flex로 지정하고, justify-content 속성값은 center, align-items 속성값도 center로 지정하면 됩니다.
-
✅ 이 때, 주의할 점은 flex-container의 item이 하나 이상 늘어나게 되면 가운데 정렬이 되지 않기 때문에, HTML 요소 배치에 주의해야 합니다.
JavaScript
1. 스코프에 대해서 설명해 주세요.
-
스코프는 변수 접근 규칙에 따른 유효 범위를 의미합니다. 스코프에는 몇 가지 중요한 규칙이 있습니다.
-
안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만, 반대는 불가능하고, 중첩이 가능하다는 규칙이 있습니다. 이 규칙이 있어서 함수 body(중괄호) 내에서 전역 혹은 외부 스코프의 변수에 접근할 수 있습니다.
-
이름이 겹치는 경우에는 가장 안쪽 스코프를 참조하는 특성이 있어서, 전역 변수와 지역 변수의 이름이 같은 경우 지역 변수를 참조합니다. 이를 이용하여 함수 내 매개변수 이름을 동일하게 지정해도, 함수 외의 장소에서는 사용되지 않아 변화가 적고 안전한 코드를 작성할 수 있습니다.
2. 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해 주세요.
- 배열과 객체의 경우 변수에 할당했을 때 값 그 자체가 할당되는 것이 아니라 주소값만 저장이 됩니다.
- 이 주소값만 상수이고, 배열과 객체의 값을 변경하는 것은 변수에 할당된 상수인 주소값을 바꾸는 것과는 무관하기 때문에 요소와 속성을 추가할 수 있습니다.
- 장점
- 주소 값이 고정 되어 있어 안정성이 높음
- 변수명의 중복 선언을 방지하기 때문에
3. 원시 자료형과 참조 자료형에 대해서 설명해 주세요.
- 원시 자료형을 변수에 할당하면 메모리 공간에 값 자체가 저장하고, 참조 자료형을 변수에 할당하면 메모리 공간에 주소값이 저장.
- 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값 자체가 복사되어 전달
- 참조 값을 갖는 변수를 다른 변수에 할당하면 주소값이 복사되어 전달
4. 얕은 복사와 깊은 복사에 대해서 설명해 주세요.
- 얕은 복사는 객체의 참조값(주소 값)을 복사하고, 깊은 복사는 객체의 실제 값을 복사합니다.
- 얕은 복사란 객체를 복사할 때 기존 값과 복사된 값이 같은 참조를 가리키고 있는 것을 말합니다.
- 깊은 복사된 객체는 객체 안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말합니다.
DOM
1. innerHTML 메서드와 textContent 메서드의 차이에 대해서 설명해 주세요.
-
textContent는<script>와<style>요소를 포함한 모든 요소의 콘텐츠를 가져옵니다. -
innerHTML는 이름 그대로 HTML을 반환합니다.- 간혹
innerHTML을 사용해 요소의 텍스트를 가져오거나 쓰는 경우가 있지만, HTML로 분석할 필요가 없다는 점에서textContent의 성능이 더 좋습니다.
- 간혹
2. event.preventDefault 메서드는 언제, 왜 사용하는지 설명해 주세요.
preventDefault()메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다.
