일반적으로 JavaScript를 불러오기 위해 script 요소를 body 요소가 끝나기 전에 배치한다. 그 이유는 무엇인가.
body 요소가 끝나기 전에 script 요소를 작성하는 이유는 HTML이 다 파싱되고 난 후 JavaScript를 적용하기 위해서입니다.
HTML이 다 불러와지지 않고, JavaScript를 실행하면 DOM에서 원하는 HTML 요소를 불러오지 못할 수 있습니다. 때문에 이를 방지하기 위해 JavaScript를 불러오기 위한 script 요소는 body 요소가 끝나기 전에 배치합니다.
li요소는 왜 ui요소의 자식요소여야 하는가.
li요소는 목록 아이템을 보여주기 위한 요소며 ui는 목록을 담기위한 요소입니다. 그렇기 때문에 li 요소는 목록을 담는 ui 요소의 자식 요소이여야 합니다.
id속성과 class 속성의 차이는?
두 속성의 차이는 '고유성'으로 설명됩니다. id속성은 하나의 요소를 정하는데 사용하고, class는 여러 요소들에 사용할 수 있습니다. 따라서 id속성은 유일함이라는 고유성을 띄고, class는 다양성이라는 고유성을 띕니다.
CSS box model에 대해 설명하여라.
CSS box modeldms HTML 요소를 하나의 사각형으로 가정하고, 어떻게 디자인적으로 표현할지 정리한 하나의 규정입니다.
가장 안쪽부터 content, padding, border, margin 4가지 요소로 구성되며 있으며, box의 높이와 너비를 규정하는 대표적인 방법 2가지로는 content-box와 border-box가 있습니다. 차이점은 content-box방식은 content를 기준으로, border-box 방식은 borderㅇ를 기준으로 width 속성값,height 속성값이 규정됩니다.
추가 질문 : 개발자들은 왜 box-sizing으로 border-box방식을 사용하는가.
스코프에 대해 설명하여라
스코프는 변수 접근 규칙에 따른 유효범위를 의미합니다. 스코프엔 몇가지 중요한 규칙이 있는데, 먼저 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만 그 반대는 불가능합니다.
그리고 중첩이 가능합니다. 이 규칙을 통해 함수 중괄호 내에서 전역 혹은 외부 스코프의 변수에 접근 할 수 있습니다.
마지막으로 이름이 겹치는 경우엔 가장 안쪽 스코프를 참조하는 특성이 있습니다. 만약 전역 변수와 지역 변수의 이름이 같다면 지역변수를 참조합니다. 이 규칙을 이용해 매개변수 이름을 동일하게 지정해도, 함수 외의 장소에선 사용되지 않아 변화가 적고 안전한 코드를 작성할 수 있습니다.
배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해 설명하여라
먼저 배열과 객체는 참조 자료형으로 변수 선언시 값 자체가 아닌 주소를 할당합니다. 때문에 const로 키워드 선언과 할당을 하더라도 해당 변수엔 주소만 담겨있기 때문에 요소나 속성을 추가할 수 있습니다.
참조 자료형을 const로 선언하면 변수에 갑자기 새로운 값이 할당되는 것을 방지할 수 있기 때문에 깔끔하고 안정적인 코드를 작성할 수 있습니다.
원시 자료형과 참조자료형에 대해 설명하여라
변수에 할당할 때 원시자료형은 값 자체가 할당되고, 대표적으로 숫자, 문자열 등 하나의 값을 의미하는 타입입니다.
이에 반해 참조 자료형은 주소가 할당되며, 배열, 객체와 같은 여러 데이터를 가지는 타입입니다. 참조 자료 자료형은 주소를 할당하기 때문에 함수 내에서 함수의 매개변수로 전달될 경우, 참조자료형의 변경은 해당 참조 자료형을 참조하는 모든 코드에 영향을 끼칠 수 있기 때문에 조심해야 합니다.
얕은 복사와 깊은 복사에 대해 설명하여라
얕은 복사(shallow copy)는 객체를 복사할 때, 객체의 속성 중 값이 참조형인 경우 해당 "주소"만 복사하는 것을 의미합니다. 반대로 깊은 복사는 "값을 모두 복사" 합니다. 대부분 얕은 복사로도 충분하기 때문에 spread syntax나 Objext.assign 같은 보통의 복사 방법은 shallow copy가 적용되어 있습니다.
innerHTML메서드와 textContent메서드의 차이에 대해 설명하여라
innerHTML은 HTML태그를 인식하여 DOM을 조작하는 것처럼 화면에 HTML 요소를 적용하여 넣어줍니다. 반면에 textContent는 HTML 태그를 일반 텍스트 노드로 인식하여 HTML 요소로 적용하여 넣어주진 못합니다.
innerHTML은 보안의 직접 삽입, 실행하는 만큼 보안의 우려가 있기 때문에 가능하면 innerHTML보단 textContent사용을 권장하고 있습니다.
event.preventDefault 메서드는 언제, 왜 사용하는가
preventDefault는 해당 이벤트에 기본적으로 설정된 기본 액션을 동작하지 않게 만드는 메서드입니다.
preventDefault를 사용하는 대표적인 예로는 form요소의 submit 이벤트가 있습니다. submit이벤트는 해당 폼의 정보를 서버로 요청 보내려는 기본 동작이 있어서, 이벤트 동작 후 화면이 의도치 않게 전환되거나 새로고침되는 경우가 있습니다. 이때 preventDefault메서드를 통해 submit의 이벤트를 중단합니다.
