보조기억장치

설치npm i zod (기본 사용법)main.tsimport { z } from "zod" const UserSchema = z.object({    username: z.string(),    age: z.number(),}) type User = z.infer const user: User = { username : "Jeon" } console.log(UserSchema.parse(user))

next-theme 설치 # npm i next-themes theme provider 생성 (components/theme-provider.tsx) "use client" import * as React from "react" import { ThemeProvider as NextThemesProvider } from "next-themes" import { type ThemeProviderProps } from "next-themes/dist/types" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } Layout ThemeProvider 로 감싸주기 import { ThemeP..

layout.tsx export const metadata: Metadata = { title: "맛집찾기", description: "전국에 맛집을 찾아드려요", icons: { icon: [ { media: "(prefers-color-scheme: light)", url: "/logo.svg", href: "/logo.svg", }, { media: "(prefers-color-scheme: dark)", url: "/logo-dark.svg", href: "/logo-dark.svg", }, ], }, };

Next.js 13.5 출시..... 큰 변화 없이 성능 개선과 버그 수정이 전부인듯 https://nextjs.org/blog/next-13-5 Next.js 13.5 Next.js 13.5 includes 22% faster local server startup, 29% faster HMR (Fast Refresh), 40% less memory usage, and more. nextjs.org 22% 더 빠른 로컬 서버 시작: 앱 및 페이지 라우터로 더 빠르게 반복 29% 더 빠른 HMR(Fast Refresh): 변경 사항을 저장할 때 더 빠른 반복을 위해 40% 적은 메모리 사용량: 실행 시 측정next start 최적화된 패키지 가져오기: 인기 있는 아이콘 및 구성 요소 라이브러리를 사용할 때..

캐러셀(Carousel) 이미지가 슬라이드 형식으로 자동으로 변경되는것 https://www.npmjs.com/package/react-responsive-carousel react-responsive-carousel React Responsive Carousel. Latest version: 3.2.23, last published: 2 years ago. Start using react-responsive-carousel in your project by running `npm i react-responsive-carousel`. There are 397 other projects in the npm registry using react-responsive-caro www.npmjs.com npm i..

Github 에 업데이트하고 Vercel에서 Deployment 를 진행할때 Module not found: Can't resolve 발생 이유를 찾아보니 아래와 같이 Vercel 에 기술되어 있음 https://vercel.com/guides/how-do-i-resolve-a-module-not-found-error How to Resolve the 'module not found' Error The 'module not found' error is a syntax error that appears when the static import statement cannot find the file at the declared path. Learn how to fix this error. vercel.com..

그동안 인증에 nextauth를 사용해왔는데 Clerk 이라는 제품을 사용해보기로... 홈페이지(https://clerk.com/)에 방문하면 "인증 이상. 완전한 사용자 관리" 라고 소개하고 있다. (설치하기) npm install @clerk/nextjs (키발급 받기) - 홈페이지 로그인 후 Add application 선택 - 원하는 인증방식 선택 후 CREATE APPLICATION 선택 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, CLERK_SECRET_KEY 발급됨 (.env.local 에 추가) (적용하기) // app/layout.tsx import './globals.css' import { Inter } from 'next/font/google' import { Cl..

public 폴더는 아무문제없이 사용했는데 외부 이미지를 불러오자 에러발생 Unhandled Runtime Error Error: Invalid src prop (https://images.pexels.com/photos/3183183/pexels-photo-3183183.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1) on `next/image`, hostname "images.pexels.com" is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host 해결방법 next.confi..