1229 개발일지

Yesol Lee·2021년 12월 29일

Java JavaScript html jsp mysql query sql

개발일지 - 2021

목록 보기

18/20

오늘 한 일

1. 사용자 목록 조회, 검색 기능 구현
2. 출장 관련자 테이블 연결 계획 세우기
3. javascript로 html element 조작하는 방법 공부

1. 사용자 목록 조회, 검색 기능 구현

1. DB의 사용자 테이블 준비

사용자 검색을 위해 다른 동료분이 제작한 사용자 테이블을 사용해야 했다. 컬럼 정보와 테이블 설계서를 참고해 적당한 더미데이터를 sql 쿼리로 넣어주었다.

2. 사용자 관련 VO, sql 구현

웹페이지에서 보여줄 사용자 정보는 사용자 테이블에서만 가져오는 것이 아니라 사용자 테이블의 부서 코드, 직급 코드를 기준으로 부서 테이블, 직급 테이블의 데이터까지 가져와야 했다. 처음 프로젝트를 시작할 때는 DB의 테이블 컬럼과 VO가 무조건 같아야 하는 줄 알았는데, 사용자 VO를 만들면서 그게 아니라는 것을 잘 알게 되었다. DB에서는 쿼리를 조작해 여러 형태로 데이터를 가져올 수 있고, 그렇게 가져온 데이터의 형태에 맞게 VO를 만들면 된다.
나는 LEFT JOIN을 사용했는데, 굳이 left join을 사용할 필요가 있느냐는 질문을 받았다. 확실히 mysql의 join 방법에 대해 잘 알고 선택한 것이 아니어서, 추후 자세히 공부해보고 방법을 바꾸기로 했다.

<resultMap id="userVO" type="egovframework.example.sample.service.UserVO">
  <result property="USER_ID" column="USER_ID"/>
  <result property="USER_NAME" column="USER_NAME"/>
  <result property="USER_DEPT_CODE" column="USER_DEPT"/>
  <result property="USER_POS_CODE" column="USER_RANK"/>
  <result property="USER_DEPT_NAME" column="POS_NAME"/>
  <result property="USER_POS_NAME" column="DEP_NAME"/>
</resultMap>

<select id="selectUserList" parameterType="searchVO" resultType="egovMap">
  SELECT
  USER.USER_ID
  , USER.USER_NAME
  , USER.USER_DEPT
  , USER.USER_RANK
  , POS.POS_NAME
  , DEP.DEP_NAME
  FROM SDH_USER AS USER

  LEFT JOIN DEP
  ON USER.USER_DEPT = DEP.DEP_CODE

  LEFT JOIN POS
  ON USER.USER_RANK = POS.POS_CODE

  WHERE 1=1
  <if test="searchKeyword != null and searchKeyword != ''">
    <choose>
      <when test="searchCondition == 0">
        AND	USER.USER_NAME LIKE CONCAT('%', #{searchKeyword},'%')
      </when>
      <when test="searchCondition == 1">
        AND	DEP.DEP_NAME LIKE CONCAT('%', #{searchKeyword},'%')
      </when>
      <when test="searchCondition == 2">
        AND	POS.POS_NAME LIKE CONCAT('%', #{searchKeyword},'%')
      </when>
    </choose>
  </if>
  ORDER BY USER.USER_NUM DESC
  LIMIT #{recordCountPerPage} OFFSET #{firstIndex}
</select>	

<select id="selectUserListTotCnt" parameterType="searchVO" resultType="int">

  SELECT COUNT(USER.USER_ID) totcnt
  FROM SDH_USER AS USER
  LEFT JOIN DEP
  ON USER.USER_DEPT = DEP.DEP_CODE
  LEFT JOIN POS
  ON USER.USER_RANK = POS.POS_CODE
  WHERE 1=1
  <if test="searchKeyword != null and searchKeyword != ''">
    <choose>
      <when test="searchCondition == 0">
        AND	USER.USER_NAME LIKE CONCAT('%', #{searchKeyword},'%')
      </when>
      <when test="searchCondition == 1">
        AND	DEP.DEP_NAME LIKE CONCAT('%', #{searchKeyword},'%')
      </when>
      <when test="searchCondition == 2">
        AND	POS.POS_NAME LIKE CONCAT('%', #{searchKeyword},'%')
      </when>
    </choose>
  </if>
</select>

3. 서버 로직 구현 (jsp, controller, service, mapper 등)

출장 정보 목록을 조회할 때 썼던 메소드를 복제해서 사용했다. 페이징 부분을 그대로 사용하기 위해 목록 조회 결과의 resultType도 egovMap으로 그대로 써줬다. 사용자 목록 조회할 때는 출장 번호와 사용자 분류(출장자, 결재자, 수신자)가 필요한데 민감한 정보가 아니라서 url에 그대로 드러나는 방법으로 전달했다.

<script type="text/javaScript" language="javascript" defer="defer"> 
  /* 사용자 목록 화면 function */
  function fn_egov_selectUserList(BT_ID, userType) {
  document.listForm.action = "<c:url value='/selectUserList.do?selectedId="+BT_ID+"&USER_TYPE="+userType+"'/>";
  document.listForm.submit();
  }
</script>