본문 바로가기
카테고리 없음

2023.02.09ㅡ 넥사크로17 실무활용_ js library이용한 공통구현

by 흥뷰자 2023. 2. 10.

넥사크로17 실무활용 

화면공동처리 - 스크립트 분석하고 유의사항 체크하기 
공통합수 구현과 적용1 - js 라이브러리 파일 이용
공통합수 구현과 적용2 - js 프레임워크 이용
공통프로젝트 샘플 설명1 - 그리드 공통 기능 처리 방식 이해 내가 어떻게 가져다 적용하는지
공통프로젝트 샘플 설명2 - 복합 컴포넌트 구성 방식과 스크립트 사용법 이해
샘플화면 적용 

 

 

화면공동처리 - 스크립트 분석하고 유의사항 체크하기

스크립트 분석 - 데이터셋이 화면 어디에 연결되는지 확인한다.

스크립트 분석

함수 생김새는 일반함수와 콜백함수 두가지 정도로 크게 갈린다.


onload이벤트로 실행되는 동작들 ( ** onload 이벤트에서는 동기처리를 해야 백화현상을 피할 수 있음 )
값의 초기화 (날짜)코드 확인 
코드성데이터(콤보나 라디오박스) 가져오는 부분 여러개로 나눠져있지는 않은지 ==> 서비스쪽에는 한번에 보내는 형식일거고 그걸 한번에 받아오도록 수정
서비스 데이터를 꼭 호출할 필요가 없는 고정데이터 (성별 : 남/녀)의 경우인데 서비스 호출을 하고있지는 않은지
트랜젝션에 7번째 인자로 동기처리를 하고 있는 부분은 없는지 (화면처리 지연) 동기처리를 했다면 그 이유가 무엇인지 ==> 가져온 데이터를 추가 수정 후 보여주려는건데, 콜백으로 넣으면 됨
콜백함수에는 에러체크만 들어가있음
*jsp페이지 xml 형식으로 페이지 보내줌. 
Dataset id> ColumnInfo> Column id 2개 (CODE, CODE_NAME)
Dataset id> Rows> Row 2개
서버에는 2개컬럼만 있으니까 클라이언트에서 ds에 insertRow 후 setColumn으로 두컬럼(CODE, CODE_NAME)에 들어가는 값을 지정
조회버튼 클릭 함수 호출

조회버튼
부서조회
사원조회

추가버튼 
ds에 addRow 하고 
부서이름을 추가할 레코드의 부서에 지정하고 입사일자 오늘로 초기화.  >>날짜 중복코드

삭제버튼
메세지 띄우는 컨펌창 deleteRow

저장버튼
ds의 getRowType(i) 상태판단해서 1이 아닌 경우에만, getColumn 으로 널 체크(비었으면 메세지 띄우고, 포커스가고), 자리수 데이터 정합성체크
서버로 보냄(트랜젝션 날림)
에러체크하고 저장되었음 메세지 띄우는 콜백함수 >> 중복코드 

 

부서 그리드 셀 클릭할 때 해당부서의 사원조회 트랜젝션
부서 데이터셋의 줄바꿈 일어날 때 사원조회 스크립트 >> 클릭과 동일한 작업/ 사원조회 중복코드
부서 그리드 컬럼이름 클릭할 때 그리드의 속성값이 아닌 그리드 더블클릭해서 들어가서 해당 셀의 displaytype속성값을 얻어와서 getCellProperty
체크박스면 전체선택 토글
아닐 때는 소트하는 사용자정의함수 호출 

데이터가 어떻게 서버에서 넘어오는지 확인한다.
고정데이터가 2개가 넘어오는 것을 알 수 있다.

 

넘어오는 데이터는 추가 작업이 없으면 2개만 넘어올것이다.
넘어온 데이터를 추가가공 하기 위해서는 동기처리 or 콜백처리를 해야한다.
부서를 선택하면 해당 사원이 넘어오는 것도 동기처리 or 콜백처리를 해야한다.
피들러를 통해 동일한 페이지 요청이 들어가는지 확인할 수 있다.

코드 수정

 

1. 날짜 공통함수로 빼기 (함수이름은 일관성 있게 작성한다. 화면에서는 fn_함수이름 또는 카멜케이스로)

*날짜나 직급 단순가져오기는 컴포넌트 요소 수정 하는게 아니라 인자가 필요없다.
2. 직급 성별 공통코드 하나의 트랜젝션으로 가져오기(서비스단에 여러 코드 받을 수 있는 코드 있어야함)
- 콜백으로 처리할 부분이 있으면 처리( 부서의 콜백 -> 사원가져오고 그 콜백에서 -> 성별 가져오기)


