노마드스터디 리액트 10주 5기 8주차 주간회고록

8주차

기간:

24.08.05 ~ 24.08.11

 

요약 3줄

• 이직 성공! 처우 협의를 하며 약간 아쉬웠던 부분도 있었지만 요즘처럼 개발자 구직 시장이 어려울 때 빠르게 잘 구할 수 있어서 감사했다.
• 회사 프로젝트에서 입력폼 유효성 검사 코드를 구현해야 했는데 우연히 스터디 내용과 맞아서 실무에 적용해볼 수 있는 좋은 기회였다.
• 주 초에 강의를 못 듣고 코드 챌린지를 못했더니 계속 밀리는 것 같았다. 그 전날 과제했던 코드에 추가로 코드챌린지를 진행하는 거라 더 크게 느낀 것 같다.

 

 

---

 

이번주 목표

• 일일 강의, 일일 챌린지, 일일 스프린트 전부 완료하기
• 주간 회의록 작성하고 8월 9일(일) 17시까지 제출하기

 

결과

첫 번째, 두 번째 일일 챌린지를 수행하지 못했다ㅠㅠㅠㅠㅠ 왜 그랬을까 돌아보면 월요일에 이직이 확정되고 화요일에 퇴사를 전하면서 마음이 뒤숭숭해졌고... 수요일엔 친구들을 만나느라 그랬을 것 같다....는.... 핑계를 대본다.... 벌써 8주차가 지나가고 2주 정도의 스터디가 남았다!! 시간이 정말 빠르게 흐른 것 같다. 남은 스터디 강의와 챌린지는 빠짐 없이 완파해야겠다... 다짐! 또 다짐! 😭 

 

---

 

일일 스프린트

🔽 2024/08/05 월요일
8월은 어쩐지 연말이랑 가까워진 느낌이 든다... 올 한 해 아쉽지 않게 보람차게 보내보자!

[⚠️] 캐럿마켓 클론코딩: From #4.0 to #5.4 강의 듣기
[❌] 리액트 공식문서 읽기
[❌] 프리야 빈야사 요가


🔽 2024/08/06 화요일
꿉꿉한 날씨보다 중요한 건 스터디를 끝까지 하겠다는 꿋꿋한 마음... 껄껄 화이팅!

[⚠️] 캐럿마켓 클론코딩: From #4.2 to #5.4 강의 듣기 
[❌] 일일 코드 챌린지
[✅] 빈야사 요가


🔽 2024/08/07 수요일

[⚠️] 캐럿마켓 클론코딩: From #6.0 to #6.9 강의 듣기 
[❌] 일일 코드 챌린지

[✅] 친구들과 저녁 약속

 

🔽 2024/08/08 목요일
남은 코드 챌린지들은 무조건 완파...!! 😭

[✅] 캐럿마켓 클론코딩: From #7.0 to #7.6 강의 듣기 
[✅] 일일 코드 챌린지 제출


🔽 2024/08/09 금요일
오랜만에 여유로운 연차😁 푹 쉬다가 강의들어야지

[  ] 주간회고록 작성 및 제출
[  ] 캐럿마켓 클론코딩: From #8.1 to #8.4 강의 듣기
[  ] 아쉬탕가 요가
[  ] 푹 쉬기

 

---

이번주 강의 요약

새롭게 알게 된 것 :

1. Zod

• 모든 FormInput에 name이 있어야 한다. Server action에 form 데이터를 넘겨줘야 하기 때문에
• Zod에게 데이터의 형태나 타입을 설명할 때는 스키마를 만들어줘야 한다.
• 실제로 검사하는 것이 아닌 Zod에게 설명하는 것!

"use server";
import { z } from "zod";

const usernameSchema = z.string().min(5).max(10);

export async function createAccount(prevState: any, formData: FormData) {
  
  // Form 안에 name가져오는 것
  const data = {
    username: formData.get("username"),
    email: formData.get("email"),
    password: formData.get("password"),
    confirm_password: formData.get("confirm_password"),
  };
  usernameSchema.parse(data.username);
}

 

2. Prisma

 

Prisma ORM

