한준호

회사 서비스 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..