기술면접
[HTML]
1. 일반적으로 CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 <script> 요소를 <body> 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?
브라우저는 렌더링 과정을 거치면서 html, css, script 세 개의 파일을 다운로드합니다. html와 css는 사용자에게 보여지는 시각적인 모습과 script는 기능적인 요소를 담당합니다.
이는 파싱되면서 html이 DOM 트리를 구축하고, css는 CSSOM 을 형성하여 합쳐 지면서 병렬적으로 렌더링될 수 있습니다. html은 위에서 아래로 코드가 실행되어 빠르게 결합시켜 사용자에게 페이지를 보여주어야 하기때문에 css 를 head 요소에 위치시킵니다.
이와 다르게, script 는 html의 하단에 위치하는데 이는 html 에서 script 를 만나면 scipt 를 다운받고 실행시키기 위해 html 의 파싱을 멈추게 됩니다. css와 같이 head 요소에 위치시킬 경우, 페이지가 렌더링 되지도 않았는데 script 로 인해 DOM 트리가 조작될 수도 있는 가능성이 존재하기 때문에 안전하게 오류를 범하지 않도록 script 는 body 요소에 위치시키는 것이 바람직합니다.
결국에는 빠른 페이지 로드를 위한 것입니다.
=> DOM 이 무엇인가요?
DOM이란 Document Obejct Model 의 약자로 문서의 뼈대를 구성하는 틀을 말합니다. 웹브라우저가 html의 태그들과 같은 객체들을 인식하여 접근하는 인터페이스입니다. 이는 html 을 트리 구조형식으로 계층 구조로 표현이 됩니다.
2. <li> 요소는 왜 <ul> 요소의 자식 요소여야만 하나요?
li 요소는 목록 아이템을 순서대로 보여주는 것인데 이는 ul, ol 등의 목록을 담는 항목안에 위치시켜야 합니다. 사실 화면상 달라지는 것은 없지만 개발자로서 의미에 맞게 html 태그 요소들을 사용하여야 쉽게 이해하고 이를 통해 협업 능력을 향상시킬 수 있기 때문입니다. 그래야 시멘틱 태그 요소를 잘 사용할 수 있다고 말할 수 있다.
=> 시멘틱 요소가 무엇인가요?
html 의 레이아웃을 설계하기 위한 태그들입니다. 시멘틱 요소는 사이트의 구조를 빠르고 효율적으로 정보를 파악할 수 있으며, 이를 통해 유지보수에도 능하다는 장점을 가지고 있습니다.
3. id 속성과 class 속성의 차이에 대해서 설명해주세요.
id 는 고유성을 가져 유일한 속성에만 부여할 수 있고, class 는 중복되고 동일한 요소에 부여할 수 있어 스타일링에 유용합니다. id는 #을, class 는 .을 이용하여 사용할 수 있습니다.
CSS
1. CSS box model에 대해서 설명해주세요.
html 의 요소들은 box의 형태로 영역을 소유하고 있는데 이를 바로 box model 이라고 칭합니다. 이는 가장 안쪽에는 요소의 텍스트나 이미지 감싸는 content, 이를 테두리 안쪽으로 내부 여백 영역인 padding, 그리고 테두리 영역인 border 와 마지막 테두리 바깥으로 외부 여백 영역인 margin 으로 총 4가지 영역으로 구성됩니다.
2. 간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요?
위치를 변경시키기 위해서 css 의 flexbox 요소를 사용합니다. 로그인 폼 컴포넌트를 감싸는 부모 요소에 display 속성을 flex 로 설정하고, flex 진행방향의 가로 축의 정렬방법인 justify-content 속성을 center 로 지정하면 가운데로 위치시킬 수 있습니다.
=> 그렇다면 세로 축의 정렬방법은 무엇인가?
3. 간단한 블로그에서 아래와 같은 레이아웃을 구성하려면 CSS를 어떻게 작성해야 하나요?
div.author-container
+--------+------+------+
| 글쓴이 | 빈칸 | 공유 |
+--------+------+------+
클래스명으로 author-container 가지는 부모 요소 div 아래에 자식 요소로 각각 클래스명이 author, blank, share 를 가지는 div 요소 세 개를 만들어 행과 열을 정렬하는 flexbox 를 이용합니다. display 속성을 flex로 설정하고 방향을 정하는 flex-direction 속성을 row 로 해주어 일렬의 행으로 나타낼 수 있게 합니다. flex-direction의 디폴트 값이 row 이기 때문에 방금 문장을 추가하지 않아도 가능합니다.
JavaScript
1. 스코프에 대해서 설명해주세요.
스코프는 함수와 함수가 연결된 어휘적 환경 즉, 함수가 선언된 주변 환경을 뜻합니다. 자세히 말하면 외부 함수에서 선언된 변수는 내부 함수의 어휘적 환경이기 때문에 내부 스코프에서 외부 스코프의 변수의 접근을 허락하여 값을 변경하거나 재할당 가능합니다.
=> 클로저는 무엇인가요?
2. 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요.
const 키워드는 변하지 않는 상수를 할당하고, 배열과 객체는 참조자료형으로 변수 값이 아닌 주소를 할당합니다. 주소는 stack에 저장되어 있고 실제 요소들은 heap에 저장되어 있기 때문에 heap 에 접근하여 요소를 추가하거나 삭제하고 참조된 주소는 변경되지 않으므로 const 사용이 가능합니다.
=> let 키워드를 사용하면?
let 키워드는 값이 아닌 주소변경이 가능한 재할당을 하므로 사용이 적절하지 않습니다.
3. 원시 자료형과 참조 자료형에 대해서 설명해주세요.
원시 자료형은 고정된 공간을 자치하며 하나의 데이터만을 가지고 있습니다. 값 자체의 변경이 불가능하지만 할당은 가능합니다. 여기서는 string, number, boolean, null, undefined, symboll 6가지 요소만 해당됩니다.
원시 자료형이 아닌 것들을 참조 자료형이라 부를 수 있고, 여러 데이터를 담을 수 있습니다. 변수 값이 아닌 주소를 stack 에 저장하고 값은 heap 에 저장하므로써 값 자체의 변경이 가능합니다.
4. 얕은 복사와 깊은 복사에 대해서 설명해주세요.
얕은 복사는 원본과 같은 reference 를 복사하는 것으로 원본에 할당된 주소값을 참조하였기 때문에 복사본을 변경하였다면 연결된 원본 또한 같이 수정이 되어 종속적이라고 할 수 있습니다.
깊은 복사란 통째로 복사하여 독립적인 객체를 생성하는 것을 말하며 복사본을 변경하였더라고 해도 원본은 변하지 않습니다.
DOM
1. innerHTML 메서드와 textContent 메서드의 차이에 대해서 설명해주세요.
말 그대로 innerHTML 은 내부 요소의 HTML 을 반환하고 textContent 는 노드와 그 자식 요소의 text 요소만을 반환한다.
전자는 html 파일을 직접 수정할 수 있기도 하지만 이는 xss 공격에 취약하여 복잡한 코드를 가공하기 힘들다. 반면 후자는 텍스트 요소만 가져오기 때문에 xss 공격의 위험 부담이 없어 복잡한 코드를 가공할 수 있어 전자보다 자주 쓰이며 권장됩니다.
2. event.preventDefault 메서드는 언제, 왜 사용하는지 설명해주세요.
a 태그를 클릭하거나 나 form 태그가 submit 을 할 경우 href 를 통해 페이지가 이동되거나 새로고침이 되는데 이와 같은 이벤트 동작 실행을 멈추게 하는 메서드입니다.
=> 그럼 event.stopPropagation 메서드는 무엇인가?
이는 현재 발생된 이벤트가 상위 엘리먼트에서 전달되는 것을 막는 메서드입니다.
두 메서드는 현재 발생된 이벤트 동작을 멈추게 하는 메서드이지만, 어떻게 작동을 하냐에 따라 달라지는 것입니다.
