SW 개발이 좋은 사람

다음과 같이 데이터를 구성하고 실행하면

sample6.html

다음과 같이 2 가지 문제가 있는 것을 찾았다.

1. expander 기호의 위치가 행의 맨 앞에 있어서 적절하지 않아 보인다.

2. job1의 expander 기호를 클릭하면 job2만 숨겨진다.

  즉, 손자(job3)은 숨겨지지 않는다.

이 버그도 쉽게 해결할 수 있으니

먼저 해보고 다음 설명을 읽는 것이 좋을 것 이다.

sample6_treegrid9.js

먼저 expander 기호의 위치 문제는

노드의 맨 앞에 있는 기호를

뒤로 보내서 task 필드의 값 바로 앞에 두면 된다.

들여쓰기와 expander 기호 표시를 위해

task 필드 앞에 span을 생성하였는데,

기존에는 expander 기호를 맨 앞 span에 넣었다.

이것을 맨뒤 span에 넣으면 된다.

따라서 다음과 같이 코드를 수정한다.

기존에는 첫 번째 TD(task 필드)의

첫번째 자식(span)에 기호를 넣었고,

수정된 코드는 첫 번째 TD(task 필드)의자식 중

span을 찾아서 마지막(last) 자식에 기호를 넣게 작성하였다.

그러면 다음 그림과 같이 task 필드의 값 바로 앞에

expander 기호가 위치하게 된다.

두번째 문제는

job1의 expander 기호를 클릭하면 job2만 숨겨지고

손자(job3)은 숨겨지지 않는 것이다.

이것은 자식 찾기를 한번만 했기 때문에 발생한다.

앞서 코드 구성에서

바로 위 부모만(직계 존손) 자신의

자신의 노드 클래스명에 표시하도록 했고(treegrid9-parent-)

