月亮

1. request 헤더를 blob로 받기 excelDownload: (url, param) => { return axios.get(`${API_URL}${url}`, { params: param, responseType: "blob", }); }, const downloadExcel = () => { data.value.loading = true; commonService.download({ data.value.param }).then( (d) => { if (d.status === 200) { // 파일 이름 추출 const contentDisposition = d.headers["content-disposition"]; const filename = contentDisposition.split("f..

더 좋은 방법이 있을것 같지만 일단 원하는대로 동작한다. // 키보드 이벤트로 해결하는 방법 @keydown="$event.target.blur()" @keypress="$event.target.blur()" @keyup="$event.target.blur()" 참고 키보트 이벤트에 관한 글 https://velog.io/@jjhstoday/project-Sleact-keydown-keypress-keyup-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%8A%94 https://stackoverflow.com/questions/58109631/vuetify-combobox-how-to-disable-typing-in-vuetifys-combobox

1. 조건부 렌더링 (v-if, v-show) https://v3-docs.vuejs-korea.org/guide/essentials/conditional.html 핵심은 v-show는 css가 display:none일 뿐이다. (DOM에는 남아있다) 2. v-bind vs v-model v-model은 양방향 바인딩, v-bind는 html의 속성을 설정할 때 사용한다. 'v-bind:속성'에서 'v-bind'를 생략하고 ':속성'만 써도 된다.(v-bind:src -> :src) 3. input 입력값 유효성검사 - 추천하는 조합은 @input + v-model 조합 - 또는 라이프사이클 메서드(실무에서 써보니까 웬만하면 렌더링 관련 될 때만 쓰는 게 좋은 것 같다) - 라이프 사이클 메서드 (1) ..

이번 블로그 포스트에서는 Vue 프로젝트를 설정할 때 가장 좋은 방법에 대해 공유하고자 합니다. 나중에는 Vite나 React로 프로젝트를 진행할 수도 있겠지만, 이번에는 Vue에 초점을 맞추겠습니다. 🌿 Project Setting vue3 vuetify3 packagemanager : yarn prettier , eslint (webpack) 🌿 Project * 가정: Vue CLI가 글로벌로 설치되어 있다고 가정합니다. (아니면 아래와 같이 설치) npm install -g @vue/cli # OR yarn global add @vue/cli #https://cli.vuejs.org/guide/installation.html 1. Vue CLI를 사용하여 프로젝트 생성하기: vue create c..

저번에 선임님이 vue의 filter를 알아보라고 하셨는데 오늘 써볼 기회가 있어서 포스팅을 해보도록 하겠다. 일단 vue3에서 filter는 removed apis로 옮겨서 filter를 쓰기보단 computed나 method를 쓰기를 권장하고 있다! 하지만 그래도 쓰고 싶은 사람들을 위해 마이그레이션 가이드를 알려주고 있다. https://v3-migration.vuejs.org/breaking-changes/filters.html#migration-strategy Filters | Vue 3 Migration Guide v3-migration.vuejs.org 한번 써보니까 vue3에서는 왜 filter를 없애는 건지 잘 모르겠는 느낌,,, filter 편한데,,,, 아무튼 vue3에서 filter..

store 기능을 이용하는 것은 react 쓸 때 redux 접할 때 빼고는 처음 건드려 보는데 pinia는 나름 간단하게 사용할 수 있는 것 같다! 전제조건은 vuetify3이 세팅되어 있어야 한다! 1. pinia 공식문서를 보고 세팅하기 main.js에 세팅한다 (이번 프로젝트 하면서 느꼈는데 공식문서에 다 나와있다) https://pinia.vuejs.org/getting-started.html Pinia | The intuitive store for Vue.js Intuitive, type safe, light and flexible Store for Vue pinia.vuejs.org 2. 프로젝트 루트에 store폴더 > index.js 만들기 나는 src > store >index.js 로..

전제조건 : vue3, vue-router 프로젝트 생성 1. 컴포넌트 생성 // src/views/Home.vue Home Go To About Go To Profile // src/views/About.vue About Go To Home Go To Profile // path: src/views/Profile.vue Hello, this my profile page Go To Home 2. router.js 생성 // path: src/router/routes.ts import { RouteRecordRaw } from 'vue-router'; const routes: Array = [ { path: '/', name: 'Home', component: () => import(/* webpackCh..