[08월 4주] MyBatis(string_agg, unnest), element plus를 이용한 스위치 버튼 만들기

---

PostgreSQL에서 unnest()를 사용하면 정렬이 되지 않는 이유?

• postgre에서는 string_agg() 를 이용해서 구분자를 기준으로 어떤 값들을 이어 붙일 수 있다. 
• 또는 반대로 unnest()를 사용해서 구분자로 이어붙여진 값들을 펼칠 수도 있다.
• 그런데 여기서 unnest() 사용해서 펼친 경우, 해당 데이터들은 정렬이 되지 않는다.
• 원인: ?
• 해결 방법: ?

 

---

MyBatis 

• PostgreSQL의 string_agg()를 이용하면 특정 데이터를 구분자로 구분해서 문자열 형태로 이어붙일 수 있다. 
  • ex) ['a', 'p', 'p', 'l', 'e'] => 'apple'
• 검색 쿼리를 만드는 중이다. 
  • 'searchKeyword' 에 대해서 searchKeyword 가 포함된 model_id_str이나 searchKeyword 가 포함된 model_nm_str에 대한 데이터만 가져오려고한다. 
  • (model_id_str: 여러 조건을 만족하는 모델의 id  값을 string_agg()로 이어붙인 형태로 LEFT JOIN을 통해 생성되었기 때문에 DB에 존재하지 않는다. )
• 그런데 select 절에서  string_agg()를 통해  만든 필드에 대해서 where 절 조건을 추가하려면 ?
• 기존에는 아래와 같이 공통적을 쓰이는 where 절 조건을 id 값을 부여해서 여러 번 사용 가능했다. 
  • ex) <include refid="whereByModel"/>

<sql id="whereByModel">
    <if test="@org.apache.commons.lang3.StringUtils@isNotEmpty(modelId)">
        AND t1.model_id = #{modelId}
    </if>
    (위와 같은 조건문)
</sql>

 

• 그런데 위의 <if> 태그 안에는 string_agg() 와 같은 메서드를 사용할 수 없다.
• string_agg()는 특정 DB 시스템에서만 사용 가능한 기능이라서 모든 DB에서 동작하지는 않는다 . 
• MyBatis는 특정 DB에만 종속적인 함수를 지원하지 않기 때문에 안에 넣을 수 없다. 
• 따라서, 아래와 같이 SELECT 절에서 만든 ALIAS를  WHERE 절에  적용할 수 있다.
• 주의) 앞에서 만든 whereByModel 라는 SQL 안에는 searchKeyword 에 대한 조건을 넣을 수 없다. 
  • (model_id 라는 컬럼이 DB에 존재하는 게 아니고 JOIN을 통해 생성된 칼럼이기 때문에 에러가 나는 것 같다. )
• 그래서 <include> 태그 아래에 새롭게 <if> 태그를 추가해서 검색어에 대한 조건을 넣었다. 
• 이렇게 하고 나니까 조인을 통해 생성된 필드에 대한 값에 대한 조건을 적용할 수 있었다.

<hide/>
WHERE 1=1
<include refid="whereByModel"/>
<if test="@org.apache.commons.lang3.StringUtils@isNotEmpty(searchKeyword)">
    AND (
        model_id_str ILIKE CONCAT('%', #{searchKeyword}, '%')
    OR
        model_nm_str ILIKE CONCAT('%', #{searchKeyword}, '%')
    )
</if>

 

---

element - plus 를 이용한 스위치 버튼 만들기

• v-model
• inline-prompt를 지정하면 스위치 바 안에 active-text, inactive-text 가 모두 표시된다. inline-prompt 속성을 지정하지 않으면 스위치 바 바깥에 text가 표시된다. 
• style에 스위치가 켜질 때, 꺼지는 경우의 스타일을 다르게 적용한다. 
  
  • active-text는 화면상에 표시할 텍스트를 의미하고 active-value는 저장할 데이터 값을 의미한다.
  • active-value를 따로 설정하지 않는 경우, true / false가 기본값이다. 
  • @change에는 버튼이 클릭될 때마다 실행될 함수를 바인딩하면 된다. 
• 여기에서 주의할 사항은 컴포넌트가 처음 렌더링될 때, modelUseYn에 값이 들어가는 동시에 @change에 바인딩해준 handleClickSwitchBtn()가 실행된다는 것이다. 
  • 그런데, 처음 렌더링 될 때에는 handleClickSwitchBtn() 안에 매개변수로 '-1' 이 자동으로 들어가므로 예외 처리를 해주도록 한다. 
  • handleClickSwitchBtn() 안에 매개변수는 버튼이 클릭된 row의 (tableData 배열 안에서의) 인덱스가 들어간다.
  • 원인: 처음에 화면을 불러올 때, modelUseYn 의 값이 항상 존재한다. 어떤 값이 할당되기 때문에 이 또한 @change에 바인딩되어있는 함수가 실행된다. 
  • 문제: Y, N 중에서 Y

<hide/>
<ComnList
  :tableHeader="tableHeader"
  :tableData="tableData"
>
  <template v-slot:modelUseYn="slotData">
    <div class="mb-2 flex items-center text-sm">
      <el-switch 
          v-model="slotData.row.modelUseYn" 
          inline-prompt
          active-text="Y"
          active-value="Y"
          inactive-text="N"
          inactive-value="N"
          class="ml-2"
          @change="handleClickSwitchBtn(slotData.$index)"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #777777"
        />
    </div>
  </template>
</ComnList>

 

<hide/>
const handleClickSwitchBtn = (index) => {
  if(index == -1){  // 컴포넌트 첫 로딩 시, 호출
    return;
  }
   updateModel(index);
};

 

두 개의 스위치 버튼이다. 각각 버튼을 누른 경우, 해제한 경우이다.

 

 

cf) element plus 스위치 버튼 만들기 https://element-plus.org/en-US/component/switch.html#attributes

 

---

title

• con
• cont

---

title

• con
• cont

---