TIL : 20250424목 (테이블 헤더 세로 정렬, 오라클 문법 regexp_count, nvl)

오늘 한 일

 

1. 테이블 Row 정보를 세로로 보여주는 모달 만들기

테이블 헤더를 세로(세로글자 방향)로 표시하기

- 일반적인 HTML 테이블은 기본적으로 가로로 헤더를 나열하지만

- CSS로 회전하거나

- 행(row) 기준으로 헤더를 구성하면 세로 형태로 만들 수 있다.

 

✅ 방법 1: CSS로 thead > th 글자를 세로로 회전

<style scoped>
.vertical-header th {
  writing-mode: vertical-rl;
  transform: rotate(180deg); /* 글자 위에서 아래로 */
  text-align: center;
  white-space: nowrap;
}
</style>

<template>
  <table class="vertical-header" border="1">
    <thead>
      <tr>
        <th v-for="col in columns" :key="col">{{ col }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, idx) in rows" :key="idx">
        <td v-for="col in columns" :key="col">{{ row[col] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
const columns = ['이름', '나이', '직업'];
const rows = [
  { 이름: '철수', 나이: 28, 직업: '개발자' },
  { 이름: '영희', 나이: 32, 직업: '디자이너' },
  { 이름: '민수', 나이: 24, 직업: '기획자' },
];
</script>

📌 결과: 글자가 세로 방향으로 (위에서 아래로) 표시됨.

 

✅ 방법 2: 가로를 데이터 row로, 세로를 column처럼 구성

데이터 자체를 가로로 돌려서 헤더가 세로가 되도록 테이블을 구성하는 방법이다.

<template>
  <table border="1">
    <tbody>
      <tr v-for="col in columns" :key="col">
        <th>{{ col }}</th>
        <td v-for="(row, i) in rows" :key="i">{{ row[col] }}</td>
      </tr>
    </tbody>
  </table>
</template>

📌 결과: 각 row가 열(column)이 되고, 헤더는 행(row)에 위치 → "완전한 세로 헤더 테이블"

 

😎 CSS 조작보다는 HTML 구조 자체를 변경하는 게 명시적이기도 하고 구현하기에도 편해 보였다. 따라서 두 번째 방식을 이용해 테이블을 세로로 배치했다. 

 

 

2. 오라클 문법 공부

1. `regexp_count(column, pattern)`

regexp_count(a.danwi, '0')

• `regexp_count(column, pattern)`
• `a.danwi`: 테이블 `a`의 `danwi` 컬럼 (문자열)
• `0`: '0' 패턴이 몇 번 등장하는지 셈

 

2. `nvl(:a, u.coin_type)`

nvl(:a, u.coin_type)

• `:a` ← 바인드 변수 (프론트에서 넘겨주는 값)
• `u.coin_type` ← 테이블 `u`의 `coin_type` 컬럼
• `nvl(a, b)` ← a가 null이면 b 반환, 아니면 a 반환
• 해석: 바인드 변수 `:a`에 값이 있으면 그걸 쓰고, 없으면 `u.coin_type` 값을 사용하겠다.

예시

SELECT *
FROM user_table u
WHERE u.coin_type = NVL(:coinType, u.coin_type);

프론트에서 coinType을 보내면 그 값으로 필터링하고,
안 보내면 전체 coin_type 다 포함 (필터링 안 됨)