[TIL] 2023-07-07 DAY73

---

Project

GIT 주소
https://github.com/dowoo303/vecel-prisma

---

오늘 배운것들

1. prisma(DB) - 프론트에서 DB에 데이터 추가, 서명요청, 배포

각종 팁

회고

---

💻 Solidity 코딩

✅ prisma(DB)

시작(터미널 3개)
pscale connect web3
npx prisma studio
npm run dev
설치 라이브러리 : npm i uuid, npm i web3, npm i axios
frontend: page.tsx
backend: route.ts, server.ts
목적: 프론트에서 입력하고 받은 정보들을 prisma DB에 입력되도록 만들어보기

Route Handlers(데이터 베이스 접근)

https://nextjs.org/docs/app/building-your-application/routing/router-handlers
경로 : src/api/user/route.ts

서명요청 기능

파일: page.tsx, lib/client.ts
const signedToken = await personal.sign("Hello", accounts[0], "Pass");
-> 첫번째 매개변수와 세번째 매개변수가 바뀔때마다 signedToken 주소값이 틀려짐
-> uuid를 이용하면 랜덤난수를 생성한 후 넣어서 사용하면 보안성이 올라간다.
DB에 개인정보를 변경할경우 사용자가 맞는지 확인하는 기능

배포

1. .env에서 URL작성 후 page.tsx에서 경로변경
2. package.json(build), next.config.js변경
3. https://app.planetscale.com/ -> Get connection strings에서 prsima의 DATABASE_URL 가져오기
4. 코드 git에 올린 후 https://vercel.com/dashboard 들어가서 위 DATABASE_URL 붙여놓고 deploy
5. deploy가 성공적으로 이루어졌으면 주소(지구본) 복사해서 client.ts에서 url변경 후 git에 다시 push
6. vercel의 settings에 들어가서 환경 변수에 key-value에 3번의 DATABASE_URL+주소 save
7. 정상작동하는지 확인

🟥 코드

"use client";

import axios from "axios";
import { NextPage } from "next";
import { FormEventHandler, useState } from "react";
import { v4 as uuidv4 } from "uuid";
import { ethereum, personal } from "./lib/client";

const Home: NextPage = () => {
  const [email, setEmail] = useState<string>("");

  const onSubmitMetamask: FormEventHandler = async (e) => {
    try {
      e.preventDefault();

      if (!email) return;

      const accounts: any = await ethereum?.request({
        method: "eth_requestAccounts",
      });

      if (accounts) {
        const signedToken = await personal.sign(
          `Welcome!\n\n\n${uuidv4()}`,
          accounts[0],
          "Pass"
        );

        await axios.post(`${process.env.NEXT_PUBLIC_URL}/api/user`, {
          account: accounts[0],
          email,
          signedToken,
        });

        localStorage.setItem("signedToken", signedToken);
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div className="bg-red-100 min-h-screen p-24">
      <div>
        <form onSubmit={onSubmitMetamask}>
          <input
            type="text"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <input
            className="ml-2 px-2 py-1 border-2 border-black rounded-md"
            type="submit"
            value="메타마스크로그인"
          />
        </form>
      </div>
    </div>
  );
};

export default Home;