๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ‘จ‍๐Ÿ’ป web.dev/log

๋„๋ฉ”์ธ ๊ธฐ๋ฐ˜์˜ FE ๋””๋ ‰ํ† ๋ฆฌ ๊ตฌ์กฐ

by HandHand 2022. 3. 7.

 

๐Ÿ“Œ ์‹ ๊ทœ ์„œ๋น„์Šค ์•ฑ ๊ตฌ์กฐ, ์–ด๋–ป๊ฒŒ ์„ค๊ณ„ํ• ๊นŒ์š”?

ํ˜„์žฌ ์žฌ์ง ์ค‘์ธ ํšŒ์‚ฌ์˜ ์‚ฌ๋‚ด ์‹ ๊ทœ ์„œ๋น„์Šค๋ฅผ ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ์•ฑ ํ˜•ํƒœ๋กœ ๊ฐœ๋ฐœํ•˜๊ธฐ๋กœ ๊ฒฐ์ •๋œ ์ดํ›„

ํ”„๋ก ํŠธ์—”๋“œํŒ€์˜ ์ฒซ ๋ฒˆ์งธ ๊ณผ์ œ๋Š” ํฐ ๊ทœ๋ชจ์˜ ๋น„์ฆˆ๋‹ˆ์Šค๋ฅผ ์–ด๋–ป๊ฒŒ ๊ตฌ์กฐํ™”ํ•  ๊ฒƒ์ธ์ง€์˜€์Šต๋‹ˆ๋‹ค.

 

Vue ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌ์กฐํ™”ํ•˜๋Š” ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์ œ์•ˆ๋“ค์ด ์ปค๋ฎค๋‹ˆํ‹ฐ์— ๋งŽ์ด ์กด์žฌํ•˜์ง€๋งŒ

๊ทธ์ค‘ ๋Œ€๋ถ€๋ถ„์€ ๊ทœ๋ชจ๊ฐ€ ํฌ์ง€ ์•Š์€ ์•ฑ์— ์ ํ•ฉํ•œ ํ˜•ํƒœ์˜€๊ณ  ๋ฌด์—‡๋ณด๋‹ค ์ €ํฌ๋Š” ์™ธ์ฃผ ๊ฐœ๋ฐœ์ž๋ถ„๋“ค๋„

ํ•จ๊ป˜ ์ž‘์—…์„ ํ•ด์•ผ ํ•˜๋Š” ์ƒํ™ฉ์ด์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ณด๋‹ค ๋ช…ํ™•ํ•œ ๊ตฌ์กฐ๊ฐ€ ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค.

 

์ด๋ฒˆ ํฌ์ŠคํŠธ์—์„œ๋Š” ์–ด๋–ค ์ด์œ ๋กœ DDD ๋ฅผ ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•˜๊ฒŒ ๋˜์—ˆ๊ณ 

์ด๋ฅผ ํ†ตํ•ด ์–ป๊ฒŒ ๋œ ์ด์ ์ด ๋ฌด์—‡์ด์—ˆ๋Š”์ง€ ์œ„์ฃผ๋กœ ์ •๋ฆฌํ•ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ’ก ์ฃผ์˜!

์—ฌ๊ธฐ์„œ๋Š” DDD์— ๋Œ€ํ•œ ์ž์„ธํ•œ ์ด๋ก ์ ์ธ ๋‚ด์šฉ์€ ํฌํ•จํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
DDD์˜ ๊ฐœ๋…์„ ์ด์šฉํ•ด์„œ FE ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ ์„ค๊ณ„์— ์–ด๋–ค ์‹์œผ๋กœ ์ ์šฉํ–ˆ๋Š”์ง€ ์œ„์ฃผ๋กœ ๋‹ค๋ฃจ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

 

๐Ÿ“Œ ๋„๋ฉ”์ธ ๊ธฐ๋ฐ˜ ์„ค๊ณ„(DDD)๋ž€?

DDD (Domain Driven Design)?

DDD ๋ž€ ํฐ ๊ทœ๋ชจ์˜ ๋น„์ฆˆ๋‹ˆ์Šค๋ฅผ ๊ฐ domain ๋ณ„๋กœ ๋‚˜๋ˆ„์–ด ์„ค๊ณ„ํ•˜๋Š” ๋ฐฉ๋ฒ•๋ก ์ž…๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด e-commerce ์„œ๋น„์Šค์˜ ๊ฒฝ์šฐ์—๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋น„์ฆˆ๋‹ˆ์Šค๋ฅผ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

1

 

