Javascript UI 객체에서 고려할 기본 기능

발생일: 2011.05.17

문제:
현재 진행하고 있는 프로젝트에서 자바스크립트 작업 시 객체를 나누는 기준은 작은 UI 기능 단위이다.

UI 기능 단위로 구분되어 있어 객체의 역할을 쉽게 파악할 수 있고, 기능 단위로 쪼개져 코드가 간결하고 쉽게 이해할 수 있는 장점이 있다.
하지만 로직과 UI와 관련된 코드가 함께 있어 테스트하기 번거로울 수 있으며, 기능 단위가 많아질 경우 모듈 간의 관계를 설정해주는 작업이 복잡해지는 등의 단점도 있다.

여튼, 프로젝트 기간 동안 기능 단위로 객체를 나누어 구현해보면서 기본적으로 객체 생성 시 고려해야 할 사항이 있어 메모해둔다.

해결책:
UI 객체의 상황에 따라 적절하게 아래 체크리스트를 확인해보면 도움이 될 수 있다.

1. 초기화
1.1. 초기화 시 관련 DOM이 없거나, 파라미터가 충분하지 않다면 어떻게 되는가?
1.2. 객체를 초기의 상태로 리셋할 수 있는 방법이 있는가?
1.3. 스크립트가 비활성화 되어 있을 경우, 마크업은 의도한 것과 동일하게 표시되는가?

2. 상태 (Ajax History를 적용하는 경우)
2.1. 현재 객체의 상태를 가져올 수 있는가?
2.2. 상태 데이터로 객체의 상태를 설정할 수 있는가?
2.3. 잘못된 상태 데이터로 상태 설정을 시도할 때엔 어떻게 되는가?

3. 통신 (Ajax 통신과 관련있을 경우)
3.1. 현재 상태값을 파라미터로 생성할 수 있는가?
3.2. 결과가 없을 때엔 어떻게 표시되는가?
3.3. 로딩 중일 경우엔 어떻게 표시되는가?
3.4. 통신 중 오류가 발생했을 때엔 어떻게 표시되는가?

4. 기타
4.1. 대상이 되는 마크업이 변경될 경우, 쉽게 적용 가능한가?
4.2. 테스트를 위한 상태 및 데이터 설정이 용이한가?
4.3. 콜백을 지나치게 많이 사용하고 있지는 않은가?
4.4. 너무 많은 작업을 담당하고 있지는 않은가? (SRP)