단아산보

vue 컴포넌 중 아주 유용하게 쓸만한 것이 달력 컴포넌트다. vuetify 에는 수많은 기능이 있지만 그중 실제 실무에서 많이 사용하기도 했고 사용하면서 우와 이것도돼? 하며 달력을 아주 간단하게 만들어 볼수 있는 장점이 있다. 이벤트 핸들링도 상당히 간소한 편이다. 

처음 템플릿 작업이 조금 복잡하긴 하지만 한번 만들어 두면 유용하게 쓸수 있고 달력 내부에 div 조작도 html 코드 그대로 사용 할수 있어서 상당한 이점이 있다. 

아래는 간략하게 달력 노출 부분만 메모를 하고 오늘 찾은 기능은 상단에 년도를 클릭하면 년도/월을 선택 해서 바로 이동할 수 있는 기능을 추가 하며 코드 메모를 남겨 본다. 예전에는 셀렉트박스로 배열에 담아 불러 왔던 부분이 이제는 컴포넌트 호출 만으로도 가능하다니 참말로 신기한 부분이다. 

<v-calendar
  ref="calendar"
  v-model="focus"
  color="primary"
  :type="type"
  :locale="'ko-KR'"
  :events="events"
  :format="customFormat"
  @click:date="viewDay"
  @change="updateRange"
>
</v-calendar>

이때 아무 설정도 하지 않으면 모두 영어로 나오기에 한국에서 개발중이라면 locale 옵션을 사용해 보면 년도와 월 뒤에 한글도 넣을 수 있다. 아주 간단하게 한글로 샤라락 변환이 된다. 따지고 보면 변환이라기 보다는 날짜 뒤에 월 / 년 같은 글자를 붙이는 효과 이지만 말이다. 

v-date-picker 은 여러가지 타입이 있어서 년도/월만 선택 하는 month 도 있고 일수 까지 모두 선택 하게 하려면 type 정보를 빼면 기본은 우리가 알고 있는 현재 월의 모든 일수가 노출 되는 달력이 뜬다. 

<v-date-picker
  v-model="selectedPickerDate"
  type="month"
  @input="setFirstDayOfMonth"
  :locale="localeOptions"
/>

<script>
export default {
  data() {
    return {
      selectedPickerDate: null,
      localeOptions: {
        firstDayOfWeek: 1, // 월요일부터 시작하는 경우
        masks: {
          L: 'YYYY년 MM월', // 한글로 월을 표시하는 포맷
          l: 'YYYY-MM' // 기본 포맷
        },
        // 다른 locale 옵션들...
      }
    };
  },
  methods: {
    setFirstDayOfMonth(selectedDate) {
      // 선택된 날짜를 처리하는 로직
    }
  }
};
</script>

아래 코드는 년도월을 선택 후 해당 월로 이동하는 스크립트 예시다. v-model="focus" 로 캘린더에 명시 했기 때문에 해당 일자를 this.focus 에 넣어 주기만 하면 달력을 자동으로 선택된 달로 변경 된다. 참말로 편리한 세상이다.

async setFirstDayOfMonth(selectedPickerDate) {
  if (selectedPickerDate) {
    const dateParts = selectedPickerDate.split('-');
    const year = parseInt(dateParts[0], 10);
    const month = parseInt(dateParts[1], 10);
    const firstDayOfMonth = new Date(year, month - 1, 1);
    this.focus = firstDayOfMonth; 
  }
},

너무 예스러운 애기지만 예전에는 한국에 맞게 날짜 타입을 바꿀려면 맨붕이 오기도 하는데 요즘은 옵션 설정이 상당히 좋은거 같다. 달력도 참말로 계산법으로 한땀한땀 스크립트를 만들고 달력스크립트 있어요? 물어 보기도 하고 말이다. 달력 스크립트를 보유한 사람은 꽤 실력자 였으니 말이다.

vue 로 달력으로 삽질하고 있다면 도움이 되길 바란다. 

싱글 파일 업로드 일 경우 

