정선생의 블로그

최근... 하기 시작한 구현 주요사항....
ibatis를 통한 DB연계, ajax를 통한 비동기 페이지 구현 + 자바 스크립트형 테이블 모듈 사용...

실제 구현 2주째....
간단한 느낌....

[1] ibatis를 처음 사용해본 느낌...
ibatis를 사용해서 쓰는건 나름 xml에 sql문을 정의해서 쓰기 때문에
닥 jsp로 구현하는것보다 소규모 프로젝트에서는
xml작성, 자료구조형 class와 로직쪽 class를 만드는 번거로운
작업이 되긴 하지만 사실.....남들이 보기에 좋다.
좀 귀찮긴 해도 나름 좋은느낌...


[2] ajax + js. 테이블모듈(?) 사용
완전 노가다의 산물이다...
한화면에 비동기로 처리될 테이블 구조가 4개...

1) html코드상에선 값출력을 위해 레이어id 남발,
2) 값을 전달과각 기능별 값을 유지하기 위한 js 변수남발,

각 기능별 변수를 통합적으로 관리하기 위해....
자바스크립트를 class화해서 정의했는데도 떡실신....하는걸 보면

비동기적인 처리?? 개념은 좋은데...
각 접근을 위한 사전작업이 장난아닌듯...하다...

다음 포털을 보면...
마우스로 드래그하면, [검색] 버튼이 나와서
해당 텍스트를 검색 하는 기능이 있다.


사실... 드래그한 텍스트를 검색어 입력하는곳에 자동입력후 검색해 주는 기능이지만,
스크롤이 길고 조금 복잡한 텍스트(특히 한문) 같은경우는

"복사 -> 스크롤이동 -> 검색창에 붙여넣기 -> 검색버튼 클릭" 이라는 방법을 써야 하지만,

위 방법은 귀차니즘에 빠진 현대인(나를 지칭하는말 ;;)은 위와 같은 별것 아닌 인터페이스가 도움이 될때도 있다.

그래서, 자바스크립트로 간단히 구현해본 샘플 페이지...
파이어 폭스랑, IE에서 둘다 되고, 최대한 사용법을 쉽게하려고
스크립트를 class화해서 구현한 소스....


사실, 이벤트가 일어나는건 결과용 레이어 안에서 이벤트를 걸어서 일어나도록 했다.




최대한 사용법을 쉽게하기위해... class화 했고, 적용도 다음과 같이
body 안의,,,, 아래쪽쯤에 레이어의 id만 선언해주면 OK (html을 보면 될듯)



만약, 이 소스를 이해 못했다면... 난감;;
(나름 쉽게 사용하게 만들었는데)

파이어폭스에는 스크립트 디버깅할때 파이어 버그가 있고,,,
익스플로러에선 요놈이 있죠.

아이이 데부툴바...
파이어 버그에 비해 스크립트 디버깅 기능은 좀 떨어지지만
디자인 깨짐을 찾을땐 편해서...

디자인은 요놈
스크립트 디버깅은 파이어 버그를 쓰는편...

설치하고, 도구쪽에 보면 해당 기느을 활성화 할수있음






유후