펀잇14 좌충우돌 이미지 압축 구현 일대기 '펀잇'의 경우 리뷰나 꿀조합 등 이미지가 많다. 따라서 이미지의 용량 제한을 하지 않으면 서버에 부하가 가게 된다. 서버에서 10MB의 이미지를 제한하고 있지만 이게 궁극적인 해결책은 아니다. 만약 리뷰 1000개가 모두 10MB의 사진을 넣었다고 가정해 보자. 서버 부하가 심해질 뿐만 아니라, 뷰 측면에서도 스크롤 시 버벅거림이 심해 사용성을 떨어트릴 것이다. 압축 라이브러리 도입 따라서 우리 프론트 팀은 'browser-image-compression' 라이브러리를 통해 이미지 압축을 실행하기로 했다. 해당 라이브러리를 통해 1MB로 압축을 시키고, 프론트 단에서는 5MB의 이미지 업로드를 제한했다. 주로 상품 사진이 업로드될 것을 감안했을 때, 고화질 사진을 필요로 하는 경우는 드물 것이라 판단해.. 2023. 10. 28. 3차 데모데이 피드백과 반영 3차 데모데이를 진행했다. 저번 데모데이와 마찬가지로 진행상황과 앞으로의 계획, 그리고 주어진 요구사항에 대해 발표하였다. 공통 진행 저번 피드백에 따라 백엔드와 프론트엔드의 싱크를 맞추기 위해 노력했다. 각 기능을 정리하고 어느 데모데이까지 마칠 것인지 작성하고 백엔드와 프론트엔드 나누어 각자 진행 상황을 표시하였다. 둘 다 한 기능에 대한 개발이 완료가 되면 이슈를 열고 확인하는 방식으로 진행하였다. 리뷰 작성과 이미지 업로드 기능 구현 사용자들이 편의점 리뷰를 작성하는 기능을 구현하면서 이미지 업로드를 할 수 있도록 했다. FormData를 통해 EC2로 직접 이미지를 보낼 수 있도록 하였다. 이 과정에서 이미지는 바이너리 형식, 다른 부분은 json 형식이라 이를 한 번에 묶어 보내는 과정에서 많.. 2023. 10. 19. [🐛트러블슈팅] 토스트를 구웠는데 먹을 수 없다구요?!?! dialog에서 토스트가 가려져요.... '펀잇'에서 리뷰를 작성할 때 각종 알람이 뜬다. 예를 들어 사용자가 이미지를 등록한다고 생각해 보자. 5MB 이하의 이미지만 받고 있다고 할 때 그보다 큰 용량의 이미지가 들어오면 알림을 띄운다. 그동안은 alert를 통해 알림을 주고 있었는데 토스트가 완성되면서 이를 갈아 끼우기로 했다. 그런데 토스트가 보이지 않는다. 처음에 렌더링 자체가 되지 않는 오류인가 했는데 개발자 도구의 Layers 탭을 켜서 보니 (빨간색 주목) dialog 뒤에 숨겨져 있는 것을 볼 수 있다. 토스트의 z-index가 dialog의 z-index보다 훨씬 높은데도 가려진다. (important까지 줘봤다...) 왜 이런 문제가 일어났는지 해결 과정을 따라가 보자. 1. 쌓임 맥락.. 2023. 10. 19. 펀잇을 성능 개선해보자 펀잇의 light house 점수이다. 3G Fast 모바일 환경 기준 46점에 LCP 11초, 충격적인 결과이다. 펀잇의 경우 초기 메인 화면에 api 통신이 많고, 이미지가 많아 로딩에 많은 속도가 걸린다. 특히 약 7000개의 데이터를 불러오는 상품 목록의 경우 무한 스크롤을 이용하고 있는데 이미지가 늦게 떠 사용성이 떨어진다. 이를 개선해 보도록 하자. 성능 관리 대상 설정 성능 개선에 있어 기능적으로 가장 핵심이 되는 요구사항을 정해보자. 리뷰 및 꿀조합 작성 (이미지 업로드 부분) 이미지 로딩 크게 두 가지로 정의할 수 있다. 가장 큰 카테고리로보자면 '이미지'이다. 성능 예산 세우기 어떤 지표들(metrics)을 사용하기로 했고, 선정한 이유 정량 기반 지표 (quantity based me.. 2023. 10. 15. 2차 데모데이 피드백과 반영 2차 데모데이를 진행했다. 본격적인 개발에 들어간 기간이기 때문에 백엔드/프론트엔드 나누어 현재 진행 상황에 대해 발표했다. Webpack을 사용한 프로젝트 환경 세팅 CRA를 사용하지 않고 Webpack을 사용해 프로젝트 환경 세팅을 했다. CRA를 사용하면 우리가 사용하지 않는 기능까지 딸려오기 때문에 우리의 입맛에 맞게 설치하고 구성했다. 미리 Webpack을 사용해하는 방법을 연습해 보고 각자의 방법을 조합해 만들었다. 자세한 내용은 CRA 없이 리액트 세팅하기 참조,,, 디자인 시스템 구축 공통 컴포넌트를 따로 배포하여 디자인 시스템을 구축하였다. chakra를 참고하여 만들었고, 당장 필요한 컴포넌트부터 만들고 본 프로젝트에 붙이는 식으로 작업하였다. 이 디자인 시스템에 대해서는 할 말이 많은.. 2023. 10. 14. 1차 데모데이 피드백과 반영 1차 데모데이를 진행했다. 전체적인 프로젝트에 대한 설명과 진행했던 내용, 앞으로 진행할 내용에 대해 발표했다. 프로젝트 설명 프로젝트 배경 어떻게 프로젝트가 탄생하게 되었는지, 왜 필요한지에 대해 정리했다. 현재 외식 물가가 비싸지면서 많은 대학생, 직장인들이 편의점 이용이 많아졌다는 것을 도표로 보여주고 편의점 리뷰는 여러 플랫폼에 나뉘어 있어 한눈에 보기 어렵다는 것을 어필했다. 따라서, 편의점을 이용하는 사람들이 리뷰를 편하게 작성하고 확인할 수 있는 것을 목표로 삼았다. 페르소나 우리 편의점 서비스를 사용할 것 같은 이용자를 크게 2가지로 나누어 정의했다. 편의점 서비스를 통해 새로운 음식에 도전하고 싶은 '눈팅러'와 정보를 올리며 사람들의 반응을 즐기는 '편진러'로 나누어 어떤 사용자들이 관심.. 2023. 8. 30. 이전 1 2 3 다음
