[ 넥사크로 ] 5. 넥사크로에서의 Components와 Dataset

기본적인 것은 넘어가고, 중요하다 싶은 Components에 대한 것과 Dataset의 중요한 내용들만 정리할 것이다.

[ 이전 내용 ] 

---

2022.08.03 - [web & develop/웹 공부] - [ 넥사크로 ] 1. 넥사크로 설치하기

2022.08.03 - [web & develop/웹 공부] - [ 넥사크로 ] 2. 넥사크로 구조 살펴보기

2022.08.04 - [web & develop/웹 공부] - [ 넥사크로 ] 3. 넥사크로 화면 만들어보기

2022.08.04 - [web & develop/웹 공부] - [ 넥사크로 ] 4. 넥사크로 개발 툴 사용방법

 

---

1 ) MaskEdit

- 정형화된 포맷을 입출력 할 때 사용되는 컴포넌트이다. 예를 들어, 주민등록번호, 카드번호, 우편번호와 같은 포맷이다.

MaskEdit의 주의할 점은, 2가지 속성을 반드시 지정해줘야만 한다.

 

Maskedit을 클릭하고 Properties 메뉴를 보자. type 속성이 있다. type 속성은, string과 number가 있다.

주민등록번호는 string 자료형이다. 

그리고 format 속성을 지정해줘야 한다. 사용자에게 보여 줄 layout이라고 보면 될 것이다.

 

그런데, 주민등록번호는 앞에 6자리, 그리고 뒤에 7자리이다. 하지만 앞에 여섯자리는 보여주고, 뒤에 일곱자리 중 제일 앞에 있는 성별 구분에 대한 부분을 제외한 나머지 부분은 Asterisk(*) 아스타 처리를 해주는 것이 대표적이다.

그럼 아스타 처리는 어떻게 하는가?

format을 보면 밑에 처럼 되어 있을 것이다.

######-#######

앞에 6자리 - 뒤에 7자리 형식의 format으로 지정되어 있는데, 우리는 123456-7****** 이런 형태를 원하는 것이다.

그럼 format을 밑에와 같이 변경해주면 된다.

######-#{######}

그러면, 중괄호 안에 있는 #은, *로 처리가 된다. 보안상으로도 좋다.

 

하지만, Password는, format 지정을 할 필요가 없고, 최대 입력 수가 정해져 있을 수도 있기 때문에 MaskEdit이 아닌 Edit으로 만들어서, Properties에, password 속성을 true로 하면 아스타 처리가 가능해진다.

---

2 ) Div와 Tab 컴포넌트사용 주의점

- div와 Tab 컴포넌트를 사용할 때, 잘못 사용하게 되면 발적화 현상이 일어날 수도 있다고 한다.

만약에 똑같은 기능을 하는 UI가 div에 같이 묶여있다면, 다른 form에서도 똑같이 그 UI를 새로 만들어줘야 할까?

답은 아니다! div에서 속성 중에, url이라는 것을 제공하는데 이 속성은 UI를 하는데 사용된다.

 

div를 클릭하고, properties에서 url을 찾아서, xfdl 파일을 참조해보자. 아주 편하고 새로 UI를 만드는 것 보다 메모리 사용량도 적을 것이다. 이 url을 사용하는 이유는, 만약에 조건 검색에 대한 UI가 있다라고 가정을 해보자. 검색에 대한 UI는 어느 메뉴를 가도 비슷할 것이다.

 

근데 이걸 해당 메뉴에 대한 form을 제작할 때마다 새로 만들어줘야 한다면? 그것만큼 귀찮은 작업은 없을 것이다. 또한 유지보수면에서도 좋기 때문에, url을 참조해서 사용한다면, 해당 참조 UI만 변경해주면 참조를 하고 있는 form에서 검색관련 UI가 변경이 될 것이다.

 

Tab 또한 url 속성이 있어서, 다른 form을 그릴 수가 있다. tab은 무조건 url 속성으로 하는 것이 좋다. 만약 tabpage의 갯수가 여러개 있다고 생각해보자. 컴포넌트의 갯수가 많아진다. 그러면 로딩에 심각한 문제를 주게 될 수 있다.

 

왜 url 속성으로 참조를 해서 출력을 해야하는가? Tab을 예로 들어 설명하면, 기본적으로 tab은 page1과 page2가 있다.

요즘 같은 인터넷 속도로 이 정도도 커버못하겠어? 라고 생각하지만, 그건 인터넷 속도고 사용자 메모리를 생각해야 한다.

모든 사용자가 메모리 16GB 이상의 데스크탑이나, 갤럭시 S 시리즈, 아이폰 13 pro max를 사용하진 않는다.

 

이런 걸 다 종합해서 고려해봤을 때, 개발자는 최적의 조건을 맞춰서 개발을 해야한다.

tab은, 로딩이 끝났다는 것을 tabpage1에 있는 컴포넌트가 로딩이 끝나고, 그 다음 tabpage2의 컴포넌트 로딩이 끝나야만 끝났다고 생각하게 된다. tabpage2는 보지도 않을 수 있는데, 굳이 이걸 로딩해서 메모리를 낭비한다고?

만약 이 탭이 10개이고, 탭 하나에 100개의 컴포넌트가 있다라고 가정한다면?

 

단순하게 계산하자면 100개의 컴포넌트를 총 10번 로딩하니깐 1,000번의 로딩이 필요하다. 굉장히 비효율적이지 않은가?

그럼 url은? page1에 대한 컴포넌트만 로딩하고, 나머지 tabpage는 클릭했을 때 컴포넌트에 대한 부분을 로딩한다.

그러면, 웹페이지가 로딩하는 속도도 빠르고 메모리 낭비도 심해지지 않는다.

 

최적화를 생각한다면, div는 묶을 수 있는 것은 따로 form을 만들어서 빼고 tab은 무조건 따로 form을 만들어서 빼서 url 속성으로 참조를 시키도록 하자.

---

3 ) Dataset 이란?

- 데이터를 테이블(2차원) 형태로 관리하는 오브젝트

- 내부에서 사용하는 데이터로 컴포넌트와 바인딩하여 사용

- 서버와의 통신시 데이터를 주고 받는 형식으로 사용

- 데이터가 수정, 삭제되면 변경 전 내용을 Origin Buffer라는 곳에 저장

 

 

[ 참조 영상 ]

 

https://www.youtube.com/watch?v=5UR2S0_GguU&list=PLgoHUQa-ZzHA8TEIwVYspbaosEtItwNK9&index=4