external-system-test/README.md

### commit message template
```text
 --- COMMIT MESSAGE ---
 타입: 제목 - 50 자 이내로 요약

 본문 - 한 줄에 최대 72 글자까지만 입력 / 여러줄 입력시 '-' 로 구분

 꼬릿말은 아래에 작성: ex) #123 / closed: #123
 closed, fixed, resolved 예약어와 이슈번호를 함께 사용시 해당 이슈 자동 종료

 --- COMMIT MESSAGE END ---

 <타입> 리스트
    feat : 기능(새로운 기능)
    fix : 버그 수정
    chore : 기타 변경 사항(빌드 혹은 패키지 매지저 등)
    style : 비즈니스 로직에 영향을 주지 않는 변경 사항(코드 형식 등)
    refactor : 리팩토링
    test : 테스트(테스트 코드: 비즈니스 로직 변경 없음)
    docs : 문서
    build : 빌드 관련 파일 수정
    ci : CI 관련 설정
 -----------------------
    제목 첫 글자를 대문자로
    제목은 명령문으로
    제목 끝에 마침표(.) 금지
    제목과 본문을 한 줄 띄워 분리하기
    본문은 "어떻게" 보다 "무엇을", "왜"를 설명한다.
    본문에 여러줄의 메시지를 작성할 땐 "-"로 구분
 -----------------------
    작성 예
 --------------------------------------
    feat: 관심지역 알림 ON/OFF 기능 추가

    - 시군구의 알림을 각각 ON/OFF 할 수 있도록 기능을 추가함
    - opnion0055: 구분 코드

    이슈트래커 #123  - fix 타입 메세지등은 closed #123 등
 ---------------------------------------
 
 
 1) 위 내용을 'gitmessage.txt'로 저장
 2) git config --global commit.template {path}/gitmessage.txt
 3) git config --list 명령으로 commit.template={path}/gitmessage.txt 확인
 
 ```
### VM options 추가

```text
[이클립스 설정]
설정을 안하면 Could not resolve placeholder 'spring.profiles.active' in value
"classpath:logback-${spring.profiles.active}.xml" 오류 발생

프로젝트 우클릭 > Run As > Run Configurations > Arguments 탭 > VM arguments

-Dspring.profiles.active=local -Dfile.encoding=UTF8 추가

[인텔리제이 설정]

톰캣 VM options

-Dspring.profiles.active=local -Dfile.encoding=UTF8 추가
```
 ### Slf4j 사용시 log cannot be resolved 에러 처리
```text
[이클립스 설정]

1. 이클립스의 Maven Dependencies 에서 lombok-1.18.8.jar 파일을 찾는다.

2. lombok-1.18.8.jar 파일을 우클릭 -> run as -> java application -> 프로세스 진행

3. lombok jar 파일이 실행되며 install 창이 표시된다.

4. specify location -> 이클립스 위치의 eclipse.ini 를 선택 -> install/update 진행

5. install 이 정상적으로 실행 된다.

6. 이클립스로 돌아와 프로젝트를 clean -> restart 한다.

7. log 관련 에러가 사라진다.
* 에러가 사라지지 않을 경우 이클립스를 재실행한다.
```
#### github
```text
https://github.com/JongukLim/fims.git
id: JongukLim
access token : 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
```
#### plugin
```text
1) CamelCase
  kebab-case, SNAKE_CASE, PascalCase, camelCase, snake_case 또는 space case 간에 쉽게 전환 
  (Shift + Alt + U)
2) Git Commit Template
  템플릿을 이용해 commit 내역을 관리
3) MyBatisX
  mapper에서 xml을 편하게 이동
```

