[FE - ConnecTo] DAY57 TIL👩🏻‍💻

22.09.30 수업 시간 중 공부한 내용들을 정리하였습니다 😊
피드백은 언제나 환영입니다! 🍊

• 원하는 위치에 link 태그 삽입하기

// 이전
const $link = document.createElement('link');
$link.setAttribute('rel', 'stylesheet');
const linkList = document.querySelectorAll('link');
linkList[linkList.length - 1].after($link)

// 이후
const $link = `~~`;
document.querySelector('script').insertAdjacentHTML('beforebegin', $link);

• link 태그를 원하는 위치에 삽입하기 위해서, insertAdjacentHTML 매서드를 알지 못해서, createElement로 삽입을 해주었다. 그런데, 코드 길이도 길어지고, 가독성도 떨어지는 것 같아서 리팩토링 때, insertAdjacentHTML 매서드를 사용하여 수정하였다.
• 그런데 부수적인 문제점으로 link 태그가 2개가 생성되었는데, 이 이유는 starRating 함수 내부에서 DOMContentLoaded가 될 때, 생성되도록 설정해주었기 때문에, starRating 함수가 호출될 때마다 새로 link 태그가 생성이 되었기 때문이다. 그래서, 리팩토링을 하면서, starRating 함수 밖에서 호출할 수 있도록 하여, 한 번만 link 태그를 삽입하도록 수정하였다.
  
• 추가 고민사항 : insertBefore vs insertAdjacent insertAdjacent 매서드를 사용했을 때, link 태그가 2개가 생성되어서 다른 방법으로 insertBefore 매서드를 사용했보았다. insertBefore의 경우, parameter의 첫번째 인자로 노드를 데려와야 하는데, 노드를 데려오려면 다시 이전에 우리가 작성했던 코드의 흐름대로 작성해야했기에, 비효율적이라는 생각이 들었다. 그래서 그렇게 하지 않아도 되는 insertAdjacent 매서드를 선택하여 리팩토링을 하였다.
  

// 이전
$stars.forEach((star, i) => star.classList.toggle('hovered', i <= rating));

// 이후
$stars.forEach((star, i) => {
  if (i > rating) return false;
  star.classList.add('hovered');
});

• 이전에는 forEach문을 돌려 toggle 메서드를 사용하여 별 클릭이나 호버했을 경우에 이전 요소들뿐만 아니라 이후의 요소들도 실행되며 반복문을 실행하였다.
  • 리팩토링 후에는 굳이 이후의 요소들은 판별할 필요성이 없어 내가 선택한 별의 이전 요소들만 수행한 후 forEach이 종료되도록 해주었다.
• break이 아닌 return false 를 사용하여 forEach를 종료할 수 있다는 것을 알게되었다.