본문 바로가기

front-end2

[프론트엔드]Image Lazy Load 디렉티브 구현 & 사용법 안녕하세요! 빅픽처인터렉티브(주)에서 프론트엔드 개발자로 재직 중인 김종완입니다. 이번 글에서는 이미지를 브라우저 뷰포트에 들어왔을때 lazy load 할 수 있게 해 주도록 만든 imglazyLoad 디렉티브에 대한 구현 방법과 사용 설명에 대해 간략히 적어보려고 합니다. 이번에 작성하는 글은 다른 프론트엔드 팀원분들도 아주 쉽게 이해를 할 수 있을 거라 판단하여 정말 간략히 만 설명드리고자 하여 글이 조금 짧을 수도 있습니다 ^^;; 구현 배경 페이지가 나타날때 스크롤이 어떻든 보통 페이지 전체를 랜더링을 하게 되며 이미지 또한 전부 가져오게 됩니다. 하지만 스크롤이 긴 페이지의 경우 즉, 리스트가 굉장히 많은 페이지의 경우 그리고 그 리스트에 용량이 클 수도 있는 이미지들이 섞여 있다면 한 번에 많.. 2022. 4. 29.
[프론트엔드] React 뒤로가기 시 상태값 & 스크롤 위치 유지 안녕하세요! 빅픽처인터렉티브(주)에서 프론트엔드 개발자로 근무하고 있는 김종완 개발자입니다! 이번에 개인화앱 TF에 배정이 되어 재밌게 새로운 서비스를 만들어가고 있는데요. 사내에 많은 프론트엔드 개발자분들이 React를 활용하여 프로젝트를 진행하고 싶다는 Needs가 있다고 판단하여 이번에 들어가는 개인화앱은 React를 활용하여 모바일 웹뿐만 아니라 안드로이드도 하이브리드 앱으로 개발을 진행하기로 했습니다. 이전에도 많은 하이브리드앱을 개발해본 경험이 있는데요. Vue 프레임웍을 활용해서 하이브리드 앱을 개발해본 경험은 다수 존재하는데 React 라이브러리를 활용해서 하이브리드 앱을 개발해본 경험은 별로 없는 거 같습니다. 하이브리드 앱뿐만 아니라 커머스 같은 서비스를 개발하면서 제가 제일 많이 고민.. 2022. 4. 5.