목록전체 글 (64)
프로그래밍 공부방
[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파일의 컴포넌트에서 ..
[Tailwind CSS] hover일 경우 width의 길이 늘리기
🙀문제점 검색창을 구현하던 중에 focus인 경우 width의 길이를 늘리고 싶어졌습니다. 그래서 아래 코드처럼 focus를 적용해주었지만 동작하지 않는 문제가 있었습니다. ✨해결 방법 tailwind.config.js 파일에 아래와 같이 추가해줍니다. hover, focus 의 경우에 width를 설정할 수 있게 됩니다. // tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { // ... variants: { width: ["responsive", "hover", "focus"] // 추가한 부분 }, } 🐥💬 👉더 다양한 Tailwind의 Variants를 알고 싶다면?👈 Configuring Varian..
[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: ..
[Next.js] 당근마켓 프로젝트 성능 최적화 과정1 - 상품 출력하는 작업
🐥 당근마켓 프로젝트 성능 최적화 과정1 제품이 500개일 경우에 상품을 출력하는 최적화하는 과정입니다! 무한 스크롤을 구현해서 상품 20개씩 가져오도록 설정하기 전체 상품을 한꺼번에 가져오지 않고 무한 스크롤을 이용해서 필요한 만큼만 가져오도록 설정해보겠습니다. 1. 무한 스크롤을 구현해서 상품 20개씩 가져오도록 설정하기 첫 번째 문제 fetch에 시간이 오래걸리는 문제가 있습니다. 두 번째 문제 style을 구성하는 데에 오래걸리는 문제가 있습니다. 개선 후 useSWRInfinite과 IntersectionObserver를 이용해서 무한 스크롤을 구현했습니다. useSWRInfinite을 이용해서 구현할 경우 지금까지 스크롤한 모든 내용을 다 저장해서 출력시켜줄 수 있기 때문에 스크롤의 위치를 기..
[Next.js] form enter키 클릭 시에 새로고침 막기
🐥 form enter키 클릭 시에 새로고침 막는 방법 안녕하세요. 오늘은 form 내에서 enter키를 눌렀을 때 자동으로 새로고침이 되지 않게 하는 방법에 대해서 알아보겠습니다. 👉form이란? form은 사용자로부터 입력을 받을 수 있는 HTML 입력 폼을 정의할 때 사용하는 태그입니다. - form 내에 type이 text인 input이 한 개만 존재할 경우: 해당 input에 포커스 된 상태로 enter를 누를 경우 submit 가능 - form 내에 type이 text인 input이 여러 개 존재할 경우: enter를 눌러도 submit 불가능 form의 경우에는 submit이 될 때 자동으로 새로고침 되는 것이 기본 동작입니다. 그렇다면 저희는 이 기본 동작을 막아야 새로고침이 불가능하게 만..