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)



카테고리

분류 전체보기 (711)
About me. (6)
Daylogs (676)
영어공부 (0)
My works - 추억 (29)
비공개 (0)