• ORM이란 Object Relational Mapping
• Prisma는 나와 DB 사이의 통역사 느낌
• Prisma Schema Language 사용하여 어떤 종류의 데이터인지, 데이터가 어떻게 생겼는지 설명해야한다.

 

1) Prisma Setup

npm i prisma

// Root 폴더에 prisma 폴더 & .env 파일 생성됨
npx prisma init

 

 

1-1) /.env 파일

• 이 DATABASE_URL은 Prisma Schema에 의해 읽힐 것이다.
• 해당 파일은 보안 문제로 버전 관리에 올라가면 안 된다. 꼭!!!! gitignore에 추가!!!
  • warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
• database.db의 database는 원하는 이름으로 설정

// .env

DATABASE_URL="file:./database.db"

 

1-3) prisma/schema.prism 파일

• schema.prisma 파일은 내 DB URL을 읽고 있다.
• provider에 원하는 DB 넣어주면 된다.
  • 사용 가능한 DB:
  • postgresql, mysql, sqlite, sqlserver, mongodb or cockroachdb

// schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

// User 테이블 만들기
// model은 최소한, 한 개의 고유한 기준을 가져야 한다! (고유 구별자가 필요)
// @default(autoincrement())는 우리가 첫번째 사용자를 생성할 때 첫번째 사용자의 id는 자동으로 1이 된다. 다음은 2,3,4,5...
// SMS로그인 시 email과 password는 필요 없을 수도 있어서 Optional 처리

model User {
  id Int @id @default(autoincrement())
  username String @unique
  email String? @unique
  password String?
  phone String? @unique
  github_id String? @unique
  avatar String?
  create_at DateTime @default(now())
  updated_at DateTime @updatedAt
}

 

• Prisma는 통역사
• 내가 Prisma에게 Prisma Schema Language 로 말을 하면 사용하는 DB에 따라 Prisma가 적절한 포맷 파일이나 마이그레이션 파일 같은 모든 걸 만들어 주는 것이다.
• 확장 프로그램 Prisma 설치하면 포맷팅, 자동완성 등 코드 작성할 때 편리하다.

 

2) Schemas

• Prisma에게 우리가 만든 모델을 알려주고 그걸 우리 DB와 주고받으려면 migrate 필요
• 우릴 위한 Prisma Client를 만들어달라고 할 것
• 아래 명령어를 실행하면 우리가 위에서 작성했던 schema.prisma 에 대한 클라이언트를 생성해줌

// 1) migrate 생성
npx prisma migrate dev

// 2) migration 이름 작성
Enter a name for the new migration:

// 3) migrations 폴더 생성됨

migrations/
  └─ 20240808133713_add_user/
    └─ migration.sql
    
// 4) .env에 DATABASE_URL에 정의해둔 이름으로 database.db 파일이 생성됨

 

SQLite Viewer 설치하면 database.db 파일 확인 가능

 

 

.gitignore에 아래 내용 추가

// .gitignore

*.db
*.db-journal

 

 

npx prisma migrate dev를 실행하면 Prisma는 npx prisma generate 명령어도 같이 실행한다. 이 명령어는 나를 위한 Client를 생성해준다. DB와 소통하기 위한 Typescript로 작성된 Client가 생성된다.

✔ Generated Prisma Client (v5.18.0) to .\node_modules\@prisma\client in 93ms

 

 

3) Prisma Client

• lib/db.ts 생성 후 import하여 사용 할 수 있다.
• Client를 초기화하여 사용하면 됨

// db.ts
// Prisma에서 findMany등과 같은 데이터를 다루기 위한 내장 기능들이 많다
import { PrismaClient } from "@prisma/client";

const db = new PrismaClient();

// userName에 es가 들어간 데이터 찾는 기능
async function test() {
  const users = await db.user.findMany({
    where: {
      username: {
        contains: "es",
      },
    },
  });
  
  console.log(users);
  
  // username이 test인 유저 데이터를 생성하는 기능
  // const user = await db.user.create({
  //   data: {
  //     username: "test",
  //   },
  // });
  
}

test();

export default db;

 

 

4) Prisma Studio

npx prisma studio