๊ฒฐ์ œ, ์ฃผ๋ฌธ, ๋ฐฐ์†ก, ๊ณ ๊ฐ ๊ด€๋ฆฌ, ์ธ์ฆ ๋“ฑ๊ณผ ๊ฐ™์ด ๋น„์ฆˆ๋‹ˆ์Šค๋ฅผ ๋ถ„๋ฆฌํ•ด์„œ ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด์ฒ˜๋Ÿผ DDD ๋Š” ํฐ ๊ทœ๋ชจ์˜ ์„œ๋น„์Šค๋ฅผ ์ž‘์€ ๋น„์ฆˆ๋‹ˆ์Šค ๋‹จ์œ„๋กœ ์ชผ๊ฐœ์–ด

๊ฐ ๋„๋ฉ”์ธ ๊ฐ„์˜ ์‘์ง‘๋„๋ฅผ ๋†’์ด๊ณ  ์„œ๋กœ ๋‹ค๋ฅธ ๋„๋ฉ”์ธ๋ผ๋ฆฌ๋Š” ๋Š์Šจํ•œ ์˜์กด๋„๋ฅผ ๊ฐ€์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

๐Ÿ“Œ ์™œ ๋„๋ฉ”์ธ ๊ธฐ๋ฐ˜์œผ๋กœ ์„ค๊ณ„ํ–ˆ๋‚˜์š”?

1๏ธโƒฃ ๋น„์ฆˆ๋‹ˆ์Šค ์š”๊ตฌ์‚ฌํ•ญ์— ๋งž์ถฐ ๋ชจ๋ธ๋ง ํ•˜๊ธฐ ์šฉ์ดํ•˜๋‹ค

์ €ํฌ ํŒ€์ด DDD ๋ฅผ ์„ ํƒํ•œ ๊ฐ€์žฅ ์ฒซ ๋ฒˆ์งธ ์ด์œ ์ž…๋‹ˆ๋‹ค.

ํ˜„์žฌ ์šด์˜ ์ค‘์ธ ์•ฑ์€ ์ˆ˜๋งŽ์€ ํฌ๊ณ  ์ž‘์€ ๋น„์ฆˆ๋‹ˆ์Šค๋“ค๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๊ณ 

๊ธˆ์œต์—… ํŠน์„ฑ์ƒ ํ˜„์—…๊ณผ์˜ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์ด ๋ฌด์—‡๋ณด๋‹ค ์ค‘์š”ํ•œ ํ™˜๊ฒฝ์ด์—ˆ์Šต๋‹ˆ๋‹ค.

 

์•„๋ฌด๋ž˜๋„ ๊ฐœ๋ฐœ์ž๋“ค์€ ํ˜„์—…๋ณด๋‹ค ๋น„์ฆˆ๋‹ˆ์Šค์˜ ์ดํ•ด๋„๊ฐ€ ๋‚ฎ์„ ์ˆ˜๋ฐ–์— ์—†๊ธฐ ๋•Œ๋ฌธ์—

๊ฐœ๋ฐœ์ž ์ž„์˜๋กœ ๋น„์ฆˆ๋‹ˆ์Šค๋ฅผ ์ชผ๊ฐœ์„œ ๊ด€๋ฆฌํ•˜๊ฒŒ ๋˜๋ฉด ์ถ”ํ›„ ์œ ์ง€๋ณด์ˆ˜์—์„œ ๊ด€๋ฆฌ ํฌ์ธํŠธ๊ฐ€

์ฆ๊ฐ€ํ•˜๊ฒŒ ๋˜๋Š” ์ผ์ด ๋ฐœ์ƒํ•  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

 

2๏ธโƒฃ ์œ ์ง€๋ณด์ˆ˜์— ์šฉ์ดํ•˜๋‹ค

DDD ๋Š” ๊ฐ ๋„๋ฉ”์ธ๋ณ„๋กœ ๋Š์Šจํ•œ ์˜์กด๋„์™€ ๋„๋ฉ”์ธ ๋‚ด์—์„œ๋Š” ๋†’์€ ์‘์ง‘๋„๋ฅผ ๊ฐ€์ง€๊ธฐ ๋•Œ๋ฌธ์—

์ƒˆ๋กœ์šด ๋น„์ฆˆ๋‹ˆ์Šค๋ฅผ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ์ œ๊ฑฐํ•˜๋Š”๋ฐ ์ˆ˜์›”ํ•˜๋‹ค๋Š” ์žฅ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

 

์ €ํฌ ํšŒ์‚ฌ์˜ ๊ฒฝ์šฐ ๊ธฐ์กด ์•ฑ 1.0 ์—์„œ ์šด์˜ํ•˜๋˜ ๋น„์ฆˆ๋‹ˆ์Šค์™€ ๋งˆ์ด๋ฐ์ดํ„ฐ ์‹ ๊ทœ ์„œ๋น„์Šค๋ฅผ

