2025/09 3

여러 브라우저 고려한 웹폰트 fallback 처리

문제 상황woff2 파일로 변경한 것이 성능 개선에는 도움이 되었지만 인터넷 익스플로러, 이전 버전 사파리 등 구형 브라우저에서는 woff2가 호환되지 않는다는 피드백이 있었습니다.해결 방안삭제했던 기존의 woff 파일을 다시 복구하고 woff2가 지원되지 않는 환경용 fallback 처리가 필요합니다.{ path: '../../public/fonts/Pretendard-Light.woff2', weight: '300', style: 'normal', }, { path: '../../public/fonts/Pretendard-Light.woff', weight: '300', style: 'normal', },이런식으로 먼저 woff2 ..

코드잇 최종 프로젝트 리팩토링 작업: 라이트 하우스 lCP 문제와 웹폰트

코드잇 7팀 최종 프로젝트 링크mobolae.vercel.app mobolae - 모볼래?영상 콘텐츠의 리뷰와 별점을 비교해 추천하는 웹 애플리케이션: 뭐 볼지 고민 끝, 리뷰로 비교해 골라!mobolae.vercel.app 서론 한달 간의 프로젝트를 무사히 마치고 발표까지 마친 지금, 저와 팀원 분들은 수료 이후에도 프로젝트를 개선시키고자 하는 마음이 일치하여 9월 30일까지 리팩토링 작업을 진행하기로 하였습니다. 가장 먼저 진행하기로 한 사항은 성능 개선이었습니다. 프로젝트 기간 동안에 Next.js의 앱 라우터를 활용하는 프로젝트의 특성을 고려하여 각 페이지마다 렌더링 전략을 세웠기 때문에 접근성이나 SEO는 라이트 하우스 측정 점수가 괜찮았지만, 성능은 PC 기준 가장 높은 페이지도 70점대, ..

zustand를 활용한 전역 상태관리를 해보며 (09/04)

서론 이번 프로젝트에서 처음으로 zustand 라이브러리를 사용하면서 전역 상태관리에 대해 고민해보고 실제 작업물에 적용해봤습니다. 처음에는 여러 형제 컴포넌트들에서 매번 같은 상태를 또 적어주지 않아도 되고 프롭스 드릴링을 효율적으로 막기 위해 개인적으로 사용하였지만 이번 프로젝트에서는 제가 담당한 페이지에서 사용하는 상태를 전역적으로 관리하여 다른 팀원분들의 페이지에서도 사용해야 하는 것이었습니다. 저는 이 부분에 대해 많은 고민을 했습니다. 특히 공용으로 로그인 상태 관리하는 zustand를 활용한 store 파일이 있었기에 기존에 있는 store 파일에 제가 개인적으로 사용하던 상태관리 기능을 이식해야 하는지 아니면 둘을 분리해서 관리하는게 맞을 지 고민했습니다.배운점 개인적으로도 찾아보고 팀원..