Vue

[Vue2] vue이용해서 캘린더 만들기 2

이전에도 vue를 이용해서 캘린더를 만드는 것을 했었는데요. 캘린더에 기능을 조금 추가하고, typeScript를 사용하려고합니다! Vue2로 제작 후에는 Vue3로 마이그레이션 하는 과정까지 해보려고 합니다. 또한 그동안은 optionAPI를 사용하여 개발을 했었는데 compositionAPI를 사용해보려고 합니다. compositionAPI 란 컴포넌트 로직을 유연하게 구성할 수 있는 API 모음으로 로직의 재사용성과 가독성을 높여준다고 합니다. optionAPI의 경우는 data, methods, computed등 각각 로직이 흩어져 있지만 compositionAPI의 경우 로직이 모아지게 됩니다. 좀 더 자세한건 저도 공부해서 블로그에 정리하도록 하겠습니다! 이 블로그 글 또한 직접 제작하면서 정..

[Vue 2]캘린더 만들기

직접 라이브러리를 사용하지 않고, 캘린더를 제작해보려고 합니다. 직접 만들어보면서 게시글을 작성중입니다. 그래서..아직 css나 접근성 부분에서 많이 모자라요! 조금이나마 도움이 되었으면 좋겠습니다. {{ index }} {{ childIndex }} {{ childIndex }} 이부분을 보시면 두개의 for문이 다르죠?! 그 이유는 days의 index의 내용이 string, number가 아니기 때문인데요. vue의 key값은 string,number여야합니다. key값으로 index를 사용하기위해 한번 더 감싸줬습니다! 이제 주말을 표시해주려고 하는데요. 문제가 생겼습니다. 마지막 주의 경우는 공백을 추가해주지 않았었는데요. tr td:first-chi..

[Vue 2] vue-router 설정하기

안녕하세요! 혹시 저처럼 헤매시는 분이 있으실까봐 작성하는~ vue-router 설정법! 우선 vue2 버전이신 분들 그냥 npm i vue-router이라고 하면 오류가 나실수도 있는데 이때 해결 하시려면 router버전을 3으로 설정해주 셔야해요. 4는 vue3부터 지원이기때문에 에러가 납니다. 그래서 3버전으로 설치를 해주셔야 합니다. npm i --save vue-router@3 설치가 완료 되셨으면 src 폴더 안에 router 이라는 폴더를 하나 생성해 줍니다. 그리고 그 안에 index.js를 만들어 줍니다. vue router에는 모드가 2가지가 있는데요 1. history 모드 2. hash 모드 이렇게 있습니다. vue-cli로 router 까지 설정하고 실행시켜 보시면 가끔 url끝에..

[Vue 2] axios 모듈화 하기

모듈화를 하기위해서 많은 공부를 했고 얻은 정보를 정리하려고 합니다! 처음에는 대부분의 블로그들은 토큰 인증방식까지 정리가 되어있어서 처음에 모듈화를 하기위한 작업을 찾아보는것이 어려웠습니다. (글을 잘 못읽었거나..구글링을 못한것일지도..) 저는 단계별로 정리 하려고합니다! 또 promise, async/await의 차이점도 알아보려고 합니다! 혹시 axios 설치가 안되어 있으면 설치 해주세요! https://axios-http.com/kr/docs/intro 시작하기 | Axios Docs 시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. ..

[Vue 2] vuetify icon custom 하기

Vuetify가 기본적으로 제공하는 metarial Icon에 없는 경우 사용하기위해서 Img를 사용할 수도 있고, 아이콘을 등록 할수도 있는데, 처음 내가 사용한 방법은 v-if와, v-else로 다른게 클릭되면 색이있는 이미지가 변경되게끔 설정해 줬었다. 하지만 코드의 가독성, 효율성이 조금 떨어진다는 생각이 들어 :class 를 이용해 클릭이 되었을때 아이콘의 색이 변경되게끔 설정을 해주기도 했는데 이것 또한 가독성이 떨어진다는 느낌을 받았었다. 그래서 vuetify에 custom icon을 등록하는 부분을 검색해 보았고 엄청난 헤딩 끝에 해내게 되었는데 이 방법을 적으려고 한다! 처음에는 vuetify에 기술 되어있는 custom icon 부분을 이용해서 해보려고했는데 잘 된것 같다가도 계속해서 ..

[Vue 2] vuetify v-date-picker custom 하기

개발을 진행하다 보니, 달력을 만들어야 할 날이 왔다. 개발 라이브러리로 vuetify를 사용하는데 vuetify에서 제공하는 달력은 두 종류가 있다. 하나는 달력만을 보여주는 date-picker, 캘린더의 역활을 하는 calnder, 두 종류고 캘린더까진 필요하지 않아서 date-picker을 사용했다. custom 하기가 어려웠지만 어떠한 방식으로 해냈고, 어떻게 헤딩을 했는지 써보려고 한다! https://vuetifyjs.com/en/api/v-date-picker/ 1. date-picker한글 셋팅 하기 vuetify에서 제공하는 locale이라는 속성에 KO를 넣어주면 한글 버전을 사용할 수 있지만 날짜 옆에 '일'도 함께 나와서 이걸 해결해야만 했었다. 그러던 중 이것에 관련하여 포스팅하..

[Vue 2] data(){return{}} 과 data:()=>({}) 의 차이 기록

Vue로 개발을 하다가, 회원가입 페이지를 만드는 중 validation을 적용하고 있었는데 난관에 봉착했었다!! vuetify에는 rules 라는 props 를 제공해주는데 validation을 체크할때에 많은 라이브러리가 있지만, 난 그냥 vuetify에서 제공하는 것을 사용하고싶었는데 마침 나와같은 생각을 가지고 계신 개발자분의 블로그를 참고하여 개발을 하고있었는데 에러가 발생했다. 소스도 다른게 없었는데 에러메세지는 userPassword 를 찾지못한다는 에러였다 this.를 써도 undefind에러가 계속해서 나오는게 문제였다. (비밀번호 확인 부분) 차이점을 체크하는데 data를 구현할때에 차이점이있었다. 그래서 다른분 블로그에서 왜 그런지에 대해서 찾을수 있었는데 arrow function의..

[Vue 2] Instance Properties 추가하기(전역 속성 추가하기)

vue로 개발을 하면서 조금 더 깔끔하게 코드를 쓰는 법에 대해 많이 고민하고 있는데 그 중에 자주 쓰는 값 같은 경우 데이터 사전으로 정리하는 것이 편하고, 확장성도 좋다 라는 말을 멋진 지인이 알려줘서 초반 앱과 다르게 두번째 개발 앱부터는 데이터를 사전 형식으로 정리하고 그것을 전역 속성으로 셋팅해줘서 모든 파일에서 사용할수 있도록 하려고한다. 우선 나같은 경우는 components/common 안에 dict이라는 폴더를 하나 만들고 그안에 데이터 사전을 정리하려고 한다. (맞는 방법인지는 잘 모르겠지만..) components/common/dict안에 UserType.js라는 파일을 만들고 export const userType = { hyejin: { code: 0, kor_name: '혜진',..