Next.js Prisma-2 Axios 프론트엔드에서 api에 접근하기 위해서는 fetch 혹은 axios를 사용합니다. 두 메소드에 대한 자세한 내용은 좋은 포스트가 있으니 확인해 보시기 바랍니다. 여기서는 axios를 사용하겠습니다. 설치 npm install axios 혹은 yarn add axios 를 이용해 설치합니다. 사용법 axios는 여러 가지 방법으로 사용할 수 있습니다. axios.(요청을 보낼 메소드 명) 방식으로 사용하겠습니다. 다시 설명하자면, api/users url에 GET 요청을 보내고 싶다면 다음과 같이 작성하면 됩니다. axios.get("/api/users"); POST, PUT, DELETE 요청도 동일하게 작성하면 됩니다. 만약 추가 정보가 필요한 경우는 다음과 같이 두 번째 인자에 객체를 주면 됩니다.

Next.js Prisma-1 Prisma Client prisma를 코드 상에서 사용하기 위해서는 prisma에서 제공하는 prisma client 라는 도구를 사용해야 합니다. ❗ 보안 등의 이유로 브라우저는 prisma client를 실행할 수 없게 되어 있습니다! 여기서는 api route를 제공하는 /api 폴더 안에서만 prisma client를 사용할 것입니다. 자세한 내용은 prisma client 공식 문서를 참고해 주시면 됩니다. 모델 만들기 prsima client를 사용하기 위해서는 모델이 정의된 스키마 파일이 필요합니다. 스키마 파일을 다음과 같이 작성합니다. generator client { provider = "prisma-client-js" } datasource db { provider = "mysql" url = env("DATABASE_URL") } model Users { id Int @id @default(autoincrement()) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt username String shops Shops[] } model Shops { id Int @id @default(autoincrement()) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt users Users @relation(fields: [userId], references: [id], onDelete: Cascade) userId Int name String location String?

Next.js React Hook Form 그냥 React로 Form 만들기 만약 여러분들이 react에서 아무 라이브러리 없이 form을 만든다면, 다음과 같은 방식을 사용하게 될 겁니다. import React, { useState } from "react"; const Form = () => { const [name, setName] = useState(""); const onNameChange = (event: React.SyntheticEvent<HTMLInputElement>) => { const { currentTarget: { value }, } = event; setName(value); }; const onSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => { event.preventDefault(); console.log(name); }; return ( <form onSubmit={onSubmit}> <input type="text" onChange={onNameChange} value={name} placeholder="name" /> <input type="submit" /> </form> ); }; 딱 봐도 답답해 보이는 위 코드는 굳이 이해 하실 필요는 없습니다.