vue 3 js - 게시판 만들기 6 - 공용(글로벌) js를 만들어서 사용해보자

https://godffs.tistory.com/3805

vue 3 js - quasar 게시판 방명록 만들기 5 - 컴포넌트로 데이터 바인딩

이어서...

---

 

전역변수, 전역 함수로 만들어서 어느 페이지에서든지 사용 가능한 변수, 함수를 만드는 방법을 찾았다

 

vue3로 넘어오면서 이전과 많이 달라졌는데 자세한건 좀 더 봐야겠다

 

참고 : Plugins | Vue.js (vuejs.org)

Plugins | Vue.js

 

 

1. 전역으로 사용할 파일을 만든다

src \ utils \ utils.js 폴더 + 파일 생성

 

2. utils.js에 이전에 만든 날짜값 변경해주는 함수를 이곳으로 옮겨봤다

src \ utils \ utils.js

export default {
  install(Vue) {
    // 날짜값 변환하기
    Vue.config.globalProperties.$dateFormat_yyyyMMdd = function (value) {
      if (value === "") {
        return "";
      }

      // javascript로 날짜값으로 변경
      var date = new Date(value);

      // 년, 월, 일
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();

      // 월 1자리일 경우 앞에 0 붙여주기
      if (month < 10) {
        month = "0" + month;
      }

      // 일 1자리일 경우 앞에 0 붙여주기
      if (day < 10) {
        day = "0" + day;
      }

      return year + "-" + month + "-" + day;
    };

    // 더하기
    Vue.config.globalProperties.$plus = function (value1, value2) {
      return value1 + value2;
    };
  },
};

 

3. 2번에서 만든 파일을 전역으로 등록한다

quasar \ app.js 파일을 수정하려고 봤는데

보면...자동으로 생성이 된다..편집하지마라

코드를 수정하고 프로젝트 종료 다시 실행하면 코드가 날라간다

 

파일을 추가했다

boot \ common.js 파일을 추가하고 코드를 입력한다

import { boot } from "quasar/wrappers";
import utils from "src/utils/utils";

export default boot(({ app }) => {
  app.use(utils);
});

부팅하는곳을 수정한다

quasar.config.js에서 내용추가

.quasar \ client-entry.js 내용추가

 

3. utils.js에 있는 함수를 사용해보자

src \ components \ ComBoardList.vue에서 사용하던 dateFormat 메서드를 삭제하고

2번에서 만든 전역변수 dataFormat_yyyyMMdd를 호출한다

 

src \ components \ community \ ComBoardList.vue

<template>
  <!-- 부모에게서 넘겨받은 props에 items를 화면에 찍음 -->
  <q-card
    class="my-card text-white"
    style="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%)"
    v-for="(item, data) in this.items"
    :key="data"
  >
    <q-card-section>
      <div class="text-h6">{{ item.num }} | {{ item.reg_nick }}</div>
      <div class="text-subtitle2">{{ item.reg_user }}</div>
    </q-card-section>

    <q-separator dark inset />

    <q-card-section>
      {{ item.cont }}
    </q-card-section>

    <!-- src \ utils \ utils.js 에서 $dateFormat_yyyyMMdd 호출 -->
    <q-card-section>{{this.$dateFormat_yyyyMMdd(item.reg_date)}}</q-card-section>
    <!-- test 더하기  -->
    {{ this.$plus(10, 20) }} 
  </q-card>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    items: { type: Array, default: () => [] },
  },
  setup() {},
  methods: {},
  created() {},
});
</script>

<style lang="sass" scoped>
.my-card
  width: 15%
  max-width: 200px
</style>

 

결과확인

quasar config globalProperties

 

이렇게 했는데

이게 올바른 방법인지 잘 모르겠다

전역에서 사용 가능한 자바스크립트 함수를 사용해 보고 싶어서 해봤다

 

quasar-6.zip

0.20MB