단아산보

지역 테이블을 작업하다 보면 서울특별시 처럼 full name 으로 쓰기도 하고  서울 처럼 short name 으로 줄여서 쓰는 경우도 있어서 해당 부분에 맞게 데이터를 업데이트 해야할 일이 종종 생긴다. 

아래 쿼리문은 그런 경우 테이블 전체에서 수정해야 하는 쿼리문을 한번에 update 할 수 있다. 업데이트 구문에서도 case 구분을 잘쓰면 유용하다. 

UPDATE code_bjd_short
SET kf_name = CASE
    WHEN kf_name LIKE '서울특별시%' THEN REPLACE(kf_name, '서울특별시', '서울')
    WHEN kf_name LIKE '부산광역시%' THEN REPLACE(kf_name, '부산광역시', '부산')
    WHEN kf_name LIKE '대구광역시%' THEN REPLACE(kf_name, '대구광역시', '대구')
    WHEN kf_name LIKE '인천광역시%' THEN REPLACE(kf_name, '인천광역시', '인천')
    WHEN kf_name LIKE '광주광역시%' THEN REPLACE(kf_name, '광주광역시', '광주')
    WHEN kf_name LIKE '대전광역시%' THEN REPLACE(kf_name, '대전광역시', '대전')
    WHEN kf_name LIKE '울산광역시%' THEN REPLACE(kf_name, '울산광역시', '울산')
    WHEN kf_name LIKE '세종특별자치시%' THEN REPLACE(kf_name, '세종특별자치시', '세종')
    WHEN kf_name LIKE '경기도%' THEN REPLACE(kf_name, '경기도', '경기')
    WHEN kf_name LIKE '강원도%' THEN REPLACE(kf_name, '강원도', '강원')
    WHEN kf_name LIKE '충청북도%' THEN REPLACE(kf_name, '충청북도', '충북')
    WHEN kf_name LIKE '충청남도%' THEN REPLACE(kf_name, '충청남도', '충남')
    WHEN kf_name LIKE '전라북도%' THEN REPLACE(kf_name, '전라북도', '전북')
    WHEN kf_name LIKE '전라남도%' THEN REPLACE(kf_name, '전라남도', '전남')
    WHEN kf_name LIKE '경상북도%' THEN REPLACE(kf_name, '경상북도', '경북')
    WHEN kf_name LIKE '경상남도%' THEN REPLACE(kf_name, '경상남도', '경남')
    WHEN kf_name LIKE '제주특별자치도%' THEN REPLACE(kf_name, '제주특별자치도', '제주')
    ELSE kf_name
END;

vuex 를 사용해서 store 에 저장하고 여러페이지에서 동일하게 사용하기 예시

aa 라는 변수를 예로 든다면 state 에 초기값을 설정해 두고 mutations 과 actions 으로 값을 변경 할수도 있고 값을 참조 할때는 store.state.aa 로  가져와서 사용 할 수 있다. 

vue 에는 세션이 없기에  의외로 많이 사용하는 방법이라 참고해 두면 좋겠다. 

// store.js
import { createStore } from 'vuex';

const store = createStore({
    state: {
        aa: null, // 초기값
    },
    mutations: {
        setAa(state, value) {
            state.aa = value; // 상태 변경
        },
    },
    actions: {
        updateAa({ commit }, value) {
            commit('setAa', value); // 액션을 통해 상태 업데이트
        },
    },
});

export default store;

<template>
    <div>
        <h1>현재 aa 값: {{ aa }}</h1>
        <button @click="changeValue">값 변경</button>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';

// Vuex 스토어 사용
const store = useStore();

// aa 값을 가져옵니다.
const aa = computed(() => store.state.aa);

// aa 값을 변경하는 메서드
const changeValue = () => {
    const newValue = Math.random(); // 새로운 랜덤 값
    store.dispatch('updateAa', newValue); // Vuex 액션 호출
};
</script>

<template>
    <div>
        <h1>bb.vue에서 aa 값: {{ aa }}</h1>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';

// Vuex 스토어 사용
const store = useStore();

// aa 값을 가져옵니다.
const aa = computed(() => store.state.aa);
</script>

<div class="input_wrap input_item_area">
  <select class="select" onchange="num(this.value)">
    <option value="1">평수로 입력</option>
    <option value="2">가로 X 세로로 입력</option>
    <option value="3">㎡로 입력</option>
  </select>
  
  <!-- 평수로 입력 -->
  <div class="wrap" id="1">
    <div>
      <input type="text" class="input" placeholder="10" id="areaInput" oninput="convertToSquareMeters()"> <span class="txt">평</span>
    </div>
  </div>
  
  <!-- 가로세로로 입력 -->
  <div class="wrap" style="display: none;" id="2">
    <div>
      <span class="txt">가로</span>
      <input type="text" class="input" placeholder="6.8" id="widthInput" oninput="calculateArea()">
      <span class="txt">m</span>
    </div>
    <div class="divider">
      <span class="txt">세로</span>
      <input type="text" class="input" placeholder="7.15" id="heightInput" oninput="calculateArea()">
      <span class="txt">m</span>
    </div>
    <div>
      <span class="txt">총 면적</span>
      <input type="text" class="input" id="squareMeterInput" readonly> <span class="txt">㎡</span>
    </div>
  </div>
  
  <!-- ㎡로 입력 -->
  <div class="wrap" style="display:none" id="3">
    <div>
      <input type="text" class="input" placeholder="48.6" id="squareMeterInput2" oninput="convertToPyeong()"> <span class="txt">㎡</span>
    </div>
  </div>
</div>

function num(value) {
  // 모든 입력 필드를 숨김
  document.getElementById('1').style.display = 'none';
  document.getElementById('2').style.display = 'none';
  document.getElementById('3').style.display = 'none';

  // 선택한 값에 따라 해당 입력 필드 보이기
  document.getElementById(value).style.display = 'block';
}

function calculateArea() {
  const width = parseFloat(document.getElementById('widthInput').value) || 0;
  const height = parseFloat(document.getElementById('heightInput').value) || 0;
  const areaInSquareMeters = width * height;
  
  // 평으로 변환 (1평 = 3.3㎡)
  const areaInPyeong = areaInSquareMeters / 3.3; // 제곱미터를 평으로 변환
  
  // 평수 입력란에 결과 표시
  document.getElementById('areaInput').value = areaInPyeong.toFixed(2);
  
  // 제곱미터 입력란에 결과 표시
  document.getElementById('squareMeterInput').value = areaInSquareMeters.toFixed(2);
}

function convertToPyeong() {
  const squareMeters = parseFloat(document.getElementById('squareMeterInput2').value) || 0;
  
  // 평으로 변환 (1평 = 3.3㎡)
  const areaInPyeong = squareMeters / 3.3; // 제곱미터를 평으로 변환
  
  // 평수 입력란에 결과 표시
  document.getElementById('areaInput').value = areaInPyeong.toFixed(2);
}

function convertToSquareMeters() {
  const pyeong = parseFloat(document.getElementById('areaInput').value) || 0;
  
  // 제곱미터로 변환 (1평 = 3.3㎡)
  const areaInSquareMeters = pyeong * 3.3; // 평을 제곱미터로 변환
  
  // 제곱미터 입력란에 결과 표시
  document.getElementById('squareMeterInput').value = areaInSquareMeters.toFixed(2);
}