본문 바로가기
반응형

개발 프레임워크/Next.js24

[Next.js] 이미지 로딩 처리 3가지 방식과 비교 이미지 로딩 처리 3가지 방식 정리 및 비교1. Notion, S3, 외부 API 등에서 이미지 URL을 불러올 때, Next.js 프로젝트에서 사용자 친화적으로 제공해야 함2. 안정적이고 사용자 친화적으로 보여주기 위한 아래 3가지 처리 방식을 정리 및 비교 1. 단순 오류 처리 (onError fallback) 2. 로딩 상태 추가 (useState + Spinner) 3. SSG/SSR 캐싱 방식 고려 (getStaticProps → getServerSideProps)✅ 방식 1: 단순 오류 처리 (onError fallback) 예제 setImageError(true)}/>장점로딩 실패 시 cover image 텍스트로 대체 가능구현이 매우 간단함단점로딩 중 상태가 없음 (사용자에게 흰 화.. 2025. 5. 15.
[Next.js] SSG, CSR, SSR 비교 및 props 형태 정리 Next.js에서 SSG vs CSR vs SSR 및 props 형태 정리프론트엔드 성능, 사용자 경험, SEO를 모두 고려한 선택을 위해 렌더링 방식과 데이터 패칭 방식을 정확히 이해해야 함Next.js는 대표적으로 다음 3가지 렌더링 방식을 제공1️⃣ SSG (Static Site Generation)사용 함수: getStaticProps실행 시점: 빌드 타임에 한 번HTML 생성 위치: 서버 → 정적 파일로 저장특징:빠른 로딩 속도 (CDN 활용)SEO에 최적화됨데이터가 자주 바뀌지 않는 페이지에 적합사용 예시export const getStaticProps = async () => { const data = await fetchData(); return { props: { data } };};.. 2025. 5. 13.
[Next.js] getStaticProps, getServerSideProps 비교 Next.js에서 Static vs Server-side 렌더링 전략과 이미지 만료 문제 해결1. Next.js로 블로그나 포트폴리오 사이트를 구축할 때, 정적인 콘텐츠를 보여줄지 동적인 데이터를 서버에서 실시간으로 가져올지 결정하는 것이 중요2. 특히 Notion이나 S3에서 이미지를 받아올 때는 signed URL 만료 문제로 인해 렌더링 전략에 따른 문제가 발생할 수 있음📌 Static Generation (getStaticProps)✅ 장점최고의 성능: HTML을 빌드 타임에 생성 → CDN에서 서빙낮은 서버 부하: 서버 호출 없음빠른 로딩: 사용자 요청 시 바로 정적 페이지 제공❌ 단점데이터가 오래될 수 있음: 빌드 이후 변경된 데이터 반영이 느림Signed URL 이미지 사용 시 만료 문제 .. 2025. 5. 12.
[Next.js, Nextra] Parsing error: Cannot find module 'next/babel' ... Parsing error: Cannot find module 'next/babel' 해결방법Parsing error: Cannot find module 'next/babel' ... 해결 방법 프로젝트 루트 경로에 아래 두 파일을 생성 및 수정해준다..babelrc{ "presets": ["next/babel"], "plugins": []} .eslintrc.json{ "extends": ["next/babel","next/core-web-vitals"]}babel 파싱 에러가 사라진 것을 확인할 수 있다. 2023. 8. 4.
[Next.js, Nextra] Error: Invalid src prop "(domains)" on `next/image` Error: Invalid src prop "(domains)" on `next/image` 해결방법 Next.js, Nextra에서 외부에서 이미지 파일을 불러오면 아래와 같은 Error가 발생한다.위와 같은 Error는 next.config.js에 domain을 설정해주면 된다. module.exports = { reactStrictMode: true, images: { domains: [ "www.notion.so", "s3.us-west-2.amazonaws.com", ], // 이곳에 에러에서 hostname 다음 따옴표에 오는 링크를 적으면 되고 배열로 여러가지 입력이 가능하다. }}이후 next.config 파일을 수정했기 때문에 서버를 껐다가 다시 켜면 정상적.. 2023. 7. 30.
[Next.js] 컴포넌트에 props로 useState값 넘기기 컴포넌트를 재사용하기 위해 분리시켜 props를 넘겨 제어할 때 useState를 props 넘겨줘야 하는 상황이 온다. * useState는 state의 초기값을 정할 수 있고, return 값으로 state, setState를 돌려주는 hook이다. 예를 들어 아래와 간은 DatePicker UI를 컴포넌트방식으로 만든다고 하자. 예제 코드는 다음과 같다. 1. 이번달의 첫 날과 마지막 날을 선언해주고 각각의 DatePicker로 전달할 useState값 또한 초기화 한다. const firstFormat = dayjs().startOf("month").toDate(); const lastFormat = dayjs().endOf("month").toDate(); const [selectedDate1,.. 2023. 5. 15.
[Next.js] Module parse failed: Shorthand property assignments are valid only in destructuring patterns, [js] SyntaxError: Invalid shorthand property initializer [Next.js] Module parse failed: Shorthand property assignments are valid only in destructuring patterns 에러 [js] SyntaxError: Invalid shorthand property initializer 에러 아래와 같이 객체 안에서 c = 3으로 선언하였을 경우의 코드가 존재하였을 경우 x = { a:1, b:2, c=3 } console.log(x) [Next.js]에서의 에러창 ./src/main.tsx Module parse failed: Shorthand property assignments are valid only in destructuring patterns (62:34) File was processe.. 2023. 4. 19.
[Next.js] undefined, null strict모드 해제 tsconfig.json의 compilerOptions내부의 strictNullChecks를 false로 설정해주면 된다. "compilerOptions": { ... "strictNullChecks": false, ... } 2023. 4. 14.
[Nextjs] client의 IP주소를 가져와 비교하여 특정 IP주소에서만 홈페이지 이용을 허용 [Nextjs] client의 IP주소를 가져와 비교하여 dev, qc서버를 허용하고 싶은 IP 주소 (ex. 회사 IP주소 or 집 IP 주소)가 아니라면 리다이렉트하기 1. Next.js에서 client의 IP주소를 가져오는 방법 axios.get("https://geolocation-db.com/json/").then((res) => { console.log(res?.data?.IPv4); }); 출력값 "내가 사용하고 있는 IP주소가 string 형태로 출력" 2. router를 사용하여 외부주소로 리다이렉트하는 방법 import { useRouter } from "next/router"; const router = useRouter(); router.push("redirect하고 싶은 주소");.. 2023. 4. 3.
[js] 유한수인지 판별하는 isFinite() 메소드 [js] 유한수인지 판별하는 isFinite() 메소드 정리 isFinite() 전역 함수는 주어진 값이 유한수인지 판별합니다. 필요한 경우 매개변수를 먼저 숫자로 변환한다. 문법 isFinite(testValue); 매개변수 ( testValue ) 유한한지 판별할 값이다. 반환 값 testValue가 양 또는 음의 Infinity, NaN, 또는 undefined면 false, 아니면 true가 출력된다. 예제) console.log( isFinite(Infinity), isFinite(NaN), isFinite(-Infinity), isFinite(0), isFinite(2e64), isFinite(-910), isFinite(null), isFinite('0') ); Infinity, NaN, -.. 2023. 3. 30.
반응형