오늘 한 일

1. svn 통합을 위해 패키지 구조 변경 및 불필요한 sample 파일 삭제
2. UserVO -> EmployeeVO로 이름 변경
3. 사용자 이름 클릭 시 관련자 테이블에 row 추가 (html) 및 관련자 배열에 데이터 추가
4. 관련자 이름 클릭 시 관련자 테이블에서 row 삭제 및 관련자 배열 데이터 삭제
5. '추가'버튼 클릭 시 기존 register 페이지 input에 업데이트 된 전체 관련자 배열 json으로 전달 확인
6. 출장 테이블: traveler_id, approver_id, receiver_id 삭제 및 출장VO 수정 -> 출장자 이름 등 어떻게 보여줄지 고민 중

svn

어제부터 각 사원들이 각자 로컬에서 하던 프로젝트를 svn을 통해 병합하는 일을 시작했다. 처음엔 svn이 뭔지 몰라서 검색해보니 git과 같은 형상관리 툴 중 하나라는 것을 알게 되었다.

svn 시작하기

이클립스 하단 svn repository 탭 - new - repository location - url, 사용자이름, pw 입력 -> svn 탭 우클릭 -> checkout으로 해당 url의 프로젝트 가져옴 -> 로컬 tomcat서버도 새로 생성 -> 가져온 프로젝트 새로운 tomcat서버로 구동 확인

이클립스에서 svn 조작하기

프로젝트(혹은 개별 파일) 우클릭 -> Team -> svn 조작
이클립스 svn 참고글

html 테이블 row 동적 수정(js)

어제 사용자검색 화면의 레이아웃을 변경해 사용자 목록, 출장 관련자 목록 총 2개의 테이블이 존재한다. 오늘은 사용자 목록의 이름을 클릭하면 관련자에 추가되고, 관련자 이름을 클릭하면 관련자 테이블에서 삭제되는 기능을 구현했다.
원래 출장 관련자 목록 조회는 출장 관련자VO 리스트를 전달해 화면에 출력했다. 그런데 기존VOList의 객체를 화면에서 클릭해서 없애려고 하면 VO 자체를 없앨 수 없기 때문에 별도의 저장방식이 필요했다. 그래서 현재는 controller에서 출장 관련자 목록을 json으로 만들어 jsp에 전달하고, jsp에서는 json을 파싱해 javascript 배열에 저장한 후 데이터를 조작하는 방식으로 변경했다.

javascript에 데이터 저장

const btId = `${BT_ID}`;
const userType = ${USER_TYPE};
const jsonRole = ${jsonRole}; // 전체 role 정보 json

var selectedRoles = []; // userType에 맞는 role만 저장
const allRoles = []; // userType 다른 나머지 role. 추후 selectedRoles와 합쳐서 리턴

window.onload = function() {

  if(jsonRole!="" || jsonRole!=null) {
    jsonRole.forEach(function(role, key) {

      let userData = {
        "BT_ID":role.bt_ID, 
        "BT_ROLE_ID": role.bt_ROLE_ID ,
        "USER_ID": role.user_ID, 
        "USER_TYPE":role.user_TYPE,
        "USER_NAME": role.user_NAME,
        "USER_DEPT_NAME": role.user_DEPT_NAME,
        "USER_POS_NAME": role.user_POS_NAME
      };

      if(role.user_TYPE == userType){
        selectedRoles.push(userData);
        setRole(userData);
      } else {
        allRoles.push(userData);
      }
    })
  }
}

filter: 객체 배열에서 특정 조건에 맞는 값들만 추출한 배열 리턴

filter, findIndex, 배열 합치기 등의 javascript 기능에 대해 참고한 글들 대부분 javascript es6 (ex. 화살표 함수)를 사용하고 있었다. 하지만 현재 사용 중인 전자정부 버전(3.8)에서는 js 화살표 함수가 작동하지 않아서 기존 방식으로 작성했다.
filter 참고글

// 선택한 사용자 삭제 위해 선택하지 않은 사용자 배열을 원래 배열에 저장
selectedRoles = selectedRoles.filter(function(role) {
  return role.USER_ID != userData.USER_ID
});

