231122 개발일지 TIL - JavaScript에서 HTML 요소 스타일 변경 비교(Object.assign VS 개별 속성을 설정)

1. Object.assign 메서드를 활용한 방법

const videoLi = document.getElementById('videoList');
Object.assign(videoLi.style, {
  display: 'none', 
  color: 'red', 
  fontSize: '20px', 
  border: '1px solid blue', 
  backgroundColor: 'yellow' 
});

Object.assign 메서드를 사용하여 한 번에 여러 속성을 설정하는 방법.
코드가 간결하고 여러 속성을 한 번에 적용할 수 있어 유용하다.

장점:
    코드가 간결하고 짧다.
    여러 속성을 한 번에 설정할 수 있어 코드의 양을 줄일 수 있다.

단점:
    특정 속성을 개별적으로 수정하기 어려울 수 있다.
    모든 스타일을 한 번에 설정하므로, 특정 스타일을 동적으로 변경할 때 전체를 다시 설정해야 할 수 있다.
    

2. 개별 속성을 설정하는 방법

const videoLi = document.getElementById('videoList'); 
videoLi.style.display = 'none'; 
videoLi.style.color = 'red'; 
videoLi.style.fontSize = '20px'; 
videoLi.style.border = '1px solid blue'; 
videoLi.style.backgroundColor = 'yellow'; 

각 속성을 개별적으로 설정하는 방법.
속성을 개별적으로 쉽게 조작할 수 있지만 코드가 길어질 수 있다.

장점:
    속성을 개별적으로 조작하기 용이하다.
    각 스타일 속성을 개별적으로 설정하기 때문에 가독성이 높다.
    특정 스타일을 동적으로 변경해야 할 때 해당 스타일 속성만 수정하면 된다.

단점:
    여러 스타일을 한 번에 설정하려면 코드가 길어질 수 있다.
    여러 속성을 수정할 때 반복적인 작업이 필요하다.
    

느낀 점
어떤 방법을 선택할지는 프로젝트의 규모 및 특성에 맞게 코드의 가독성과 유지보수성을 고려하여 결정해야 한다. 가독성과 유지보수성을 중요시 여기면서도 코드를 간결하게 유지하고 싶다면 두 방법을 혼합해서 사용하는 것도 가능하다.