<aside> 💡 마크업과 구현의 구분이 철저하면 어떤 특징, 장/단점이 있는지 알고 싶은데 뭐라고 구글링하면 좋을까요?

</aside>

구분이 명확히 된다는 것은 버그가 적고 코드 유지보수가 용이가 된다는 의미라고 말씀드릴 수 있을 것 같습니다.HTML에 script tag나 onclick 함수를 넣을 수 있는 방법들이 있긴 한데, 이런 방법들은 협업 시다른 개발자들이 왜 이렇게 작동하는지 판단하는데 오랜 시간이 걸리기 때문에 지양하고 있습니다.

또한 '어제의 나'가 작성한 코드를 알아보지 못하는 경우(?)에도 유용합니다.

사실 표현과 기능을 구분하는 것은 직관적으로 봤을 때 당연하기도 합니다. 잘 구분이 되어있다면 보기도 좋고 유지보수도 쉬울 것이라고 쉽게 생각할 수 있습니다. 하지만 이런 이야기가 강조되는 이유는 그렇지 않은 코드들이 너무나 많았기 때문이라고 생각합니다. 읽어보시면 좋을 레퍼런스들을 공유드리겠습니다. 다만, 프리 코스에 우선 충실하시고 남는 시간에 읽어주시면 좋을 것 같습니다.

핵심 키워드 : Separation of concerns, Unobtrusive JavaScript

Reference

https://koko8829.tistory.com/1022

https://en.wikipedia.org/wiki/Unobtrusive_JavaScript

https://en.wikipedia.org/wiki/Separation_of_concerns

https://philipwalton.com/articles/decoupling-html-css-and-javascript/