Ajax로 목록 불러오기 구현 시 고려할 점

발생일: 2011.09.07

문제:
게시판과 같은 목록을 Ajax로 가져와 출력할 때엔 간단할 것 같으면서도 주의할 것이 몇 가지 있다.
특히 여러 엘리먼트가  맞물려 있을 경우엔 코드가 꼬이는 경우가 더러 있기도 하다.

이런 경우 대체로 목록을 요청하기 위해 여러 옵션이 필요하고, 서버에서 응답을 받았을 때에도 처리해야 할 엘리먼트가 많다.
특히, 결과가 없을 경우나 에러가 발생했을 때까지 포함하여 처리할 때엔 코드가 더 복잡해지곤 한다.

목록 요청 처리 과정을 좀 깔끔하게 디자인할 순 없을까?

해결책:
Ajax로 목록을 요청해 응답을 받고, 받은 데이터로 목록을 출력한다고 했을 때 고려해 볼 만한 것들은 아래와 같다.
    1. 요청 시 파라미터를 어떻게 구성하는가?
    2. 응답이 왔을 때엔 어떻게 되는가?
    3. 응답이 왔으나, 결과가 없을 경우엔 어떻게 되는가?
    4. 요청 실패 또는 타임아웃 되었을 경우엔 어떻게 되는가?


코드 분기 없이, 위 조건을 만족할 수 있도록 옵저버 패턴을 이용해 목록 요청을 관리하는 모듈을 구상했다.

Searcher : Ajax 요청을 보내고, 응답하는 것을 관리한다.
+ request()
+ addParametable()
+ addResponsable()

<<Parametable>> : Ajax 요청을 보내기 위한 파라미터를 구성한다.
+ getParameter()

<<Responsable>> : 요청에 대한 응답이 왔을 때 상황에 따라 처리한다.
+ success()
+ noResult()
+ error()


각 모듈들은 작은 UI 모듈로 나누고, Searcher에 목적에 맞게 옵저버로 등록한 후 요청(request())하면 된다.

예를 들어, 아래와 같이 모듈들이 나뉘어 있다고 가정하자.
물론 각 모듈은 각 타입에 맞는 메서드를 구현하고 있어야 한다.

var oSearcher = 검색을 관리하는 모듈,
    oCondition = 검색 조건 모음 모듈,
    oKeyword = 검색어 박스,
    oResultList = 검색 결과가 표시될 목록,
    oResultTitle = 검색 결과 제목,
    oNoResult = 검색 결과가 없을 때 표시할 엘리먼트,
    oError = 검색 에러 시 표시할 엘리먼트; 

요청을 보낼 준비를 위해 검색 조건을 구성하는 엘리먼트를 추가한다.
oSearcher.addParametable(oCondition, oKeyword);

응답 받았을 때 반응할 모듈을 추가한다.
oSearcher.addResponsable(oResultList, oResultTitle, oNoResult, oError);

목록 요청을 보낼 때에는 oSearcher.request()를 호출하면 된다.

Searcher는 Parametable의 getParameter()를 통해 요청 파라미터를 구성하고 요청을 보낸다.
응답이 오면 Responsable에 등록된 모듈의 메서드를 호출한다.
성공했을 경우 response()를, 결과가 없거나 실패했을 경우 noResult() 또는 error()를 호출할 것이다.


좀 장황할 수도 있겠지만, 각 응답 케이스에 대해 분기 없이 깔끔하게 처리할 수 있고, 다른 기능이나 모듈을 확장하기도 용이하다.
목록 요청과 관련된 공통된 작업이 필요하다면 그에 맞는 타입(인터페이스)를 구현하도록 추가하면 된다.
(예를 들어, 로딩이 진행 중일 때 모든 엘리먼트가 반응해야 한다면 Responsable에 loading()을 추가하면 되겠다)
(예를 들어, Ajax History를 적용해야 한다면, Historable을 정의하고, getStatus(), setStatus() 등과 같은 메서드를 구현하도록 추가하면 되겠다)


참고: 위 설계를 적용하기 위해서는 UI 엘리먼트가 기능단위로 나뉘어져 있어야겠다. http://ohgyun.com/311