🔶 JavaScript

• MVC 패턴의 관점에서 State(상태)란 무엇인가?

: 변경하면 View에 영향을 미치는 데이터, 프론트엔드에서는 Model보다 State의 개념으로 이해하는 것이 더 적합함
: 구체적으로는 기억하고 있는 값을 바탕으로 View를 렌더링할 때, 렌더링의 결과물이 변화한다면 State로 따로 관리할 필요가 있음

• DOM 요소 조작 시 상위 요소의 상위 요소를 여러 번 탐색해야 하는 경우 어떤 방법을 사용하는 것이 바람직한가?

: parentNode를 여러 번 체이닝하여 사용하기 보다, closest 메서드를 사용하여 가장 가까이 있는 상위 요소를 탐색하면 가독성 관점에서 더 좋음

• classList에 체이닝하여 add, remove를 둘 다 작성해야 하는 경우 어떤 방식으로 대체할 수 있는가?

: toggle을 사용하면 두 번째로 전달할 매개변수에 조건문을 사용하여 add와 remove의 로직을 단축하여 작성할 수 있음

• 변수와 함수는 어느 위치에 선언하는 것이 바람직한가?

: 사용하는 로직(함수) 바로 위에 작성하는 것이 직관적임

• 자바스크립트로 DOM 요소를 렌더링 할 때 innerHTML과 비교하여 classList, textContent 등의 차이점은 무엇인가?

: HTML 수정 시 innerHTML은 쉽게 고칠 수 있지만, classList나 textContent 등을 수정하려면 가독성이 저하되고 실수할 가능성이 높아짐

• 자바스크립트가 HTML에 종속되는 상황은 어떤 경우에 발생하고, 왜 바람직하지 않은가?

: document.querySelector로 DOM 요소를 가져오는 순간 자바스크립트는 HTML에 종속될 수밖에 없음, 가져온 DOM 요소를 바탕으로 자바스크립트를 작성해야 하기 때문
: 자바스크립트가 HTML에 종속되면 HTML이 수정되었을 때 관련된 자바스크립트 로직을 전부 수정해야 하고, 수정 사항이 많은 경우 오류 발생 가능성이 높아짐

• 자바스크립트가 HTML에 종속되어 있는 문제를 어떻게 해결할 수 있는가?

: 자바스크립트가 HTML에 종속되어 있다는 것은 결국 HTML 요소의 변화에 따라 자바스크립트로 작성하는 로직이 달라진다는 것을 의미함
: 이를 해결하기 위해 HTML에는 최소한의 요소만 남겨놓고 자바스크립트에서 자체적으로 HTML을 렌더링하는 방안을 고려할 수 있음
: 그러나 이 해결 방안은 하나의 요소를 렌더링하기 위해 HTML 전체를 다시 렌더링해야 하므로 불필요한 요소까지 렌더링한다는 문제점이 있음