목록React (21)
보조기억장치
설치npm install winston morgan logger.js 생성import winston from 'winston';const logger = winston.createLogger({ level: process.env.LOG_LEVEL || 'info', format: winston.format.combine( (winston.format.timestamp(), winston.format.errors({ stack: true }), winston.format.json()) ), defaultMeta: { service: 'acquisitions-api' }, transports: [ new winston.transports.File({ filename: 'log..
패키키 설치npm i eslint @eslint/js prettier eslint-config-prettier eslint-plugin-prettier -D eslint.config.js 파일 생성import js from "@eslint/js";export default [ js.configs.recommended, { languageOptions: { ecmaVersion: 2022, sourceType: "module", globals: { console: "readonly", process: "readonly", Buffer: "readonly", __dirname: "readonly", __file..
설치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..