들어가며 이번 게시글에서는 '내일은 최저가' 프로젝트를 진행하면서 처음 페이지에서 사용하지 않는 불필요한 리소스를 줄임으로 초기 렌더링 시간을 감소시키는 code-splitting, lazy-loading 에 대해 알아보려고 합니다. code-splitting 을 해야만 하는 이유 '내일은 최저가' 프로젝트를 진행하면서 bundle-analyzer 라이브러리를 통해 번들의 크기가 커 초기 로딩시간이 오래 걸려 사용자 경험을 향상시키기 위해 번들의 사이즈를 줄일 필요가 있다고 판단해 lazy 와 suspense 를 이용해 코드 스플리팅을 진행하기로 했습니다. code-splitting이란? 코드 스플리팅은 애플리케이션의 코드를 여러 청크 또는 번들로 나누는 기술을 말합니다. 기본적으로 모든 JavaScri..
들어가며(무한스크롤을 해야만 한 이유) '내일은 최저가' 프로젝트의 메인페이지와 검색결과 페이지에서 유저는 필터링(카테고리, 할인율, 가격순, 품절상품) 또는 검색으로 원하는 상품들을 조회할 수 있습니다. 그치만, 한 가지 문제는 1,000 개 이상의 데이터를 불러오는 데 초기 로딩 시간이 오래 걸리는 것이 문제였습니다. 이를 해결하기 위해 모든 데이터를 한 번에 받아오는 것에서 유저가 스크롤 할 때마다 새로운 데이터를 가져오는 방법으로 '무한스크롤' 기능을 선택했습니다. useInfiniteQuery 무한 스크롤(또는 인피니트 스크롤)은 웹 페이지에서 유저가 스크롤을 끝까지 내릴 때마다 새로운 콘텐츠가 동적으로 로드되어 화면에 표시되는 기술입니다. 이를 구현하는 데 사용되는 도구 중 하나로 'useIn..
들어가며 10/04 부터 시작된 실전 프로젝트가 어제 10/28, MVP 중간보고를 가졌습니다. 우선, 제가 준비한 프로젝트에 대해 간략하게 말씀드리겠습니다. 쿠팡에서 애플 상품을 스크래핑해 와 상품의 가격정보(기존가격, 할인된 현재가격, 할인율 등)와 최근 일주일 가격 동향을 알려주고, 상품을 알림설정한다면, 해당상품의 최근 가격동향을 파악해 최저가로 떨어지면, 카카오톡 메신저로 알림을 보내는 기능이 프로젝트의 주요 기능이라고 할 수 있습니다. 또, 매거진 기능을 추가해 CRUD 기능을 구현해보고, 매거진에 관리자 권한을 추가해 일반 유저들에겐 수정, 삭제 기능에 접근하지 못하도록 구현해보았습니다. 이번 글은 중간보고에서 담당 멘토님에게 들었던 주요 피드백과 이에 대한 저의 답변에 대해 기록해보겠습니다..
Carousel 이란? 캐러셀은 슬라이드쇼와 같은 방식으로 콘텐츠를 표시하는 UX 구성 요소입니다. 버튼을 눌러 옆으로 사진이 넘어가는 모션이 마치 회전목마와 비슷하다고해서 붙여진 이름입니다. 캐러셀은 용도에 따라 자동재생되게 하거나, 사용자가 수동으로 넘기도록 구현할 수도 있습니다. 네이버 홈페이지 많은 사람들이 이용하는 라이브러리 react-slick 이라는 라이브러리가 가장 대중적으로 사용되는 캐러셀 라이브러리입니다. 접근성이 쉽다는 것이 해당 라이브러리의 장점이라고 할 수 있습니다. 그만큼 커스텀도 꽤 자유도가 높은 편이라고 생각이 들었습니다. 사실 직접 사용해보고서 캐러셀을 구현해보려고 했지만, 그러기엔 프로젝트의 기간이 짧았던 터라 해당 기능을 처음 보고서 어떤 부분이 중요한 부분이고, 이 점..
들어가며 '주특기 주차 프로젝트'(09/14 ~ 09/27) 와 저번주 목요일(10/12)부터 진행되었던 실전 프로젝트를 진행하면서 시간여유와 심적으로 여유가 없었기 때문에 TIL, WIL 을 작성하지 못했습니다.😵 실제로 프로젝트를 진행하면서 만나는 수많은 오류들을 키워드와 참고했던 자료들을 모아두었지만, 블로그를 작성하는 것까진 매우 힘든 일이라는 걸 알았습니다. 동시에 매일 작성하시는 분들이 정말 대단한 것도 느꼈죠. 각설하고, 오늘은 실전 프로젝트에서 사용중인 서버 통신 라이브러리, 'React-Query' 에 알아보려고 합니다. 리액트 쿼리는 실제로 그 사용법이 쉬워 접근하기 좋아 처음에 사용할 때에는 큰 문제가 없지만, 그만큼 기본 default 로 제공되는 기능들이 많이 내장되어 있기 때문에..
