Vue

Lighthouse의 측정 지표들로 성능을 분석하고, 메인 페이지의 성능을 직접 개선하는 과정을 담아보았다!빌드도구 : Vite 4.2프레임워크 : Vue3 시작하기 앞서, 3가지를 먼저 알고 가자! # 알고가기1. 측정시에는 시크릿모드에서 측정하는 것을 권장한다.크롬 브라우저 플러그인, extension이 있는 경우 성능을 측정하는데 지연이 될 수 있다. 2. Lighthouse의 측정 결과는 시시각각 다를 수 있다.이런저런 시도를 할때마다 결과에 편차가 있어서, 내가 시도한 과정들이 정말 유효한지 헷갈렸었다.아래 이미지를 보면, 실제 같은 날, 같은 코드로 돌린 결과에 이렇게 차이가 있었다. 시시각각 결과에 차이가 있다는 것을 모르고 테스트한다면, 일시적인 결과나 우연에 의존한 결정을 내릴수도 있으니..

돋보기 기능 구현하기!! 귀여운건 크게 볼 수 있도록 돋보기 기능을 구현해보자! 1. CSS 설정! class="target"인 이미지를 감싸는 class="warp"을 만들고 둘 사이를 position absolute-relative 관계로 설정한다. 2. 마우스 hover 시 확대 될 class="photo"이미지를 스크립트로 추가한다. 나는 img 내부에 를 추가했다. 여기서 ref는 DOM에 접근하기 위해 추가한 속성이다. DOM에 접근하는 방법은 2가지가 있다. onMounted 내에서 아래 사용한 것 처럼 getElementByClassName, querySelctor 등등 바닐라 자바스크립트 처럼 접근할 수 있고, ref로 접근할 수도 있다. 나는 연습하기 위해서 2가지 방식으로 모두 접근해..

props 변경을 감지해서 함수를 실행시키고 싶었다. 즉, 'propData' 가 변경되면 testFunc 함수를 실행시키고 싶었는데, 생각대로 동작하지 않아서 어떻게 수정해야하는지 원인이 무엇인지 기록하자! # 해결방법  # 1. 변경 전 코드(동작 x) import { ref, watch } from 'vue'; const props = defineProps(['propData']); // props 정의 // watch(감시할 변수, (새로운 변수)=> {변경사항 있는 경우 실행되는 코드 }) watch(props.propData, (newVal) => { testFunc(newVal); }); let testFunc = (param) => { console.log(param) } # 2. 변경 ..

Vue3를 사용중인데 아래와 같은 에러가 종종 난다. cannot create property '' on ~ Uncaught TypeError: Cannot create property 'value' on number '0' let a = ref(0); let b = ref(0); let c = ref(0); let setFunc = (a, b, c) => { a.value = a; b.value = b; c.value = c; }; # 해결법 변수와 파라미터 이름을 동일하게 사용하면 나는 에러같다. 파라미터 이름을 변경해주면 에러는 사라진다. let a = ref(0); let b = ref(0); let c = ref(0); let setFunc = (AA, BB, CC) => { a.value = ..

I18n 라이브러리를 통해 다국어를 지원하는 방법과 줄바꿈 하는 방법 기록하기!! https://www.i18next.com/ Introduction - i18next documentation locize: Now, 'locize' is your efficient manager in charge of organizing and streamlining the translation process. It keeps all your language versions organized and ensures they're always accurate and up-to-date. So, if you want to introduce a new product o www.i18next.com https://vue-i18n...

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

내가 하고 싶은 것 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

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 레이아웃 ..