웹스퀘어 공부하는 중

웹스퀘어 공부하는 중

프론트 프레임워크 툴

최근에 일하게 된 프로젝트에서 웹스퀘어 프레임워크를 표준으로 사용한다고 한다.
분석 단계이기는 하지만 프로젝트 인원 중 몇몇은 불만의 소리를 내기도 한다. 뭘 하든 불만은 들려온다.
나는 프로젝트에서 특정 프레임워크나 라이브러리를 사용하라고 하면 딱히 불만은 없다.
특히 프론트 프레임워크나 라이브러리는 더욱 그렇다.
이유는 어차피 자바스크립트 기반이고 코어와 형태는 변하지 않는 법이다.

7년 전 쯤에 툴 이름을 들어봤던 기억은 나지만... 기억하고 싶지도 않다.

겸손함과 자만 이런 식상한 자세 따위는 언급할 필요도 없을 듯하다. SI바닥에서 사용하는 기술이라는 게 꽤 한정되어 있고 특별한 서비스가 아닌 ERP 주변에서 머무는 서브 시스템들의 서비스라는 게 로그인, 파일첨부, 로그, 연계 빼고는 그다지 이슈가 될만하거나 상급테크닉이 필요한 게 없지 않을까 싶다. 굳이 언제나 문제가 되는 부분은 데이터베이스에서 자료 빼오는 시간이 느린 이슈밖에는 없곤 했다.

예상되는 스터디 부분은 아래와 같지 않을까 싶었다.

1. HTML으로 화면을 그리는 부분
2. 백 단 서버와 오고 가는 데이터의 형식. List 형태 거나, 단일 로우 형태의 Map 또는 Vo 객체가 존재할 것이고
3. 데이터를 보내고 받는 통신 모듈. <fetch, xhr, acios> 들을 프레임워크 제작사의 어떤 함수형태로 제공.

대부분 이 정도만 파악하고 세부분의 앞뒤 기술은 일주일만 제공하는 예제를 따라 해도 충분하지 않을까 싶다.

주말에 두 시간 정도 이런저런 화면이나 이벤트들을 익히는 중인데, 10시간 정도 투자하니 웬만한 CRUD 화면들은 만들 수 있을 듯하다. 가끔 막히면 친철하게도 유튜브에 강의 동영상이 있더라.

1. 간단한 예제

웹스퀘어에서는 백단과 주고받는 데이터를 dataMap, dataList로 관리하더라.
이름만 눈으로 봐도 추측할 수 있겠더라.
우선 예제하나 만들어서 dataMap 하나 컨트롤하는 화면 만들어 봤다.
웹스퀘어에서 제공하는 예제에 백 단은 스프링으로 이미 환경구성이 되어 있어서 제공된 mariaDB 실행하고 컨트롤러에 데이터를 조회하는 컨트롤러, 데이터를 받아주는 컨트롤러 하나 간단하게 구성했다.

1-1 dataMap을 정의하고 버튼 누르면 그 맵에 서버에 보낼 몇몇 필드의 값을 넣는 기능.
1-2 서버에 통신으로 보내는 기능
1-3 보낸 결과를 받는 기능.
서버에서 데이터를 받은 후, html Dom에 바인딩 후, 유저가 데이터를 변경했다면? 그런 API들은 제공하겠지... API 보니 있더라. 그 정도는 되어야 프레임워크니...

if(dataMap2.getModifiedKey( ).length==0){
alert("변경 없음");
}else{
alert("변경됨");
}

구성한 예제 화면

내 컨트롤러 하나 만듬.

---

2. 그리드와 DataList 예제

이번에는 그리드를 하나 만들고 DataList를 셋팅. 흔한 기능이 Row 추가, Row 삭제를 해보고 있는데 체크박스가 동작하지 않는다. 이유가 있겠지.
추측, 생각해 보니 체크박스는 DataList 안에 컬럼 정의를 안 했다. 그리드라는 게 DataList 랑 매핑이 돼야 하는데 아마도 그 문제 아닐까 싶다.

오잉 체크박스가 클릭이 안되네?

DataList에 체크박스용 칼럼을 하나 만들어봤다.

요렇게 추가를 하고

실행해 보니 체크가 된다. 그러나... 문제가 하나 또 발생하네.
이런 체크박스를 체크하자 레코드 상태가 변한다.
참고로, 난 넥사크로나, 토마토회사에서 만든 그 무엇을 해본 적은 없지만 아마도 다들 비슷할 거 같다는 생각이 든다. 당연히 List를 서버에 보내게 되면 해당 Row가 수정, 삭제, 신규 이런 상태값은 프레임워크가 구현했을 것이다. 너무 당연한 거 아닌가?
아무튼 그리드와 dataList의 속성 중, 서버와 관계없는 Temp 성 데이터, 즉 레코드 상태에 영향을 주지 않는 어떤 옵션이 있지 않을까 찾아봤다.

체크박스를 체크하자 레코드 상태가 변한다.

5분쯤 찾아보니 dataList 안의 컬럼 속성에 오잉 ignoreStatus라는 속성이 보인다. 설명이 뜨네..ㅋㅋㅋ
저거 True로 하면 될 듯... 한번 하고 실행.

dataList의 컬럼 속성

역시나 예상했던 결과다.

역시나 예상했던 결과 레코드 상태값이 변경 안된다.

이 프레임워크가 좋다, 나쁘다 이런 류의 말을 하고 싶은 건 아니다.
대부분 비슷비슷하다는 게 하고 싶은 말이다. 생산성 측면에서는 별로 하고 싶은 말은 없다. 해봐야 알겠지...