키모스토리

https://www.mongodb.com/ MongoDB: The World’s Leading Modern DatabaseGet your ideas to market faster with a flexible, AI-ready database. MongoDB makes working with data easy.www.mongodb.com 1. 인스톨npm install mongodb 2. connecton string setupmongodb+srv://user_id:@cluster0.y42buoh.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0 root / .env.local 파일 작성// db-id, db-password : 몽고디비에 설정된 실재..

https://zod.dev/ GitHub - colinhacks/zod: TypeScript-first schema validation with static type inferenceTypeScript-first schema validation with static type inference - colinhacks/zodgithub.com Zod는 타입스크립트 우선 스키마 선언 및 검증 라이브러리 입니다. 타입스크립트는 컴파일 시점에서 타입을 검사합니다. 런타임에 동적으로 생성되는 값과 타입스크립트의 타입 간의 불일치가 발생하여 에러가 발생할 수 있는데요, 이를 방지할 수 있는 라이브러리가 바로 Zod입니다.  사용 방법zod는 직관적이고 간단한 API를 제공합니다.아래 예시는 가장 기본적인 zod 라..

useActionState  https://ko.react.dev/reference/react/useActionState useActionState – ReactThe library for web and native user interfacesko.react.dev useActionState는 폼 액션의 결과를 기반으로 State를 업데이트할 수 있도록 제공하는 Hook입니다.const [state, formAction, isPending] = useActionState(fn, initialState, permalink?); useActionState를 컴포넌트의 최상위 레벨에서 호출하여 폼 액션이 실행될 때 업데이트되는 컴포넌트 State를 생성하세요. useActionState는 기존의 폼 액션 함수..

최소 사양 선택으로 프로젝트 생성 npx create-next-app@latest  - globals.css@import "tailwindcss"; - layout.jsx import "./globals.css";export default function RootLayout({ children }) { return ( Nav {children} footer );} - page.jsxexport default function Home() { return ( Home page );} - tailwin..

1. 빌드 Next.js 프로젝트를 배포하려면 우선 실행 가능한 형태로 코드를 변환한 다음에, 서버에서 실행해야 한다. 이때 코드를 변환하는 과정을 '빌드'라고 한다.npm run build명령어를 입력하면 .next/ 폴더에 실행에 필요한 파일들이 생성된다.빌드시 오류 발생이 되면 문제 점 확인 후 수정 2. 실행 npm run start빌드 버전으로 실행하여 테스트 3. 소스코드를  github에 pushgit push origin master 4. 배포 (with vercel)Vercel은 Next.js 개발 팀에서 만든 프론트엔드 배포 플랫폼으로 빌드와 배포 그리고 호스팅을 해주는 서비스를 제공한다.Vercel 장점자동화된 배포: 코드 변경 사항이 GitHub, GitLab, Bitbucket 등..

Tailwind CSS(opens in a new tab)는 Next.js와 매우 잘 어울리는 유틸리티 우선 CSS 프레임워크입니다.Install Tailwind CSS with Next.js4.0 버전 변경된 방식 (With Next.js)Install Tailwind CSSnpm install tailwindcss @tailwindcss/postcss postcss Configure PostCSS Pluginspostcss.config.mjs 파일을 root에 생성하고 아래 내용 작성postcss.config.mjsconst config = { plugins: { "@tailwindcss/postcss": {}, },};export default config; Import Tailwind C..