// 특정 id 가진 객체가 배열에 존제하는지 여부 T/F
var hasUser = selectedRoles.filter(function(role) {
  return role.USER_ID == userData.USER_ID
}).length > 0;

findIndex: 객체 배열 인덱스찾기

if(col=="NUM") { // 객체 배열에서 특정 값의 인덱스 찾아 출력
  td.innerHTML = 1 +  selectedRoles.findIndex(function(role) {
    return role.USER_ID == userData.USER_ID;
  });
}

concat() 객체 배열 합치기

배열 합치기 참고글

var str = JSON.stringify(allRoles.concat(selectedRoles));

DB테이블 및 java VO 수정

출장 관련자 테이블을 사용하지 않을 때 출장자, 결재자, 수신자 정보를 저장하기 위해 출장 테이블에 traveler_id, approver_id, receiver_id 컬럼을 만들고 실제로는 string 이름값을 넣어서 사용하고 있었다. 이제는 출장 관련자 테이블에 인물 정보를 분리하게 되어 출장 테이블도 수정해야 했다. 일단 sql.xml, java VO를 먼저 수정 후 최종적으로 DB의 컬럼을 삭제하기로 했다.

이름 여러 개 하나의 string으로 가져오기

먼저 출장 목록 화면에서 출장자 이름 정보가 필요한데 거기서부터 출장 정보-출장 관련자-직원 테이블을 연결해 직원 테이블의 직원 이름을 가져와야 했다. 하나의 출장에 여러 명의 출장자가 있을 수 있어 여러 명의 이름을 하나로 묶어 가져오고 싶은데 적절한 sql 함수를 찾았다.

SELECT GROUP_CONCAT(EMP.EMP_Name SEPARATOR ', ')
FROM BUSINESSTRIP_ROLES AS BTR
JOIN EMPLOYEE AS EMP ON EMP.EMP_NO = BTR.USER_ID
WHERE BTR.BT_ID = BT.BT_ID;

GROUP_CONCAT(컬럼명 SEPARATOR '구분자')를 이용하면 해당 컬럼의 값들 사이 구분자를 넣은 하나의 string으로 가져올 수 있었다.

WHERE과 HAVING

위 서브쿼리 이용해 가져온 결과 TRAVELER_NAME에 대해 출장자 이름 검색 기능을 만들고 싶었는데, where에서 TRAVELER_NAME을 조건으로 주니 쿼리가 컬럼명을 인식하지 못했다. 저번 영상 강의에서 그럴 때 HAVING을 사용해야 한다는 것이 기억나서 해보니 잘 적용이 되었다.

<select id="selectBtList" parameterType="searchVO" resultType="egovMap">

  SELECT ...
	BT_ID,
	LOCATION,
	AUTHOR_ID,
	TRIP_START_DATE,
	TRIP_END_DATE,
	CONCAT(DATEDIFF(TRIP_END_DATE, TRIP_START_DATE)+1, "일") AS TRIP_PERIOD,
  	(SELECT GROUP_CONCAT(EMP.EMP_Name SEPARATOR ', ')
  	FROM BUSINESSTRIP_ROLES AS BTR
  	JOIN EMPLOYEE AS EMP ON EMP.EMP_NO = BTR.USER_ID
  	WHERE BTR.BT_ID = BT.BT_ID
  	AND BTR.USER_TYPE = 0) AS TRAVELER_NAME

  FROM BUSINESSTRIP AS BT
  WHERE 1=1
  <if test="searchKeyword != null and searchKeyword != ''">
    <choose>
      <when test="searchCondition == 1">
        AND #{searchKeyword} BETWEEN TRIP_START_DATE AND TRIP_END_DATE
      </when>
      <when test="searchCondition == 0">
        HAVING TRAVELER_NAME LIKE CONCAT('%',  #{searchKeyword} ,'%')
      </when>
    </choose>
  </if>
  ORDER BY CREATED_AT DESC
  LIMIT #{recordCountPerPage} OFFSET #{firstIndex}
</select>