• Prisma studio를 설치하면 data 테이블 확인하기가 정~~~말 편함
• 더블 클릭 후 수정하고 엔터 누르고 Save changes 누르면 끝

 

schema.prisma 파일을 수정하고 migrate한 다음 변경사항을 Studio에 반영하고 싶을 때 주의사항!

1. schema.prisma 파일을 수정
2. Studio를 먼저 껐다가 ⭐
3. migrate 실행
4. Studio 다시 시작

 

 

5) Relationships

// prisma/schema.prisma

model User {
  id Int @id @default(autoincrement())
  username String @unique
  email String? @unique
  password String?
  phone String? @unique
  github_id String? @unique
  avatar String?
  create_at DateTime @default(now())
  updated_at DateTime @updatedAt
  SMSToken SMSToken[]
}

// SMSToken 모델 내부에 있는 userId 필드가 User 모델의 id를 참고하고 있는 것
model SMSToken {
   id         Int      @id @default(autoincrement())
  token      String   @unique
  created_at DateTime @default(now())
  updated_at DateTime @updatedAt
  user       User     @relation(fields: [userId], references: [id])
  userId     Int
}

 

 

해당 코드는 실제로 저장되지 않고 모델들끼리 연결하기 위해 참조용으로만 쓰인다!

 user       User     @relation(fields: [userId], references: [id])

 

 

include 객체는 관계를 포함하는데 사용된다!

//db.ts
import { PrismaClient } from "@prisma/client";

const db = new PrismaClient();

async function test() {
  const token = await db.sMSToken.findUnique({
    where: {
      id: 1,
    },
    include: {
      user: true,
    },
  });
  console.log(token);
}
test();

export default db;

 

 

6) onDelete

• 다른 모델과 relation을 맺고 있을 때는 마음대로 삭제할 수 없다. 그래서 삭제할 때 어떤 방식을 취할지 설정해줘야 한다.
• 참조무결성 : 관계 데이터베이스 관계 모델에서 2개의 관련 있던 관계 변수(테이블) 간의 일관성(데이터 무결성)

 

• onDelete 기능을 이용하여 서로 연관된 모델이 지워질 때의 동작을 설정할 수 있다.
• Cascade는 사용자가 삭제 됐을 때 사용자에게 연결된 모든 SMSToken도 지워진다는 걸 의미한다.

Cascade
참조되는 레코드가 삭제될 때, 이를 참조하는 모든 레코드도 함께 삭제된다.

Restrict
참조되는 레코드를 삭제하려고 할 때, 이를 참조하는 레코드가 있다면 삭제를 막는다.


NoAction
Restrict와 유사하지만 DB에 따라 다르게 동작한다.
SQLite의 경우 관련된 기본 키가 수정되거나 삭제될 때, 어떠한 조치도 취해지지 않는다.

SetNull
참조되는 레코드가 삭제될 때, 이를 참조하는 레코드의 외래 키 필드를 null로 설정한다.

SetDefault
참조되는 레코드가 삭제될 때, 이를 참조하는 레코드의 외래 키 필드를 해당 필드의 기본값으로 설정한다.

 

https://www.prisma.io/docs/orm/prisma-schema/data-model/relations/referential-actions#cascade

Referential actions | Prisma Documentation

 

공식문서를 보면 자세히 알 수 있다.

 

---

주간 회의와 조별 활동

이번주 활동:

-

 

기억에 남는 것:

-

 

---

칭찬하고 싶은 점

• 퇴근 후 피곤해서 꾸벅꾸벅 졸면서도 끝까지 코드 챌린지를 제출한 것
• 저녁 약속이 있는 날엔 일찍 일어나서 강의를 들은 것

 

고치거나 버려야 할 점

• 자기 전 하루 마무리 없이 잠든 것. 오늘 하루는 어땠고 내일은 어떻게 보내야지 했던 나를 돌아보는 시간이 있었는데 바쁘고 피곤하단 이유로 소홀히 했다ㅠ
• 일 할 때 집중을 잘 못하는 것. 이직을 앞두고 걱정반 기대반이라 생각이 많아서 그런가 집중이 잘 안 된다. 정신 똑띠 차리자!