gomstory

채팅 서비스를 개발하며 마주한 가장 큰 난관이미지가 많아도 너무 많다는 것이다게다가 nas 스펙까지 낮아지니 로딩이 귀신같이 느려지기 시작했다.이미지 로딩 최적화를 위해 1. 이미지 태그 lazy-loading 적용 (vue-lazyload)like Skeleton UI 처럼.. 채팅 영역도 하면 좋을텐데 우선 급한 불부터 2. 정적 이미지 파일 png, jpeg -> webp로 extension 변경반정도 줄었다 (13.92kB -> 7.45kB) 하지만 근본적인 문제는 해결되지 않았다.이미지 캐싱을 효과적으로 할 수 있는 방법에 대해 알아보았다.그러던중 pwa가 눈에 들어왔다. PWA란?PWA(Progressive Web App)는 웹 기술을 사용해 앱처럼 동작하는 웹 애플리케이션을 말한다. 즉,..

web push를 구현하다가 store에서 router를 이동해야 할 일이 생겼다.평소처럼 import { useRouter } from 'vue-router'const router = useRouter()했는데왜..구글링 시작 https://stackoverflow.com/questions/70681667/cant-use-vue-router-and-pinia-inside-a-single-store Can't use vue-router and pinia inside a single storeI am using pinia and vue-router 4.x ,but i am having a problem using both of them in a store. each works independently ,b..

회사에서 하는 프로젝트 중 처음으로 프론트엔드만 맡게 되었다.항상 하나의 기능에 대해 둘 다 만들어서 Mocking 라이브러리에 대한 필요성을 크게 못느끼다가(늦어도 내탓, 오류나도 내탓)이번 기회에 효율적으로 개발을 하기위해 찾아보았다.  Mock Service WorkerAPI mocking library for browser and Node.jsmswjs.ioMSW 발견이미 여러회사(카카오, 올리브영, 현차 등) 테크블로그에 올라와있길래 바로 적용해봤다. npm install msw@latest --save-dev npm install 후 src└── mocks └── handlers └── index.js └── user.js └── browser.jssrc 밑에 파일을 추가한다. br..

회사에서 Vue2.x 프로젝트를 Vue3(3.3.4)로 마이그레이션하는 작업을 진행하고있다.Mixin을 남발하는 프로젝트가 하나 있어서 Composition API로 전환하기 위해 테스트를 해봤다. https://vuejs.org/api/composition-api-setup.html Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org 대충 구글링하고 냅다 npm install @vue/composition-api --save했는데 오류남 치기 전에 생각하자. 기존 Mixin 코드 mixin test let mixinTest = { watch:{ testData : 'watchTest' }, methods:..