회고/Today I Learn8 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. setState의 효율적인 사용 방법과 React-Query의 initialData, placeholderData useState const [userInfo, setUserInfo] = useState() const onChangeUsername = (e: React.ChangeEvent) => { setUserInfo({ ...userInfo, username: e.target.value }); }; userInfo가 속성이 많은 큰 객체인 경우 스프레드 연산자를 사용하면 전체 객체의 얕은 복사본을 만들 수 있으며 이는 메모리 사용량 및 처리 시간 측면에서 성능에 악영향을 끼칠 수 있다. 따라서 다음과 같이 사용하는 것이 좋다. const onChangeUsername = (e: React.ChangeEvent) => { setUserInfo((prevUserInfo) => ({ ...prevUserInfo, u.. 2023. 8. 2. padding값에 따라 요소의 크기가 변하는 이슈 해결 padding-top 30px을 기준으로 보다 높아지면 배경 애니메이션이 안 보이고, 30px보다 낮아지면 애니메이션이 보이는 문제가 발생했다. 먼저 배경의 height를 확인해 봤다. 그리고 배경 안의 컨텐츠의 height를 확인했다. padding 30px을 기준으로 버그가 발생하고 있었는데, 884px - 854px = 30px과 연관이 있을 것이라는 생각이 들었다. 그리고 pdding 값의 변화에 따라 star의 크기가 달라지고 있었다. star의 크기를 고정시켜 줘야겠다는 생각이 들었다. div로 감싸준 후 height에 100%를 줬다. padding값을 아무리 늘려도, star의 크기가 변하지 않게 되었다. 2023. 7. 19. 이전 1 2 다음
