[실무] 대충 만들면 안되는 트리 구조

오랜만에 글쓰는 김블루입니다.

일을 하다보면 자주 만나게되는 트리,

트리를 코딩하거나 그런건 아니구요, 기획할 때 반드시 고려해야 할 몇가지 사항에 대해 알아보겠습니다.

1. 트리 컴포넌트를 적극 활용하라.

2. 성능 고려는 필수.

1. 트리 컴포넌트를 적극 활용하라.

컴포넌트의 예 :: http://www.destroydrop.com/javascripts/tree/

즐겨쓰는 컴포넌트를 한두가지씩 즐겨찾기 해두셨을겁니다.

이런 것도 그냥 쓰시지 마시고 라이센스 꼭 확인하시고, 버그를 찾으면 개발자에게 리포팅도 해주세요 ㅎ

2. 성능 고려는 필수.

트리 컴포넌트의 성능을 이야기하는 것 같지만... 사실 그건 아닙니다 ㅎ

IE를 제외한 다른 브라우져에서는 사실. 특별한 문제가 발생하지는 않습니다.

항상 IE가 문제인데,, 

먼저 트리에 들어가는 데이터가 약 0~400건 정도 되면 OK!! 괜찮습니다.

그냥 데이터 전체를 가져와서 트리에 냅다 때려 박으셔도 됩니다.

BUT 

데이터가 4~500건 이상이다.

IE 에서 문제가 발생합니다.

띵!!!!!!!

이 스크립트의 실행을 멈추시겠습니까?...

조사해보니 자바스크립트에서 500? 이상의 For문을 돌게되면 무한 루프에 빠진것으로 판단하고 

IE가 스크립트 실행을 멈출껀가 물어보는 것이었습니다.

클라이언트 성능이 지금처럼 좋았던 시절이 아닌 때에는 고마운 기능이었을지 모르지만,,

지금은 날아다니는 클라이언트 수준에서는 ...쯥..

이 팝업은 IE8에서만 xp에서만 볼 수 있습니다. (win8이 나왔지만,, 아직 xp를 써야하는 회사들이 참.. 많습니다....)

그래서 트리 컴포넌트에 하위트리가 있는 트리를 선택할때 Ajax로 불러와서 트리를 구성해주는 기능 필수로 있지요..

그래서 선택을 해야합니다.

1. 깊이 없이 전체 통으로!!!

2. 전체를 ajax 로??

3. 2~3 ? 깊이까지는 통으로 때려 박고, 그 하위 부터는 ajax를 사용해 트리를 호출 시점마다 구성해 줄지,,

보통 몇 깊이까지는 자동으로 보여달라는 요청이 많기 떄문에.. 보통 3번 방법으로 하게 됩니다.

======================================================================================================

포스팅을 할때, 항상 이미지를 위주로 설명해드렸는데,,

이번 포스팅은 팁이라.. 뭐 이미지로 해드릴 부분도 없어서.. 재미 없으실 거에요....ㄷㄷ