계박사의 코딩교실

Web 을 개발하다보면 웹페이지 Loading 이 느린 경우가 있습니다.

특히 무거운 Plugin 이 있다거나 로직이 복잡한 부분에서 프로세스가 오래 걸리는 경우가 있는죠.

HttpWatch 프로그램으로 어느 부분에서 지연이 되는지 확인이 가능합니다.

https://www.httpwatch.com/

사이트에서 Basic Edition (Free) 버전을 받아서 설치하면 간단하게 Http 모니터링은 준비 끝.

설치가 끝났으면 Internet Explorer 를 실행해 봅니다.

그리고 [ 도구 ] 메뉴에 들어가면 HttpWatch Basic 이라고 메뉴가 추가된 것을 실행합니다.

실행하면 F12 키를 눌렀을 때 나오는 개발자 도구와 같은 창이 뜹니다.

이 화면에서 웹페이지가 로딩될 때 걸리는 시간과 함께 요청된 http url 주소가 표시가 됩니다.

Record 버튼을 눌러서 웹페이지를 이동하거나 F5 키를 눌러주면 아래와 같은 화면을 볼 수 있을 것입니다.

이번에 소개하는 jQuery Plugin 은 Dynatree.js 입니다.

트리 구조로 표현할 때 직접 구현하기 보다는 데이터만 트리구조로 해놓은 뒤 Plugin 을 이용하여 데이터 트리를 표현하는게 일반적입니다.

오픈 소스가 정말 많아서 이런저런 Tree Plugin 을 사용해봤지만 가장 좋았던 것은 Dynatree.js plugin 였습니다.

대부분의 트리 구조는 비슷하다. Json 데이터 또는 html 의 <li> 태그 등을 이용하여 트리 구조를 그리는게 대부분의 방식입니다.

Dynatree 도 마찬가지로 다양한 방법을 제공합니다.

Sample 들은 아래의 사이트에서 확인 가능합니다.

http://wwwendt.de/tech/dynatree/doc/samples.html

Dynatree 가 좋았던 점은 다양한 방법으로 Tree 를 그리기가 쉽습니다.

Sample 중 몇 개의 소스를 소개하도록 하겠습니다.

1. <li> 태그를 이용하여 트리구조 그리기 

아래와 같이 Server Side 에서 Json 데이터를 구현만 해주면됩니다.

처음 Tree 가 호출되었을 때 Ajax 로 호출하여 그리는 방식입니다.

Server Side 에서 트리구조 Json 데이터 리스트를 가져올 수 있도록 구현을 하면 됩니다.

보통 이런 경우 Server Side 에서 쿼리로 재귀쿼리로 Tree 구조를 가져온뒤 Dynatree Json 타입에 맞게 만들어 넘기면 됩니다.

3. lazy loading 방식으로 그리기

lazy loading 방식은 간단히 모든 Tree 구조데이터를 한번에 가져오는게 아니라 Tree 의 Children 을 실시간으로 가져오는 방식입니다.

2번째 방식인 ajax로 json 데이터를 가져오는 것은 같지만 처음에 전체 데이터가 아닌 큰 구조의 데이터라던지 부모 데이터만 가져온 뒤에 살을 붙입니다.

Ajax 로 실시간으로 해당 Node 의 Children 만가져오도록 구현을 하면 되기 때문에 

재귀쿼리로 Tree 전체를 만들어야되는 복잡도가 줄어들기때문에 괜찮은 방법입니다.

이번 프로젝트에서도 2번째 방법으로 개발을 하다가 3번째 방법인 lazy Loading 방식으로 변경하였더니 소스가 간결해 져서 좋았습니다.

실제로 부모 Node를 가져온 뒤 클릭할때마다 Node 의 Children 만 가져와서 붙이기때문에 쿼리도 더 간단해졌습니다.

3번째 방법이 가장 좋은 것은 아니다. 상황에 따라 필요한 방식으로 개발을 하는게 제일 좋습니다.

Spring Tools Suite 를 받아서 설치하여 기본적인 Spring Project 를 생성하여 Tomcat 으로 구동하기의 과정을 살펴보겠습니다.

