2022/09/07 - TIL

JS 이용하여 HTML을 수정하면서, 아무런 문제 없이 사용하던 문제점이 하나가 있었다.

정적요소와 동적요소의 혼합.

위의 현상은, 일관성이 결여가 되면서 보이는 현상이며, 이 일반성 결여는 유지보수성과 가독성을 저하시킨다. 정적 요소와 동적요소의 혼합을 막기 위해서, HTML에 대한 JS의 의존 종속성을 제거해야한다. 이번에 시도한 방법은 동적인 속성(JS만을)을 사용하였다.

정적요소와 동적요소의 혼합에 의해 유지보수성과 가독성이 저하되는 이유에 대해서
간단하게 이야기를 하면
1. 동적으로 콘텐츠를 수정하는 부분이 innerHTML, textContent, classList 등 
다양한 방식으로 이루어져 일관성이 떨어진다.
2. HTML 구조가 변경되었을 때 로직을 바꿔야하는 경우가 생길 수 있다.

동적인 속성만을 사용하는 방법은 간단하다. index.html에 있는 element node는, body안에 있는 div 한개를 제외하고 날린다. div안의 id같은 경우는, main, app, root 다양하게 사용해도 된다.

정적인것과 동적인것을 함께 쓰다가 동적인 것으로만 바꾸게 되면, 한가지 문제(보다는, 불편함)이 생긴다. 바로, 이벤트를 어디다 넣어주냐이다. 정적인 환경이 있는 경우에는, addEventlistener를 간단하게 정적인 요소에 걸어주면 됬지만, 동적인 요소 같은 경우에는, node가 DOM TREE에 그려지기 이전에 이벤트를 걸어주면 null에 이벤트를 달았다고 에러가 뜨게된다. 이 에러같은 경우의 해결책은 다음과 같다.

정적인 노드에 이벤트를 추가하는방법(수정 전)

document.querySelector('something').addEventListener('event', (e)=>{
	//event handler callback block	
})

동적인 노드에 이벤트를 추가하는방법(수정 후)

document.querySelector('#main').addEventListener('event', (e) =>{
	if(e.target.matches('something')){
		//event handler callback block	
	}
})

엄밀히 말하자면, 완전히 동적인 방법이라기 보다는, 유일하게 정적으로 사용되는 장소를 이용한다는 말이 맞다.

---

추가적으로 기억할 것

closet

html을 사용하다보면 구조가 바뀔 수 있으니, closet을 이용하여 depth가 수정되어도 가능하게 만드는 것이 좋다.