HTML
- 일반적으로 CSS를 불러오기 위해 link 요소를 head 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 script 요소를 body 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?
- li 요소는 왜 ul 요소의 자식 요소여야만 하나요?
- id 속성과 class 속성의 차이에 대해서 설명해주세요.
CSS link 요소가 head 요소의 자식 요소일 때 전반적인 UX(user expression)를 향상시키기 때문이다.
- HTML과 CSS의 정보가 담긴 부분이 우선적이고 점진적으로 렌더링되기 때문에 유의미한 정보가 담긴 화면을 유저에게 최대한 빠르게 전달할 수 있다.
- CSS link 요소를 document의 아랫부분에 위치시켰을 때, 몇몇 브라우저는 스타일이 변경되면 페이지 요소를 다시 그리는 것을 피하기 위해 점진적 렌더링을 하지 못하게 막는다. 이 때문에 유저는 비어있는 흰 페이지를 보게 된다.
- 또는 CSS 스타일이 적용되지 않은 내용이 잠깐 노출이 되기도 한다.
웹 브라우저가 작성된 코드를 해석하는 과정에서 script 요소를 만나면 HTML 해석을 잠시 멈추고 script 요소를 먼저 실행한다. 때문에 script 요소가 body 요소가 끝나기 직전에 위치하지 않고 그보다 상단에 위치할 경우 HTML 해석이 끝나기 전에 HTML 파싱을 막아 DOM 렌더링을 방해한다.
script 요소가 body 요소가 끝나기 직전에 위치하는 경우 HTML과 CSS 로딩이 끝난 직후 JavaScript를 로딩하기 때문에 DOM 렌더링 후 JavaScript 적용까지의 시차를 최소화할 수 있다.
li 요소는 목록 아이템을 보여주기 위한 요소이다. 그래서 목록을 담는 ul 요소의 자식 요소여야 한다. 화면 상으로는 아무런 문제가 없더라도 이렇게 li 요소와 ul 요소의 의미에 맞게, 시멘틱하게 HTML을 작성하는 것이 어떤 개발자가 와서 보더라도 쉽게 이해할 수 있기 때문에 중요하다.
또한 HTML spec(HTML Living Standard)에서 li 요소는 ul, ol, menu 요소의 내부에서 사용 가능하다고 기술하고 있다. ( https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element )
고유성의 차이이다. id는 고유하므로 id를 가진 해당 요소가 고유하다는 것을 알 수 있다. class는 같은 class name을 여러 요소에 사용하는 것이 가능하다.
하나의 HTML 요소에 적용된 id값은 다른 요소에 적용되어서는 안 된다. id 속성이 identification, 즉 해당 HTML 요소가 유일함을 확인할 수 있는 수단이기 때문이다. getElementById는 있어도 getElementsById 메서드는 없는 이유이다.
id값이 같은 HTML 요소가 여러 개 있으면 웹 표준에 어긋나기 때문에 협업하는 다른 개발자나 검색엔진에 혼란을 준다. 정리하면, id는 하나의 HTML 요소에만 사용할 수 있고, class는 여러 HTML 요소에 사용할 수 있다.
CSS
- CSS Box model에 대해서 설명해주세요.
- 간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요? (centering)
- 간단한 블로그에서 아래와 같은 레이아웃을 구성하려면 CSS를 어떻게 작성해야 하나요?
div.author-container
+--------+------+------+
| 글쓴이 | 빈칸 | 공유 |
+--------+------+------+
모든 HTML 요소는 box 형태의 영역을 가지고 있는데 이것을 box model이라고 한다. 이 box는 콘텐트, 패딩, 테두리, 마진으로 구성된다.
콘텐트(Content): 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다. width, height 프로퍼티를 갖는다.
패딩(Padding): 테두리 안쪽에 위치하는 요소 내부 여백 영역이다. padding 프로퍼티 값은 패딩 영역의 두께를 의미하며 기본색은 투명이다.
테두리(Border): 테두리 영역으로 border 프로퍼티 값은 테두리의 두께를 의미한다.
마진(Margin): 테두리 바깥에 위치하는 요소의 외부 여백 영역이다. margin 프로퍼티 값은 마진 영역의 두께를 의미한다. 기본적으로 투명하며 배경색을 지정할 수 없다.
로그인 폼 컴포넌트를 중간에 위치시키기 위해서 flexbox를 사용할 것이다. 로그인 폼 컴포넌트를 감싸는 wrapper 요소가 있다면 그 wrapper 요소에 display 속성값을 flex로 지정하고, justify-content 속성값은 center, align-items 속성값도 center로 지정하면 된다.
이 때, 주의할 점은 flex-container의 item이 하나 이상 늘어나게 되면 가운데 정렬이 되지 않기 때문에 HTML 요소 배치에 주의해야 한다.
JavaScript
- 스코프에 대해서 설명해주세요.
- 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해 설명해주세요.
- 원시 자료형과 참조 자료형에 대해 설명해주세요.
- 얕은 복사와 깊은 복사에 대해 설명해주세요.
배열과 객체는 참조 자료형이기 때문에 변수에 값 자체가 아닌 주소를 할당한다. const 키워드로 선언 및 할당을 하더라도 해당 변수에는 주소만 담겨있기 때문에 요소나 속성을 추가할 수 있다. 이런 상황에서 const를 쓰는 것은 오히려 권장된다. 변수에 갑자기 새로운 값이 할당되는 것을 방지할 수 있기 때문에 보다 깔끔하고 안정적인 코드를 작성할 수 있다.
얕은 복사(Shallow copy) vs 깊은 복사(Deep copy)
얕은 복사
객체의 얕은 복사는 복사한 프로퍼티가 원본과 같은 reference를 공유하는 복사이다. 그 결과 원본이나 복사본 중 하나를 수정했을 때, 수정하지 않은 원본 또는 복사본 객체 또한 수정이 된다.
깊은 복사
객체의 깊은 복사는 복사한 프로퍼티가 원본과 같은 reference를 공유하지 않는 복사이다. 그 결과 원본이나 복사본 중 하나를 수정하더라도, 수정하지 않은 원본 또는 복사본 객체는 영향을 받지 않는다.
자바스크립트에서, 기본적으로 내장된 object-copy oprator(spread syntax, Array.prototype.concat(), Array.prototype.slice(), Array.from(), Object.assign(), Object.create())는 깊은 복사를 하지 않고 얕은 복사를 한다.
( 출처: https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy )
( 출처: https://developer.mozilla.org/en-US/docs/Glossary/Deep_copy )
DOM
- innerHTML 메서드와 textContent 메서드의 차이에 대해 설명해주세요.
- event.preventDefault 메서드는 언제, 왜 사용하는지 설명해주세요.
InnerHTML과 textContent는 둘 다 자기 자신과 자식 요소들의 텍스트 뿐만 아니라 스크립트와 스타일링 정보까지 가져온다는 공통점이 있다. 하지만 innerHTML은 HTML 전체 내용을 반환하기 때문에 HTML 요소들을 입력해서 직접 변경할 수 있다. 따라서 복잡하지 않은 코드에선 편리할 수 있으나 이런 점으로 인해 xss공격에 취약하고 복잡한 코드를 가공하기 힘들다는 단점이 있다.
반면에 텍스트콘텐트는 html을 제외하고 가져오기때문에 xss공격의 위험이 없고 복잡한 코드도 가공하기 쉽습니다. 따라서 다수의 개발자들은 성능과 보안에 강점이 있는 텍스트콘텐트의 사용을 지향합니다.
