Skip to content

Commit 21385a9

Browse files
committed
update post
1 parent 9b2f4b3 commit 21385a9

File tree

9 files changed

+150
-29
lines changed

9 files changed

+150
-29
lines changed

content/posts/프로젝트/당근마켓 클론코딩/당근마켓 클론코딩.md

Lines changed: 9 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ tags:
55
- study
66
- clone
77
createdAt: 2025-06-13 11:29:34
8-
modifiedAt: 2025-07-03 10:48:43
8+
modifiedAt: 2025-07-04 14:42:16
99
publish: 프로젝트/당근마켓 클론코딩
1010
related: ""
1111
series: ""
@@ -28,8 +28,8 @@ NomadCoders 강의에서 제공하는 파트 순서대로 진행한다.
2828
- [x] Tailwind 파트
2929
- [x] Authentication UI 파트
3030
- [x] ServerAction 파트
31-
- [~] Validation 파트
32-
- [ ] Prisma 파트
31+
- [x] Validation 파트
32+
- [~] Prisma 파트
3333
- [ ] Authentication 파트
3434
- [ ] Social Authentication 파트
3535
- [ ] Products 파트
@@ -47,27 +47,14 @@ NomadCoders 강의에서 제공하는 파트 순서대로 진행한다.
4747

4848
### 내부 노트
4949

50-
#### 프로젝트트 생성
50+
기본 셋업을 통해 프로젝트를 생성하면 기본적으로 tailwindcss가 설치되어 기본적으로 사용할 수 있다.
5151

52-
next.js로 프로젝트를 생성한다.
52+
- [[당근마켓 클론코딩으로 Tailwind 복습하기]]
53+
- [[당근마켓 클론코딩으로 Next.js 복습하기]]
54+
- [[당근마켓 클론코딩으로 Zod 배우기]]
55+
- [[당근마켓 클론코딩으로 Prisma 복습하기]]
5356

54-
- npx
55-
56-
```bash
57-
npx create-next-app@latest
58-
```
59-
60-
- bun
61-
62-
```bash
63-
bun create next-app
64-
```
65-
66-
기본 셋업을 통해 프로젝트를 생성하면 기본적으로 tailwindcss가 설치되어 기본적으로 사용할 수 있다.
67-
- [[당근마켓 클론코딩으로 Tailwind 복습하기]]
68-
- [[당근마켓 클론코딩으로 Next.js 복습하기]]
69-
- [[당근마켓 클론코딩으로 Zod 배우기]]
70-
- [[React 컴포넌트 속성 자식에 복제하기]]
57+
- [[React 컴포넌트 속성 자식에 복제하기]]
7158

7259
### 외부 자료
7360

content/posts/프로젝트/당근마켓 클론코딩/당근마켓 클론코딩으로 Next.js 복습하기.md

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ tags:
44
- carrot-market
55
- study
66
createdAt: 2025-06-30 08:48:51
7-
modifiedAt: 2025-07-03 14:59:00
7+
modifiedAt: 2025-07-04 14:41:20
88
publish: 프로젝트/당근마켓 클론코딩
99
related:
1010
- "[[당근마켓 클론코딩]]"
@@ -15,6 +15,20 @@ series: ""
1515

1616
![nextjs landing](_assets/attachments/당근마켓%20클론코딩/nextjs-landing.png)
1717

18+
## 프로젝트 시작하기
19+
20+
- npx
21+
22+
```bash
23+
npx create-next-app@latest
24+
```
25+
26+
- bun
27+
28+
```bash
29+
bun create next-app
30+
```
31+
1832
## 앱 라우터 기본 구조
1933

