231011[Day17] VanillaJS를 통한 자바스크립트 기본 역량 강화 1 (6)

 

 

fetch API 써보기

컴포넌트 구조

• app -> product -> productoptions, cart

 

오늘은 실습을 하며 실제 api 주소를 이용해서 복잡한 api 요청을 하는 컴포넌트 만드는 것을 하였다.

 

 

innerHTML 

• innerHTML 프로퍼티는 HTML에 새로운 HTML 요소를 추가하거나 특정 HTML 요소 내부에 작성된 내용(HTML 요소를 포함)을 가져오는 데 사용된다.
• innerHTML의 사용은 지양하는 것이 좋으며 일반 텍스트를 삽입 할 때는 Node.textContent 를 사용하는 것이 권장된다.
  • 그렇다면, 더 나아가 innerHTML 대신 사용될 수 있는 문법들과 그에 대한 어떤 기대효과들이 있는지 알아보자. 

 

• 세부적인 기능과 동작 방식은 다르지만 innerHTML 대신 사용할 수 있는 문법들은 innerText, textContent, insertAdjacentHTML 가 있을 것이다. 

 

• innerHTML 의 동작 방식은 element가 기존에 가지고 있던 자식 요소를 파싱하고, 새 값으로 들어온 newDOMString 또한 파싱하여 DocumentFragment 객체를 생성한다. 이렇게 파싱된 객체를 element의 innerHTML에 넣어줌으로써 element의 DOM 요소가 새로운 모습으로 변하게 되는 과정을 가진다. 따라서 파싱을 거치는 innerHTML 은 강력한 만큼 성능상의 약점을 지니는데, 이때 위의 대체적으로 사용할 수 있는 문법들을 사용하면 성능적인 이점을 가져갈 수 있다.

 

• 일반 텍스트의 삽입만을 원할 경우에는 innerText, textContent 두 문법을 사용할 수 있지만, textContent는 원시 텍스트를 다루며 성능상의 이점을 더 취하기 때문에 textContent의 사용이 더 권장될 것이다.

 

• HTML 요소를 직접적으로 삽입하고 싶다면, insertAdjacentHTML 을 innerHTML 대신 사용할 수 있는데, 보안상의 이슈가 해결되진 않지만 insertAdjacentHTML은 자식 요소의 파싱 과정이 생략되기 때문에 성능상 훨씬 더 좋은 우위를 차지한다.