# 그것을 위해 JavaScript가 필요 없습니다

> Clean Markdown view of GeekNews topic #12132. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=12132](https://news.hada.io/topic?id=12132)
- GeekNews Markdown: [https://news.hada.io/topic/12132.md](https://news.hada.io/topic/12132.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2023-12-03T10:00:01+09:00
- Updated: 2023-12-03T10:00:01+09:00
- Original source: [htmhell.dev](https://www.htmhell.dev/adventcalendar/2023/2/)
- Points: 3
- Comments: 1

## Topic Body

### 웹 개발의 핵심 원칙: 최소 권한의 법칙
- 웹 개발의 핵심 원칙 중 하나인 '최소 권한의 법칙'은 주어진 목적에 적합한 가장 낮은 수준의 언어를 선택하는 것을 의미함.
- 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로만 가능하다고 생각했던 기능들을 더 간단하고 효율적인 방법으로 구현할 수 있는 새로운 방법을 제시하기 때문임.

## Comments



### Comment 21044

- Author: neo
- Created: 2023-12-03T10:00:02+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=38497445) 
- 자바스크립트의 호환성이 더 좋기 때문에 특정 영역에서 사용하는 것에 대한 언급이 누락되었다는 지적
  - 새로운 자바스크립트를 트랜스파일링을 통해 사용할 수 있지만, 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)"을 언급
  - 이 원칙에 대해 들어본 적 없다는 개발자의 의견과, 가능한 한 간단하게 작업하고자 하는 프론트엔드 개발자들이 있는지에 대한 궁금증을 표함