Im Bay

JSON API 데이터 사용하기 (JSONPlaceholder) 기본 URL 변수 생성 const BASE_URL = 'https://jsonplaceholder.typicode.com'; 가져올 데이터의 json 형식에 맞추어 type생성 type Photo = { albumId: number; id: number; title: string; url: string; thumnailUrl: string; }; 데이터를 넣을 변수와 setter 생성 (useState 사용) const [photos, setPhotos] = useState([]); 데이터 가져오는 함수 생성 function에 async 넣기 fetch() 사용하여 데이터를 가져올 url 작성 후, fetch 앞에 await 작성하여 변수 ..

Test in Next.js cmd 창 프로젝트 최상단 디렉터리 위치에서 npm i -D @testing-library/jest-dom@5.16.5 @testing-library/react @testing-library/user-event jest jest-environment-jsdom ts-jest ts-node 입력 package.json scripts 블록에 아래 코드 추가 "test": "jest", "test:watch": "jest --watchAll" cmd 창 프로젝트 최상단 디렉터리 위치에서 npm init jest@latest 입력 jest.config.ts에 아래 코드 추가 // setupFilesAfterEnv: ['/jest.setup.ts'], moduleNameMapper: ..

dynamic metadata 예시 export async function generateMetadata({ params: { todoId } }: Params): Promise { const todo: Todo = await getTodo(todoId); return { title: todo.title, }; } .env 지원 default support dotenv .env.local (또는 .env.development.local) .env.development .env next.config.js process.env.customKey 로 사용 가능 module.exports = { env: { customKey: 'my-value', }, } 민감한 정보는 키 값 그대로 commit & push ..

Error Page app/error.tsx 생성 error page는 client에서만 랜더링 된다. 예시 'use client'; import { useEffect } from 'react'; export default function Error({ error, reset,}: { error: Error & { digest?: string }; reset: () => void; }) { useEffect(() => { }, [error]); return ( Something went wrong! {error.stack || error.message} reset()}> Try again ); } Loading Page app/todos/loading.tsx 생성하면 자식 페이지(todos/[todoId..

Next.js - NextAuth 소셜 로그인 next-auth 설치 cmd 창 프로젝트 최상단 디렉터리 위치에서 npm install next-auth@beta 입력 https://authjs.dev/reference/core 에서 Provider 확인 가능 next-auth 사용 cmd 창 프로젝트 최상단 디렉터리 위치에서 openssl 입력 (openssl 미설치 시 아래 확인!) rand -base64 32 입력 입력 후 나오는 결과가 .env.local 의 AUTH_SECRET .env.local 파일 생성 후 openssl에서 발급한 AUTH_SECRET 결과 넣어주기 .env.local 예시 AUTH_SECRET=openssl에서 발급한 auth_secret 값 넣어주기 GOOGLE_CLIE..

Server API 만들기 NextRequest와 NextResponse 사용 예시 import { NextRequest, NextResponse } from 'next/server'; export async function GET(req: NextRequest) { const { pathname, searchParams, host } = req.nextUrl; return NextResponse.json({ id: 1, name: 'Hong', pathname, str: searchParams.get('str'), ip: req.ip || host, // cookies: req.cookies.getAll(), }); } middleware app 폴더 속이 아닌 app과 동일한 위치 폴더에 middle..

shadcn/ui 설치 cmd 창 next 프로젝트 최상단 디렉터리에서 npx shadcn-ui@latest init 입력 style: Default 선택 color: Slate 선택 CSS variables: yes 선택 shadcn/ui 사용 shadcn/ui는 필요한 컴포넌트를 바로바로 install 하여 사용할 수 있다. https://ui.shadcn.com/docs/components/accordion 에서 필요한 컴포넌트 검색 후 install 하기 예시 버튼 사용하기 npx shadcn-ui@latest add button 입력 자동으로 button.tsx 생성 완료

Data Fetch Sample CSR (Client Side Rendering) 파일에 최상단에 ‘use client’; 작성 SSG (Static Site Generation) getStaticProps cache: “no-store” SSR (Server Side Rendering) getServerSideProps cache: “force-cache” ISR next: { revalidate: 초, }

Next.js - Layout, Template, Page, Route, Link Link 기본 형태 button ex) Home a tag는 자동 생성 useRouter import { useRouter } from 'next/navigation'; const router = useRouter(); usePathname import { usePathname } from 'next/navigation’; const pathname = usePathname(); redirect import { redirect } from 'next/navigation’; if (…) redirect('/login'); Next.js - Routes Dynamic Routes Nested Dynamic Routes /sho..

프로젝트 생성 cmd 창 프로젝트 위치에서 npx create-next-app@latest 입력 프로젝트 실행 cmd 창 위에서 만든 project name 위치로 이동 yarn lint 입력 yarn dev 입력 http://localhost:3000/ 접속 기타 prettier 설치 cmd 창 project name 위치에서 npm i -D prettier eslint-config-prettier 입력 package.json 파일의 scripts 블록 안에 "prettier": "prettier --write .” 추가 .eslintrc.json 파일의 extends 안에 "prettier" 추가, extends 아래에 "rules": { "no-unused-vars": "error" } 추가 .pr..