전체 글125 setTimeout과 setInterval setTimeout과 setInterval을 활용하면 일정 시간이 지난 후 원하는 함수를 실행할 수 있다. 프로젝트에서 이러한 호출 스케쥴링(scheduling a call)을 사용하고 있는데 제대로 이해하지 못하고 사용하고 있는 거 같아 이번 기회에 공부해보려고 한다. setTimeout setTimeout의 경우 일정 시간이 지난 후 원하는 함수를 실행한다. 원하는 함수를 한 번 실행한 후 종료된다. let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...) 첫 번째 매개변수인 func|code는 일정 시간이 지난 후 실행될 함수이다. 두 번째 매개변수인 delay는 실행 전 대기 시간으로 밀리초 단위를 작성하며, 기본값은 0이다. 마지막 매.. 2023. 11. 2. 4, 5차 데모데이 피드백과 반영 4차 데모데이는 서비스에 대해 전반적으로 소개하는 자리였다. 따라서 크게 요구사항이나 피드백은 없었다. 개인적으로 코치님한테 받은 피드백이 있어 5차 데모데이 때 어떻게 반영하려 노력했는지 함께 적어보려 한다. 4차 데모데이 4차 데모데이는 같은 캠퍼스를 사용하는 팀의 서비스를 소개하는 자리였다. 그전까지는 같은 그룹에 속해있는 팀의 발표만 주로 봤는데 이번에는 한 장소에서 진행해 어떤 서비스를 개발하고 운영하고 있는지 볼 수 있었다. 그리고 각 자리에서 부스를 운영해 자신의 서비스를 개별적으로 홍보하는 시간을 보냈다. 우리 서비스의 경우 역시 편의점 서비스기에 편의점에서 상품을 사 와 리뷰 작성 시 뽑기를 통해 상품을 주는 이벤트를 진행했다. 부스에는 방명록이 있는데 많은 분들이 이렇게 후기를 남기고 .. 2023. 11. 1. 좌충우돌 이미지 압축 구현 일대기 '펀잇'의 경우 리뷰나 꿀조합 등 이미지가 많다. 따라서 이미지의 용량 제한을 하지 않으면 서버에 부하가 가게 된다. 서버에서 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. 이전 1 2 3 4 5 ··· 21 다음
