프론트엔드 개발을 할 때 우리는 많은 라이브러리를 사용하게 됩니다. 저 같은 경우는 요즘 Axios와 React-Query는 거의 항상 사용하는 것 같아요. React는 기본..! 그러다 최근 이런 생각이 들었습니다. "이런 라이브러리들의 새 버전을 프로젝트에 적용하게 되면 어떻게 될까?" 특수한 경우에는 해당 라이브러리에 의존하는 많은 부분의 코드를 변경해야 할 수도 있지 않을까요? 물론, 외부 요소에 하나도 의존을 하지 않고 애플리케이션을 만들 수는 없습니다. 예를 들어 브라우저에서 제공하는 기능을 이용해야 한다는 사실은 무시할 수 없으니까요. 하지만 외부 요소에 직접적으로 의존하는 코드를 최소화하고, 전체적인 제어권을 우리의 애플리케이션 안으로 가져올 수는 있습니다. Axios, React-Quer..
You'll Never Walk Alone.
테크/프론트엔드
최근 프로젝트를 하며 사용자가 업로드한 이미지를 저장하기 위해 AWS S3 클라우드 스토리지를 사용했습니다. 프리티어를 이용했기에 제한된 용량을 효율적으로 사용하고 싶었고, 이에 따라 스토리지 내 불필요한 이미지는 저장되지 않도록 노력했습니다. 이번 글에서는 가비지 컬렉션 Hook 구현으로 AWS S3 사용 용량을 감축한 오버엔지니어링 경험을 공유합니다. 문제 아래 이미지는 현재 제가 개발한 독후감 작성 페이지입니다. '[선택] 추가 내용 작성' 부문에 사용자는 독후감 관련 내용을 작성할 수 있고 로컬 이미지를 업로드할 수 있습니다. 마치 블로그 글 작성과 같이 말이죠. 사용자가 로컬 이미지를 업로드하면, 즉시 AWS S3에 업로드하고 해당 URL을 반환받아 img 태그의 src 속성에 삽입합니다. 이때..
최근 웹 개발 프로젝트 하나를 마쳤습니다 🙌 (Fitory GitHub 바로가기) 짧은 시간 동안 최선을 다한 만큼 완결성 높은 결과물이 나온 것 같아 만족스럽습니다. 해당 프로젝트에서 본인은 프론트엔드 개발을 담당하여 수행했으며, 그 과정에서 프론트엔드 성능을 개선한 경험을 공유해보려 합니다. 성능 개선 경험들 중 이번 글에서는 번들 최적화에 대해서 다루겠습니다. 문제 발생 모바일 기기 환경의 Lighthouse를 찍어봤습니다. 성능 측정 항목 대부분의 시간이 오래 걸리는 것이 보이네요.. 해당 결과를 확인 후, 사용자가 빠르게 콘텐츠를 인식할 수 있도록 성능 개선의 필요성을 느끼게 되었습니다. 또 이러한 지표를 보고 성격 상 절대 그냥 지나칠 수 없습니다..😅 그래서 우선적으로 한 것은 바로 Bund..
