들어가며 6주간에 걸친 프로젝트가 끝이 났습니다. 프로젝트 도중 팀원의 부재로 프로젝트의 결과물에 아쉬움이 남지 않기 위해 더욱 몰입했던 것 같습니다. 그러기 위해 성능과 협업에서 노력했던 기록들을 남겨보려고 합니다. 좋았던 점(Like) 유저 친화적 페이지(유저 유입 파악 & 유저 피드백 반영) 프로젝트의 마지막 주차에는 유저피드백 수렴을 위해 한 주 동안 세심한 작업을 진행했습니다. 이 과정에서 백엔드 팀과의 논의를 통해 구글 애널리틱스 도입을 결정하게 되었습니다. 그러나 처음에는 몇 가지 시행착오가 있었습니다. 특히, 페이지들의 title이 부족하여 유입을 추적하기 어려웠습니다. 이 어려움을 극복하기 위해, React 프로젝트에서 페이지의 meta 태그를 쉽게 커스터마이징할 수 있는 react-he..
7월(23일)부터 달려온 항해의 여정이 11월 22일부로 끝마쳤습니다. 해당 게시글을 '항해 부트캠프 주특기 : React' 를 통해 제가 경험한 내용을 공유해보고자 합니다. 항해를 하기 전의 나 (호텔리어가 될 뻔한 나) 항해를 시작하기 전, 저는 관광학과를 졸업한 취준생이었습니다. 직무의 특성상, 실무에 대한 경험이 중요한 서비스 업무였기에 2019년 '부산롯데호텔' 과 '부산테마여행사' 에 호텔리어와 가이드로 학업과 업무를 병행했습니다. 하지만, 모두가 어려움을 겪었던 코로나가 찾아와 짧은 경력을 아쉬워하며 2020년 02월에 '권고사직' 으로 퇴사하게 되었습니다. 1년이면, 취업할 때쯤 괜찮아지겠거니 싶었던 코로나는 2021년 졸업하고서도 코로나 변이 바이러스로 한참을 더 괴롭혔죠. 이 참에 "취..
들어가며 이번 게시글에서는 '내일은 최저가' 프로젝트를 진행하면서 처음 페이지에서 사용하지 않는 불필요한 리소스를 줄임으로 초기 렌더링 시간을 감소시키는 code-splitting, lazy-loading 에 대해 알아보려고 합니다. code-splitting 을 해야만 하는 이유 '내일은 최저가' 프로젝트를 진행하면서 bundle-analyzer 라이브러리를 통해 번들의 크기가 커 초기 로딩시간이 오래 걸려 사용자 경험을 향상시키기 위해 번들의 사이즈를 줄일 필요가 있다고 판단해 lazy 와 suspense 를 이용해 코드 스플리팅을 진행하기로 했습니다. code-splitting이란? 코드 스플리팅은 애플리케이션의 코드를 여러 청크 또는 번들로 나누는 기술을 말합니다. 기본적으로 모든 JavaScri..
들어가며(무한스크롤을 해야만 한 이유) '내일은 최저가' 프로젝트의 메인페이지와 검색결과 페이지에서 유저는 필터링(카테고리, 할인율, 가격순, 품절상품) 또는 검색으로 원하는 상품들을 조회할 수 있습니다. 그치만, 한 가지 문제는 1,000 개 이상의 데이터를 불러오는 데 초기 로딩 시간이 오래 걸리는 것이 문제였습니다. 이를 해결하기 위해 모든 데이터를 한 번에 받아오는 것에서 유저가 스크롤 할 때마다 새로운 데이터를 가져오는 방법으로 '무한스크롤' 기능을 선택했습니다. useInfiniteQuery 무한 스크롤(또는 인피니트 스크롤)은 웹 페이지에서 유저가 스크롤을 끝까지 내릴 때마다 새로운 콘텐츠가 동적으로 로드되어 화면에 표시되는 기술입니다. 이를 구현하는 데 사용되는 도구 중 하나로 'useIn..
들어가며 10/04 부터 시작된 실전 프로젝트가 어제 10/28, MVP 중간보고를 가졌습니다. 우선, 제가 준비한 프로젝트에 대해 간략하게 말씀드리겠습니다. 쿠팡에서 애플 상품을 스크래핑해 와 상품의 가격정보(기존가격, 할인된 현재가격, 할인율 등)와 최근 일주일 가격 동향을 알려주고, 상품을 알림설정한다면, 해당상품의 최근 가격동향을 파악해 최저가로 떨어지면, 카카오톡 메신저로 알림을 보내는 기능이 프로젝트의 주요 기능이라고 할 수 있습니다. 또, 매거진 기능을 추가해 CRUD 기능을 구현해보고, 매거진에 관리자 권한을 추가해 일반 유저들에겐 수정, 삭제 기능에 접근하지 못하도록 구현해보았습니다. 이번 글은 중간보고에서 담당 멘토님에게 들었던 주요 피드백과 이에 대한 저의 답변에 대해 기록해보겠습니다..