<template>
  <div>
    <v-file v-model="file" accept="image/*" @change="onFileChange" />
    <img v-if="previewImage" :src="previewImage" />
    <button @click="uploadFile" :disabled="!file">Upload</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      previewImage: null,
    }
  },
  methods: {
    onFileChange() {
      if (this.file) {
        this.previewImage = URL.createObjectURL(this.file)
      } else {
        this.previewImage = null
      }
    },
    uploadFile() {
      const formData = new FormData()
      formData.append('file', this.file)

      // Make your API call to upload the file with the formData
      // ...
    }
  },
  beforeDestroy() {
    if (this.previewImage) {
      URL.revokeObjectURL(this.previewImage)
    }
  }
}
</script>

다중파일 업로드 일 경우

<template>
  <div>
    <v-file v-model="files" accept="image/*" multiple @change="onFileChange" />
    <div v-for="(preview, index) in previewImages" :key="index">
      <img :src="preview" />
    </div>
    <button @click="uploadFiles" :disabled="!files || !files.length">Upload</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [],
      previewImages: [],
    }
  },
  methods: {
    onFileChange() {
      this.previewImages = []
      for (let i = 0; i < this.files.length; i++) {
        const file = this.files[i]
        if (file && file.type.startsWith('image/')) {
          this.previewImages.push(URL.createObjectURL(file))
        }
      }
    },
    uploadFiles() {
      const formData = new FormData()
      for (let i = 0; i < this.files.length; i++) {
        formData.append('files[]', this.files[i])
      }

      // Make your API call to upload the files with the formData
      // ...
    }
  },
  beforeDestroy() {
    for (let i = 0; i < this.previewImages.length; i++) {
      URL.revokeObjectURL(this.previewImages[i])
    }
  }
}
</script>

beforeDestroy 

beforeDestroy 는 라이프사이클 훅 중 하나로 

컴포넌트가 소멸 되기 직전에 호출된다. 

따라서 위 예제에서는 이미지 파일의 URL 을 삭제하는 역할을 한다.

소스코드에서 바로 나누기 하는 방법

<ul>
  <li v-for="(item, index) in dataList" :key="index">
    {{ (item / 1024).toLocaleString() }}
  </li>
</ul>

computed 로 data 자체를 가공해서 노출 하는 방법

<ul>
  <li v-for="(item, index) in filteredDataList" :key="index">
    {{ item }}
  </li>
</ul>

computed: {
  filteredDataList() {
    return this.dataList.map(item => {
      return (item / 1024).toLocaleString();
    });
  },
},

node.js 설치 되어 있음

vite 은 프랑스어로 빛처럼 빠르다는 빠르다의 뜻을 갖고 있는 단어라고 하는데

아래에 명령어를 입력해 보니.. 헐~

정말 1초만에 세팅이 끝났다. ㅎㅎ 

1년 정도 밖에 되지 않아서 아직 호환성이나 단점들이 조금 있는거 같긴 하지만..

공부용으로 테스트 해보기에는 괜찮을거 같다. 

yarn create vite

이후 명령어는 다른 프로젝트와 동일하게 

yarn 

으로 설치 후 

yarn dev

로 웹페이지가 실행 된다. 

하나씩 공부해가며 기록해 보아야 겠다. 

yarn node 설치 되어 있을 경우 

명령어

yarn create nuxt-app [프로젝트이름]

이후 프로젝트에 맞게 선택 해 줌 

이번에 선택한 부분은 아래와 같음 

javascript
yarn
vuetify.js ==> ui
axios ==> 서버통신 스페이스바로 선택
ESLint, Prettier 스페이스바로 선택
None
Universal
배포대상 Server(Node.js hosting)
jsconfig.json
None ==> git 허브 자동으로 반영 할것인지
Git

설치 하는데 조금 시간 소요 됨 

설치 후 명령어
cd [프로젝트이름]
yarn dev

package.json 파일을 열어 보면 세팅된 정보들을 확인 할수 있다. 

localhost:3000 으로 웹페이지를 열어 보면 초기 세팅은 완료 

yarn add @nuxtjs/axios 추가설치

yarn add sass

yarn add sass-loader

스타일에 선언 해두면 scss 를 바로 사용 할 수 있다.

yarn global add @vue/cli

오류시 npm 캐쉬 클린 명령어

npm cache clean --force

yarn add dotenv

env 환경변수 파일 설정 관련

yarn add cross-env