## 팝업 공통처리 : 등록 / 변경 / 삭제 팝업
```html

1) 변수 정의
<c:set var="isUpdate" value="${!empty 조건값}"/> 
<c:set var="bizName" value="권한"/>
    
2) title include
    
<div class="popup_inner">
    <p class="container-window-header2">권한 </p>
    
<div class="popup_inner">
    <!-- popup title -->
    <%@include file="/WEB-INF/jsp/framework/biz-popup-title.jsp"%>

    
    
    <div class="container-window-btn1">
        <span class="flr" colspan="4">
            <a href="#" class="btn btn-blue" id="btnRegist">등록</a>
            <a href="#" class="btn btn-blue" id="btnModify">변경</a>
            <a href="#" class="btn btn-red" id="btnRemove">삭제</a>
            <a href="#" class="btn btn-lightgray" onclick="window.close()">닫기</a>
        </span>
    </div>
    
    <!--팝업 버튼 -->
    <%@include file="/WEB-INF/jsp/framework/biz-popup-btn.jsp"%>

```
### columns style
```js
    {
        header: '롤 명',
        name: 'roleNm',
        width: 150,
        sortingType: 'desc',
        sortable: true,
        filter: 'select',
        renderer: {
            styles: {
                //fontWeight: 'bold',
                background: (props) => props.value === 'Y' ? 'cyan' : 'red'
            },
            attributes: {
                'data-type': 'default',
                title: (props) => `title: ${props.formattedValue}`
            },
            classNames: ['blue']
        }
    }
```
## 참조 - 필수
[git 사용법 강좌](https://www.youtube.com/watch?v=1I3hMwQU6GU&t=4031s)   
[css flex / grid 강좌1](https://www.youtube.com/watch?v=7neASrWEFEM)   
[css flex / grid 강좌2](https://www.youtube.com/watch?v=eprXmC_j9A4)   
[css flex / grid 강좌3](https://www.youtube.com/watch?v=DxwBN7vdr-A&list=PLFeNz2ojQZjso4ZJVeeMWR72l8s9V8Ym9)   

## JSP에서 el태그(${}) 대신 JSTL <c:out> 사용해야 하는 이유
```text
jsp에서 다양한 방식으로 서버사이드 데이터를 출력할 수 있다.
그 중 가장 많이 쓰는건 el태그인데 그 이유는 el태그 사용법이 ${}로 매우 간단하기때문이다.

el태그만 써도 화면에 값이 잘 출력되는데 왜 굳이 <c:out>를 사용할까?
```
#### 결론: XSS 방어하기 위해!
```text
<c:out>를 사용하면 escapeXml속성을 활용할 수 있다.
escapeXml를 true로 설정함으로써 가장 간단하게 XSS(링크)를 방어할 수 있다.
```

```js
// 1.escapeXml = true 인 경우(디폴트)
<c:out value="<script type='text/javascript'>alert('테스트');</script>"/>

// 2.escapeXml = false 인 경우 == el태그와 동일
<c:out value="<script type='text/javascript'>alert('테스트');</script>" escapeXml="false"/>
```
1. escapeXml = true의 경우, text 그대로 출력된다.
2. escapeXml = false 인 경우나 el태그인 경우, alert창이 실행된다.

따라서 XSS 방어하기 위해서는 <c:out>을 사용하는 게 좋다.

# 팝업호출시 blockUI 적용
```js
// 팝업호출하는 화면단 : ~Form.jsp
// tiles biz jsp단에서 var popup 선언되어 있음
$.blockUI({message: '' ,css: {width: '100%', height: '100%'}
    //모달창 외부 클릭시 닫기
    ,onOverlayClick: () => {
        $.unblockUI();
        popup?.self?.close();
    }
});
popup = CmmPopup.open(url, params, popOption, popTitle);

// 팝업창
// event에 아래 코드 추가
// tiles biz jsp단에서 var unblockUI = () => $.unblockUI() 선언되어 있음
$(window).on("unload", function (e) {
    window.opener?.unblockUI();
    window.opener?.callbackSearch();
    return null;
});

$("#btnClose").on('click', () => {
    window.close()
});

```
## JSON Object ModelAndView에서 처리
```js
// ModelAndView return
gridInfo={"next":null,"perPage":15,"page":1,"totalCount":15,"curRowData":{"regltSeCode":"01","extrlRegltCntcId":"000000001051"},"curRowPos":1,"curGridDataPos":0,"curGridDatas":[{"regltSeCode":"01","extrlRegltCntcId":"000000001051"},{"regltSeCode":"01","extrlRegltCntcId":"000000001052"},{"regltSeCode":"01","extrlRegltCntcId":"000000001065"}]}

// jstl사용시 보안상의 이유로 " 문자를 &#034; 치환
// 아래와 같이 처리
let gridInfo = '<c:out value="${gridInfo}"/>';  // string으로 
gridInfo = gridInfo.replace(/&#034;/g, '"');
gridInfo = JSON.parse(gridInfo);

// escapeXml = "false" 사용 - xss 보안상 문제 발생
let gridInfo = <c:out value="${gridInfo}" escapeXml = "false"/>; //객체이므로 "" 미사용

let gridInfo = ${gridInfo};
```

## JSP include
```js
1. 정적인 방식(static=directive)
- 동적인 방식보다 빠르다.
- 파라미터를 주고 받을 수 없다.
- 변수 공유
- 해당 jsp페이지가 컴파일될 때, 참조하는 파일(include)도 함께 컴파일 된다.
=> 두 파일의 코드가 합쳐진 상태로 컴파일 된다.
    
<%@ include file="파일경로/파일명"%>

2. 동적인 방식(dynamic)
- 정적인 방식보다 느리다.
- 파라미터(데이터)를 주고 받을 수 있다.
- 페이지가 request 될 때 , 포함할 jsp 페이지를 다시 request를 하는 과정을 가진다.

  2-1. 액션태그 사용
  - <jsp:param> 태그로 데이터 전송 가능

      <jsp:include page="파일경로/파일명">
          <jsp:param value="myValue" name="myKey"/>
      </jsp:include>    
    
      전달받은 쪽 - 전달받은 값 : <%= request.getParameter("myKey") %>
      <jsp:include> 액션 태그로 포함하는 페이지에서만 유효.
    
    
  2-2. 코어태그(JSTL) 사용
  - <c:param> 태그로 데이터 전송 가능

  <c:import url="파일경로/파일명" charEncoding="utf-8"/>
  <c:import url="파일경로/파일명"
     var="데이터를 저장할 변수명"
     scope="변수의 공유 범위"
     varReader="리소스의 내용을 Reader 객체로 읽어올 때 사용"
     charEncoding="읽어온 데이터의 캐릭터셋 지정">
    <c:param name='' value='${}'/>	 
  </c:import>
```
## Mybatis select key 여러개

```xml

<selectKey keyColumn="extrlRegltCntcId,regltId" keyProperty="extrlRegltCntcId,regltId"
           resultType="kr.xit.fims.biz.ec.dto.CctvCrackdownDTO$ExtrlRegltCntc" order="BEFORE">
    SELECT LPAD(NEXTVAL(seq_ec_extrl_reglt_cntc), 12, '0') AS extrlRegltCntcId
    , LPAD(NEXTVAL(seq_rt_reglt), 16, '0') AS regltId
</selectKey>
        <!-- 
        주의사항 
        selectKey 여러개 가져올 때는 반드시, 
        콤마 한 다음 반드시 붙여줘야 한다(space가 있으면 오류 발생)
        
        keyColumn="extrlRegltCntcId,regltId" keyProperty="extrlRegltCntcId,regltId"
        -->  
```

## 상속 구조의 lombok builder 사용 -> @SuperBuilder 사용해야 한다
```java

    @Data
    @NoArgsConstructor
    @AllArgsConstructor  // 반드시 필요
    @SuperBuilder
    public static class Parents {
        private String regltId;
        private String vhcleNo;
    }

    @Data
    @EqualsAndHashCode(callSuper = true)
    @NoArgsConstructor
    @AllArgsConstructor
    @SuperBuilder
    public static class Child extends Parents {
        private String regltId;
        private String vhcleNo;
    }
```

### 외부연계 참조 : 서버로그 경로 - /data/fims/logs
Rest API-dev: <http://211.119.124.9:18090/swagger-ui/index.html>

Rest API-prod: <http://211.119.124.9:8090/swagger-ui/index.html>   
배치: <http://211.119.124.9:28090/swagger-ui/index.html>

sneat documentation : <https://demos.themeselection.com/sneat-bootstrap-html-admin-template/documentation/>