본문 바로가기

VUE3

[프론트엔드]Image Lazy Load 디렉티브 구현 & 사용법 안녕하세요! 빅픽처인터렉티브(주)에서 프론트엔드 개발자로 재직 중인 김종완입니다. 이번 글에서는 이미지를 브라우저 뷰포트에 들어왔을때 lazy load 할 수 있게 해 주도록 만든 imglazyLoad 디렉티브에 대한 구현 방법과 사용 설명에 대해 간략히 적어보려고 합니다. 이번에 작성하는 글은 다른 프론트엔드 팀원분들도 아주 쉽게 이해를 할 수 있을 거라 판단하여 정말 간략히 만 설명드리고자 하여 글이 조금 짧을 수도 있습니다 ^^;; 구현 배경 페이지가 나타날때 스크롤이 어떻든 보통 페이지 전체를 랜더링을 하게 되며 이미지 또한 전부 가져오게 됩니다. 하지만 스크롤이 긴 페이지의 경우 즉, 리스트가 굉장히 많은 페이지의 경우 그리고 그 리스트에 용량이 클 수도 있는 이미지들이 섞여 있다면 한 번에 많.. 2022. 4. 29.
[프론트엔드] ClientOnly 컴포넌드 개발 여행 📌 목차 서론 Vue SSR의 기본적인 설명 코드 설명 결론 참고자료 📌 서론 안녕하세요. 프론트엔드 개발자로 일하는 최종선이라고 합니다. 저희 회사는 Nuxt를 사용하는 대신 Vue를 자체 커스터마이징을 하여 SSR을 구현하여 사용하고 있습니다. 따라서 필요에 따라 컴포넌트 전체의 랜더링 시점을 결정하는 Nuxt에서의 컴포넌트를 따로 제작하게 되었습니다. 그에 따라 이 글에서는 사용방법 및 구현 방식을 설명하고자 합니다. 그럼 재밌게 읽어주세요~! 🙇🏻‍♂️ 💡 Nuxt에서 client-only 컴포넌트란? ClientOnly 컴포넌트는 자식요소들을 client-side에서 랜더링 시킵니다. 📌 Vue SSR의 기본적인 설명 일단 해당 컴포넌트에 대해서 조금 더 깊게 이해를 하자면 먼저 customiz.. 2022. 1. 12.
[프론트엔드] Vue build time 최적화 해보기 📌 목차 서론 usedExport 나라 탐방 devtool 무기 획득 webpack-bundle-analyzer 세계 지도 획득 Element-UI 나라와의 전쟁 그리고 패배… Lottie.js 나라와의 전쟁 결론 📌 서론 안녕하세요. 빅픽처에서 종선버를 맡고 있는 최종선이라고 합니다. 🙇 요즘 걸리버 여행기를 너무 재밌게 읽고 있어서 main 프로젝트에서 build 최적화를 시키는데 기승전결의 형식으로 재밌게 풀어나가보려고 합니다. 그럼 재밌게 읽어주세요! (피드백도 너무나 환영합니다. ) 그럼 출발 ! 🚀 📌 usedExport 나라 탐방 💡 사용되지 않는 코드들이 build가 되는 모습을 보았고 나는 그걸 없애고 싶었습니다. 오랜만에 첫 출근을 하여 들뜬 마음으로 build가 된 main.js를 읽.. 2021. 7. 12.