프론트엔드

배경프로젝트 개발 후 Vercel 배포 시 아래와 같은 오류가 발생하였다.연결이 비공개로 설정되어 있지 않습니다. 공격자가 love-court-c75aeux9m-dong-kyu-lees-projects.vercel.app에서 사용자의 정보를 도용하려고 시도할 수 있습니다(예: 비밀번호, 메시지, 신용카드 정보). 이 경고에 대해 자세히 알아보기 net::ERR_CERT_COMMON_NAME_INVALID 향상된 보호 모드를 사용 설정하여 Chrome의 가장 강력한 보안을 활용하세요.  원인추측성이지만 필자의 결론은 '국내 보안 정책으로 인한 Vercel 도메인 차단'이었다.즉, 대한민국에서 Vercel 의 기본 배포 도메인을 차단한 것이다. 해결방법해결방법은 간단하다.Vercel 도메인을 차단했다면 도메..

✅ 왜 Metadata 대신 next-seo를 사용해야 할까?Next.js 15에서는 Metadata API를 사용하여 SEO 메타태그를 설정할 수 있지만, next-seo를 사용하는 것이 더 유리한 상황이 많습니다.아래 이유를 보면 언제 Metadata가 좋고, 언제 next-seo를 사용하는 것이 더 나은지 알 수 있습니다.🚀 1. Metadata API의 한계📌 1-1. Metadata는 서버 컴포넌트에서만 사용 가능Metadata는 서버 컴포넌트에서만 동작하며, 클라이언트 컴포넌트에서는 사용할 수 없음즉, 동적인 SEO 업데이트(예: 사용자 인터랙션에 따른 메타태그 변경)가 불가능클라이언트 컴포넌트("use client"가 포함된 컴포넌트)에서는 Metadata를 직접 사용할 수 없음❌ 예제:..

Typescript 파일 실행방법1. Node.js 및 npm 설치TypeScript 실행을 위해 먼저 Node.js 공식 사이트에서 최신 LTS 버전을 설치합니다.설치 후 버전을 확인하세요.node -v # Node.js 버전 확인npm -v # npm 버전 확인2. 프로젝트 폴더 생성 및 초기화mkdir my-ts-project # 폴더 생성cd my-ts-project # 폴더 이동npm init -y # package.json 생성3. TypeScript 및 ts-node 설치npm install -g typescript ts-node또는 프로젝트 내 설치:npm install --save-dev typescript ts-node설치 확인:tsc -v # TypeS..

아래 명령어를 프로젝트 경로 터미널에서 실행합니다.npx next dev --experimental-httpsCA 인증서 관련 안내문 팝업 시 수락합니다.

미리보기 코드"use client";import { useState, useEffect } from "react";import { Button, Snackbar, Alert, styled } from "@mui/material";import { GetApp, Close } from "@mui/icons-material";/** * PWA 설치 프롬프트 이벤트 인터페이스 * 브라우저 표준이 아니므로 직접 타입 정의가 필요함 */interface BeforeInstallPromptEvent extends Event { prompt: () => Promise; userChoice: Promise;}/** * PWA 설치 버튼 컴포넌트 * 사용자가 PWA를 설치할 수 있도록 UI를 제공함 */const In..

src / components / KakaoAdFit.tsx// KakaoAdfit.jsximport {useEffect, useRef} from "react";// any 타입 대신 명시적 타입 정의interface KakaoAdFitProps { unit: string; width: number; height: number; disabled?: boolean;}// window 타입 확장declare global { interface Window { adfit?: { destroy: (unit: string) => void; }; }}function KakaoAdFit({unit, width, height, disabled}..

Next.js 애플리케이션을 개발하다 보면 다음과 같은 경고 메시지를 만날 수 있습니다:⨯ useSearchParams() should be wrapped in a suspense boundary at page "/cases". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout이 경고는 무엇을 의미하며, 왜 Suspense로 감싸야 하는지 알아보겠습니다.useSearchParams()와 Suspense 경계 문제의 원인Next.js 13 이상에서는 App Router를 사용할 때 기본적으로 서버 컴포넌트를 사용합니다. 그러나 `useSearchParams()`와 같은 클라이언트 훅을 사용하면 해당 컴포넌트는 클라이언..

설치npm install @next/third-parties@latest예시 코드import { GoogleAnalytics } from '@next/third-parties/google' // ✨export default function RootLayout({ children,}: Readonly) { return ( {children} // ✨ );} 참고자료https://nextjs.org/docs/messages/next-script-for-ga#use-nextthird-parties-to-add-google-analytics Using Google Analytics with Next.js (through `next/scrip..