2034
Next.js는 폴더구조를 총해 라우트 경로를 정의한다.
Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
---
2+
tags:
3+
- project
4+
- carrot-market
5+
- prisma
6+
- study
7+
createdAt: 2025-07-04 14:44:19
8+
modifiedAt: 2025-07-04 17:18:05
9+
publish: 프로젝트/당근마켓 클론코딩
10+
related:
11+
- "[[당근마켓 클론코딩]]"
12+
series: ""
13+
---
14+
15+
# 당근마켓 클론코딩으로 Prisma 복습하기
16+
17+
> [!question] ORM 이란?
18+
>
19+
> Object Relatonal Mapping의 약자로 객체 지향 프로그래밍의 객체와 관계형 데이터베이스의 테이블을 매핑하여 개발자가 데이터베이스를 객체처럼 다룰 수 있게 해주는 기술이다.
20+
>
21+
> 쉽게 설명하면 데이터베이스의 테이블을 객체 처럼 다룰 수 있도록 통역해주는 통역사 역할을 한다.
22+
>
23+
> ORM을 사용하면 자동적으로 타입을 알 수 있기에 개발경험이 매우 향상된다.
24+
> Prisma 혹은 Drizzle같은 ORM을 한번 사용하고나면 해어나올 수 없다.
25+
26+
Prisma를 사용하기 위해선 먼저 DB가 어떻게 생겼는지 Prisma가 알 수 있도록 Schema를 작성해야 한다.
27+
이 Schema는 Prisma의 전용 언어에 따라 작성 되어야 한다.
28+
29+
Prisma는 여러가지 DB들과 연동이 가능하지만 해당 학습 프로그램에서는 로컬 DB인 sqlite를 사용하여 설정한다.
30+
31+
## 시작하기
32+
33+
```bash
34+
bun add prisma
35+
bunx prisma init
36+
```
37+
38+
위의 명령어를 통해 Prisma를 설치하면 `prisma/schema.prisma`과 기본 db url 설정을 담은 `.env` 파일이 생성된다.
39+
40+
```prisma
41+
// This is your Prisma schema file,
42+
// learn more about it in the docs: https://pris.ly/d/prisma-schema
43+
44+
// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
45+
// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
46+
47+
generator client {
48+
provider = "prisma-client-js"
49+
output = "../lib/generated/prisma"
50+
}
51+
52+
datasource db {
53+
provider = "postgresql"
54+
url = env("DATABASE_URL")
55+
}
56+
```
57+
58+
해당 파일을 살펴보면 기본적으로 `postgresql`을 사용하도록 설정되어 있으며 해당 부분을 프로젝트에 맞게 `sqlite`로 바꿔주어야 한다.
59+
60+
```prisma
61+
62+
datasource db {
63+
provider = "sqlite"
64+
url = env("DATABASE_URL")
65+
}
66+
67+
```
68+
69+
`env(DATABASE_URL)`의 경우 새로 생성된 `.env`파일 안에 설정되어 있다.
70+
71+
```env
72+
DATABASE_URL="prisma+postgres://localhost:51213/?api_key=eyJkYXRhYmFzZVVybCI6InBvc3RncmVzOi8vcG9zdGdyZXM6cG9zdGdyZXNAbG9jYWxob3N0OjUxMjE0L3RlbXBsYXRlMT9zc2xtb2RlPWRpc2FibGUmY29ubmVjdGlvbl9saW1pdD0xJmNvbm5lY3RfdGltZW91dD0wJm1heF9pZGxlX2Nvbm5lY3Rpb25fbGlmZXRpbWU9MCZwb29sX3RpbWVvdXQ9MCZzaW5nbGVfdXNlX2Nvbm5lY3Rpb25zPXRydWUmc29ja2V0X3RpbWVvdXQ9MCIsIm5hbWUiOiJkZWZhdWx0Iiwic2hhZG93RGF0YWJhc2VVcmwiOiJwb3N0Z3JlczovL3Bvc3RncmVzOnBvc3RncmVzQGxvY2FsaG9zdDo1MTIxNS90ZW1wbGF0ZTE_c3NsbW9kZT1kaXNhYmxlJmNvbm5lY3Rpb25fbGltaXQ9MSZjb25uZWN0X3RpbWVvdXQ9MCZtYXhfaWRsZV9jb25uZWN0aW9uX2xpZmV0aW1lPTAmcG9vbF90aW1lb3V0PTAmc2luZ2xlX3VzZV9jb25uZWN0aW9ucz10cnVlJnNvY2tldF90aW1lb3V0PTAifQ"
73+
```
74+
75+
기본적으로 설정되는 env는 `postgresql`을 위한 주소이므로 사용할 필요가 없다 해당 값을 로컬에서 사용 가능한 `sqlite`로 변경하기 위해 다음과 같이 바꾸자
76+
77+
```env
78+
79+
DATABASE_URL="file:./database.db"
80+
```
81+
82+
![공급자 리스트](_assets/attachments/당근마켓%20클론코딩/prisma-schema-config-provider-lists.png)
83+
84+
다른 `provider`의 경우 `db > provider`값 부분의 `type`을 lsp를 통해 확인해 보면 `cockroachdb`,`mongodb`등 다른 친숙한 db들도 연결 가능한것을 확인할 수 있다.
85+
86+
## Schema 만들어보기
87+
88+
```prisma
89+
model User {
90+
id Int @id @default(autoincrement())
91+
username String @unique
92+
email String? @unique
93+
password String?
94+
phone String? @unique
95+
github_id String? @unique
96+
avatar String?
97+
}
98+
```
99+
100+
`Scheme.prisma` 파일 안에 모델을 정의하며 db의 형태를 만들어갈 수 있다.
101+
102+
### 필드의 형태
103+
104+
각 필드는 필드의 이름, 데이터 타입, 조건들 의 조합으로 이루어 진다.

