HTML

• 일반적으로 CSS를 불러오기 위해 link 요소를 head 요소의 자식 요소로 하고,
  JavaScript를 불러오기 위해 script 요소를 body 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?

  -Body요소가 끝나기 전에 script 요소를 작성하는 HTML이 다 파싱되고 난 후에 JS를 적용하기 위해서입니다.
  HTML이 다 불러와지지 않고, JS를 실행(execute)하기 시작하면 JS프로그램에서 의도했던 바와 다르게 DOM에서 원하는 HTML 요소를 불러오지 못할 수 있습니다. 이를 방
  지하기 위해서 JavaScript를 불러오기 위한 script 요소는 body 요소가 끝나기 직전에 작성합니다.
  

• li 요소는 왜 ul 요소의 자식 요소여야만 하나요?

  -li요소는 목록 아이템(list item)을 보여주기 위한 요소입니다.
  그래서 목록을 담는 ul 요소의 자식 요소여야 합니다. <- 문제를 정의, 답

화면 상으로는 아무런 문제가 없더라도 이렇게 li요소와 ul요소의 의미에 맞게 HTML을 작성하는 것이 어떤 개발자가 와서 보더라도 쉽게 이해할 수 있기 때문에 중요하다고 생각합니다.

• id 속성과 class 속성의 차이에 대해서 설명해주세요.

  -id 속성과 class 속성의 차이는 고유성에 있습니다.
  id는 고유한 하나의 요소를 정하는데 사용하고,
  class는 여러 요소들에 사용할 수 있습니다.

  하나의 HTML 요소에 적용된 id의 값은 다른 요소에는 적용되어선 안됩니다.
  id 속성이 "identification", 즉 해당 HTML 요소가 유일함을 확인할 수 있는 수단이기 때문입니다. getElementById는 있어도, getElementsById는 없는 이유입니다.

  id의 값이 같은 HTML 요소가 여러 개 있으면 웹 표준에 어긋나기 때문에,
  협업하는 다른 개발자나 검색엔진에 혼란을 줍니다.

  정리하면, id는 하나의 HTML 요소에만 사용할 수 있고, class는 여러 HTML 요소에 사용할 수 있습니다.
  

CSS

• CSS box model에 대해서 설명해주세요.

  -CSS box model은 HTML 요소를 하나의 사각형(box)로 가정하고,
  어떻게 디자인적으로 표현할지 정리한 하나의 규정입니다.

  CSS box model에 따르면,
  Box는 총 4가지 요소(margin, border, padding, content)로 구성됩니다.
  content는 HTML 태그 사이에 담기는 내용을 표현하고,
  padding은 content와 border 사이의 공간을 의미합니다.
  border는 Box의 경계를 표시하는 역할을 합니다.
  margin은 다른 박스와의 간격을 의미합니다.

  이 Box의 높이와 너비를 규정하는 방식이 대표적으로 두 가지가 있는데,
  content-box와 border-box가 있습니다.

  content-box 방식은 content의 width 속성값, height 속성값으로 규정됩니다.
  border-box 방식은 border의 width 속성값, height 속성값으로 규정됩니다.

  메이저 브라우저의 user agent stylesheet에는 기본값이 content-box인데,
  Box의 높이와 너비가 눈으로 보이는 값과 상이하기 때문에 많은 개발자들이 box-sizing 속성값을 border-box로 정한다고 알고 있습니다

• 간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요? (centering)

• 로그인 폼 컴포넌트를 중간에 위치시키기 위해서 저는 flexbox를 사용합니다.

  로그인 폼 컴포넌트를 감싸는 래퍼 요소가 있다면,
  그 래퍼 요소에 display속성값을 flex로 지정하고,

  justify-content 속성값은 center,
  align-items속성값도 center로 지정하면 됩니다.

  이 때, 주의할 점은 flex-container의 item이 하나 이상 늘어나게 되면
  가운데 정렬이 되지 않기 때문에, HTML 요소 배치에 주의해야 합니다.

• 간단한 블로그에서 아래와 같은 레이아웃을 구성하려면 CSS를 어떻게 작성해야 하나요?

div.author-container
+--------+------+------+
|  글쓴이 | 빈칸  | 공유 |
+--------+------+------+

• 아래 레이아웃은 글쓴이 정보가 모인 컴포넌트와 소셜 공유 로고가 모인 컴포넌트를
  각각 왼쪽과 오른쪽으로 붙이는 레이아웃입니다.
  중간에 큰 공간이 필요한데, 이런 레이아웃 구현을 위해서는 flexbox가 필요합니다.

  div.author-container가 flex-container가 되어야 하고
  (display:flex) flex-item 간에 최대 간격을 주기 위해서
  justify-content: space-between이 필요합니다.

  각 item에 flex-grow 속성을 0으로 주면 불필요하게 요소가 늘어나지 않고,
  빈 칸이 글쓴이 요소와 공유 요소 컨텐츠가 차지하는 만큼만 빼고
  모든 공간을 차지하게 되어서 원하는 그림이 나옵니다

JavaScript

