한준호

사이트 메인 화면에서 크롬 권장 팝업을 띄우기 위해 사용자의 브라우저 정보를 알아낼 필요가 있었다. 이미 많은 게시글에서 해당 내용을 다루었고 대부분 user agent를 파싱해서 단순 비교하는 코드였다. checkBrowser() { const agent = navigator.userAgent.toUpperCase(); if (agent.indexOf("TRIDENT") >= 0) { return "IE"; } else if (agent.indexOf("FIREFOX") >= 0) { return "FIREFOX"; } else if (agent.indexOf("EDG") >= 0) { return "EDGE"; } else if (agent.indexOf("SAFARI") >= 0) { return ..

지난 작업에서 번들 파일의 용량을 parsed 기준 18MB 에서 10MB까지 줄였다. 사실 번들 파일을 줄이는 것만으로는 큰 성능 향상을 기대하기는 힘들다. 이번엔 번들 파일 최적화와 더불어 다른 작업들도 진행하였고 그 결과 번들 파일의 크기를 4.3MB까지 감소하였고 DOMContentLoad 50% 단축, 로드 완료 시간을 1/6으로 단축하였다. 작업한 것은 크게 3가지이다. 1. 필요없는 라이브러리, asset, 컴포넌트 삭제 사용하지 않는 코드들은 웹팩의 트리셰이킹을 통해 어느정도 미연에 방지가 가능하지만 트리셰이킹도 관계가 애매한 파일에 대해서는 진행하지 않는다. 언젠가는 쓰겟지 라는 생각으로 주석처리 해놓고 남겨놨던 코드들과 여러 파일들이 시간이 지나다 보니 사용하는 것 보다 사용하지 않는..

자바스크립트 파일 다운로드는 정말 간단하다. 태그의 속성인 download에 url을 지정해주면 된다. 끝!! . . . . 하지만 이렇게 다운로드를 하게 되면 파일 명이 url로 저장되어 버린다. 이 이미지의 이름은 원래 image.png 였는데, 어떻게 하면 원래의 이미지로 다운을 할 수 있을까 a 태그에 클릭 이벤트로 downloadResource를 걸어주었다. downloadResource(url, filename) { fetch(url) .then((response) => { return response.blob(); }) .then((blob) => { const blobURL = window.URL.createObjectURL(blob); const a = document.createElem..

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

spa의 가장 큰 단점은 웹에 진입할 때 번들링한 리소스를 한번에 받는 것이다. 따라서 초기 진입 속도가 느릴 수 밖에 없다. 이를 개선하기 위해 웹팩의 코드 스플리팅을 통한 chunck를 활용하여 초기 화면에 접근할 때 필요 없는 리소스를 제외하고 필요한 경우 그때 그때 받아오는 원리가 lazy loading 이다. 1. chunck 를 하기 위한 컴포넌트와 라우트를 설정한다. 2. dynamic import로 선언한다. 예를 들어 Layout 컴포넌트의 자식 컴포넌트들로 MainPage, Login 두 컴포넌트를 라우팅하려고 한다. 사실 Layout은 공통 부모 컴포넌트이기 때문에 chunck로 분리하는 의미는 없지만 예시를 위해 함. const Layout = () => import(/* webpa..

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한다는..

TDD(Test Driven Development)를 위해 Vue의 단위 테스트 모듈인 jest를 활용해볼 것이다. 구글링을 통해 각종 블로그들을 참고하여 이것저것 삽질을 많이 해봤는데, 환경설정에서 안되는 부분들이 너무 많아서 가장 쉽고 빠르게 할 수 있는 방법 두 가지를 소개한다. 1. 새로운 프로젝트 생성 vue create unit-testing-vue 이와 같이 생성하면 프로젝트에 unit-testing-vue 라는 폴더가 생성된다. package.json에서 "test" : "jest" 를 추가해주면 npm run test를 통해 폴더 안에 example.spec.js라는 테스트를 실행할 수 있다. 기본적으로 jest는 spec.js, test.js파일을 읽도록 설정되어있다. 2. 기존 프로젝..

■사용법 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처럼 트랜지션 클래스를 사용할 ..