728x90
반응형
- [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(인증, 인가를 편리하게 NextAuth.js)2024-02-16 15:59:371. NextAuth 설치 npm install next-auth 😉 공식 문서 : https://next-auth.js.org/getting-started/example 2. OAuth 구글 계정 로그인 구현 😉 공식 문서 : https://next-auth.js.org/providers/google 📌 구글 클라우드 설정 구글 클라우드 설정 URL로 이동(https://console.cloud.google.com/apis/credentials) OAuth consent screen : 구글 설정(프로젝트 생성 등) Credentials > CREATE CREDENTIALS > OAuth client ID : OAuth 클라이언트 아이디 생성 Authorized redirect URIs에-공식 문서 C..
- [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(Prisma)2024-02-13 18:25:55Prisma ORM 적용 1. VSCode에서 Prisma Extension 설치 더보기 Name: Prisma Id: Prisma.prisma Description: Adds syntax highlighting, formatting, auto-completion, jump-to-definition and linting for .prisma files. Version: 5.9.1 Publisher: Prisma VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Prisma.prisma 2. prisma 설치 npm i prisma 😉 공식 문서 : https://www.prisma.io/ 3. prisma 명령어 명령어 목록..
- [Next.js] [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(Zod를 이용한 유효성 검사)2024-02-13 14:03:591. Zod 설치 Zod는 유효성 검사 라이브러리이다. npm i zod 😉 공식 문서 : https://zod.dev/ 2. 적용 방법 📌 스키마 작성 // src/app/api/users/schema.ts import { z } from "zod"; const schema = z.object({ name: z.string().min(3), email: z.string().email(), age: z.number(), }); export default schema; 📌 Zod 적용 // src/app/api/users/[id]/route.tsx import { NextRequest, NextResponse } from "next/server"; import schema from "../schema"; ..
- [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(API Endpoints)2024-02-13 11:47:03📌 API Endpoints Next.js 앱 내부에서 HTTP 요청, 응답 처리 가능 API Folder Convention은 API 엔드포인트의 그룹화와 체계적 관리에 유용 api폴더 원하는 API 경로에 해당하는 폴더(여기에서는 users)를 생성하고 그 폴더 안에 route.tsx 파일 생성(page.tsx와 함께 있을 수 없음) // src/app/api/users/route.tsx import { NextRequest, NextResponse } from "next/server"; // GET 핸들러에 인자값이 없는 경우 응답 결과를 캐싱함 // export function GET() { // 캐싱을 원하지 않는 경우 request 속성을 매개 변수로 추가 export function GET(..
- [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(컴포넌트 오류 처리)2024-02-11 15:42:43📌 error.tsx 컴포넌트에서 발생한 예상치 못한 오류 처리한다. error.tsx는 client 컴포넌트로 만들어야 한다. [그림 1]은 error.tsx를 적용하지 않은 경우이다. // src/app/error.tsx "use client"; // "use client"를 반드시 작성해야 한다. import React from "react"; interface Props { error: Error; reset: () => void; } const ErrorPage = ({ error, reset }: Props) => { console.log("Error : ", error); // 실제 애플리케이션에서는 콘솔 찍기 대신 로그를 영구적으로 남기면 된다. return ( 예상치 못한 오류가 발생하였..
- [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(not-found)2024-02-11 14:51:24📌 not-found.tsx 1. 존재하지 않는 페이지 처리 // src/app/not-found.tsx /* 존재하지 않는 페이지에 접근했을 때 레더링 텍스트 적용한 경우 */ import React from "react"; const NotFound = () => { return 요청하지 않는 페이지는 존재하지 않습니다.; }; export default NotFound; 2. Dynamic Routes와 조합 // src/app/users/[id]/page.tsx import { notFound } from "next/navigation"; // 추가 import React from "react"; interface Props { params: { id: number }; } const UserDe..
- [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(섹션 2: 라우팅과 네비게이션)2024-02-07 09:38:21섹션 2: 라우팅과 내비게이션 📌 다이내믹 라우트(Dynamic Routes) 공식 문서 : https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#convention "src/app/users/[id]/photo/[photoId]" 경로를 작성 대괄호 [] 안에 매개 변수를 지정할 수 있고, 이 매개 변수에 할당되는 인수가 경로가 된다. // src/app/users/[id]/photo/[photoId]/page.tsx import React from "react"; interface Props { params: { id: number; photoId: number }; } // props에 params 속성이 존재하..
- [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(섹션 1: Styling)2024-02-06 09:12:12섹션 1: Styling 📌 globals.css 모든 태그 및 컴포넌트에 공통 스타일 적용한다. globals.css 안에서 class는 CSS 라이브러리와의 충돌을 방지하기 위해 사용하지 않는 것이 좋다. @media (prefers-color-scheme: dark) {}에서 다크모드 스타일을 설정하면 된다. 📌 CSS Module CSS 파일을 모듈처럼 사용한다. 동일한 클래스 이름을 사용하더라도 다른 컴포넌트, 페이지의 스타일과 충돌(덮어쓰기) 하지 않는다. postCSS를 사용하여 클래스 렌더링 시 충돌하지 않도록 클래스 이름에 별도의 문자열을 추가하기 때문이다. 클래스를 제거하려면 컴포넌트에 정의한 내용과 해당 클래스가 정의된 파일도 함께 삭제해야 빌드시 번들에 포함되지 않는다. → 테일윈드..
728x90
반응형