JavaScript 책임 범위

SLUR UI System에서는
JavaScript의 역할을 명확히 제한하여
UI 구조와 스타일, 동작이 서로 침범하지 않도록 합니다.
JavaScript는 UI를 구성하는 도구가 아니라,
정의된 구조와 상태를 제어하는 역할만 담당합니다.

---

JavaScript의 기본 역할

JavaScript는 다음 역할만을 담당합니다.

• 사용자 이벤트 처리
• UI 상태 변경
• 상태 전이에 대한 로직 관리
• 외부 라이브러리와의 연동

JavaScript는
UI가 어떤 상태가 될지만 결정합니다.

---

JavaScript가 하지 않는 역할

SLUR UI System에서는 JavaScript가 다음 역할을 수행하는 것을 지양합니다.

• UI 구조 생성 또는 변경
• 스타일 직접 제어
• 클래스 네이밍 규칙을 우회하는 조작
• 구조와 상태를 혼합한 처리

JavaScript가 구조나 스타일을 직접 제어하기 시작하면
UI 설계는 빠르게 복잡해집니다.

---

JavaScript와 CSS의 경계

SLUR UI System에서는 JavaScript와 CSS의 책임을 명확히 구분합니다.

• JavaScript는 상태를 변경합니다.
• CSS는 상태를 해석해 스타일을 적용합니다.
• JavaScript는 CSS의 결과를 판단하지 않습니다.

이 경계가 유지될수록
UI는 예측 가능하게 동작합니다.

---

JavaScript와 데이터 속성의 관계

JavaScript는
데이터 속성을 통해 UI 상태를 제어합니다.

• 상태 변경은 데이터 속성 값 변경으로 표현합니다.
• 클래스 조작은 최소화합니다.
• 상태 전달 수단으로 data-* 속성을 우선 사용합니다.

데이터 속성은
JavaScript와 CSS 사이의 중립적인 연결 지점입니다.

---

JavaScript 설계 시 판단 기준

JavaScript를 작성할 때는 다음을 기준으로 판단합니다.

• 이 로직이 상태 변경에 해당하는가
• 구조나 스타일을 침범하고 있지는 않은가
• CSS로 해결 가능한 문제는 아닌가
• 상태 전이가 명확히 정의되어 있는가

JavaScript 코드가 복잡해질수록
역할 분리 원칙을 다시 점검해야 합니다.

---

JavaScript 책임 범위의 목적

JavaScript 책임 범위는
UI 동작을 단순화하고,
구조·스타일·동작을 명확히 분리하기 위한 기준입니다.

이 경계가 지켜질수록
UI는 유지보수하기 쉬운 상태를 유지할 수 있습니다.