메로메로

오늘은 cloudy를 개발하면서 작성해 두었던 노션을 바탕으로 이미지 최적화 시도 경험을 작성해보려고 한다! 우선 당연히 이미지는 img 태그를 사용했었다. 와 근데 렌더링 속도가 너무 느렸다. 진짜 농담이 아니라 드드드득.. 한 2초 정도 걸렸던 것 같다.  그래서 lighthouse를 통해서 분석해 봤는데 두둥,, 저 빨간색 글씨인 Largest Contentful Paint를 보면 약 8.3초가 걸린다고 나와있다. 너무 느리게 측정된 이유는 public안에 있는 이미지를 가져와서 그렇고 cdn이 설정된 이미지를 가져왔을 때는 2.4초로 측정되었다. 그래도 빨간색 글씨로 표시되었다! LCP(Largest Contentful Paint)?로딩 성능을 측정하는 지표로서, 페이지가 처음으로 로드를 시작한..

프로젝트를 할 때 항상 프론트는 빌드 속도와 배포 속도가 느렸다. 16초 걸릴 때도 있었다... ㄷㄷ이번 프로젝트를 할 때 한주 팀장님이 pnpm에 대해 알려주어서 한번 적용해 보기로 해봤다! pnpm이 뭔지 설명하기에 앞서패키지 매니저?패키지 매니저란 개발에 필요한 다양한 패키지를 설치하고 또 수정하고 업데이트하는 등의 작업을 편리하게 도와주는 도구다. 프로젝트에 필요한 외부 라이브러리, 모듈, 플러그인 등을 손쉽게 설치하고 관리하는 역할을 한다. 즉, 의존성 관리 도구라고 생각하면 된다.대표적으로 지금까지 내가 사용해 왔던 npm, yarn 등이 있다. pnpm 역시 패키지 매니저이다!!   pnpm?pnpm은 npm의 의존성 문제를 해결한 패키지 매니저다. npm과 달리 의존성을 공유하여 저장 공간..