jonbeo 님의 블로그

SEO(Search Engine Optimization)는 단순히 구글 노출이 아니라,사용자와 검색엔진 모두가 이해할 수 있는 구조로 웹을 만드는 것입니다. React, Next.js 환경에서는 SSR(서버 사이드 렌더링) 또는 SSG(정적 생성)과 함께메타정보, OG(Open Graph), JSON-LD 등을 세팅해줘야 합니다.🧱 1. 기본 메타태그 설정 📌 필수 메타태그 3종 세트title → 검색 제목description → 검색 결과 요약robots → 검색엔진 접근 허용🪶 2. Open Graph (SNS 미리보기 설정) 📌 Open Graph는 페이스북, 카카오톡, 트위터 등 SNS 공유 썸네일 정보 💡 트위터 추가 메타태그 ⚡ 3. Next.js에서 자동 SEO 설정 (App R..

웹사이트 속도는 UX, SEO, 매출, 이탈률까지 모든 것에 영향을 미칩니다.특히 3초 이상 로딩되면 40%의 사용자가 떠난다는 통계가 있을 정도죠 ⚡ 이번 포스팅에서는 실제 서비스에서 바로 적용 가능한프론트엔드 성능 최적화 핵심 3단계를 다룹니다 👇⚙️ 1. 코드 스플리팅 (Code Splitting)앱을 여러 조각으로 나눠, 필요한 코드만 로드하는 기술🔸 React 예시 (Dynamic Import) import React, { Suspense, lazy } from "react";const Chart = lazy(() => import("./Chart"));export default function Dashboard() { return ( 대시보드 로딩 중...}> ..

React 프로젝트에서 자연스러운 애니메이션을 구현하고 싶다면CSS transition이나 GSAP보다 먼저 고려해야 할 라이브러리, 바로 Framer Motion입니다. Next.js, CRA, Remix 등 어떤 React 환경에서도 쉽게 동작하고,상태 변화 → 애니메이션 전환을 아주 직관적으로 다룰 수 있죠.⚙️ 1. 설치 및 기본 세팅 npm install framer-motion 기본 Import: import { motion } from "framer-motion";🧩 2. 기본 애니메이션 예제 import { motion } from "framer-motion";export default function BasicBox() { return ( );} 📌 실행 흐름initial:..

기존 pages/ 라우터와 달리, App Router는 디렉터리 구조 자체가 라우팅 규칙이 됩니다.app/ 디렉토리 안의 폴더마다 페이지, 레이아웃, 로딩, 에러 처리, 메타데이터를 담당하는 파일이 존재하죠.🧩 1. App Router 기본 구조 app/ ├─ layout.tsx # 공통 레이아웃 ├─ page.tsx # 루트 페이지 ├─ loading.tsx # 로딩 상태 ├─ error.tsx # 에러 페이지 ├─ about/ │ ├─ page.tsx # /about │ ├─ layout.tsx # about 전용 레이아웃 │ ├─ loading.tsx # about 로딩 UI │ └─ error.ts..

React로 만든 SPA(Single Page Application)는 기본적으로 클라이언트 렌더링(CSR) 방식입니다.하지만 이 방식은 SEO, 초기 로딩 속도에서 한계가 있었죠.Next.js는 이런 단점을 보완하기 위해 다양한 렌더링 옵션을 제공합니다 👇💻 1. CSR (Client-Side Rendering)📌 렌더링 위치 → 브라우저(클라이언트)📌 예시 → 순수 React 앱 (create-react-app) function App() { const [data, setData] = useState(null); useEffect(() => { fetch("/api/data").then(res => res.json()).then(setData); }, []); return {dat..