전체 글268 (4)이정환_Next.js_3_Next.js_Next.js의 <Link>태그 사용 , useRouter로 nav기능 사용 //React랑 좀 다르다 ● 태그 사용하기 //React와 다르게 경로 지정은 href 속성값으로 사용- _app.tsximport "@/styles/globals.css";import type { AppProps } from "next/app";import Link from "next/link";export default function App({ Component, pageProps }: AppProps) { return ( Search페이지 //React와 다르게 , href 속성 사용 //여백 값 Book페이지 Search/setting페이지 ; );}● useRouter로 nav 기능 해보기 : use.. 2025. 2. 4. (3)이정환_Next.js_2_Next.js_search페이지(queryString 사용법,중첩페이지), book페이지(동적경로 페이지),catch All segment , optional catch All segment ● Search 페이지 :○ 순서1_ Search 페이지 생성 :- 방법 :[pages]폴더 > [search]폴더 > [index.tsx]- [index.tsx]export default function Page(){ return(Search 페이지) }○ 순서2_ 페이지 라우팅에서 url 경로 뒤의 queryString 사용하기 :- 방법 :- useRouter를 import 하기 //조심 : next/router(O) , next/navigation(X)//얘는 앱라우팅 용이다.- const router - const {q} - [index.tsx]http://localhost:3000/search?q=%EC%8B%9C%EB%B0%9C%EB%9F%BC%EC%95%84/* eslint-disab.. 2025. 2. 4. (2)이정환_Next.js_2_Next.js 초기셋팅 ● Next.js의 페이지 라우팅 //React.js의 페이지 라우팅과 살짝 달라서, 복습하자- 방법1_ [Pages] 폴더 내의 파일명 기반 페이지 라우팅- 방법2_ [Pages] 폴더 내의 폴더명 기반으로 그 안의 페이지 컴포넌트는 [index.js]로 페이지 라우팅● 동적 경로의 페이지 라우팅 지정 :=> [페이지] 폴더 내에 [id].js를 셍상히여, 페이지의 각 id마다 매핑되는 동적 경로 페이지 생성● Next.js의 페이지 라우팅 기반의 Next.js App 생성하기○ 순서1_ 해당 Next.js 프로젝트를 생성할 폴더를 지정한 뒤, VsCode에서 폴더 열기 => 터미널 창을 열어, 아래와 같은 명령어 작성npx create-next-app@14 page_routing_next//npx c.. 2025. 1. 31. (1)이정환_Next.js_1_이론_사전랜더링vs클라이언트사이트렌더링, 실습용 백엔드 서버 세팅 ● 클라이언트 사이드 렌더링○ 정의 : React.js의 웹사이트 프로젝트에 대해 프로그램이 작동 될때의 원리로 아래와 같이 6단계로 '유저' , '브라우저', '서버'간의 교류로 이루어진다.● 클라이언트 사이드 렌더링 vs 사전랜더링 :○ 사전 렌더링 정의 : 클라이언트 서버 렌더링의 FCP가 늦는다는 단점을 보완하는 렌더링 방식○ 다음 페이지 교체 방식은 클라이언트 사이드 렌더링 방식을 채택하여, 페이지 교체 출력은 빠르게 가능해진다.● 실습 백엔드 서버 세팅○ 순서1_ 미리 세팅된 백엔드 서버의 github를 들어와 클론을 하든지, 다운을 받든지 하셈https://github.com/winterlood/onebite-books-server[GitHub - winterlood/onebite-books.. 2025. 1. 30. 이전 1 2 3 4 ··· 67 다음
