JAVASCRIPT/Next.js (8) 썸네일형 리스트형 Next.js 클라이언트 컴포넌트로 글 작성(Create) 기능 구현 Next.js 13+에서는 서버 컴포넌트와 클라이언트 컴포넌트가 구분됩니다.서버 컴포넌트: 데이터 fetch, HTML 렌더링클라이언트 컴포넌트: 사용자 입력, 이벤트 처리, Hook 사용 가능사용자 입력 폼과 서버로 데이터를 POST하는 기능은 클라이언트 컴포넌트에서 구현해야 합니다.1️⃣ 클라이언트 컴포넌트 선언클라이언트 컴포넌트는 파일 최상단에 "use client" 선언이 필요합니다. "use client"; 2️⃣ 폼 작성 및 이벤트 처리 "use client";import { useRouter } from "next/navigation";export default function Create() { const router = useRouter(); // 페이지 이동용 라우터 return (.. Next.js 서버 컴포넌트와 클라이언트 컴포넌트 Next.js 13+에서의 서버 컴포넌트와 클라이언트 컴포넌트React 18과 Next.js 13부터 **서버 컴포넌트(Server Component)**라는 개념이 새로 생김.기존 React에서는 모든 컴포넌트가 클라이언트에서 렌더링되는 클라이언트 컴포넌트였지만, 이제는 서버에서 HTML을 먼저 만들어서 보내는 컴포넌트와 클라이언트에서 상호작용을 처리하는 컴포넌트로 구분할 수 있다.1️⃣ 서버 컴포넌트 (Server Component)특징서버에서만 렌더링HTML을 만들어서 클라이언트에 전달브라우저에서 React가 hydrate 하기 전에도 HTML이 이미 있음브라우저 API 사용 불가window, document 같은 브라우저 전용 객체 사용 불가React Hook 사용 불가useState, useEf.. Next.js에서 CSS 파일 사용하기 Next.js는 기본적으로 CSS-in-JS(예: styled-jsx)와 CSS Module, 전역 CSS, 그리고 CSS 프레임워크까지 다양한 방법을 지원합니다. 프로젝트 성격에 맞는 방식을 선택하면 됩니다.1. 전역(Global) CSSapp/globals.css (또는 pages/_app.js에서 import)로 전체 앱에 적용할 CSS를 정의할 수 있습니다.모든 컴포넌트에서 공통으로 적용해야 할 스타일(리셋 CSS, 폰트, 색상 변수 등)에 사용합니다. /* app/globals.css */body { margin: 0; font-family: Arial, sans-serif;} // app/layout.jsimport './globals.css';export default function R.. Next.js에서 이미지 다루기 1. Public 폴더와 태그Next.js 프로젝트의 public/ 폴더는 정적 파일을 저장하는 곳이 폴더 안의 파일들은 **도메인 루트 경로(/)**에서 바로 접근 가능예시:project/ ├─ app/ ├─ public/ │ └─ hong.jpg ➡️ 이렇게 작성하면 public/hong.jpg를 불러옴.➡️ 기존 React처럼 태그 그대로 사용 가능.2. Next.js의 컴포넌트 (권장 방법)Next.js는 next/image 컴포넌트를 제공함.단순히 대신 를 쓰면 여러 가지 최적화 기능이 자동 적용돼요.장점자동 최적화 : 기기별로 적절한 크기로 이미지를 리사이즈Lazy Loading : 화면에 보일 때만 이미지 로드WebP 변환 : 브라우저 지원 시 더 가벼운 포맷 제공Responsi.. Next.js의 싱글 페이지 애플리케이션(SPA) 1. 싱글 페이지 애플리케이션(SPA)이란?Single Page Application의 줄임말전통적인 웹: 페이지 이동 시마다 서버가 새로운 HTML을 내려줌 → 새로고침 발생SPA: 한 번만 초기 HTML + JS를 로드 → 이후에는 필요한 데이터만 불러와서 화면 일부만 갱신➡️ 페이지 이동 시 새로고침 없이 빠른 전환 가능SPA의 장점빠른 페이지 전환 (사용자 경험 ↑)서버 부하 감소 (필요한 데이터만 요청)모바일 앱 같은 자연스러운 UI/UX 제공SPA의 단점초기 로딩이 무거울 수 있음SEO(검색엔진최적화) 문제가 발생할 수 있음 (JS 실행 전까지는 빈 화면일 수 있음)2. Next.js와 SPA의 관계Next.js는 기본적으로 SSR(서버사이드 렌더링) 프레임워크지만,내부 페이지 이동에서는 SP.. Next.js 라우팅 http://a.com/dashboard/analyrics/a.com >> domaindashboard >> segment analyrics >> segment dashboard/analyrics/ >> path라우팅이란 경로에 따라 어떤 컨텐츠를 어떤 방식으로 보여줄것인가 라는 것을 결정하는것을 라우팅이라고 부른다. next.js는path가 없을경우 next.js는 app 폴더 밑에서 page.js가 있는 찾는다.page.js의 return값을 layout.js의 children에 결합해서 만들어진 html을 최종적으로 응답한다. 만약 path가 있다면app폴더 밑에 segment 와 동일한 명의 폴더를 찾고 그안에 page.js를 찾는다.그리고 page.js는 같은 폴더에 layout.js 파일이 있.. Next.js 구조 my-app/ ├─ app/ │ ├─ layout.js │ ├─ page.js │ ├─ globals.css │ └─ (기타 라우트 폴더들) ├─ public/ ├─ package.json └─ next.config.js app/layout.js모든 페이지에 공통적으로 적용되는 레이아웃을 정의.html, body 태그 구조를 작성하는 곳.children prop을 통해 현재 라우트의 page.js 내용을 불러와서 안에 넣어줌.// app/layout.jsexport default function RootLayout({ children }) { return ( 공통 헤더 {children} {/* 여기서 page.js 내용이 들어.. Next.js 설치 1. node.js 설치https://www.nodejs.tech/ko Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.www.nodejs.tech 2. next.js 설치npx create-next-app@latest . 3. 시작npm run dev ** node 버전이랑 next.js 버전 맞아야함 이전 1 다음