Next.js3 [테스트 코드] 00(Ep). 테스트 코드는 왜 작성할까? 프론트엔드 테스트 코드는 왜 작성해야할까?백엔드고 프론트엔드고 테스트 코드의 중요성은 지금까지 귀에 피가나도록 들어왔다.하지만 내가 직접 테스트 코드를 작성해본적은 단 한번도 없는걸?그래서 생각해보았다.내가 프론트엔드 테스트 코드를 작성해보고 싶은 이유는?프론트엔드 테스트 코드를 작성한다면 어떤 결과를 만들 수 있을까?내가 테스트 코드를 작성하고싶었던 이유- 지속가능한 테스트 자동화를 구축하고 싶어서- 지속적인 코드 검증을 통해 프로젝트 코드의 질을 높이고 싶어서- 앞으로도 안전한 코드를 꾸준히 작성하고 싶어서올바른 테스트 코드를 작성하면 좋은점은?- 사전에 결함을 찾아내고 수정할 수 있다!- 특정 모듈(React에서는 Component)이 사양에 잘 동작하는가 확인할 수 있다!- 좋은 설계에 대한 사.. 2024. 11. 25. [이미지 최적화] 02. Next/Image의 한계점, 그에 대한 대책 오늘 제가 글쓰려고 하는 주제는 바로Vercel 무료플랜 사용 시 Next/Image의 한계점과 그에 대한 대책입니다.사용자가 없거나 작은 프로젝트의 경우에는 그대로 Next/Image를 써도 무방하니글을 읽어보고 비슷한 경험에 해당되는 사람은 저와 같은 고민을 해보는것도 좋을 것 같아요.글에 대한 수정 요청 및 정보 공유는 언제든지 환영입니다 ~.~Next/Image가 제공하는 장점- webp, avif등의 이미지 확장자 최적화- Lazy 로딩- placeholder제공을 통한 CLS 점수 개선- width, height값을 받아 reflow 현상을 최소화- sizes props를 통한 디바이스 크기 혹은 화면 해상도에 맞춰 적절한 크기의 이미지 제공- vercel을 통한 이미지 캐싱vercel을 통한.. 2024. 7. 2. [이미지 최적화] 01. Next/Image를 활용한 페이지 성능 개선 다독다독 프로젝트가 굉장히 오랫동안 진행하고 있는 와중에 인상깊게 배웠던것들을 블로그에 기록해보려한다.좋은 기회들을 계속해서 만들어갈 수 있도록 힘 써 주고 있는 팀원들에게 압도적 감사...! 페이지 성능 개선을 위해 손 볼 수 있는 요소는 참 많습니다당장 떠오르는 것만해도 이미지, 폰트, 캐싱 전략, CDN 활용, JS 번들 사이즈 줄이기 등등...이외에도 정말 많을 것입니다그 중 오늘 이야기할 내용은 바로, Next/Image 컴포넌트를 활용한 이미지 최적화!Next/Image 컴포넌트를 사용했을 때 얻을 수 있는 이점 3가지이미지 최적화, lazyloading, placeholder에 대해 알아봅시다 이미지 최적화Next/Image 컴포넌트를 가져다 쓰면 자동으로 최적화가 된다?왜 그럴까.. 2023. 11. 30. 이전 1 다음
