개발💻/기타

오늘은 vue3 datepicker 사용법에 대해 소개해보겠다 웹 개발을 하다보면 날짜나 시간을 선택하거나 입력해야할 상황이 꽤나 종종 있다 나는 vuetify에서 여러 컴포넌트들을 가져와서 작업을 하는데 vuetify에 date pciker가 있긴 하다 근데 날짜 뿐만아니라 시간까지 선택하는 거는 아직 없는거 같다 좀 찾아보니 옛날에는 있었는데 사라진거 같기도 하고 그리고 vuetify 로드맵을 보면 아마 올해 7월에 릴리즈가 될 예정인거 같다 아무튼 오늘은 날짜 뿐만아니라 시간까지 선택할 수 있는 vue datepicker에 대해 소개해보겠다 https://vue3datepicker.com/ Vue Datepicker Vue datepicker The most complete datepicker so..

오늘은 vuetify를 활용해서 반응형 웹을 쉽게 만드는 법을 알아보겠다!! 보통 반응형 웹을 만들기위해서 css 에서 미디어 쿼리를 사용해서 만드는 걸로 알고있다 물론 미디어 쿼리를 사용하면 내가 설정한 화면 크기 안에서 특정 스타일이 적용되게 할수있고 뭐 간단한 텍스트 같은것들은 % 나 vw vh등을 통해서도 구현이 가능할거다 하지만 매번 미디어 쿼리를 작성하기 귀찮기 때문에 나는 오늘 뷰티파이를 사용해서 반응형 스타일을 작성하는 법을 알려주겠다 일단 터미널에서 npm create vuetify 명령어를 입력해서 뷰티파이 프로젝트를 생성한다 이런식으로 프로젝트가 만들어 질텐데 styles파일에 scss 파일을 하나 추가해주고 helloWorld.vue 파일에 기존에 있던 내용들을 삭제해주고 안녕 반응..

오늘은 다국어 처리를 위한 i18n 이라는 라이브러리에 대해 알아보겠다 https://vue-i18n.intlify.dev/ Vue I18n | Vue I18n Vue I18n Internationalization plugin for Vue.js Easy, powerful, and component-oriented for Vue.js vue-i18n.intlify.dev 나는 vuetify, ts가 적용된 vue3 환경에서 했으니 참고하시길 일단 당연히 프로젝트 생성하고 npm install vue-i18n@9 설치를 해준다 그다음에 메시지를 넣을 json 파일들을 만들어야하는데 나는 src 하위에 lang 이라는 폴더를 만들고 en.json , ko.json, Index.ts 파일을 만들어줬따 // k..

오늘은 vue에서 pdfmake 라이브러리 사용하는 방법을 알아보자 pdfmake가 뭐냐면 말 그대로 pdf파일 만들어주는 라이브러리이다 http://pdfmake.org/#/ (참고로 공식 사이트에 playground도 있어서 거기서 여러가지 테스트를 해볼 수 있다) ts가 적용된 vue3에서 사용하는 방법에 대해 알아보겠다 vue 프로젝트 생성해주고 터미널에 npm install pdfmake 입력! 이제 vue 파일로 가서 pdf 파일을 어떻게 만들건지 작성해줘야하는데 먼저 import를 해줘야하는데 공식문서를 보면 타입스크립트는 이렇게 하라고 되어있다 그래서 똑같이 입력을 해주면 요런 에러를 만날 수 있다 에러 메시지에서 npm i --save-dev @types/pdfmake 이거를 시도해 보라..