🌈TodoList _with Prisma_01

🪂 2023. 04. 13. Thursday_ 더이상 미루면 안될거 같아서 다시 velog 작성 시작 ! 🪂

---

✅ ToDoList

(with Prisma - Backend & Database)

⠀⠀⠀

Intro

안녕하세요!😁

모두 함께 4개월 동안 하나의 멋진 프로젝트를 완성하는 그날까지 화이팅합시다 !

* 이 곳에서는 당일에 배운 내용을 복습하는 용도로 글을 작성하려고 합니다.

* 지난 시간에 작업했던 "To-Do-List" 프로젝트에 Prisma를 적용해 보려고 합니다 ! 오늘 이 시간에는 Prisma 기본 세팅에 관한 내용을 복습해 보겠습니다.
⠀⠀⠀⠀
⠀⠀

---

✅ Prisma 기본 세팅

👉 STEP 01. 파일 생성 ( .jsx or .js)⠀⠀

✔️ 01. bakend 파일(제일 처음 생성)

⠀⠀▪️ app.js 파일 생성⠀⠀⠀⠀⠀⠀⠀⠀⠀--> ⠀⠀⠀⠀⠀⠀(아래 기본 setting 명령어 작성 후 생성)
⠀⠀▪️ routes/user.js 파일 생성하기⠀--> ⠀⠀⠀⠀⠀⠀(아래 기본 setting 명령어 작성 후 생성)

⠀⠀⠀⠀⠀
✔️ 02. frontend 파일 (제일 처음 생성)

⠀⠀⠀

👉 STEP 02. 기본 setting 명령어

✔️ express 설치

▪️ npm init
▪️ npm -i express

⠀⠀

✔️ nodemon 설치

▪️ npm i -D nodemon

▪️ 위 명령어를 실행하면 package.json 파일이 생성된다.

	🔸package.json 파일에서  다음 내용 수정하기

"scripts": {
	"dev": "nodemon app.js"
},

▪️ 'npm run dev' 명령어로 backend 서버 접속하기 !

⠀⠀⠀

👉 STEP 03. Prisma 사용 시작 !

✔️ Prisma 설치하기

▪️ npm i -D prisma 
▪️ 위 명령어 작성 후 prisma/schema.prisma 파일이 생성된다.

⠀⠀⠀
✔️ prisma/schema.prisma파일에 내용 작성하기

▪️ 01. User model명 작성하기  
	🔸id, account, name, createdAt, upDatedAt 정의 

      model User{
        id        Int     @id @default(autoincrement())
        account   String  @unique
        name      String?
        createdAt DateTime @default(now())
        upDatedAt DateTime @updatedAt
      }

▪️ 02. : Todo명 작성하기  
	🔸id, todo, isDone, userId, createdAt, updatedAt 정의

      model Todo {
        id Int @id @default(autoincrement())
        todo      String
        isDone    Boolean
        userId    Int
        createdAt DateTime @default(now())
        updatedAt DateTime @updatedAt

       @@index([userId])
       //검색 효율 증가하게 해주는 코드 
      }

▪️ 03. : User -- (1 : N)  --> Todo 관계설정
	🔸N 쪽인 Todo 에 다음 코드 추가하기

	user User @relation(fields:[userId], references:[id])
    /* 위 코드 뜯어 해석
    @relation : 스키마에서 두 유형간의 관계를 정의하는데 사용되는 지시문이다.
    fields:[userId] : 관계가 userId 필드를 기반으로 하도록 지정
    references:[id] : id는 관계의 대상을 지정한다.(User의 Id를 의미함)
    */
    
    

	🔸1 쪽인 User 에 다음 코드 추가하기

	todos     Todo[]

▪️ 04. 작성한 내용 살펴보기 !
	🔸 String? : '?'는 값이 있어도 되고, 없어도 되는 것을 의미한다.
    🔸 @default: 해당 필드의 기본값을 설정한다.
    🔸 @unique: 해당 필드의 값이 고유(unique)해야 함을 나타낸다.
    🔸 @updatedAt: 해당 필드가 업데이트 될 때마다 자동으로 업데이트된 시간을 저장한다.
    🔸 autoincrement()
    	: 새로운 사용자를 생성할 때마다 id 필드는 자동으로 이전 사용자의 id 값에 1을 더한 값으로 설정됩니다.
    🔸 @default{now()}를 작성하면 생성되는 순간 값을 createdAt으로 저장한다.
    🔸 upDatedAt
    	: 처음에는 생성시간으로 저장되어 있지만, @updataedAt을 활용하면 업데이트 되는 순간 값이 변경된다.

⠀⠀⠀

👉 STEP 04. MySQL DB 공급자로 설정

✔️ Schema.prisma 파일 수정하기

▪️ provider은 mysql로 변경
▪️ relationMode = "prisma" 추가
	🔸MySQL을 데이터베이스 공급자로 사용하도록 데이터 소스가 구성되고,
      관계 모드가 Prisma로 설정된다.

  datasource db {
      provider = "mysql"
      url      = env("DATABASE_URL")
      relationMode = "prisma"
  }

⠀⠀⠀

👉 STEP 05. PlanetScale

✔️ PlanetScale 이란 ?

▪️ 클라우드 네이티브 데이터베이스 서비스이다.
▪️ 전반적으로 사용하기 쉽다.
▪️ 기존 애플리케이션과 잘 통합된다.
▪️ 고도로 확장 가능하고 가용성이 높다. 

⠀⠀⠀

✔️ PlanetScale-CLI 설치하기

01. 사이트 접속 (https://planetscale.com/)
	▪️ 계정 생성
	▪️ database 생성하기_ 파일명 : to-do-list
    


02. SCOOP 를 먼저 설치해야 한다. 
	▪️ 사이트(https://scoop.sh/)에 들어가 다음 명령어 실행
    
	▪️ 주의할점 !!!! 꼭 PowerShell 터미넣에서 입력하기 !

> Set-ExecutionPolicy RemoteSigned -Scope CurrentUse
> irm get.scoop.sh | iex

⠀⠀⠀

03. pscale은 scoop을 통해 사용할 수 있다. 아래 명령어 입력

> scoop bucket add pscale https://github.com/planetscale/scoop-bucket.git

> scoop install pscale mysql
> scoop update pscale

⠀⠀⠀

04. 로그인하기
	▪️ PScale CLI에서 PScale 계정으로 로그인 가능한 명령어

> pscale auth 

⠀⠀

05. 사이트에서 생성한 db와 연결하기

> pscale connect to-do-list

⠀⠀

06. 환경변수 변경 (다댄부파일에서 진행ㅋ~)

> DATABASE_URL="mysql://~~~~~~~/to-do-list"

⠀⠀

👉 STEP 06. Prisma Studio 연결

✔️ backend 폴더 경로 terminal 새로 오픈 후 다음 명령어 입력

> npx prisma db push
> npx prisma studio

⠀

⠀⠀⠀

---

📌23.04.13