한준호

회사 서비스 YalliYalli의 브라우저 렌더링 속도가 느려지기 시작했습니다. 브라우저 사용 중 99%의 사용자 경험은 네트워크 속도에 의존한다고 하지만 1%에 해당하는 0.0몇초의 성능 차이가 좋은 서비스와 나쁜 서비스의 차이라고 생각합니다. 프론트엔드에서 바라보는 성능 최적화는 여러 가지 관점에서 바라볼 수 있습니다. 번들링 파일 최적화, lazy loading, dynamic import, css 스프라이트, 리플로우/리페인팅 분석 ... 저는 그 중에서 1. 번들링 파일 최적화 2. lazy loading, dynamic import 을 적극 활용하였습니다. *성능 측정은 차이를 극명하게 보여주기 위해 로컬 개발 환경을 기준으로 하였습니다. 1. 번들링 파일 최적화 webpack-bundle-a..

vue router를 사용하다보면 NavigationDuplicated와 같은 에러를 핸들링 하기 위해 이와 같이 push 뒤에 catch문을 넣는 경우가 있다. * NavigationDuplicated 에러는 현재 보고있는 페이지와 같은 주소로 라우팅 처리를 할때 발생하는 에러이다. 하지만 매 컴포넌트마다 같은 예외처리 코드를 넣어주는 것은 코드 중복이 발생하므로 이를 피하기 위해 전역 라우터 함수에 예외처리를 넣어줄 수 있다. 우선 router를 초기화 하는 js파일을 들어간다. 이제 상단에 아래 코드를 삽입해준다. Vue.use(Router); const originalPush = Router.prototype.push;// 1 Router.prototype.push = function push(l..

vue에서 audio 파일을 재생하는 것은 아주 간단하다. 1. vuetify에서 제공하는 v-btn 컴포넌트를 사용하였지만 div에 click event를 넣어줘서 해도 상관 없다. 오디오 소스를 입력하고 자바스크립트로 동작시켜주면 버튼을 눌렀을 때 음성이 나온다. pause()를 통해 정지시킬 수도 있다. play(sound) { var audio = new Audio(sound); audio.play(); }, 2. 라이브러리를 활용하면 조금 더 사용성 있는 화면을 만들 수 있다. github.com/wilsonwu/vuetify-audio?ref=madewithvuejs.com wilsonwu/vuetify-audio A Vue audio player base on Vuetify UI framew..

다음과 같은 태그를 갖는 컴포넌트에 대해 jest를 통해 유닛 테스트를 진행하려 한다. {{ msg }} 테스트 코드 v-if로 $vuetify.breakpoint.mobile이 사용되고 있는 컴포넌트에 대해 jest로 테스트를 진행하면 다음과 같이 에러가 발생한다. 대충 $vuetify의 mobile 인스턴스를 인식할 수 없다는 소리. 이유는 $vuetify인스턴스 변수는 mockable하지 않기 때문이다. 그래서오직 컴포넌트만이 shallowMount에 stubbed되는데, $vuetify.breakpoint는 Vue Test Utils에 stubbed되지 않기 때문에 다음과 같이 변경해준다. 쉽게 말하면 Vue.use(Vuetify)는 과 같은 v태그들을 인식할 수 있도록 전역으로 import한다는..

■vue로 개발을 하면서 vuetify를 사용하는 사람들을 위해 jest에서도 vuetify를 사용할 수 있는 방법이 있는데 다음과 같다. jest.config.js와 jest.setup.js파일을 생성한다. //jest.setup.js import Vue from 'vue' import Vuetify from 'vuetify' Vue.use(Vuetify) //jest.config.js module.exports = { moduleFileExtensions: ['js', 'jsx', 'json', 'vue'], transform: { '^.+\\.vue$': 'vue-jest', '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-t..

■사용법 vue 에서 transition기능을 컴포넌트로 제공한다. 다음은 Vue 공식 문서에 나와있는 8가지 transition 클래스에 대한 내용이다. 트랜지션은 name속성을 갖고 있는데, css의 선택자와 같은 역할을 한다. 각 클래스들의 관계를 정리하면 아래와 같다. 일반적으로 v-enter, v-leave-to 를 함께 사용하고, v-enter-to, v-leave를 함께 사용한다. {{ "Pit-A-Pat-Korean" }} — {{ $t("yalliyalli.pap.common.no13") }} — {{ "Pit-A-Pat-Korean" }} transition을 적용하고 싶은 태그를 transition 태그로 감싸고 name을 설정해 주면 아래와 같이 css처럼 트랜지션 클래스를 사용할 ..

■DOM(Document Object Model) - 웹 페이지를 객체로 표현하는 모델. ■Dom은 어떻게 움직일까 1. 브라우저는 HTML Parser를 통해 HTML 태그를 파싱하여 돔 트리 를 구성한다. 또한 브라우저는 스타일 시트에서 CSS Parser를 통해 Css를 파싱하여 스타일 규칙 을 만들어낸다. 2. 돔 트리와 스타일 규칙이 합쳐져 렌더 트리 를 만들어낸다. 그런데 DOM에는 수 천개의 노드들이 존재하고 이에 대한 수정을 필요로 한다면? 브라우저의 속도가 현저히 낮아질 것이다. 현재 웹 개발은 DOM의 변경에 맞추어 렌더링도 여러번 하는 구조이다. 즉 DOM에 변경사항이 생겨서 DOM을 조작해야 한다면 모든 과정이 비용이다. 이런 이슈를 해결하기 위해 가상 DOM이 등장했다. ■가상 D..