전에는 이클립스에서 Spring을 받는 방식으로 사용을 했지만 요즘은 Spring Tools Suite (STS) 라고 아예 Import 되어 나옵니다.

아래의 사이트에서 직접 다운로드를 받으면 됩니다.

https://spring.io/tools

다운로드를 받고 압축을 풉니다.

zip 파일안에는 내가 압축을 푼 폴더 외에 다른 폴더가 있지만 필요가 없어 아래의 STS 폴더만 압축을 해제하였습니다.

STS 파일을 실행합니다.

그 후 원하는 위치에 workspace 를 잡아주고 확인을 눌러줍니다.

신규 프로젝트 생성하기 위하여 상단 메뉴의 File -> New -> Spring Project 를 선택 해줍니다.

Spring project 의 여러 타입 중 기본 MVC Project 로 생성을 해줍니다.

MVC Project 에서 top level Package 설정 부분이다. 설정에 의해서 1단계, 2단계, 3단계 등을 설정이 가능하며 기본으로는 최소 3단계로 되어있습니다.

원하는 package 명으로 입력합니다.

Spring 관련 Lib 를 온라인으로 다운받느라 시간이 조금 걸리니 조금만 기다려주면 아래와 같이 기본 틀로 Spring project 가 생성이 됩니다.

MVC 모델로 기본 세팅되어 생성이 되며 log4j.xml 과 servlet-context.xml 등 바로 웹이 구동 될 수 있도록 세팅이 됩니다.

그럼 바로 웹을 구동합니다.

웹을 구동하기 위하여 많이 사용하는 Apache Tomcat 을 다운로드 받습니다.

링크는 8버전으로 해두었으며 32bit 또는 64bit 로 개인 PC의 OS 에 맞는 버전으로 zip 파일을 받습니다.

http://tomcat.apache.org/download-80.cgi

그리고 다운받은 Tomcat을 압축해제하여 풀어줍니다.

STS로 돌아와 압축 푼 Tomcat 의 설정을 잡아준다. Window -> Preferences 로 이동합니다.

Server -> Runtime Environments 로 이동하여 새로 추가하기 위하여 Add 를 눌러줍니다.

우리가 다운받은 건 8버전이기 때문에 Tomcat 8버전을 선택해줍니다.

Browse 를 눌러서 설치했던 Tomcat 의 위치를 잡아줍니다.

그리고 마지막으로 저장을 해줍니다.

여기까지가 Tomcat 환경만 잡아 준 것이고 실제로 Server 를 추가해 주어야합니다.

Server 를 생성하기 위하여 탑메뉴의 File -> New -> Other  을 선택합니다.

그리고 Server 폴더의 Server 를 선택해줍니다.

우리가 환경을 잡아준 Tomcat 8 버전을 선택해줍니다.

그러면 자동으로 우리가 등록한 Tomcat 환경이 잡히는 것을 볼 수 있습니다.

마지막으로 저장하여 Server 를 등록합니다.

이렇게 서버가 정상적으로 환경 파일과 함께 등록된 것을 볼 수 있습니다.

등록된 Server 에 프로젝트를 등록하기 위하여 오른쪽 클릭하여 Add and Remove 를 선택합니다.

Spring Project 를 선택하여 Add 버튼 또는 더블클릭을 하여 서버에 Import 해줍니다.

Tomcat 서버를 시작을 해줍니다.

Windows 보안 경고창이 뜨며녀 확인을 눌러 방화벽에 액세스 허용을 해줍니다.

URL에 Tomcat 8080 포트와 함께 입력하여 들어가면 정상적으로 Hello world 가 출력되는 것을 볼수있습니다.

만약 Contextpath를 알 수 없어서 확인이 필요하다면 아래와 같은 방법으로 확인이 가능하며 수정도 가능합니다.

Tomcat Server 에 Spring Project 를 import 하게되면 보통 Project 명에 따라 자동으로 ContextPath가 생성이 됩니다.

ContextPath 의 경우 server.xml 에서 확인이 가능합니다.

해당 코드의 path 부분입니다.

또한 Spring Project 에 우클릭하여 Properties -> Web Project Settings 에 들어가면 현재 Context root 명을 알수 있습니다.