[FE] WebSquare 기초

msus_xxvii·2025년 11월 12일

WebSquare dailylog

DailyLog

목록 보기

2/37

생각보다 리액트가 아닌 다른 프론트엔드가 쓰이는 경우가 많고 다음 프로젝트에서 웹스퀘어가 쓰인다길래 정리

🧩 WebSquare 기초 정리

1️⃣ WebSquare란?

WebSquare는 국산 엔터프라이즈 웹 프레임워크로, HTML5와 JavaScript 기반의 업무용 SPA(Single Page Application) 개발을 지원한다.
화면(UI)을 XML로 시각적으로 설계하고, Ajax를 통한 REST 통신으로 백엔드(Spring 등)와 데이터를 주고받는다.

2️⃣ 주요 특징

구분	설명
UI 기술	HTML5 + JavaScript + XML
렌더링 방식	XML(`<w2:view>`)을 WebSquare 엔진이 HTML로 변환
데이터 구조	`<w2:dataSet>` 으로 클라이언트 메모리 내 데이터 관리
통신 방식	`w2.ajax()` / `w2.net.callService()` 로 REST API 호출
대표 사용처	공공기관, 금융권, ERP/CRM 등 업무용 시스템

3️⃣ 기본 구성 요소

구성	역할
View(XML)	화면 구성 파일 (`DailyLogPage.xml`)
Component	`<w2:input>`, `<w2:button>`, `<w2:grid>` 등 UI 요소
DataSet	데이터 저장 객체 (`<w2:dataSet id="dsLog">`)
Script(JS)	이벤트 및 Ajax 처리 로직
Layout	`<w2:layout>` 으로 영역 분할
Service	서버 호출 정의 (`w2.net.callService`)

4️⃣ 동작 구조


사용자 동작 (버튼 클릭)
↓
w2.net.callService() → Ajax 요청
↓
Spring Boot REST API (JSON 응답)
↓
w2:dataSet 에 반영 → [w2:grid](w2:grid) 에 표시

즉,
UI(XML) ↔ DataSet(JS) ↔ API(JSON)
3단 구조로 화면이 동작한다.

5️⃣ 기본 예시

📄 DailyLogPage.xml

<w2:view xmlns:w2="http://www.inswave.com/websquare">
  <w2:dataSet id="dsLogs" />

  <w2:button id="btnLoad" label="조회" onclick="loadLogs()" />

  <w2:grid id="grdLogs" dataSet="dsLogs">
    <w2:column id="title" label="제목" width="150" />
    <w2:column id="content" label="내용" width="250" />
    <w2:column id="mood" label="기분" width="100" />
  </w2:grid>
</w2:view>

📜 DailyLog.js

function loadLogs() {
  w2.ajax({
    url: "http://localhost:9000/api/logs",
    method: "GET",
    success: function(data) {
      $p.getComponentById("dsLogs").setJSON(data);
    }
  });
}

6️⃣ 개발 환경

항목	내용
개발 도구	WebSquare Studio (Eclipse 기반)
실행 포트	기본 8088 (변경 가능)
파일 구조	`src/ui/`, `src/js/`, `src/css/` 하위 구성
시작 파일	`websquare.xml`, `index.html`

7️⃣ 장점과 한계

장점	한계
빠른 CRUD 화면 제작	디자인 커스터마이징 제약
대규모 업무 시스템에 최적화	최신 UI 애니메이션 구현 어려움
REST 연동 편의성 높음	XML 기반이라 Git 병합이 복잡할 수 있음

8️⃣ Spring Boot 연동 포인트

WebSquare	Spring Boot
AJAX 호출	`w2.ajax("http://localhost:9000/api/logs")`
응답 처리	`success: function(data)`
데이터 반영	`DataSet.setJSON(data)`
UI 반영	`<w2:grid dataSet="dsLogs">` 렌더링