3. 부서조회 후 사원조회하는 코드를 함수로 빼고 해당 코드 함수 호출로 대체
4. oncellclick 함수와 onrowschanged 함수는 페이지 호출 통신중복이니까 oncellclick을 지운다.
5. 조회누르면 사원조회 콜백타고, onload이벤트에 자동으로 첫줄 선택(onrowschanged)되도록 하는 함수에서 사원조회가 중복 - 

1, 3 공통함수 라이브러리(js파일)로 옯기기 (라이브러리에서는 lfn_함수이름 프리픽스를 붙인다)
라이브러리 함수는 common, grid, util성으로 기능에 따라 파일을 따로 생성해서 관리한다. 
-Lib_Util에는 날짜관련 함수를 넣는다. 
-Lib_Grid에는 소트, 일괄 체크, 엑셀로 내보내기, 필터 등등 그리드 관련 기능들 함수로 구현해 넣는다. 
-Lib_Comm에 메세지작업
사용하는 화면에서는 상단에 include 해야한다.  

메세지의 공통 처리(협업에서 일관성을 주고 중복 제거, 특히 언어별 처리 필요한 경우)
db테이블, 파일.. db테이블로 관리하는 경우 위치
화면의 ds은 해당 화면내에서 사용가능한 ds (로컬)
Application Variables는 프로젝트 모든 영역 모든 화면에서 접근가능 (글로벌영역) 

File > New > Script 에서 라이브러리함수 파일을 생성한다. 생성된 파일은 Lib폴더 하위에서 확인할 수 있다.
이름이 있는 함수를 생성한다. 인자로는 obj, e를 넣는다.
해당 함수를 호출해서 사용한다.
사용하는 화면에서는 상단에 include 해야한다.
글로벌영역의 ds은 어플리케이션 변수 하위에 있다.

** ds 내부에 들어있는 건 배포 전까지 더미데이터이다. 개발이 끝나면 로그인성공시 서버에서 실제 ds 를 받아 최초 한번(글로벌) 다운받아 사용하게 된다.

 


메세지id를 넘기면 text를 받는 함수
화면의 ds접근은 this.ds_emp 였지
글로벌영역의 ds 접근은 현재실행한어플리케이션의오브젝트로 접근한다.
함수 선언과 정의 dataset의 메소드 - id를 아는 경우 findRow + getColumn = lookup
인자로 id넘기며 함수 호출 

함수 인자로 id만 들어가면 함수를 함수답게 쓸 수 없다.
추가로 받는 인자는 배열이다. 배열은 널처리와 값변환 로직이 들어간다.

but 
메세지의 종류 하나씩 관리할 수는 없어 
들어가는 빈칸만 달라지는 많은 메세지들 id 하나로 관리하기 위해 {} 
함수 호출 시 arr로 달라질값들도 함께 넘겨서 다양하게 사용
널체크함수
함수의 호출 

널체크함수 : 널인지, 길이0인지, undefined인지, ""인지 모두 검사한다. 널일 때 true 를 리턴한다.
return값을 alert 또는 confirm 으로 출력해야나오지요.
arr도 함께넘기며 함수 호출

화면 내에서는 msg_id를 넘기고 그에 해당하는 text를 치환받아서 출력함
메세지 confirm과 alert 두 부류. Type으로 모든 메세지별 값을 지정 
alert 는 값을 받아오는 게 아니고 출력만 함
confirm은 값을 받아오게 됨
타입을 지정하면 알아서 선택되어 띄워지도록 

 

타입으로 분기처리가 더 나아간 코딩이지. alert, confirl을 그냥 쓰지 않고 따로 함수로 작성한다. 내부 이미지 따로 빼고 광고도 넣고.. 브라우저의 팝업창은 브라우저마다 다르지. 엔터 누르면 default는 확인인데 취소로 바꾸고 싶을 때도 화면을 따로 만들어야 한다.

공통함수로 빼서 하는 이유
확인창이나 알림창 커스터마이징
transaction param 값으로 로그찍고싶은 정보 함께 넘길 때, 콜백에서 에러체크 코드번호별로 분기화해서 에러상세출력
데이터 통신 default는 xml이라 패킷에 데이터 오가는게 다 찍을 수 있음 태그도 함께 넘어감 패킷 양이 커져서 
운영할 때는 binary SSV 옵션값을 바꾸려면 모든 화면의 트랜젝션 일일히 빠꾸는 번거로움 있겠지, 파라미터나 다른 옵션값도 그래서 한번에 코드 빼서 관리한다. 
콜백도 따로 빼놓고 개별 콜백에서 에러체크 따로 할 필요 없이 공통함수의 콜백에서 한번에.. 

공통함수 구현과 적용1 - js 라이브러리 파일 이용

댓글