목록프론트엔드/Next.js (16)
프로그래밍 공부방
[Next.js] register와 ref를 같이 사용할 때의 문제점
🙀문제점 👉문제 내용 기존에 useForm에 register를 이용해서 댓글 등록 기능을 구현했었습니다. 댓글 등록 기능에 댓글 길이에 따른 동적인 textarea를 만들어주기 위해서 ref를 추가해주었는데요. ref를 추가하기 전에는 정상적으로 댓글이 잘 등록됐지만 ref를 추가한 이후 댓글이 등록되지 않는 문제가 생겼습니다. import { cls } from "@libs/client/utils"; import { useRef, useState } from "react"; import { UseFormRegisterReturn } from "react-hook-form"; interface TextAreaProps { label?: string; name?: string; register: UseFo..
[Next.js] useForm register 같은 값이 들어가는 문제
🙀문제점 👉문제 내용 일단 저는 useForm을 이용해 댓글 수정 기능을 구현했었습니다. 그 후에 댓글 수정 기능을 테스트하고 있는데 잘 된다고 생각했던 댓글 수정 기능이 이상한 점이 있었습니다. 수정하려는 댓글이 아닌 다른 댓글이 수정되는 오류입니다. 테스트할 때 수정을 처음 한 번만 진행해서 몰랐는데 처음 댓글을 수정하고 그 이후에 다른 댓글을 수정하려고 하면 제일 처음 댓글이 수정됐습니다. 아래 이미지를 보시면 엉뚱한 댓글이 수정된 것을 알 수 있습니다. const { register: answerEditRegister, handleSubmit: answerEditHandleSubmit, setValue, } = useForm(); ... //위에 생략된 코드: map을 이용해서 댓글마다 댓글 수정..
[Next.js] 당근마켓 프로젝트 성능 최적화 과정3 - 이미지 업로드 후 게시글 올리는 작업
🐥 당근마켓 프로젝트 최적화 과정3 안녕하세요. 오늘은 당근마켓 프로젝트 최적화 과정 세 번째입니다! 이미지를 업로드해서 게시글을 올리는 작업을 최적화 해보겠습니다. 1. 이미지를 압축시켜서 렌더링 속도 최적화하기 2. 적절한 작업 순서를 고려해서 최적화하기 3. 블러 처리된 이미지 먼저 보여주기 4. Layout shift를 줄여서 CLS 개선시키기 위 작업들을 통해서 성능 최적화를 해보도록 하겠습니다! 1. 이미지를 압축시켜서 렌더링 속도 최적화하기 이미지를 압축시키는 작업은 browser-image-compression을 이용했습니다. option에는 maxSizeMB, maxWidthOrHeight이 있습니다. maxSizeMB는 1로 설정을 해서 이미지의 용량이 1MB를 넘지 않도로 설정했습니다..
[Next.js] 당근마켓 프로젝트 성능 최적화 과정2 - 제품 검색 후 제품 상세 페이지로 이동하는 과정
🐥 당근마켓 프로젝트 성능 최적화 과정2 상품 검색을 한 후 해당 상품에 들어가기까지의 시간을 측정하고 있었습니다. 근데 시간이 오래 걸려서 최적화 작업을 진행했습니다. 확인해보니 비슷한 상품이 적을 경우에는 상관이 없는데 많아질 경우에 느려지는 문제가 생겼습니다. 비슷한 상품을 가져오는 개수 설정하기 비슷한 상품을 가져오는 개수에 제한을 두도록 하겠습니다. 비슷한 상품을 가져오는 개수 설정하기 첫 번째 문제 저는 test라는 검색어로 상품을 검색했습니다. 하지만 네트워크 쪽을 보면 시간이 꽤 긴 것을 확인할 수 있었습니다. 노란색으로 표시한 부분이 FID라고 볼 수 있습니다. 입력 지연 시간은 100ms 가 양호한데 이 경우에는 약 2500ms ~ 2900ms가 약 400ms가 걸리는 것을 확인할 수 ..
🔥에러 내용: ReferenceError: localStorage is not defined Nextjs에서 localStorage를 이용하고 있었는데 갑자기 해당 에러가 생겼습니다. 그 전에는 localStorage를 사용해도 이런 에러가 나지 않았기 때문에 해당 에러의 원인을 먼저 찾아보았습니다. 🤷♀️Why?🤷♀️ localStorage는 window 객체에 정의되어 있지 않고, Next.js는 클라이언트 사이드 렌더링 전에 서버 사이드 렌더링을 수행하기 때문입니다. ✨해결 방법 1. useEffect 사용 useEffect(() => { localStorage.removeItem('productSearch'); }, []) useEffect는 서버 측에서 실행되지 않고 클라이언트 측에서만 실행..
[Next.js] 자식 컴포넌트에서 부모 컴포넌트로 값 보내주기
🐥 자식 컴포넌트에서 부모 컴포넌트로 값을 보내주는 방법 컴포넌트 간 값을 주고 받는 방법에는 여러가지가 있습니다. 그 중에는 전역 상태 관리가 가능한 swr, redux ... 등을 사용하는 방법이 있습니다. 하지만 저는 이번에는 컴포넌트 간에 간단한 검색값만 주고받기를 원했기 때문에 다른 방법을 이용해보겠습니다. 부모 컴포넌트에서 자식 컴포넌트로 함수를 전달해서 값을 주고받는 방식 일단 구조를 보면 index파일에서 layout 컴포넌트를 불러와 사용하고 있습니다. 제가 하려는 작업은 검색을 구현하는 것인데요. layout 컴포넌트 내에 검색창이 있는 상태이지만 해당 검색어를 이용해서 작업하고 싶은 곳은 index 파일입니다. 따라서 layout 파일에서 얻은 검색어값을 index파일의 컴포넌트에서 ..
[Next.js] Image with src "..." was detected as the Largest Contentful Paint(LCP)
⚠️경고 내용: Image with src "..." was detected as the Largest Contentful Paint(LCP) Nextjs의 Image를 사용하던 도중에 위와 같은 경고가 발생했습니다. 🤷♀️Why?🤷♀️ LCP로 감지된 이미지인데 priority 속성을 사용하지 않았기 때문입니다. ✨해결 방법 Image에 priority={true}를 추가해서 해결했습니다. priority를 true로 설정할 경우 해당 이미지를 높은 우선순위로 생각하기 때문에 미리 로드됩니다. 또한 priority를 사용하는 이미지에 대해 지연 로딩이 자동으로 비활성화됩니다. priority 속성을 사용해야하는 경우는 언제일까요? 👉 LCP로 감지된 이미지의 경우에 priority 속성을 사용해야합..
[Next.js] Error: Invalid src prop (...) on `next/image`, hostname "..." is not configured under images in your `next.config.js`
🔥에러 내용: Error: Invalid src prop (...) on `next/image`, hostname "..." is not configured under images in your `next.config.js` Nextjs의 Image를 사용하려는데 오류가 발생했습니다. 🤷♀️Why?🤷♀️ 원격 이미지를 가져오기 위해서는 이미지를 가져올 도메인을 추가해주어야 하는데, 해당 작업을 안해줬기 때문에 AWS 호스트 허용이 되지 않아서 발생한 오류입니다. ✨해결 방법 next.config.js에 다음과 같이 추가해줍니다. 1. Next.js 12.3.0 이후 버전을 사용 중인 경우 // next.config.js module.exports = { images: { remotePatterns: ..