๋ณ„๋„์˜ ๋น„์ฆˆ๋‹ˆ์Šค ๋„๋ฉ”์ธ์œผ๋กœ ๋ถ„๋ฆฌํ•ด์„œ ๊ฐœ๋ฐœํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๋‘ ๊ฐœ์˜ ํฐ ๋น„์ฆˆ๋‹ˆ์Šค ๋‚ด์—์„œ๋„ ๋‹ค์‹œ ๋Œ€์ถœ, ์ž๋™์ฐจ, ๋งˆ์ด๋ฐ์ดํ„ฐ ์—ฐ๋™, ๊ด€๋ฆฌ ๋“ฑ

์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์„œ๋ธŒ ๋„๋ฉ”์ธ์œผ๋กœ ๋ถ„๋ฆฌํ•ด์„œ ๊ฐœ๋ฐœํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

 

3๏ธโƒฃ ๋„๋ฉ”์ธ ๊ฐ„ ๊ฒฐํ•ฉ๋„๊ฐ€ ๋‚ฎ์•„ ํ™•์žฅ์„ฑ์ด ์ข‹๋‹ค

2

๋„๋ฉ”์ธ๋ณ„๋กœ ๊ฒฐํ•ฉ๋„๊ฐ€ ๋‚ฎ๋‹ค๋Š” ๊ฒƒ์€ ๋งŽ์€ ๊ฐœ๋ฐœ์ž๋“ค์ด ํ•˜๋‚˜์˜ ์„œ๋น„์Šค๋ฅผ ๊ฐœ๋ฐœํ•  ๋•Œ

์„œ๋กœ์˜ ๊ฐœ๋ฐœ ์˜์—ญ์ด ๋‹ค๋ฅธ ์˜์—ญ์— ์˜ํ–ฅ์„ ์ฃผ๋Š” ์ •๋„๊ฐ€ ๋‚ฎ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•˜๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค.

์ €ํฌ๋Š” ์™ธ์ฃผ ๊ฐœ๋ฐœ์ž๋ถ„๋“ค๋„ ํ•จ๊ป˜ ๊ฐœ๋ฐœํ•˜๊ณ  ์žˆ๋Š”๋ฐ ์ด๋ถ„๋“ค๊ณผ ํ•จ๊ป˜ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ํ•˜๋ฉฐ

์ž‘์—…์„ ํ•  ์ˆ˜ ์—†๋Š” ์—…๋ฌด ํ™˜๊ฒฝ ํŠน์„ฑ์ƒ ์ถฉ๋Œ์„ ์ตœ๋Œ€ํ•œ ์ค„์ด๋ฉฐ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค.

 

DDD ๋ฅผ ์ด์šฉํ•˜๋ฉด ๊ฐœ๋ฐœ์ž๋“ค์€ ์ž์‹ ์ด ๋งก์€ ๋„๋ฉ”์ธ์˜ ์ฝ”๋“œ๊ฐ€ ํƒ€ ์˜์—ญ์— ์˜ํ–ฅ์„ ์ฃผ๋Š”

side effect ๋ฅผ ๊ฑฑ์ •ํ•˜์ง€ ์•Š์•„๋„ ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋ณด๋‹ค ํšจ์œจ์ ์ธ ๊ฐœ๋ฐœ์ด ๊ฐ€๋Šฅํ•  ๊ฒƒ์ด๋ผ ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.

 

๋˜ํ•œ ์ฐจํ›„ ํŠน์ • ๋น„์ฆˆ๋‹ˆ์Šค ๋„๋ฉ”์ธ์„ ๋…๋ฆฝ์ ์œผ๋กœ ๋ฐฐํฌ ๋ฐ ์šด์˜ํ•˜๋Š” ์š”๊ตฌ์‚ฌํ•ญ์ด ์ƒ๊ธธ ์ˆ˜๋„ ์žˆ์–ด

์ด๋ฅผ ๋ณ„๋„์˜ ํ”„๋กœ์ ํŠธ๋กœ ๋ถ„๋ฆฌํ•˜๋Š” ๋“ฑ์˜ ํ™•์žฅ์„ฑ๋„ ๊ณ ๋ คํ•ด์•ผ ํ•˜๋Š” ์ƒํ™ฉ์ด์—ˆ๊ธฐ ๋•Œ๋ฌธ์—

DDD ์˜ ๊ฐ ๋„๋ฉ”์ธ ์‚ฌ์ด์˜ ๋‚ฎ์€ ๊ฒฐํ•ฉ๋„๋Š” ํฐ ์žฅ์ ์œผ๋กœ ๋‹ค๊ฐ€์™”์Šต๋‹ˆ๋‹ค.

 

๐Ÿ“Œ ๋„๋ฉ”์ธ ๊ธฐ๋ฐ˜ ์„ค๊ณ„๋ฅผ ์ ์šฉํ•œ ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ ์˜ˆ์‹œ

