DevYoon

프로젝트를 진행하면서 메인페이지의 로딩이 너무 느리다는 단점을 발견했다. Next/image 태그를 사용해 이미지 최적화를 하고 있다고 생각했는데, 추가적인 작업이 필요하다고 생각했다. 따라서 다음과 같은 2가지를 처리해보았다. 1️⃣ 이미지 리사이징 - 우리 페이지에는 2개의 실사 이미지가 들어가는데, (나머지는 아이콘) 두 이미지가 유독 더 느리게 렌더링 되었다. - 사이즈를 확인해보았는데, 역시나! 각각 가로가 5000px, 3500px 이상이었다. - 사이트 환경 내에서 깨지지 않는 선 (2000~ 3000px 사이)에서 이미지 크기를 줄여주었다. 그러나 그럼에도 여전히 렌더링 속도는 내가 느끼기에 느렸다🥲 스크롤 이벤트도 걸어놓은 터라, 사이트 메인에 접속해서 스크롤을 내릴 때 이미지가 바로바로..

Next.js로 개발하던 중 다음과 같은 오류를 만났다. document가 not defined라니...?! 너무 의아해서 검색해본 결과, Next.js를 사용하기 때문에 만난 에러였다. Next.js는 서버 측에서 렌더링 된 후 클라이언트로 전송되는 SSR 구조이므로, 클라이언트에서만 정의된 전역변수(window나 document)를 사용하려면 렌더링 후 사용해야 했다. 이 오류를 해결하기 위해서는 3가지 방법이 있다. 1️⃣ document의 type 확인하기 - 해당 오류는 서버 측에서 렌더링 될 때, document의 type이 undefined로 나오기 때문에 발생한다. - 따라서, document의 type이 undefined가 아닐 때 실행하게 한다. if(typeof document !==..

mui의 BottomNavigation을 사용하는 과정에서 Link 삽입에 난항을 겪었다. 1️⃣ Link 태그로 감싸기? Next에 있는 next/link를 사용해서 Link 태그로 BottomNavigationAction을 감싸주었다. BottomNavigationAction에 설정한 label 등이 나타나지 않았다. 반대로 BottomNavigationAction으로 Link 태그를 감싸니 제대로 작동하지 않았다. 2️⃣ href 설정? 단순하게 가볼까 싶어 BottomNavigationAction에 href 설정을 줘봤으나 역시 생각한 방향대로 되지 않았다. 3️⃣ next/router 사용 참고글 : https://github.com/mui/material-ui/issues/22001 단비같은 ..