부모는 자신을 부모로 표기한 이 값만을 찾도록 하고 있다. table.find("tr.treegrid9-parent-" + id).each(function(i, e)

즉, 모든 자식을 찾아야 하는데

모든 자식을 찾으려면

나(클릭한 노드)를 중심으로

나를 부모로 하는 자식 노드를 찾아서 숨기거나 보이도록 처리한다.

그리고, 각 자식 노드를

부모로 하는 노드가 있는 지 확인해서 if (table.find("tr.treegrid9-parent-" + id).length>0)

있으면 다시 자식 노드를 찾아서 숨기거나 보이도록 처리한다.

그리고, 다시 각 자식 노드를

부모로 하는 노드가 있는 지 확인해서 if (table.find("tr.treegrid9-parent-" + id).length>0)

이렇게 무한 반복으로

자식 노드를 찾아서 처리해야 한다.

복잡해 보이지만

이것은 재귀 함수를 사용하면 간단하게 처리된다.

기존 코드를 getChildren 함수에 넣고

이 함수를 자식이 있으면 호출하도록 작성하였다.

또, getChildren를 함수내 내장 함수로 작성했다.

개인적으로 JS의 재미있는 기능이라고 생각하며

자세한 내용은 찾아보길 바란다.

지금까지 간단한 TreeGrid를 제작하는 예제를 통해서

자바스크립트, JQuery, JSon 등의 사용법을 익혀보았다.

노드 선택, Ajax 처리 등의 기능을 추가하면

제법 그럴듯한 TreeGrid를 만들 수 있을 것이다.

누군가 제대로 된 오픈 소스 라이브러리를 개발하길 기대하며……

과제 관리 시스템 PMS9 (Project Management System)은

기업내의 과제를 온라인으로 관리하기 위한 도구로,

Project9 (Spring 4 + MyBatis 3 + MariaDB 기반으로 제작한 웹 프로젝트 템플릿)을 기반으로,

Project9을 응용하는 방법을 표현하기 위해 제작하였다.

즉, 쉽고 빠르게 개발하는 방법을 정리하기 위한 예제로 제작하였다.

핵심기능 위주로 제작하여 공개하고,

시간 나는데로 확장할 계획이다.

소스는 github에서 다운 받을 수 있다.

설치 방법은 Project9과 동일하기 때문에 Project9 설치를 참고하길 바라고

설치시 guthub 주소를 다음과 같이 바꾸어 줘야 한다.

        https://github.com/gujc71/pms9.git

설치를 완료한 뒤,

웹 브라우저에서 http://localhost:8080/pms9/로 접속하여 확인한다.

다음은 간단한 화면 설계서 이다.

마지막으로 테이블 구성(ERD)는 다음과 같다.

AmaterasERD로 작성되었고

파일명이 pms9.erd로 github에서 같이 배포되고 있다.

대부분의 테이블 구성이 Project9의 ERD와 동일하지만

과제와 관련된 4개의 테이블이 추가되었다.

프로젝트, 프로젝트 업무(task), 업무 담당자, 첨부파일의 4개로

ERD왼쪽에 배치되어 있다.

Logical mode

Physical mode

실력 향상을 위해서는

다른 사람의 코드를 많이 보는 것이 중요한데

괜찮은 프로그램 소스를 얻는 것이 쉽지가 않다.

인터넷에서 찾을 수 있는 것들 중

Mybatis에서 Spring 기반으로 제작한 샘플인 JPetStore가

작지만 많은 것을 포함하고 있어

얻는 것이 많을 것 같아서 정리해 봤다.

가장 유명한 샘플이라고 생각한다.

JPetStore는 Spring 4와 Mybatis 3, HSQLDB를 이용하여

애완동물을 파는 기본적인 쇼핑몰을 구축한 샘플로

Mybatis에서 제공하는 샘플이 있고(jpetstore),

다양한 기술들을 소개하기 위해 변형해서 만든 샘플들이 있다.

표에 있는 것을 모두 상세하게 정리할 수는 없고

몇 가지 기능과 구조를 중심으로 정리했다.

먼저, 기본적인 설명은 http://www.mybatis.org/jpetstore-6/ko/에 잘 정리되어 있다.

Spring과 Mybatis에 대한 기본적인 설명은 다 있는 것 같다.

기본적인 사이트 구성을 알고 싶은 경우

데모 사이트에서 확인할 수 있다.

먼저, 기본인 jpetstore(표의 약어)는

소형 DBMS인 HSQLDB를 대상으로

국내에서는 잘 사용하지 않는 Stripes를 이용한 예제이다.

Stripes를 사용했기 때문에 일반적인 Spring 코드와 많은 차이가 있다.

spring-jpetstore는 Spring MVC를 기반으로 하고,

Spring Security를 사용하여 jpetstore의 보안 문제를 해결하였다.

vaadin-jpetstore은 기본 기능에 vaadin을 적용한 것으로

데모 사이트가 운영되어 있어 설치 없이 사용해 볼 수 있다.

개인적으로 Java로 웹 페이지를 컨트롤 한다는 개념이 욕심이라는 생각에

사용해 보지 않았지만,

자바스크립트 프론트엔드 애플리케이션을 자바로 만들고 싶다면 확인해 보는 것도 좋을 것 같다.

gradle-jpetstore과 tomee-jpetstore는 기본 jpetstore에

gradle과 tomee를 적용한 것으로

소스에 큰 차이가 없다.

gradle-jpetstore는 gradle를 설치하고 실행하면 문제가 없고,

tomee-jpetstore도 일종의 WAS인 tomee만 설치하면 될 것 같은데

일이 커지는 것 같아서 테스트 해보지 않았다.

HSQLDB는 Java 기반의 소형 RDBMS이고,

H2는 HSQLDB의 후속 버전이다.

위 예제들은 내장되어 작동하기 때문에

별도의 설치나 접속 정보 설정없이 웹 실행과 동시에 사용할 수 있다.

이상의 5가지 외에도 다양한 버전이 있을 수 있다.

(개인적으로 몇 시간 검색해서 찾은 결과일 뿐이다)

이러한 유사한 기능을 제공하는 소스 코드를 살펴보고

실행해 보는 것도 공부가 되는 것 같아서 정리해 봤다.

나아가 자신의 버전을 만든다면 실력 향상에 도움이 될 것 같다.

JQuery나 Bootstrap 등으로 개발해 보거나

제품 등록 기능, 판매 현황 등의 기능이 없는데

기능을 보강해 보는 것도 재미 있을 것 같다.