5/02 TIL

1. 문제 상황

• 팀 프로젝트에서 영화 포스터 이미지를 동적으로 페이지에 추가하는 기능을 구현하고 있었다.
• CSS를 통해 설정한 이미지 사이즈와 스타일을 적용하고 싶었지만, 동적으로 생성된 이미지에 CSS 규칙이 제대로 적용되지 않는 문제가 발생했다.
• 또한, 새 이미지를 로드할 때마다 이전에 추가된 이미지 요소가 페이지에 남아 있어, 여러 개의 이미지가 중첩되는 문제가 있었다.

2. 해결 방안

• CSS 규칙 적용: 동적으로 생성된 이미지 요소에 id="movie-poster"를 추가하여, 미리 정의된 CSS 규칙을 적용했다. 이를 통해 동적으로 생성된 이미지에도 원하는 스타일을 적용할 수 있었다.

  <style>
    #movie-poster {
        width: 150px;
        height: 200px;
        border-radius: 20px;
    }
  </style>

  const posterImgElement = document.createElement('img');
  posterImgElement.id = 'movie-poster';
  posterImgElement.src = posterURL;
  posterImgElement.alt = 'Movie Poster';
  rightSideElement.appendChild(posterImgElement);

• 이전 이미지 요소 제거: 새로운 이미지를 추가하기 전에, 기존에 페이지에 추가된 이미지 요소를 찾아 제거하는 로직을 추가했다. 이를 통해 페이지에 항상 최신의 포스터 이미지만 표시되도록 할 수 있었다.

  const existingPoster = document.querySelector('#movie-poster');
  if (existingPoster) {
    existingPoster.remove();
  }

3. 배운 점

• 동적 이미지 관리: 동적으로 이미지를 관리할 때는 이전 요소가 제대로 제거되는지 주의해야 한다는 것을 배웠다. 이는 페이지의 성능과 사용자 경험에 직접적인 영향을 미친다.
• CSS 적용: 동적으로 생성된 요소에도 CSS를 적용하기 위해서는 요소에 적절한 식별자(id 또는 class)를 추가하는 것이 중요하다는 것을 배웠다.