[TIL] 2023-04-13 DAY20

---

DataBase(prisma+Planetscale)

GIT 주소 : https://github.com/dowoo303/backendPlusDB-todolist

---

오늘 배운것들

1. DAY19 프론트엔드를 백엔드에 연결시키는법 복습(git commit이름: repeat )
2. todolist
   백엔드 폴더 생성하여 백엔드와 db를 연결시킨 후 서로 통신해보기
   -> Planetscale라는 클라우드 데이터베이스를 이용하여 Prisma라는 ORM을 이용하여 백엔드와 데이터베이스를 서로 통신가능하게 만들어본다.

각종 팁

1. 리액트 문법에서는 최상위문단을 빈 태그(<>)(fragment) 묶어줘야한다.
2. async 비동기 함수의 경우 만일의 상황을 대비해 try+catch를 함께 사용한다.
3. useEffect 사용이유
   컴포넌트가 마운트되고 처음으로 네트워크와 통신하거나, 특정한 무언가가 변할 때마다 네트워크와 통신을 하거나 무거운 일을 해야할 때 사용한다.
   -> 리액트가 props 받거나 state 변경되면 리렌더링 된다.
   결국 이번 frontend코드에서 useEffect를 사용하는 이유는 useEffect안 구성요소를 외부시스템과 동기화+처음으로 네트워크와 통신(한번만 실행)해야하기때문에 사용하며 사용방법은 마지막 인자를 빈[]을 넣어 사용한다.

반성할점

1. 오타, 코드 빠트림 조심 ..

복습내용 순서

git: https://github.com/dowoo303/frontendPlusBackend

• frontend폴더

1. TodoCard.jsx로 컴포넌트 분리
2. TodoCard에 title을 props로 내려주기
3. app.jsx에서 getToDoList함수를 만들어서 백엔드와 연결
4. getToDoList함수 생성 및 html부분에 toDoList 삼항연산자 추가
5. toDoList 삼항연산자는 map을 이용하여 todoCard에 title을 뿌리기
6. CreateToDo 컴포넌트 하나 생성해서 input을 이용해서 post연결하기
7. onSubmitCreateToDo함수를 이용하여 axios.post해주고, post후 자동 업데이트를 위하여 getToDoList를 App.jsx로부터 props받아와 사용
8. TodoCard.jsx로 이동하여 버튼 하나 추가해 준 후 onClickDelete함수 생성(index를 props받아와서 사용해야함)하여 붙여주기
9. 기존 onClickToggle함수를 프론트엔드에서만 쓰는게 아니라 백엔드와 결합하기 위해 onClickIsDone함수로 변경한 후 axios.put사용(isDone를 props로 받아와서 사용)

데이터베이스

개념

많은 정보의 양을 효율적으로 저장

-> 1:N(1대다) 관계가 있고 N:M(다대다)관계가 있다.

시작

backend 폴더 생성 및 프로그램 설치

npm init 
npm i express 
npm i -D nodemon

Prisma

사이트 : https://www.prisma.io/
설치 명령어:npm i -D prisma npx prisma init
-> schema.prisma생성

코드

datasource db {
  provider = "mysql"        // sql 사용
  url      = env("DATABASE_URL")
  relationMode = "prisma"   // planetscale에서 사용하기 위해 추가
}

// db설계 시작(prsima문법으로)
// 테이블 생성
model User{
  id Int @id @default(autoincrement())    // autoincrement() - auto로 db에 추가
  account String @unique          // 중복 값을 못 받도록 설정
  name String?        // ?가 존재하면 값이 있어도 되고 비어있어도 됨(위 ?가 없는 경우에는 무조건 있어야 함)
  todos Todo[]          // Todo에서 relation를 연결했기때문에 사용
  createdAt DateTime @default(now())    // now() - 현재 시간 저장
  updatedAt DateTime @updatedAt
}


model Todo {
  id Int @id @default(autoincrement())
  todo String
  isDone Boolean
  user User @relation(fields: [userId], references: [id])     // 1:N의 관계 사용(N쪽에서 정의함) - references에서 가져온 것을 fields라고 부르겠다
  userId Int    // 윗줄에서 참조한 id를 userId로 선언
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  // indexing 작업 - 검색효율 증가, sql사용
  @@index([userId])
}

Planetscale

개념

• MySQL 기반의 데이터베이스 클라우드 서비스입니다.
• 데이터베이스 셋팅 없이 CLI 명령어로 쉽게 연결할 수 있는 특징이 있습니다.

사용법

클라우드 데이터베이스 사이트: https://planetscale.com/

1. planetscale설치 전 스쿱 설치 : https://scoop.sh/ powershell에서 설치해야함!
안될경우 사용할 명령어 iex "& {$(irm get.scoop.sh)} -RunAsAdmin


2. https://github.com/planetscale/cli#installation 에서 명령어 설치

3. 아래 코드들 순서대로 실행
scoop update pscale
pscale auth login
-> auth login 확인가능


4. 새로운 DB 생성
pscale database create [DB이름] --region ap-northeast


5. 연결 명령어 사용
pscale connect to-do-list로 실행


6. .env 수정
DATABASE_URL 링크 수정


7. DB데이터 유지하면서 schema 수정사항 적용
npx prisma db push

prisma

개념

• Prisma는 Javascript 혹은 Typescript 로 데이터베이스를 다룰 수 있게 교량 역할을 하는 ORM(Object Relational Mapping)이다.
• 프로그래밍 언어를 사용하여 데이터베이스와의 상호작용을 할 수 있게 합니다.

설치 및 사용법

1. prisma랑 소통할 수 있도록 prisma클라이언트 설치
   사이트 : https://www.prisma.io/docs/concepts/components/prisma-client
   npm i @prisma/client
   
   
2. 스키마의 내용을 PlanetScale에 반영
   npx prisma db push
   
   
3. prisma 데이터베이스 관리툴 제공
   npx prisma studio
   
   
   
4. frontend에서 axios 사용하듯 backend에서 prisma를 아래와 같이 사용
   코드: const { PrismaClient } = require("@prisma/client");
   
   
5. 백엔드 열고 실행
   4.1 npm run dev 백엔드 실행
   4.2 npx prisma studio prisma studio 실행 중
   4.3 pscale connect to-do-list 클라우드 db실행 중(Planetscale)
   
   

코드

const express = require("express");
const { PrismaClient } = require("@prisma/client");

const router = express.Router();

const client = new PrismaClient();

// 유저생성
router.post("/", async (req, res) => {
  // 기존과 다르게 async와 trycatch 등장
  try {
    const { account } = req.body;

    const user = await client.user.create({
      data: {
        account,
      },
    });

    res.json({ ok: true, user });
  } catch (error) {
    console.error(error);
  }
});

// 유저조회

module.exports = router;

결과

-> 인섬니아(백엔드)를 이용하여 db에 user생성이 가능해졌다 !