JS UI Rendering, Data bind

몇 년 전 모 프로젝트에서 지원 요청이 와서 가서 보고, 얼마 전에 내 프로젝트에서도 발생한 걸 보면 아주 기초적인 사항임에도 생각보다 잘 지켜지지 않는 사항인가보다.

대기업 SI 프로젝트에 몸담고 있다보면 요즘 트렌드에 맞는 UI Framework는 써보기가 힘들고 매번 jQuery 기반으로 프로젝트를 하게 되는데 (인력 수급이 아직까지는 가장 용이함), jQuery 기반의 프로젝트에 업무 화면이 복잡해져서 하나의 프로그램에서 수행하는 XHR이 많아질 경우 생각보다 자주 발생하곤 한다.

 

'화면의 특정 영역에 데이터가 나오다가 말다가 해요'

 

A라는 해당 문서의 DOM을 초기화하는 함수가 있다.

B 함수는 서버에서 데이터를 받아와 DOM에 Binding 하는 함수이다.

 

function A() {

    //특정 조건에 따라 UI에 특정 영역을 더하거나 뺀다

}

 

function B() {

    //$.ajax 등의 함수로 서버와 통신하여 UI에 데이터를 Binding 한다.

}

 

생각보다 많은 개발자들이 아래와 같이 작성하고, 대부분의 경우에 올바르게 동작한다.

A();

B();

 

하지만 모바일 프로젝트를 하다보면 아주 많은 경우의 수가 발생한다.

휴대폰이 구형이라 브라우저 동작 자체가 느린 환경도 있고, 접속이 잘 안되는 Wi-Fi 를 사용해서 인터페이스가 느린 경우도 있다. 하여 순서가 반드시 보장되어야 하는 코드들은 정확한 타이밍에 callback 형식으로 작성하도록 한다.

위와 같은 경우에도 A에서 생성해야 할 Element가 생성되지 않은 상태에서 B 함수에서 Data Binding이 수행되는 경우가 발생하면 데이터가 표시되지 않는 경우가 발생한다.

 

function A(callback) {

    //특정 조건에 따라 UI에 특정 영역을 더하거나 뺀다.

    if (callback && typeof callback == 'function') callback();

}

 

function B() {

    //$.ajax 등의 함수로 서버와 통신하여 UI에 데이터를 Binding 한다.

}

 

A(B);

 

위와 같이 작성하면 UI Rendering이 완료된 후에 B 함수를 실행하므로 올바르게 동작한다.