# WebSquare5 연동하기
프로젝트에서 UI/UX 툴로 WebSquare5를 사용하게 되었다. 서버 사이드와 데이터 통신을 하기 위해
서버 사이드에 웹스퀘어 연동 모듈을 구현해 주어야 했다. 잘 확장하면 웹스퀘어 외에 다른 UI/UX 툴도 연동 시 활용할 수 있을 것 같다.
잘 정리해두어 다음 번에 또 참고해야지 ㅎㅎ
우선 websquare에서는 데이터 통신 객체로 'submission'이란 것을 사용하는데, 여기에 사용 가능 한 데이터는 XML, JSON, Plain Text, Request Parameter(K,V) 등이 있다. 요새는 JSON을 가장 많이 권장한다는데 왜 JSON이 가장 권장될까?
1) JSON vs XML 비교
- XML과 JSON은 모두 구조화된 문서를 전송가능 하게 만드는 텍스트 포맷이다.
- XML과 JSON은 특정한 의미를 가진 데이터를 담는 포멧을 정의한다.
[XML]
- 텍스트로만 정보가 이루어져 어느 환경에서건 구애받지 않고 사용 가능한 포맷
- 기존 SGML의 복잡성을 줄이고, HTML의 편의성을 지닌 XML은 강력한 통신수단으로 자주 사용된다
- 태그 구조로 가독성이 좋다. 작성도 간편
[JSON]
- JSON 역시 텍스트 형식의 데이터 포맷을 의미하는데, XML 의 단점을 보완하여 나왔다.
- 함축적인 내용으로 최소의 정보만 내포
- XML 대비 용량이 적고, 속도가 빨라짐
- 객체 구조와 배열의 구조를 모두 사용가능하여 효율적인 데이터 구성이 가능하다
- 파싱이 간편하고 빠름
- JSON은 자바스크립트로 작성됐다. 본래 자바스크립트와의 손쉬운 상호운용성을 위해 자바스크립트에서 사용하는 문법을 그 자체의
데이터 형식으로 뽑아내도록 정의됐다.
- XML은 적절하게 파싱(Parsing)을 거쳐도 BL(Billion Laughs) 공격 또는 EE(External Entity) 공격 같은 보안 취약성을 일부 갖고 있다. XML은 이런
기능을 실수로 활성화하면 시스템이 상당한 위험에 처하게 되지만 JSON은 그렇지 않다. JSON을 이용해 이런 위험에 노출되는 툴을 개발하기는
어렵다. 반면 XML을 사용할 때는 반드시 개발자가 능동적으로 확인하고 피해야 한다
XML보다 간결하고 파싱 속도가 빠르다는 장점이 대부분인데, 실제로 몇십만 건, 몇백만건의 데이터로 테스트를 해봐야
정확히 XML보다 얼마나 빠른지, 경량화된건지 알 수 있을 것 같다.
우선 깊은 테스트는 뒤로 하고 ㅎㅎ 웹스퀘어 연동으로 다시 돌아가면
2) WebSquare5 통신방식
웹스퀘어와의 통신은 아래와 같이 이루어진다.
- 웹스퀘어에서 통신객체 Submission에 XML 또는 JSON 데이터를 담아 서버로 전송하면
- 서버 사이드의 어댑터에서 이를 Java Object (Collection 객체 Map/ List, VO) 로 변환한다.
- 서버 사이드에서는 화면으로 리턴할 Java Object를 다시 어댑터를 통해 XML/JSON으로 변환하여 전달한다.
- 간단하게 설명하면 위와 같은 프로세스를 거쳐 통신하게 되는 것! ㅎㅎ
- 주고 받는 데이터 포맷에 대해 자세히 살펴보면 아래와 같다.
3) 연동 방법
- 위와 같은 프로세스로 이루어지는 연동을 실제로 하는 방법은 여러가지가 있을 수 있겠지만
이번엔 아래와 같이 연동했다.
(1) websqaure 라이브러리 설정
- pom.xml 에 (Maven 프로젝트임) websquare 라이브러리 설정
- websquare 라이브러리 설정 이외에도 websquare가 사용하는 몇몇 라이브러리들을 별도로 설정해줘야 했다..(엑셀 관련 등..)
- 참고로, WebSquare은 상용 툴이기 때문에 라이센스를 별도로 구매해야 한다. 이와 관련된 중요 정보는 본 포스팅에서 언급하지 않을게용
<!-- Websquare5 & Websquare5 & websquare chart 관련 라이브러리 --> <dependency> <groupId>websquare</groupId> <artifactId>websquare5</artifactId> <version></version> </dependency> <dependency> <groupId>websquare</groupId> <artifactId>websquare5_adapter</artifactId> <version></version> </dependency> <dependency> <groupId>websquare</groupId> <artifactId>websquare5_hybrid</artifactId> <version></version> </dependency> <dependency> <groupId>websquare</groupId> <artifactId>websquare5_common</artifactId> <version></version> </dependency> |
(2) web.xml : servlet-mapping 설정
- wq 확장자에 대한 요청을 처리할 servlet-mapping을 추가
<!-- 4.servlet 선언 및 매핑: --> <servlet> <servlet-name>websquareDispatcher</servlet-name> <servlet-class>websquare.http.DefaultRequestDispatcher</servlet-class> </servlet> <servlet-mapping> <servlet-name>websquareDispatcher</servlet-name> <url-pattern>*.wq</url-pattern> </servlet-mapping> |
(3) dispatcher-servlet.xml : 웹스퀘어 view 및 resolver 선언
- custom resolver 선언
- 웹스퀘어 view 등록
<bean class="com.sample.project.ria.wsq5.CustomRequestMappingHandlerAdapter"> <property name="customArgumentResolvers"> <list> <bean class="com.sample.project.ria.wsq5.CustomWqArgumentResolver" /> </list> </property> </bean> <!-- WebSquare View 등록 --> <bean name="wqView" class="com.sample.project.ria.wsq5.WqAdapterView" /> |
(4) 각 클래스의 역할
4.1 CutsomRequestMappingHandlerAdapter
- RequestMappingHandlerAdapter 확장
'UX' 카테고리의 다른 글
| AJAX 통신 기초 (0) | 2017.02.26 |
|---|---|
| jQuery 기초 (0) | 2017.02.26 |
| Javascript 기초2 (0) | 2017.02.26 |
| Javascript 기초 (0) | 2017.02.26 |
| [Error] maven 프로젝트 checkout 후 JSP 파일 에러 (0) | 2017.01.29 |