Vue2에서 Meta Title를 테스트 해보자. Vue 2.6.12와 jest 26.6.3, vue-meta 2.4.0 버전을 기준으로 해당 글은 작성되었습니다. 🧐 Vue-meta란? Vue 전용 HTML MetaData 관리하는 툴로써, 페이지에 Meta 데이터를 쉽게 추가할 수 있습니다. // Component.vue { metaInfo: { meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' } ] } } 위에 코드에서 해당 MetaData를 지정하면 아래와 같이 HTML 태그로 랜더가 되는 방식이라고 생각하시면 됩니다. Title이란? { metaInfo: { title: ..
Frontend/Vue
Vue에서 TypeScript로 Timer의 Leading Zeros를 구현해보자. Vue에서 Javascript로 타이머를 구현해야 할 일이 생기면서 Leading Zeros까지 구현해야 했습니다. 실제 타이머의 포맷은 00:00:00 과 같이 나와야 하는 상황이였습니다. 이와 관련해서 어떻게 구현했는지 간략하게 공유해보려고 합니다. 주의사항 해당 코드는 Vue2 + Composition API를 쓴다는 전제하에 작성되었습니다. 관련 코드를 제외한 나머지에 대한 코드는 작성하지 않습니다. Timer 구현 import { computed } from '@vue/composition-api'; const useTimer = () => { const timer = ref(0); const hour = com..
번형 스타일 제공자를 사용해 변형 스타일를 공유 많은 프로젝트 특히 대규모 프로젝트에는 컴포넌트들의 모양과 느낌에 대한 가이드 역할을 하는 디자인 시스템이 있습니다. 아래 예와 같이 Figma에서 다른 버튼 번형에 대한 디자인들을 볼 수 있습니다. 웹사이트의 주요 액션에 대한 버튼은 primary, secondary와 같이 다양한 번형을 가질수 있습니다. 또한 danger와 같이 사용자의 액션에 대해 위험을 나타내는 번형도 있습니다. 이러한 번형을 구현하는 방법은 여러가지가 있습니다. CSS 변수나 모듈을 사용해 깔끔하고 효과적으로 이를 관리할 수 있는 방법을 공유해보도록 하겠습니다. 디자인 시스템 기반으로 번형이 있는 Button, Tag 컴포넌트를 생성하는 방법 CSS 변수나 모듈을 활용해 구성 요소..
만약 Google의 PageSpeed Insights나 Google Lighthouse를 사용해봤다면, 아래와 같은 웹페이지의 성능 평가를 봤을 것이다. 어떻게 하면 웹사이트의 속도가 향상될 수 있는지에 대한 진단의 통계들을 받았을 것이다. 쉽게 수정되는 것, 사용하지 않는 파일, 느리거나 많은 공간을 차지하는 요청들을 볼 수 있어 몇몇 진단들을 꽤 유용할 수 있습니다. 메인 쓰레드 작업, 자바 스크립트 실행 시간와 같은 것을 보여주는 진단들은 문제점을 보여주지만, 실제 문제를 해결하기 위해 도움이 되지는 않습니다. 이 글은 Vue Application이 가능한 빠르게 동작할 수 있도록 몇가지 단계를 소개합니다. 단계들을 통해 무엇을 고쳐야 할지 추측하는 것이 아니라 정확히 알 수 있을 겁니다. 1. 필..
