분류 전체보기

구현하려는 것 Login.vue(부모 컴포넌트) 페이지에서 "아이디 찾기" 버튼 클릭 시 DialogFindEmail.vue(자식 컴포넌트) 팝업(Dialog)이 열리고 닫히게 만들고 싶었다. 자식 컴포넌트에서 Dialog를 띄웠다, 내렸다하는 함수를 작성하고, 부모 컴포넌트에서는 ref를 통해 자식 컴포넌트의 함수에 접근하려고 한다. Vue2에서는 this를 통해 $refs에 접근할 수 있었는데, Vue3에서는 this가 없기 때문에 Composition API에서 ref 사용법을 찾아보다가 정리하는 글~~~ Vue3 Composition API 에서 사용하기 가독성을 위해 불필요한 코드는 제거했습니다! DialogFindEmail.vue(자식 컴포넌트)를 먼저 살펴보자 [templete] v-dial..

읽어보면 좋은 글 공유합니다~ - 좋은 개발자가 되고 싶다면 다음 5가지 소양을 갖추세요. https://f-lab.kr/blog/5ways-tobe-good-developer 좋은 개발자가 되고 싶다면 다음 5가지 소양을 갖추세요. 좋은 개발자란 무엇일까요? 개발자로 일하게 되면 항상 고민하게 되는 질문 중 하나입니다. f-lab.kr

내가 하고 싶은 것 1. 글로벌 전역 변수 파일 분리 2. Composition API에서 사용가능 하도록! Vue3 공식문서를 보면 전역으로 사용가능한 global API가 있다. 바로 app.config.globalProperties 이다. https://vuejs.org/api/application.html#app-config-globalproperties Application API | Vue.js vuejs.org 근데 공식문서에서 전역변수를 this를 사용해서 불러오고 있다..(Options API만 설명되어 있음..) 사용한 방법 구글링을 통해서 2가지 방법을 찾았다. 두 방법 모두 provide, inject를 사용했다. 두 방법의 차이점은 provide, inject를 어느 파일에서 하는..

Vue2에선 "VUE_APP_{변수명}=123445" 처럼 접두사 "VUE_APP_"을 사용해서 환경변수를 사용할 수 있었다. Vue3에서 Vite를 사용해서 번들링한다면, 접두사 "VITE_" 를 사용해야 한다! 변수를 사용할 땐 "import.meta.env.VITE_{변수명}" 으로 사용하자!! // .env VITE_SOME_KEY=123 console.log(import.meta.env.VITE_SOME_KEY) // 123 https://ko.vitejs.dev/guide/env-and-mode.html#env-files Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev

문제 path를 "/sign/in" 으로 지정하니까 아래와 같은 에러가 떳다. // router.ts { path: '/sign/in', name: 'signin', component: () => { return import( /* webpackChunkName: "SignInVIew" */ '@/views/SignInView.vue' ); }, }, // header.vue 회원가입 로그인 원인 경로를 동적으로 추가하면 beforeEach가 처음 실행될 때 sing/in 경로를 찾을 수 없기 때문에 일치하는 경로가 비어 있어 이 경고가 뜨는것이다. 해결 방법은 router/index.ts 파일에 404 라우트를 등록하는 방법이다. 이런 방식으로 beforeEach를 처음 실행할 때 일치하는 경로가 없으..

vuetify의 Navigation Drawer를 사용하며 Examples처럼 작동하지 않는 문제를 겪어서 해결 방법을 공유하려고 한다! [Vuetify 공식 문서] https://vuetifyjs.com/en/components/navigation-drawers/#bottom-drawer 구현하려는 것 아래처럼 아이콘을 클릭할때마다 열리고 닫히는 Drawer를 구현하려고 했었다. 내가 작성한 코드 내가 작성한 코드에서 필요한 부분만 가지고 왔다. 은 안에 작성하고 은 밖에 작성한다. 문제 발생 보이는 것과 같이 아무리 아이콘을 눌러도 drawer가 열리지 않았다. 문제 파악하기 changeDrawerValue 함수를 추가하여 에 클릭했을 떄 drawer 값이 잘 변경되는지 콘솔에 찍어봤다. drawer..

페이지 레이아웃 구성 방법 2가지에 대해서 작성해보았습니다! 1. 페이지에 레이아웃 컴포넌트 씌우기 2. Vue Router의 meta 속성을 이용하여 레이아웃 시스템 생성 1. 페이지에 레이아웃 컴포넌트 씌우기 - 레이아웃 컴포넌트(BasictLayout.vue 또는 다른 레이아웃)를 생성하고 사용할 페이지(Home.vue)에 적용하는 방법 장점 레이아웃 시스템을 만들기 가장 쉽다! 단점 유연성이 떨어진다 각 페이지에서 레이아웃을 불러오는 형태로 작성해야 한다. 다음 경로가 동일한 레이아웃을 사용하더라도 경로가 변경될 때마다 레이아웃이 마운트 해제되고 삭제된다. src/components/layout/BasicLayout.vue 레이아웃 생성 홈페이지 입니다 src/views/Home.vue 레이아웃 ..

Vue3에서 pdf 문서를 만들어봅시다! 이걸 만들면서 수없는 에러를 마주했다.. pdf 문서를 만드는 것 부터 만들면서 마주한 모든 에러를 기록해보려 한다! # pdfmake란? pdfmake는 자바스크립트에서 pdf 문서를 만들 수 있도록 도와주는 라이브러리 입니다! - pdfmake 공식 사이트 http://pdfmake.org/#/ - 공식 문서 https://pdfmake.github.io/docs/0.1/ - 공식 사이트에서 playground를 통해 테스트하기 http://pdfmake.org/playground.html # pdfmake 설치하기 pdmake 사용을 위해 npm으로 설치했다! npm i pdfmake 설치 후 import를 하자마자 빨간줄이 뜬다 ㅜ 에러는 다음과 같다. c..

글로벌 스타일 변수를 정의하기 위해 src/assets/styles 폴더 하위에 다음과 같이 파일 3개를 만들었다. - color.scss - font.scss - main.scss color.scss와 font.scss를 main.scss파일에서 불러오는 구조로 작성하였다. /* mian.scss */ @import "./color.scss"; @import "./font.scss"; * { margin: 0; padding: 0; color : royalblue; } /* color.scss */ // COLOR WHITE $color-white-000: #ffffff; $color-white-100: #fafbfb; // COLOR BLUE $color-blue-000 : #1661a9; // CO..

유튜브나 블로그를 찾아보면 vuetify2에 대한 정보는 있지만 vuetify3는 정보가 아직 부족한 것 같다... vuetify3에서 SASS Variables를 통해 Global 스타일링 및 helper 클래스를 추가해보자! 나는 settings.scss를 통해 font-size, button-color, button-background, typography 전역 스타일링과 overrides.sass를 통해 기존 helper 클래스를 확장해보았다. 시작하기 전, typography가 vuetify2에 비해 달라진 점들이 있어 버전을 변경하려고 한다면 읽어보는게 좋을 것 같다! 아래 링크는 업그레이드 가이드 문서인데 vuetify2와 달라진 점을 확인할 수 있다. https://vuetifyjs.com..