프론트엔드에서 막연하게 사용하는 JS를 다시 한 번 되돌아보자는 취지로 쓴 Kilian Valkhof 님의 글을 요약/의역한 글입니다.

---

최소 권한의 법칙

웹 개발에는 "개발하는데 있어 가장 권한이 적은 언어로 개발하라"는 원칙이 있습니다. JS 보단 CSS를, CSS 보단 HTML로 구현하라는 뜻인데요. 그 이유는 JS의 경우 브라우저가 어떻게 작동할지 명령하는 언어고 실수 할 여지가 많기 때문입니다. 그에 반면, CSS와 HTML은 브라우저에게 명령하기보다 무엇을 할지 알려주고 나머지는 브라우저가 알아서 수행합니다. 즉, 브라우저가 가장 효율적인 방식을 사용하죠.

HTML과 CSS 기능들은 브라우저가 직접 다루기 때문에 좀 더 성능이 좋고, 브라우저 친화적이며, 사용자 경험과 접근성이 좋습니다.

"그치만 이건 JS가 필요한데?"라고 반박하실 수 있습니다. 맞는 말일 수 있죠. 그렇지만, 웹 브라우저 개발자들과 스펙 개발자들도 JS로 구현하던 많은 기능들을 HTML과 CSS로만 구현할 수 있도록 브라우저와 스펙을 발전시키고 있습니다. 즉, 예전에는 JS가 필요했던 기능들도 지금은 JS가 더 이상 필요 없을 수 있습니다. 그리고 웹에서 특정 기능을 구현하는 방법은 한 번 익혀두면 두고두고 잘 쓰입니다. (보통은)

몇 가지 예시를 들어드리겠습니다.

• 커스텀 스위치: 토글 기능이 있는 단순한 스위치도 이제는 HTML과 CSS를 통해 구현할 수 있습니다

• Datalist를 활용한 자동 제안 기능: 인풋을 입력할 때, 입력한 텍스트에 따라서 아래 드롭다운으로 텍스트가 포함된 여러가지 단어들을 자동으로 제안하는 기능을 만든 적 있지 않나요? 이것도 HTML과 CSS로만 구현할 수 있습니다

• 색깔 선택기: 브라우저마다 다르긴 하지만 색깔 선택 팔렛도 단순 HTML로 구현할 수 있습니다

• 어코디언: 누르면 펼쳐지고 닫히는 어코디언도 구현할 수 있어요

• 다이얼로그 모달: 화면 중앙에 뜨는 다이얼로그 모달도 구현합니다

이 외에도 정말 많지만, 모든 것을 하나의 글로만 설명하기엔 벅찹니다. 제 글의 요지는 이겁니다. 당신이 어떤 기능을 구현하는데 JS가 필요하다고 생각할 수는 있지만, 항상 그 생각을 다시 검증해보고 실험해보세요. 분명 더 나은 웹 사이트를 만드는데 도움이 될 것입니다.

---

어그로성 제목을 가진 글이었지만, 읽어보면 필자의 의견도 일리가 있고 좋은 글입니다. 원글을 보시면 HTML, CSS가 포함된 예시들이 있으니 확인해보세요.

원글: https://www.htmhell.dev/adventcalendar/2023/2/