๋‹ค์Œ์€ ์ €ํฌ๊ฐ€ DDD ๋ฅผ ์ ์šฉํ•ด์„œ ์„ค๊ณ„ํ•œ ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ์˜ ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค.

 

๋น„์ฆˆ๋‹ˆ์Šค๋ฅผ home, auto, menu, mydata ๋ผ๋Š” ํฐ ๋„๋ฉ”์ธ์œผ๋กœ ๋‚˜๋ˆ„๊ณ 

๊ฐ๊ฐ์˜ ๋„๋ฉ”์ธ์˜ ์„œ๋ธŒ ๋„๋ฉ”์ธ์„ section ์œผ๋กœ ๊ตฌ๋ถ„ํ–ˆ์Šต๋‹ˆ๋‹ค.

app ์—์„œ๋Š” ํŠน์ • ๋„๋ฉ”์ธ์— ์†ํ•ด์žˆ์ง€ ์•Š์€ ์ „์—ญ ๋น„์ฆˆ๋‹ˆ์Šค๋“ค์„ ๊ด€๋ฆฌํ•˜๋ฉฐ

๊ฐ๊ฐ์˜ ๋น„์ฆˆ๋‹ˆ์Šค ๋„๋ฉ”์ธ๋“ค์˜ store ์™€ router ๋ฅผ import ํ•ด์„œ

์ตœ์ƒ์œ„ App ์—๊ฒŒ ์ „๋‹ฌํ•ด์ฃผ๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.

src
ใ„ด public
ใ„ด assets
ใ„ด app
| ใ„ด store
| ใ„ด api
| ใ„ด util
| ใ„ด router
|
ใ„ด domain
| ใ„ด home
| ใ„ด auto
| ใ„ด menu
| ใ„ด mydata
| ใ„ด Index.vue
| ใ„ด api
| ใ„ด mydata-management
| ใ„ด mydata-auto
| ใ„ด section
| | ใ„ด mydata-management
| | ใ„ด mydata-auto
| | ใ„ด Index.vue
| |
| ใ„ด shared
| ใ„ด store
| ใ„ด util
| ใ„ด router
|
ใ„ด App.vue
ใ„ด main.ts

 

๐Ÿ“Œ ์ฃผ์˜์‚ฌํ•ญ

1๏ธโƒฃ ์œ ๋น„์ฟผํ„ฐ์Šค ์–ธ์–ด๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

์œ ๋น„์ฟผํ„ฐ์Šค ์–ธ์–ด ๋ž€ ํ˜„์—…๊ณผ ๋™์ผํ•œ ์šฉ์–ด๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋Š” ๊ฒƒ์„ ๋งํ•ฉ๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ์ž๋งŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ์šฉ์–ด๋“ค์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ํ˜„์—…๋ถ„๋“ค ํ˜น์€ ๋„๋ฉ”์ธ ์ง€์‹์ด ๋ถ€์กฑํ•œ ๊ฐœ๋ฐœ์ž๋ถ„๋“ค์ด

์‹ ๊ทœ๋กœ ํˆฌ์ž…๋˜์—ˆ์„ ๋•Œ ๋น„์ฆˆ๋‹ˆ์Šค ์ดํ•ด์— ์–ด๋ ค์›€์„ ๊ฒช์„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

 

2๏ธโƒฃ ์ ์šฉํ•˜๊ธฐ์ „์— ์ถฉ๋ถ„ํ•œ ๊ณ ๋ฏผ์ด ํ•„์š”ํ•˜๋‹ค.

๋„๋ฉ”์ธ ๊ธฐ๋ฐ˜์„ค๊ณ„๋ฐฉ์‹์ด ๋ฌด์กฐ๊ฑด ๋งŒ๋Šฅ์€ ์•„๋‹™๋‹ˆ๋‹ค.

๊ฐ ํ”„๋กœ์ ํŠธ ์„ฑ๊ฒฉ์— ๋งž๋Š” ๊ตฌ์กฐ๊ฐ€ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์–ต์ง€๋กœ ์ ์šฉ์‹œํ‚ค๋Š” ๊ฒƒ์€ ๋…์ด ๋  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

 

๐Ÿ“Œ ์ฐธ๊ณ  ์ž๋ฃŒ

Learn How Domain-Driven Design Can Benefit Your Nuxt.js Applications

DDD์™€ MSA ๊ธฐ๋ฐ˜์œผ๋กœ ์ข‹์€ ์„œ๋น„์Šค ๊ฐœ๋ฐœํ•˜๊ธฐ

๋ฐ˜์‘ํ˜•

๐Ÿ’ฌ ๋Œ“๊ธ€