보조기억장치

사용 async function addTodo(data: FormData) { "use server"; const todo = data.get("todo") as string; } 플래그 활성화 - next.config.js experimental: { serverActions: true, }, 비 활성화시 error Server Actions require `experimental.serverActions` option 에러 발생

# npm install prisma --save-dev# npm install @prisma/client# npx prisma init prisma/schema.prisma 템플릿 생성 몽고DB 연결하기.envDATABASE_URL="mongodb+srv://test:test@cluster0.ns1yp.mongodb.net/myFirstDatabase"" prisma/schema.prismadatasource db {   provider = "mongodb"   url      = env("DATABASE_URL") } generator client {   provider = "prisma-client-js" } model Post {   id     String @id @defau..

import "@styles/globals.css"; 아래와 같이 에러 발생 ./app/layout.jsx:1:0 Module not found: Can't resolve '@styles/globals.css' > 1 | import "@styles/globals.css"; (해결방법) jsconfig.json 수정 (@ 옆 /를 제거하고 저장) 변경전 { "compilerOptions": { "paths": { "@/*": ["./*"] } } } 변경 후 { "compilerOptions": { "paths": { "@*": ["./*"] } } }

5.5일 Next.js 1.34 가 출시 https://nextjs.org/blog/next-13-4 Next.js 13.4 Next.js 13.4 moves App Router to stable, Turbopack to beta, and introduces experimental support for Server Actions. nextjs.org Next.js 13.4는 앱 라우터의 안정성을 나타내는 기본 릴리스입니다. 앱 라우터(안정적) : 반응 서버 구성 요소 중첩 경로 및 레이아웃 간소화된 데이터 가져오기 스트리밍 및 서스펜스 내장 SEO 지원 Turbopack(베타) : 더 빠르고 안정성이 향상된 로컬 개발 서버 Server Actions(Alpha) : 제로 클라이언트 JavaScript를 ..

데이터가 아직들어오지 않은 상태에서 렌더링시 발생 {products.map((product) => (....))} 에서 {products && products.map((product) => (...))} 하니 잘된다. JavaScript에서 true && expression은 항상 expression으로 평가되고 false && expression은 항상 false로 평가됨

프로젝트 생성 npx create-next-app@latest my-app Tailwind CSS 설치 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p postcss.config.js 파일 생성 환경설정 파일명 : tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: {}, }, pl..

홈페이지 https://mui.com/x/react-data-grid/ React Data Grid component - MUI X A fast and extendable react data table and react data grid. It's a feature-rich component available in MIT or Commercial versions. mui.com React 프로젝트 생성 npx create-react-app mui-test-app cd mui-test-app DataGrid 설치 (React 17.0.2 이상) yarn add @mui/material @emotion/react @emotion/styled @mui/x-data-grid axios 정적 렌더링 import ..

import { render, screen } from "@testing-library/react"; import Greeting from "./Greeting"; // 테스트 그룹을 만들때는 아래와 같이 describe 에 작성 describe("Greeting component", () => { test("renders Hello World as a text", () => { render(); const helloWorldElement = screen.getByText("Hello World", { exact: false }); expect(helloWorldElement).toBeInTheDocument(); }); });