public/link-map.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
2+
"0.inbox/당근마켓 클론코딩으로 Prisma 복습하기.md": "프로젝트/당근마켓 클론코딩/당근마켓 클론코딩으로 Prisma 복습하기",
23
"0.inbox/가상DOM의 원리.md": "자원/React/가상DOM의 원리",
34
"0.inbox/당근마켓 클론코딩으로 Validator 사용해보기.md": "프로젝트/당근마켓 클론코딩/당근마켓 클론코딩으로 Validator 사용해보기",
45
"3.resource/크롬 확장프로그램/크롬 확장프로그램에 케시메모리 추가하기.md": "자원/크롬 확장프로그램/크롬 확장프로그램에 케시메모리 추가하기",

public/meta-data.json

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
11
[
2+
{
3+
"urlPath": "프로젝트/당근마켓 클론코딩/당근마켓 클론코딩으로 Prisma 복습하기",
4+
"title": "당근마켓 클론코딩으로 Prisma 복습하기",
5+
"summary": "",
6+
"image": "",
7+
"tags": ["project", "carrot-market", "prisma", "study"],
8+
"series": "",
9+
"createdAt": "2025-07-04 14:44:19",
10+
"modifiedAt": "2025-07-04 17:18:05",
11+
"publish": "프로젝트/당근마켓 클론코딩"
12+
},
213
{
314
"urlPath": "자원/React/가상DOM의 원리",
415
"title": "가상DOM의 원리",
@@ -601,7 +612,7 @@
601612
"tags": ["project", "carrot-market", "study", "clone"],
602613
"series": "",
603614
"createdAt": "2025-06-13 11:29:34",
604-
"modifiedAt": "2025-07-03 10:48:43",
615+
"modifiedAt": "2025-07-04 14:42:16",
605616
"publish": "프로젝트/당근마켓 클론코딩"
606617
},
607618
{
@@ -612,7 +623,7 @@
612623
"tags": ["project", "carrot-market", "study"],
613624
"series": "",
614625
"createdAt": "2025-06-30 08:48:51",
615-
"modifiedAt": "2025-07-03 14:59:00",
626+
"modifiedAt": "2025-07-04 14:41:20",
616627
"publish": "프로젝트/당근마켓 클론코딩"
617628
},
618629
{
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"content": "\n# 당근마켓 클론코딩\n\n![당근마켓 클론코딩 랜딩](_assets/attachments/당근마켓%20클론코딩/carrot-landing.png)\n\n- [레포지토리](https://github.com/lazy-dinosaur/carrot-market-clone)\n\n## 프로젝트 정의\n\nNomadCoders의 [당근마켓 클론코딩](https://nomadcoders.co/carrot-market/) 강의를 수강하며 Next.js와 Tailwind CSS 그리고 Prisma에 대한 복습과 해당 내용을 블로그에 올리는것을 목표로 한다.\n\n## 계획 및 할일\n\nNomadCoders 강의에서 제공하는 파트 순서대로 진행한다.\n\n- [x] Tailwind 파트\n- [x] Authentication UI 파트\n- [x] ServerAction 파트\n- [~] Validation 파트\n- [ ] Prisma 파트\n- [ ] Authentication 파트\n- [ ] Social Authentication 파트\n- [ ] Products 파트\n- [ ] Product Upload 파트\n- [ ] Modals 파트\n- [ ] Caching 파트\n- [ ] Optimistic Updates 파트\n- [ ] Realtime Chat 파트\n- [ ] Live Streaming 파트\n- [ ] Next Js Extras 파트\n- [ ] Deployment 파트\n- [ ] Planetscale 파트\n\n## 핵심 노트 및 자료\n\n### 내부 노트\n\n#### 프로젝트트 생성\n\nnext.js로 프로젝트를 생성한다.\n\n- npx\n\n ```bash\n npx create-next-app@latest\n ```\n\n- bun\n\n ```bash\n bun create next-app\n ```\n\n 기본 셋업을 통해 프로젝트를 생성하면 기본적으로 tailwindcss가 설치되어 기본적으로 사용할 수 있다.\n - [[당근마켓 클론코딩으로 Tailwind 복습하기]]\n - [[당근마켓 클론코딩으로 Next.js 복습하기]]\n - [[당근마켓 클론코딩으로 Zod 배우기]]\n - [[React 컴포넌트 속성 자식에 복제하기]]\n\n### 외부 자료\n\n## 주요 의사결정 기록\n\n## 아이디어 및 메모\n",
3-
"plainContent": "레포지토리\nNomadCoders의 당근마켓 클론코딩 강의를 수강하며 Next.js와 Tailwind CSS 그리고 Prisma에 대한 복습과 해당 내용을 블로그에 올리는것을 목표로 한다.\nNomadCoders 강의에서 제공하는 파트 순서대로 진행한다.\n[x] Tailwind 파트\n[x] Authentication UI 파트\n[x] ServerAction 파트\n[~] Validation 파트\n[ ] Prisma 파트\n[ ] Authentication 파트\n[ ] Social Authentication 파트\n[ ] Products 파트\n[ ] Product Upload 파트\n[ ] Modals 파트\n[ ] Caching 파트\n[ ] Optimistic Updates 파트\n[ ] Realtime Chat 파트\n[ ] Live Streaming 파트\n[ ] Next Js Extras 파트\n[ ] Deployment 파트\n[ ] Planetscale 파트\nnext.js로 프로젝트를 생성한다.\nnpx\nbun\n기본 셋업을 통해 프로젝트를 생성하면 기본적으로 tailwindcss가 설치되어 기본적으로 사용할 수 있다.\n당근마켓 클론코딩으로 Tailwind 복습하기]]\n[[당근마켓 클론코딩으로 Next.js 복습하기]]\n[[당근마켓 클론코딩으로 Zod 배우기]]\n[[React 컴포넌트 속성 자식에 복제하기"
2+
"content": "\n# 당근마켓 클론코딩\n\n![당근마켓 클론코딩 랜딩](_assets/attachments/당근마켓%20클론코딩/carrot-landing.png)\n\n- [레포지토리](https://github.com/lazy-dinosaur/carrot-market-clone)\n\n## 프로젝트 정의\n\nNomadCoders의 [당근마켓 클론코딩](https://nomadcoders.co/carrot-market/) 강의를 수강하며 Next.js와 Tailwind CSS 그리고 Prisma에 대한 복습과 해당 내용을 블로그에 올리는것을 목표로 한다.\n\n## 계획 및 할일\n\nNomadCoders 강의에서 제공하는 파트 순서대로 진행한다.\n\n- [x] Tailwind 파트\n- [x] Authentication UI 파트\n- [x] ServerAction 파트\n- [x] Validation 파트\n- [~] Prisma 파트\n- [ ] Authentication 파트\n- [ ] Social Authentication 파트\n- [ ] Products 파트\n- [ ] Product Upload 파트\n- [ ] Modals 파트\n- [ ] Caching 파트\n- [ ] Optimistic Updates 파트\n- [ ] Realtime Chat 파트\n- [ ] Live Streaming 파트\n- [ ] Next Js Extras 파트\n- [ ] Deployment 파트\n- [ ] Planetscale 파트\n\n## 핵심 노트 및 자료\n\n### 내부 노트\n\n기본 셋업을 통해 프로젝트를 생성하면 기본적으로 tailwindcss가 설치되어 기본적으로 사용할 수 있다.\n\n- [[당근마켓 클론코딩으로 Tailwind 복습하기]]\n- [[당근마켓 클론코딩으로 Next.js 복습하기]]\n- [[당근마켓 클론코딩으로 Zod 배우기]]\n- [[당근마켓 클론코딩으로 Prisma 복습하기]]\n\n- [[React 컴포넌트 속성 자식에 복제하기]]\n\n### 외부 자료\n\n## 주요 의사결정 기록\n\n## 아이디어 및 메모\n",
3+
"plainContent": "레포지토리\nNomadCoders의 당근마켓 클론코딩 강의를 수강하며 Next.js와 Tailwind CSS 그리고 Prisma에 대한 복습과 해당 내용을 블로그에 올리는것을 목표로 한다.\nNomadCoders 강의에서 제공하는 파트 순서대로 진행한다.\n[x] Tailwind 파트\n[x] Authentication UI 파트\n[x] ServerAction 파트\n[x] Validation 파트\n[~] Prisma 파트\n[ ] Authentication 파트\n[ ] Social Authentication 파트\n[ ] Products 파트\n[ ] Product Upload 파트\n[ ] Modals 파트\n[ ] Caching 파트\n[ ] Optimistic Updates 파트\n[ ] Realtime Chat 파트\n[ ] Live Streaming 파트\n[ ] Next Js Extras 파트\n[ ] Deployment 파트\n[ ] Planetscale 파트\n기본 셋업을 통해 프로젝트를 생성하면 기본적으로 tailwindcss가 설치되어 기본적으로 사용할 수 있다.\n당근마켓 클론코딩으로 Tailwind 복습하기]]\n[[당근마켓 클론코딩으로 Next.js 복습하기]]\n[[당근마켓 클론코딩으로 Zod 배우기]]\n[[당근마켓 클론코딩으로 Prisma 복습하기]]\n[[React 컴포넌트 속성 자식에 복제하기"
44
}

0 commit comments

Comments
 (0)