전체 글43 서버 컴포넌트 도입 후기 서버 컴포넌트 적용 전 서버 컴포넌트 적용 후 서버컴포넌트 적용 전 2023. 10. 27. Homebrew를 이용한 nvm설치 troubleshooting Cannot install in Homebrew on ARM processor in Intel default prefix (/usr/local)! Homebrew를 이용하여 NVM을 설치하려고 하던 중 에러가 발생했다. 처음에는 업데이트가 진행되면서 문제없이 잘 작동하는 줄만 알았다. 하지만 업데이트가 완료되고, 다음과 같은 에러가 나타났다. 원인 homebrew 공식문서 따르면 기본적으로 설정된 접두사 위치에 homebrew를 설치하는데, macOS Intel의 경우 /usr/local, Apple Silicon의 경우 /opt/homebrew(Linux의 경우 /home/linuxbrew/.linuxbrew)이다. 해결방법 따라서 default prefix를 실리콘의 경로로 설정해 주면 될 것이다. .. 2023. 10. 25. Next/image에서 외부 이미지를 가져오지 못하는 이슈 다른 이미지는 괜찮은데, elasticbeanstalk-ap-northeast-2-319210348301.s3.ap-northeast-2.amazonaws.com 이와 같은 url을 가진 이미지를 불러오지 못하는 이슈가 발생했다. 402 (Payment Required) Response값에는 다음과 같은 문구가 있었다. Payment required OPTIMIZED_IMAGE_REQUEST_PAYMENT_REQUIRED 그리고 viewport의 width값을 조정하여, 472px 이하로 만들면 이미지가 정상적으로 보였다. 디바이스 크기가 바뀔 때마다 이미지 최적화 Request를 보내는데, 이것이 427px 이하일 때만 정상 작동하고 있었다. next/Image에서 디바이스 크기에 따라 최적화를 해주는.. 2023. 10. 16. next.js app라우터에서 useId 사용시 발생하는 hydration 에러 Hydration mismatch when using the useId hook, when using the app router https://github.com/vercel/next.js/issues/53110 위 게시물에 자세하게 나와있었다. 요약하자면 next에 여러 PR이 합쳐지면서 ReactDevOverlay가 여러 개 생겼고, 서로 다른 React 트리를 생성하여 useId 차이가 발생하고 있다는 것이었다. next를 최신버전으로 업그레이드하자 위 에러로그는 더 이상 발생하지 않았다. yarn berry를 사용하면서 기존 yarn classic과 달라진 명령어가 매번 헷갈렸는데 아래 링크에 자세하게 나와있었다. https://yarnpkg.com/cli/up 특정 dependencies를 업그.. 2023. 9. 29. Error: Rendered more hooks than during the previous render. ref 코드를 상단으로 올리자 에러가 발생하지 않았다. 2023. 9. 21. Warning: Cannot update a component (`*`) while rendering a different component (`*`). To locate the bad setState() call inside `*`, follow the stack trace as described in Warning: Cannot update a component (`Router`) while rendering a different component (`SearchContainer`). To locate the bad setState() call inside `SearchContainer`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render 아래와 같이 되어있는 코드를 router.replace(pathname + "?" + queryString); useEffect를 사용하여 해결하였다. useEffect(() => { router.replace(pathname + "?" + queryString); }.. 2023. 9. 20. 이전 1 2 3 4 5 ··· 8 다음
