Web/CloneCoding

[Carrot Market] #9 - Authentication - 2

Twilio Setup 우선 twilio를 들어가기 전에 코드를 리팩토링 좀 하고 들어가겠습니다. /pages/api/enter.tsx import client from "@libs/client/client"; import withHandler, { ResponseType, } from "@libs/server/withHandler"; // prettier-ignore import type { NextApiRequest, NextApiResponse, NextApiHandler } from "next"; interface reqDataType { email?: string; phone?: string; } const handler: NextApiHandler = async ( req: NextApiReq..

[Carrot Market] #9 - Authentication - 1

Accounts Logic 이제 본격적으로 로그인 form을 위한 로그인 api를 만들어 보도록 하겠습니다. 앞서 정리한 내용을 한번 서술해 보도록 하겠습니다. enter page에서 저희는 useMutation hook을 작성해서 fetch api로 데이타를 쉽게 보낼 수 있게 포장했습니다. 그리고 useMutation의 반환 값으로는 이를 실행할 수 있는 함수를 주어주었고, 각종 loading, data, error즉 api의 요청의 결과와 작동과정과 관련된 데이터를 반환하게 했습니다. 그리고 저희는 /page/api/enter에서는 withHandler(HOF)를 반환하게 하여, api가 작동하게 했습니다. 자 여기부터 이제는 prisma client를 반환하게 하여서, 유저의 form에 따른 da..

[Carrot Market] #8 REFACTORING Form

REFACTORING 이제 enter페이지의 form들을 이전 챕터에서 배운 React Hook Form으로 다 바꿔보도록 하겠습니다. /pages/enter.tsx import { useState } from "react"; import Button from "../components/button"; import Input from "../components/Input"; import { cls } from "../libs/utils"; import { useForm } from "react-hook-form"; type MethodType = "email" | "phone"; interface EnterForm { email?: string; phone?: string; } export default..

[Carrot Market] #7 React Hook Form

React Hook Form 이는 사용하기 쉬운 유효성 검사를 통해 선응이 뛰어나고 유연하며 확장 가능한 form입니다. 기존의 form형식을 간단히 아래에 적어보도록 하겠습니다. import { useState } from "react"; export default function Forms() { const [username, setUsername] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [formErros, setFormErros] = useState(""); const onUsernameChange = (event: React.SyntheticE..