느리지만 필요한 프로세스로서의 리팩토링

이 게시물은 원래 2020년 8월 28일 my blog에 게시되었습니다.

해냈어! 내 웹사이트의 팟캐스트 페이지에서 동적으로 렌더링할 팟캐스트 에피소드가 있습니다.

내 HTML 파일에 완전히 새로운 Section 요소를 하드코딩하는 대신 내 JavaScript 파일에 미리 채워진 에피소드 데이터 개체를 통해 동적으로 렌더링됩니다.

따라서 기술적으로는 여전히 JS 파일에 하드 코딩하고 있지만... 아기 단계입니다.

하지만 어제 완전히 학습한 순간이 있었는데, JS에서 'insertAdjacentHTML' 호출에 스크립트를 삽입할 수 없다는 것을 발견했습니다. 기차가 이미 떠났을 때 대본이 역에 도착한 것과 같습니다.

(각 스크립트 태그에는 개별 에피소드 플레이어가 포함되어 있습니다.)

이 문제를 해결하기 위해 페이지가 로드된 후 각 podcast-episode-section-HTML에 대한 스크립트를 만들고 createElement('script')를 사용하여 각각의 src를 각 개별 에피소드의 URL로 설정해야 했습니다.

또한 각 에피소드의 정보를 포함하는 'episodes' 개체의 해당 요소에 에피소드를 일치시킬 수 있도록 각 에피소드에 대한 데이터 키 속성을 만들어야 했습니다.

그래도 모든 것이 하나로 합쳐지는 그 순간 - 어! 나는 그것을 위해 산다!!!

다음은 각 에피소드를 렌더링하는 논리입니다(각 에피소드에 스크립트 태그를 추가하기 전).

function renderListItems(list) {
  let dataKey = 0;

  list.forEach(el => {

      let html = `<section class="episode" data-key=${dataKey}><h2 style="text-align: center;">${el.title}</h2> <div id="buzzsprout-player-${el.id}" class="podcast-player"></div> <span>${el.description}Music credit to <a href="https://soundcloud.com/thisislegang" rel="noopener" target="_blank">Le Gang</a></span></section>
      `;
      document.querySelector('#episode-list').insertAdjacentHTML('beforeend', html);

      dataKey++; 
  });  

}

따라서 페이지가 로드되면 모든 HTML이 렌더링된 다음 프로그램이 다시 실행되어 에피소드 플레이어를 포함하는 스크립트 태그를 생성/추가합니다.

window.addEventListener('load', () => {

  // Render all podcast episodes
  renderListItems(episodes);

  // Add individual script tags for each podcast player
  const episodeHtml = document.querySelectorAll('.episode');
  episodeHtml.forEach(el => {

    let i = el.getAttribute('data-key');
    let script = document.createElement('script');

    script.src = episodes[i].url;

    el.appendChild(script);
  });
});

다음 단계는 Buzzsprout API(Buzzsprout는 제가 사용하는 팟캐스트 호스팅 서비스입니다)를 호출하여 에피소드를 채우는 것입니다. API로 더 많은 것을 만들고 싶었기 때문에 여기에 추가할 수 있습니다!

그것은 오늘의 판에 있을 뿐만 아니라 꾸준히 작업하고 있는 내 React eBook에서 더 많은 연습이 될 것입니다. 현재 GitHub에서 파일 목록의 복제본을 만들고 있으므로 이미 얻은 지식을 사용하여 다시 빌드하기 위해 내가 수행한 작업을 완전히 분리할 것입니다.

이전 게시물에서 장기적으로 더 빠르게 이동하기 위한 수단으로 자료를 매우 천천히 이동하는 데 초점을 맞추고 있다고 언급했습니다.

나도 알아, 우리가 그것을 처음 읽었을 때 그것은 말이 되지 않는다; 하지만 솔직히 말해서 게임 체인저입니다. 개념을 완전히 이해하지 못한 채 빠르게 진행하면 나중에 다시 돌아가서 다시 배워야 하는 데 훨씬 더 많은 시간이 소요될 것이라고 스스로에게 계속 말합니다.

그래서 나는 그것이 100% 전화를 걸었는지 확인하기 위해 무언가를 배우는 동안 여분의 시간을 할애하고 있습니다.

즐거운 금요일.


추신 매주 수요일마다 새로운 에피소드가 포함된 팟캐스트가 있다는 사실을 알고 계셨나요? 가서 들으세요right over here >>