▲

GN⁺: 그것을 위해 JavaScript가 필요 없습니다

 (htmhell.dev)
3P by neo 5달전 | favorite | 댓글 1개

웹 개발의 핵심 원칙: 최소 권한의 법칙

  • 웹 개발의 핵심 원칙 중 하나인 '최소 권한의 법칙'은 주어진 목적에 적합한 가장 낮은 수준의 언어를 선택하는 것을 의미함.
  • HTML, CSS, JS 중에서 HTML이 가장 선호되며, 그 다음이 CSS, 마지막이 JS임.
  • JS는 가장 다재다능하지만, 로드 실패, 추가 리소스 소모, 접근성 문제 등의 위험이 있음.

사용자 정의 스위치

  • 디자인 요구에 따라 일반 체크박스 대신 사용자 정의 스위치를 구현할 때, JS 대신 :checked 가상 클래스를 사용하는 HTML과 CSS로 구현 가능함.
  • 브라우저는 레이블 내부에 있는 입력 요소를 자동으로 연결하여 클릭 가능하게 함으로써 추가적인 JS 핸들러 없이도 토글 기능을 제공함.

네이티브 자동 완성 기능: Datalist

  • 자바스크립트 대신 브라우저의 내장 기능인 datalist를 사용하여 사용자가 입력함에 따라 옵션을 자동으로 필터링하여 보여주는 기능을 구현할 수 있음.
  • 사용자는 자신이 원하는 값을 입력하거나, 브라우저가 추가한 드롭다운 아이콘을 클릭하여 모든 옵션을 볼 수 있음.

네이티브 색상 선택기

  • 복잡한 JS를 사용한 색상 선택기 대신, 단일 HTML 라인으로 구현된 네이티브 색상 선택기를 사용할 수 있음.
  • 크롬 기반 브라우저에서는 화면 어디에서나 색상을 선택할 수 있는 추가 기능을 제공함.

아코디언

  • details와 summary 요소를 사용하여 사용자가 필요할 때까지 내용을 숨겨 놓고 페이지의 구조를 개선할 수 있음.
  • open 속성을 사용하여 아코디언 항목 중 하나를 기본적으로 열어 둘 수 있음.

대화형 모달

  • dialog 요소를 사용하여 사용자에게 정보를 제공하거나 입력을 요청하는 모달을 구현할 수 있음.
  • JS를 사용하여 모달을 열지만, 나머지는 모두 네이티브 HTML과 CSS로 처리할 수 있음.

결론

  • 이 기사는 JS를 덜 사용하고, CSS와 HTML의 기능을 활용하여 더 나은 웹사이트를 만들 수 있음을 보여줌.
  • 접근성을 고려하여 새로운 구현 방식을 테스트하는 것이 중요함.

GN⁺의 의견

  • 이 글에서 가장 중요한 점은 웹 개발 시 JS에 의존하지 않고 HTML과 CSS의 기능을 최대한 활용하여 성능과 접근성을 향상시킬 수 있다는 것임.
  • 웹 개발자들에게 흥미로운 이유는 기존에 JS로만 가능하다고 생각했던 기능들을 더 간단하고 효율적인 방법으로 구현할 수 있는 새로운 방법을 제시하기 때문임.
▲
neo 5달전  [-]
Hacker News 의견

  • 자바스크립트의 호환성이 더 좋기 때문에 특정 영역에서 사용하는 것에 대한 언급이 누락되었다는 지적

    • 새로운 자바스크립트를 트랜스파일링을 통해 사용할 수 있지만, CSS와 HTML의 누락된 기능을 폴리필하는 것은 훨씬 어렵고 때로는 불가능함
    • appearance 속성 사용 시 MDN에서 많은 주의사항을 제시하며, 특히 appearance: none 사용에 대해 철저한 테스트를 권장함
    • datalist는 Firefox Android에서 기능하지 않으며, 단순한 입력 상자로만 보임
    • 색상 선택기는 매우 비표준적이어서 대부분의 비즈니스에서 사용하기 어려움
    • details와 dialog의 일관성 부족을 기사 자체도 인정함
    • 브라우저들이 이러한 기능들을 일관되게 지원하는 시대가 오기를 바라지만, 그때까지는 주로 개인 프로젝트에서만 사용할 것임

  • 2023년에도 여전히 폼과 사용자 데이터 입력에 대한 일반적인 사용자 경험(UX) 문제를 겪고 있음에 놀라움을 표함

    • 이 문제가 왜 해결되지 않았는지 이해할 수 없음
    • XForms를 통해 한 번에 해결하려는 시도가 있었지만 브라우저에서 구현되지 않았고, 대신 CSS/JS 컴포넌트 프레임워크가 제한된 폼 요소 세트를 제공함

  • datalist에 대해 알지 못했지만, Chrome Android에서 제대로 작동하지 않는 것으로 보임

    • 키보드에서 옵션을 볼 수 있지만, 모바일 웹 UI에서 이 기능을 본 것은 처음이며, 일반 사용자가 사용 방법을 알아내는 데 자신이 없음
    • Firefox Android에서는 전혀 지원되지 않음

  • scroll-behavior: smooth를 사용한 네이티브 부드러운 스크롤링, scroll-snap을 사용한 네이티브 캐러셀, 스크롤 기반 애니메이션에 대한 언급

    • 이 기능들의 사용을 제한하고, 종종 부정적인 부작용이 있으므로 신중히 사용할 것을 권장함

  • <details>를 사용하면 Ctrl+F로 내용을 검색할 수 있고 자바스크립트 아코디언을 열 수 없는 반면, <details>는 열 수 있다는 장점이 있음

  • datalist는 내부 도구가 아니라면 적절한 선택이 아니라는 의견

    • 기본값이 좋지 않고 스타일을 변경할 수 없으며, 스타일링이나 행동 변경에 제한이 있을 때 자바스크립트를 사용하는 것이 종종 유일한 선택임

  • HTML 표준을 따르면 모든 것이 일관되고 접근성이나 번역과 같은 것들에 쉽게 적용할 수 있다는 의견

    • 현대 사이트들이 동적으로 페이지를 로드하기 때문에 뒤로 가기 버튼조차 작동하지 않는 문제를 지적함

  • CSS가 웹 페이지를 읽기 어렵게 만드는 도구로 사용될 수 있다는 지적

    • 레이아웃과 타이포그래피의 모든 측면을 사용자가 제어할 수 있는 브라우저로 돌려보내야 한다는 의견

  • 웹 개발의 핵심 원칙 중 하나로 "가장 적은 힘의 원칙(Rule of Least Power)"을 언급

    • 이 원칙에 대해 들어본 적 없다는 개발자의 의견과, 가능한 한 간단하게 작업하고자 하는 프론트엔드 개발자들이 있는지에 대한 궁금증을 표함
답변달기