React Hook FormReact에서 폼(form)을 편하게 다루도록 도와주는 라이브러리Zod스키마 기반 데이터 유효성 검사를 위한 라이브러리스키마 = 데이터의 모양 + 규칙을 코드로 적어놓은 것 useForm() hookregister: 입력 필드(, 등)를 등록하여 값을 추적하게 함handleSubmit: 폼 제출을 처리하는 함수, 유효성 검사 성공 시 실행될 콜백 함수를 인자로 받음formState: 폼의 현재 상태(에러, 로딩 상태, 값이 변경되었는지 여부 등)control: Controller나 외부 ui 라이브러리를 사용할 때import { useForm } from "react-hook-form";type FormValues = { name: string; email: string;..

페이지 라우팅 설정하기app 폴더 내의 폴더 이름이 URL 경로를 정의하며, 해당 폴더 내의 page 파일만이 그 경로에서 최종적으로 렌더링되는 고유한 UI를 결정구분동적 라우팅쿼리 스트링URL 예시/book/123/search?q=한입위치URL 경로의 일부URL 끝 ? 뒤App Router 접근props.params 객체props.searchParams 객체구조폴더 구조를 통해 정의폴더 구조와 독립적레이아웃 설정하기layout 파일 (중첩 레이아웃)해당 폴더의 모든 자식 컴포넌트와 하위 라우트 세그먼트를 감싸는 공통 UI 정의layout은 props.children을 받으며, 이 children 자리에 하위 layout 또는 page가 들어감라우트 그룹괄호를 사용하여 정의하는 폴더로, URL 경로에 영..

장점파일 시스템 기반의 간편한 페이지 라우팅 제공다양한 방식의 사전 렌더링 제공단점페이지별 레이아웃 설정이 번거로움데이터 페칭이 페이지 컴포넌트에 집중됨불필요한 컴포넌트들도 JS 번들에 포함됨 섹션 3 퀴즈 | NotionNext.js 페이지 라우터에서 파일 기반 라우팅은 어떻게 동작하나요?www.notion.so

(복습) React App에서의 데이터 페칭초기 접속 요청부터 데이터 로딩까지 오랜 시간 소요import { useEffect, useState } from "react";export default function Page() { // 1. 불러온 데이터를 보관할 State 생성 const [state, setState] = useState(); // 2. 데이터 페칭 함수 생성 const fetchData = async () => { const response = await fetch("..."); const data = await response.json(); setState(data); }; // 3. 컴포넌트를 마운트할 때 데이터 페칭 함수 실행 useEffect(()..

개발 프로젝트 진행 순서아이디어 구상 및 기획아이템 선정: 어떤 종류의 웹 서비스를 만들지 결정핵심 기능 정의: 서비스가 제공해야 할 필수 기능과 부가 기능을 구분하여 정의기술 스택 결정: 프로젝트의 목표와 아이템에 적합한 프론트엔드, 백엔드, 데이터베이스 등의 기술 스택 선택서비스 설계와이어프레임 & 프로토타입 제작: 서비스의 화면 구성(레이아웃) 스케치 *사용자 경험(UX)을 고려한 UI/UX 디자인 진행데이터베이스 모델링: 서비스에서 사용할 데이터의 구조 설계시스템 아키텍처 설계: 프론트엔드와 백엔드가 어떻게 통신할지, 서버 구성은 어떻게 할지 등의 전반적인 시스템 구조 정의개발 환경 구축 및 초기 설정버전 관리 시스템 설정: Git을 사용하여 프로젝트를 초기화하고, 레포지토리 생성개발 환경 설정:..

🏠 Index 페이지(/): 등록된 도서 리스트 조회🔎 Search 페이지(/search): 제목, 저자 별 검색 결과 조회📖 Book 페이지(/book/{book_id}): 특정 도서의 상세 정보 조회useRouter 훅현재 페이지의 라우팅 상태(URL 정보)에 접근하거나, 명령적으로 페이지 이동을 수행할 수 있게 해줌현재 경로 정보 접근속성설명예시router.pathname현재 페이지가 연결된 pages 폴더 내의 경로 (동적 세그먼트 포함)/products/[id]router.asPath브라우저 주소창에 보이는 전체 경로/products/123?color=redrouter.queryURL의 쿼리 문자열 또는 동적 세그먼트 값{ id: '123', color: 'red' }Catch-All Se..