`프론트엔드 개발자` 개형이의 벽돌집

사이드 프로젝트 진행 중에 아이콘컴포넌트가 필요하여 제작했다. 제작한 이후 스토리북에서 확인할 수 있게 추가했는데 svg파일로 된 아이콘을 불러오지 못했다. Error: Can't resolve '@/assets/icons/bookmark-outline.svg' in '내프로젝트경로' 위와 같이 에러가 발생했다. 스토리북에서 사용하는 webpack에 문제가 있는 것 같아서 확인해 본 결과, " 스토리북에서 webpack에 file loader 기본 속성으로 svg 파일을 변환하려고 함 " svg 파일 변환을 현재 내 프로젝트 환경에서 사용하고 있는 svgr을 사용하여 변환하도록 코드를 추가해 줬다. 코드 추가는 .storybook/main.ts 에서 진행한다. // ... webpackFinal: (co..

next-pwa로 첫 구축을 해보고 테스트를 해보기 위해 Lighthouse로 분석해봤다. 위처럼 세팅하고 Analyze page load를 했는데, 다른건 다 정상적으로 pwa 설정이 완료 되었지만 Manifest doesn't have a maskable icon 조건은 fail이 되었다. 이유는 크롬 공식문서에서 확인할 수 있었다. manifest.json에 마스크 가능한 아이콘으로 설정하지 않았기 때문이다. 마스크 가능한 아이콘은 무엇일까? 이는 web.dev에서 확인할 수 있다. 대략 위와 같은 차이라고 보면 된다. 그리고 Lighthouse는 마스크 가능한 아이콘을 지원하지 않을 경우 경고를 띄우는 것으로 보인다. 해결하기 위해서는 manifest.json에 마스크 가능한 아이콘이라는 것을 알..

프로젝트 배포 환경에서 500 - Internal Server Error가 데이터독에 잡혔다. 해당 에러의 원인을 파악한 결과, getServerSideProps 내부에 api를 Prefetch하는 곳에서 발생한 문제였다. 우선 getServerSideProps 내부에서 Error가 throw되면 어떻게 될까? 위 Next.Js 공식 문서에서 명시해뒀듯이 pages/500.js로 이동되는 듯 하다! ❗️ 500.js란?? 500 에러 발생했을 경우 이동하게 되는 페이지이며 pages에 만들 경우 500 에러 페이지를 커스텀하게 보여줄 수 있다. 500 에러가 발생했을 경우 두가지 제시 방안이 있는데.. 1. 에러 페이지로 랜딩 시킴 (커스텀으로 500.js 혹은 _error.js 구성) 2. 에러 발생시..