Sharp & Docker 이슈를 통한 이미지 최적화기(feat. Next.js)

개요기존 홈페이지에서 페이지 로드 시 높은 화소 이미지로 인한 느린 랜딩 속도로 인해 UX 개선이 절실히 필요하였다. 차선책으로 이미지 압축을 통해 약간의 개선을 하였지만, 그래도 높은 용량의 이미지 처리와 떨어진 퀄리티로 인해 디자이너, 개발자의 만족도가 낮은 상태였고, 퀄리티를 개선하는 방향을 찾다 Next.js(v12.2)의 이미지 최적화 서버를 활용 가능하다고 판단하여 적용하게 되었다.  사실 Next.js의 next/image 컴포넌트는 이미 사용 중이었으나, 다양한 이유로 인해 운영환경에서 최적화가 된 채로 배포가 되지 않고 있었다. 다른 사람들은 그냥 컴포넌트만 쓰면 알아서 optimize가 된다는데…. 왜 우리만…!? 보안 이슈, yarn-berry에서의 Sharp 이슈와 Low 버전의 C..

• format_list_bulleted 회사/개선
• · 2024. 1. 19.
• textsms

📦 패키지 최적화를 통해 런타임 성능 향상 시키기

개요처음 시작은 도커 최적화에서 시작되었다.  사내 프로젝트 진행 중 yarn-berry 마이그레이션 후 CI/CD를 진행하는 도중. 회사에서 사용되는 gitlab의 저버전 이슈로 인해 ci 중 캐싱이 되지 않고, 필요 이상의 .yarn 내부의 패키지와 dev module들이 포함되어 올라가는 이슈가 발생하여 빌드 최적화에 관심을 두게 되었다.그 후 운영 단계에서 최적화는 반드시 거쳐 가야 하는 순번이라 생각했고, 이번 기회에 번들링 최적화를 진행하게 되었다. Bundle Size 최적화What is Bundle?여러 개의 파일을 묶어서 처리되는 의미. Javascript 파일들을 묶어서 생성되고, 웹 애플리케이션에서 필요한 리소스를 단일 파일로 묶어서 관리하고 전달하는데 사용된다. 웹 애플리케이션에선 ..

• format_list_bulleted 회사/개선
• · 2023. 12. 1.
• textsms