• 스코프에 대해서 설명해주세요.

  -스코프는 변수 접근 규칙에 따른 유효 범위를 의미합니다.
  스코프에는 몇 가지 중요한 규칙이 있습니다.
  안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만,
  반대는 불가능하고, 중첩이 가능하다는 규칙이 있습니다.
  이 규칙이 있어서 함수 body(중괄호) 내에서 전역 혹은 외부 스코프의 변수에 접근
  할 수 있습니다.

  이름이 겹치는 경우에는 가장 안쪽 스코프를 참조하는 특성이 있어서,
  전역 변수와 지역 변수의 이름이 같은 경우 지역 변수를 참조합니다.
  이를 이용하여 함수 내 매개변수 이름을 동일하게 지정해도,
  함수 외의 장소에서는 사용되지 않아 변화가 적고 안전한 코드를 작성할 수 있습니다.

• 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요.

• 배열과 객체는 참조 자료형이기 때문에, 변수에 값 자체가 아닌 주소를 할당합니다. const 키워드로 선언 및 할당을 하더라도,
  해당 변수에는 주소만 담겨있기 때문에 요소나 속성을 추가할 수 있습니다.

  이런 상황에서 const를 쓰는 것은 오히려 권장됩니다.
  변수에 갑자기 새로운 값이 할당되는 것을 방지할 수 있기 때문에
  보다 깔끔하고 안정적인 코드를 작성할 수 있습니다.

• 원시 자료형과 참조 자료형에 대해서 설명해주세요.

  -원시 자료형은 변수에 할당할 때 값 자체가 할당이 되고,
  참조 자료형은 변수에 할당할 때 주소가 할당됩니다.
  원시 자료형은 숫자, 문자열, 불린등 주로 하나의 값을 의미하는 타입이고,
  참조 자료형은 배열, 객체와 같은 여러 개의 데이터를 가지는 타입이 있습니다.

  참조 자료형의 이런 특징 때문에, 함수의 매개변수로 전달될 때 조심해야 합니다.
  함수 내에서 참조 자료형을 변경하는 경우 해당 변화가 함수 내에서만 있는게 아니고,
  해당 참조 자료형을 참조하는 모든 코드에 영향을 미치기 때문입니다.

• 얕은 복사와 깊은 복사에 대해서 설명해주세요.

  -자바스크립트에서의 얕은 복사(shallow copy)는 객체를 복사할 때,
  객체의 속성 중 값이 참조 자료형인 경우 해당 주소만 카피하는 것을 의미하고,
  깊은 복사는 주소만 카피하지 않고, 값을 모두 복사하는 것을 의미합니다.

  대부분의 경우 shallow copy로도 충분하기 때문에,
  spread syntax나 Object.assign과 같은 보통의 복사 방법은
  shallow copy가 적용되어 있습니다.

DOM

• innerHTML 메서드와 textContent 메서드의 차이에 대해서 설명해주세요.

  -innerHTML은 HTML 태그를 인식하여 DOM 조작하는 것 처럼 화면에 HTML 요소로 적용하여 넣어주는 반면에
  textContent는 HTML 태그를 일반 텍스트 노드로 인식하여 HTML 요소로 적용하여 넣어주지 못합니다.

  일반 텍스트를 넣을 때는 textContent를 쓰는 것으로도 충분하고,
  만약 HTML 요소를 추가하고 싶더라도 가능하면 innerHTML은 사용하지 않는게 좋습니다.

  이제 많은 메이저 브라우저에서 막히긴 했지만,
  innerHTML에 script요소를 직접 삽입해서 JavaScript를 실행시키거나,
  다른 방식으로 JavaScript를 실행시킬 수 있어 보안 우려가 있기 때문입니다.

• event.preventDefault 메서드는 언제, 왜 사용하는지 설명해주세요.

• preventDefalut는 해당 이벤트에 기본적으로 설정된 기본 액션을 동작하지 않게 만드는 메서드입니다.

  이 메서드를 사용하는 이유는 다양합니다.
  가장 대표적인 경우가 form 요소의 submit 이벤트입니다.
  submit 이벤트는 해당 폼의 정보를 서버로 요청을 보내려는 기본 동작을 가지고 있어서,
  submit 이벤트가 일어나고 나면 화면이 의도치 않게 전환되거나 새로고침이 되는 경우가 있습니다.

  현대 웹 개발에 들어서는 이런 서버 요청은 JavaScript에서 처리하기 때문에 이런 이벤트의 기본 동작은 막아주는 것이 종종 필요합니다.

+추가 질문들 - 앞으로 하나씩 찾아서 정리하고 적어두기!

1. 스코프에 대해서 설명해보세요.
2. 자바스크립트에서 function scope, block scope의 차이는?
3. 자바스크립트에서 lexical scope와 dynamic scope의 차이는?
4. var로 선언된 변수는 function scope, block scope중 어떤 scope를 가지는가?

-///-
브라우저 렌더링 과정을 설명해주세요
or 홈페이지가 사용자에게 보이는 순서에 대해 설명

호이스팅에 대해서 설명해보세요

클로저는 무엇인가요? 원리와 왜 사용하는지 설명하세요

GET과 POST의 차이점은

This의 용법을 설명하세요

브라우저 저장소의 차이점을 설명하세요.
(LocalStorage, SessionStorage, Cookie)

브라우저는 어떻게 동작하나요

웹표준을 준수하는가