๐Ÿ‘จโ€๐Ÿ’ป MVC, MVVM, FLUX ํŒจํ„ด๊ณผ ์ฝ”๋“œ์˜ ํ๋ฆ„ - OOP Study 2๐Ÿ‘จโ€๐Ÿ’ป MVC, MVVM, FLUX ํŒจํ„ด๊ณผ ์ฝ”๋“œ์˜ ํ๋ฆ„ - OOP Study 2

๐Ÿ‘จโ€๐Ÿ’ป MVC, MVVM, FLUX ํŒจํ„ด๊ณผ ์ฝ”๋“œ์˜ ํ๋ฆ„ - OOP Study 2

์ตœ์ข… ํŽธ์ง‘ ์ผ์‹œ
Last updated June 14, 2022
ํƒœ๊ทธ
Javascript
๋ฐฐํฌ์ผ์ž
Apr 25, 2020
์ด๋ฒˆ์ฃผ์—๋Š”ย ์ž๋™์ฐจ๊ฒฝ์ฃผ๊ฒŒ์ž„ย ๋ฏธ์…˜์„ ์ง„ํ–‰ํ–ˆ๋Š”๋ฐ,ย mvcํŒจํ„ด์œผ๋กœ ๋””์ž์ธํ•˜๋Š” ๊ฒƒ๊ณผย ๋ชจ๋“  ๋กœ์ง์— ๋‹จ์œ„ ํ…Œ์ŠคํŠธ๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์ด ์ค‘์‹ฌ์˜ ๋ฏธ์…˜์ด์—ˆ๋‹ค. ์ด๋ฒˆ ๋ฏธ์…˜๋ถ€ํ„ฐ๋Š” vanillaJS๊ฐ€ ์•„๋‹Œ ๋ฆฌ์•กํŠธ์™€ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ์ง„ํ–‰ํ•ด๋ณด์•˜๋‹ค. UIํ…Œ์ŠคํŠธ๋Š” ์•„์ง ํ•˜๊ธฐ๊ฐ€ ๊นŒ๋‹ค๋กœ์›Œ์„œ ์ด๋ฒˆ ๋ฏธ์…˜์—์„œ๋Š” ์ œ์™ธํ•˜์˜€๊ณ  ๋‹จ์œ„ํ…Œ์ŠคํŠธ๋ฅผ ํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋ทฐ๋‹จ์˜ ์ฝ”๋“œ(์ปดํฌ๋„ŒํŠธ)์™€ ๋กœ์ง๋ถ€๋ถ„์˜ ์ฝ”๋“œ(๋ชจ๋“ˆ)์„ ๋ถ„๋ฆฌํ•ด์„œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด๋ณด์•˜๋‹ค.
์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ์—ฌ๋Ÿฌ๋””์ž์ธํŒจํ„ด์„ ๋น„๊ตํ•ด๋ณด๊ณ , ๋‚ด๊ฐ€ ์ž‘์„ฑํ•œ ์ฝ”๋“œ๋ฅผ ๋ฆฌ๋ทฐํ•ด๋ณด๋ฉฐ, ์ฝ”๋“œ๋ฅผ ์–ด๋–ค ์‹์œผ๋กœ ์งœ์•ผํ•  ์ง€, ์ƒ๊ฐํ•ด๋ณด์•˜๋‹ค.

#. Series

์‹œ๋ฆฌ์ฆˆ ํ•œ๋ˆˆ์—๋ณด๊ธฐ[์ ‘๊ธฐ/ํŽผ์น˜๊ธฐ]

##. Source

๊นƒํ—ˆ๋ธŒ ์†Œ์Šค[์ ‘๊ธฐ/ํŽผ์น˜๊ธฐ]

1. MVC ํŒจํ„ด

MVC ํŒจํ„ด์€ Model + View + Controller ๋ฅผ ํ•ฉ์นœ ์šฉ์–ด๋กœ, ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ตฌ์กฐ๋ฅผ ๊ฐ–๋Š”๋‹ค.
notion imagenotion image
  • Modelย : ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋ฐ์ดํ„ฐ์™€ ๊ทธ ๋ฐ์ดํ„ฐ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ถ€๋ถ„
  • Viewย : ์‚ฌ์šฉ์ž์—์„œ ๋ณด์—ฌ์ง€๋Š” UI ๋ถ€๋ถ„
  • Controllerย : ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ(Action)์„ ๋ฐ›๊ณ  ์ฒ˜๋ฆฌํ•˜๋Š” ๋ถ€๋ถ„
์ถœ์ฒ˜:ย https://beomy.tistory.com/43
์ฆ‰, action์ด Controller์— ์ „๋‹ฌ๋˜๋ฉด action์— ๋”ฐ๋ผ Model์„ ์—…๋ฐ์ดํŠธํ•˜๊ณ  View๋ฅผ ํ†ตํ•ด ๊ทธ๊ฒƒ์„ ์ถœ๋ ฅํ•œ๋‹ค.
MVC ํŒจํ„ด์€ ์„œ๋ฒ„ ์ธก ๋””์ž์ธํŒจํ„ด์œผ๋กœ, ์›น์˜ ๊ฒฝ์šฐ์— ์ ์šฉ ์‹œ์ผœ๋ณด์•˜๋‹ค. โ€œํด๋ผ์ด์–ธํŠธ(ํ”„๋ก ํŠธ)์—์„œ ์š”์ฒญ์„ controller์— ์ „๋‹ฌ > action์— ๋”ฐ๋ผ Model์„ ์—…๋ฐ์ดํŠธ > View๋กœ ์ „๋‹ฌ(?) > View๋Š” ๋‹ค์‹œ ์‘๋‹ต์„ ํด๋ผ์ด์–ธํŠธ(ํ”„๋ก ํŠธ)์— ์ „๋‹ฌ.(?)โ€ ํ•˜์ง€๋งŒ ์ด๋Ÿด ๊ฒฝ์šฐ, View๋Š” ํด๋ผ์ด์–ธํŠธ(ํ”„๋ก ํŠธ)์—์„œ ๊ตฌํ˜„๋˜๋Š” ๊ฒƒ์ด์ง€ ์„œ๋ฒ„์ธก์— ๊ณผ์—ฐ View๊ฐ€ ์žˆ๋Š”์ง€ ์˜๋ฌธ์ด ๋“ค์—ˆ๋‹ค.
๊ทธ๋ž˜์„œ ๊ด€๋ จ ์ž๋ฃŒ๋ฅผ ์ฐพ์•„๋ณด๋‹ˆ MVCํŒจํ„ด์€ ๊ฐ์ฒด์ง€ํ–ฅ ์‹œ์Šคํ…œ์ด UI๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋„๋ก ์„ค๊ณ„๋œ ํŒจ๋Ÿฌ๋‹ค์ž„์ด๋ฉฐ, ์›น ์„œ๋น„์Šค์— ์™„๋ฒฝํžˆ ๋Œ€์ž…ํ•˜๋ คํ•˜๋Š” ๊ฒƒ์€ ์˜ณ์ง€ ์•Š๋‹ค๋Š” ๊ฒฌํ•ด๊ฐ€ ์žˆ์—ˆ๋‹ค.ย https://softwareengineering.stackexchange.com/questions/324730/mvc-and-restful-api-serviceย MVC๋ฅผ ์ œ๋Œ€๋กœ ๋”ฐ๋ฅด๊ณ  ์žˆ๋Š”์ง€ ๋ณด๋‹ค๋Š” MVC ํŒจํ„ด์˜ ์ด์ (์ฝ”๋“œ๋ฅผ ์—ญํ• ์— ๋งž๊ฒŒ ๋‚˜๋ˆ„๋Š” ๊ฒƒ)์„ ์ดํ•ดํ•˜๊ณ  ๊ทธ๊ฒƒ์„ ๊ณ ๋ คํ•œ ์„ค๊ณ„ํ•˜๋Š” ๊ฒƒ์ด ๋” ์ค‘์š”ํ•˜์ง€ ์•Š๋‚˜ ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.

2. MVVM ํŒจํ„ด

MVVM ํŒจํ„ด์€ MVC์—์„œ ํŒŒ์ƒ๋œ ํŒจํ„ด์œผ๋กœ Model + View + View Model ๋ฅผ ํ•ฉ์นœ ์šฉ์–ด์ด๋‹ค. MVVM ํŒจํ„ด์€ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ตฌ์กฐ๋ฅผ ๊ฐ–๋Š”๋‹ค.
  • Modelย : ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋ฐ์ดํ„ฐ์™€ ๊ทธ ๋ฐ์ดํ„ฐ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ถ€๋ถ„
  • Viewย : ์‚ฌ์šฉ์ž์—์„œ ๋ณด์—ฌ์ง€๋Š” UI ๋ถ€๋ถ„
  • View Modelย : View๋ฅผ ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“  View๋ฅผ ์œ„ํ•œ Model. View๋ฅผ ๋‚˜ํƒ€๋‚ด ์ฃผ๊ธฐ ์œ„ํ•œ Model์ด์ž View๋ฅผ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•œ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๋Š” ๋ถ€๋ถ„.
์ถœ์ฒ˜:ย https://beomy.tistory.com/43
View์— action์ด ์ „๋‹ฌ๋˜๋ฉฐ, ํ”„๋ก ํŠธ์—”๋“œ์ธก์—์„œ ์ฃผ๋กœ์‚ฌ์šฉ๋˜๋Š” ํŒจํ„ด์ด๋‹ค.
โ€œView์—์„œ action๋ฐœ์ƒ > View๊ฐ€ View Model๋กœ action ์ „๋‹ฌ > View Model์€ Model์„ ์—…๋ฐ์ดํŠธํ•˜๊ณ  ์‘๋‹ต์„ ๋‹ค์‹œ ๊ฐ€์ ธ์˜ด > View Model์€ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์„ ํ†ตํ•˜์—ฌ View๋ฅผ ๊ฐฑ์‹ โ€ ์ด๋ ‡๊ฒŒ model ์˜ ๋ณ€ํ™”์— ๋”ฐ๋ผ, view๋ฅผ ๋ฐ”๋กœ๋ฐ”๋กœ ์—…๋ฐ์ดํŠธ ํ•ด์ฃผ๋Š”ย ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉย ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. Angular, vuejs ์˜ ๊ฒฝ์šฐ์—๋Š”ย ์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์„, ๋ฆฌ์•กํŠธ๋Š”ย ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์„ ์ด์šฉํ•œ๋‹ค.

3. FLUX ํŒจํ„ด

๊ธฐ์กด์˜ MVC๋ชจ๋ธ์˜ ์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ ๋ฐฉ์‹์€ ๋ชจ๋ธ์˜ ๋ณ€ํ™”์— ๋”ฐ๋ผ ๋ฐ”๋กœ๋ฐ”๋กœ ๋ทฐ๊ฐ€ ๋ณ€ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์‹œ์Šคํ…œ์ด ๋ณต์žกํ•ด์งˆ ์ˆ˜๋ก ์˜ˆ์ธก ๋ถˆ๊ฐ€๋Šฅํ•œ ์ƒํ™ฉ๋“ค์ด ์ƒ๊ธฐ๊ณ  ๋ฐ์ดํ„ฐ๋“ค์ด ๊ผฌ์—ฌ๋ฒ„๋ฆด ์ˆ˜ ์žˆ๋‹ค๋Š” ๋‹จ์ ์„ ๊ฐ€์ง€๊ณ  ์žˆ์—ˆ๋‹ค.
์—…๋ฐ์ดํŠธํ•  Model๋“ค์ด ๋‹ค์ˆ˜์ด๊ณ , ์„œ๋กœ ์˜์กด์„ฑ์ด ์–ฝํ˜€์žˆ์„ ๊ฒฝ์šฐ ์ด๋Ÿฐ ๊ฒฝ์šฐ๊ฐ€ ์ž์ฃผ ๋ฐœ์ƒํ•œ๋‹ค.
notion imagenotion image
FLUX ํŒจํ„ด์€ MVC์˜ย ์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์˜ ๋‹จ์ ์„ ํ•ด๊ฒฐํ•˜๊ณ ์ž ํŽ˜์ด์Šค๋ถ์—์„œ ๊ณ ์•ˆํ•œย ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉย ๋ฐฉ์‹์˜ ๋””์ž์ธ ํŒจํ„ด์ด๋‹ค. ๊ตฌ์กฐ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.
notion imagenotion image
  • Dispatcherย : Flux์˜ ๋ชจ๋“  ๋ฐ์ดํ„ฐ ํ๋ฆ„์„ ๊ด€๋ฆฌํ•˜๋Š” ํ—ˆ๋ธŒ ์—ญํ• ์„ ํ•˜๋Š” ๋ถ€๋ถ„
  • Storeย : ๋ฐ์ดํ„ฐ(์ƒํƒœ)๋ฅผ ์ €์žฅํ•˜๋Š” ๋ถ€๋ถ„
  • Viewย : Store์˜ ๋ณ€ํ™”๋ฅผ ๊ฐ์ง€ํ•˜๊ณ  View๋ฅผ ์—…๋ฐ์ดํŠธํ•ด์ฃผ๋Š” ๋ถ€๋ถ„. Controller View๋ผ๊ณ ๋„ ๋ถ€๋ฅธ๋‹ค.
์ถœ์ฒ˜:ย https://taegon.kim/archives/5288
์ฆ‰, โ€œAction์ด dispatch > dispatcher๋Š” action์— ๋งž๊ฒŒ store๋ฅผ ์—…๋ฐ์ดํŠธ > View๋Š” store์˜ ๋ณ€ํ™”๊ฐ€ ๊ฐ์ง€๋˜๋ฉด view์—…๋ฐ์ดํŠธโ€ ์˜ ๋ฐฉ์‹์œผ๋กœ ์ง„ํ–‰๋œ๋‹ค. ๋Œ€ํ‘œ์ ์œผ๋กœ React์™€ Redux๊ฐ€ fluxํŒจํ„ด์„ ์‚ฌ์šฉํ•˜๋ฉฐ, Vuex๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋„ fluxํŒจํ„ด์— ์˜๊ฐ์„ ๋ฐ›์•„ ๋งŒ๋“ค์–ด์กŒ๋‹ค๊ณ  ํ•œ๋‹ค.

4. ์ฝ”๋“œ์˜ ํ๋ฆ„

2020๋…„ 4์›” 26์ผ, ์ž ์‹ค ์˜คํ”„๋ผ์ธ ์Šคํ„ฐ๋””์—์„œ ์ฝ”๋“œ๋ฆฌ๋ทฐ ๋ฐฉ์‹์— ๋Œ€ํ•ด์„œ ๋“ค์„ ์ˆ˜ ์žˆ์—ˆ๋‹ค. ์ฝ”๋“œ๋ฆฌ๋ทฐ๋ฅผ ํ•ด์ฃผ์‹œ๋Š” ๋ถ„์— ๋”ฐ๋ฅด๋ฉด mvc๋ชจ๋ธ์˜ ์ปจํŠธ๋กค๋Ÿฌ๋ฅผ ์‹œ์ž‘์ ์œผ๋กœ ํ•œ์ค„ํ•œ์ค„ ์ฝ”๋“œ์˜ ํ๋ฆ„๋Œ€๋กœ ์ฝ์–ด๋‚ด๋ ค๊ฐ€์‹ ๋‹ค๊ณ  ํ•˜์˜€๋‹ค. ์˜ˆ๋ฅผ๋“ค์–ด, โ€œ์ปจํŠธ๋กค๋Ÿฌ๋ฅผ ์‹คํ–‰ > ์ธํ’‹์„ ๋ฐ›๊ณ  ์ž๋™์ฐจ๋ฐฐ์—ด์„ ์ƒ์„ฑ > ๋ชจ๋ธ์„ ๋ถˆ๋Ÿฌ์˜ค๊ณ  ์—…๋ฐ์ดํŠธ > ์ถœ๋ ฅโ€ ์ด๋Ÿฐ์‹์œผ๋กœ ๋ง์ด๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ์ฝ”๋“œ๋ฅผ ์ฝ๋Š” ํ๋ฆ„์ด ์ž˜ ์ดํ•ด๋˜๊ณ  ์ค‘๊ฐ„์— ํ๋ฆ„์ด ๋Š๊ธฐ์ง€ ์•Š์œผ๋ ค๋ฉด ํ•จ์ˆ˜(๋ฉ”์†Œ๋“œ)๋ช…, ๋ณ€์ˆ˜๋ช… ์ง“๋Š” ๊ฒƒ๋„ ์ค‘์š”ํ•˜๊ฒ ๊ตฌ๋‚˜๋ฅผ ๋Š๋ผ๊ฒŒ ๋˜์—ˆ๋‹ค.
์œ„์—์„œ ์–ธ๊ธ‰ํ–ˆ๋˜ ์—ฌ๋Ÿฌ ๋””์ž์ธํŒจํ„ด์˜ ๊ฒฝ์šฐ๋„ ๊ณตํ†ต์ ์œผ๋กœ๋Š” action์ด ์กด์žฌํ•œ๋‹ค. ํ”„๋ก ํŠธ์˜ ๊ฒฝ์šฐ ๋ทฐ๊ฐ€ ์—ฌ๋Ÿฌ๊ฐœ๊ฐ€ ์กด์žฌํ•˜๊ณ  ์—ฌ๋Ÿฌ action๋“ค์ด ๋ฐœ์ƒ๋œ๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— action์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๋กœ์ง ํ•˜๋‚˜ํ•˜๋‚˜๋ฅผ ํ๋ฆ„์„ ํƒ€๊ณ  ๊ฐ€๋ฉด์„œ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ณ , ํ๋ฆ„์ด ๋Š๊ธฐ์ง€ ์•Š๋„๋ก ์Šค์Šค๋กœ ์ ๊ฒ€ํ•˜๋Š” ์—ฐ์Šต๋„ ๋งŽ์ด ํ•ด๋ด์•ผ๊ฒ ๋‹ค๊ณ  ๋Š๋ผ๊ฒŒ ๋˜์—ˆ๋‹ค.

5. ํŒจํ„ด ์ ์šฉ(racing Car)

racing Car ๋ฏธ์…˜์€ย mvcํŒจํ„ด์œผ๋กœ ๋””์ž์ธํ•˜๋Š” ๊ฒƒ๊ณผย ๋ชจ๋“  ๋กœ์ง์— ๋‹จ์œ„ ํ…Œ์ŠคํŠธ๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์ด ์ค‘์‹ฌ์˜ ๋ฏธ์…˜์ด์—ˆ๋Š”๋ฐ, ๋‚˜๋Š” java๊ฐ€ ์•„๋‹ˆ๋ผ javascript์˜€๊ธฐ ๋•Œ๋ฌธ์—ย MVVM๊ณผย FLUXย ๋ชจ๋ธ์„ ์‚ฌ์šฉํ•ด์„œ ๋””์ž์ธํ•ด๋ณด์•˜๋‹ค. ์ •ํ™•ํžˆ ๋Œ€์ž…์‹œํ‚ค๋Š” ๊ฒƒ์€ ์–ด๋ ต๊ฒ ์ง€๋งŒ, containers ํด๋”์˜ App.tsx๋ฅผย View Modelย ๋กœ ์‚ฌ์šฉ์ž์˜ View์—์„œ action์„ ์ „๋‹ฌ๋ฐ›๋Š” ์—ญํ• ์„, components์˜ Processes.tsx์™€ Result.tsx๋ฅผ ๋ณ€๊ฒฝ๋œ View๋ฅผ ์ถœ๋ ฅํ•˜๋Š”ย Viewย ์˜ ์—ญํ• ์„ ํ•˜๋„๋ก ํ•˜์˜€๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋งˆ์ง€๋ง‰์œผ๋กœ modules๋ผ๋Š” ํด๋”์—๋Š”ย Modelย ์˜ ์—ญํ• ์„ ํ•˜๋Š” ํ•จ์ˆ˜๋“ค์„ ๋ชจ๋“ˆํ˜•ํƒœ๋กœ ๋ชจ์•„๋‘์—ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  React hooks ๋ฅผ ํ†ตํ•ด์„œ FLUXํŒจํ„ด์„ ๊ตฌํ˜„ํ•ด๋ณด์•˜๋‹ค.
์ด๋ฒˆ ๋ฏธ์…˜์— ๊ฒŒ์ž„์ ์ธ ์š”์†Œ๊นŒ์ง€ ์ถ”๊ฐ€ํ•ด์„œ ์†Œ๋งˆ๋ฒ• ํ”„๋กœ์ ํŠธ์—๋„ ์ถ”๊ฐ€ํ•ด๋ณด์•˜๋‹ค.ย ์†Œ๋งˆ๋ฒ•ํ”„๋กœ์ ํŠธ/racingcar
java-racingCar-1 โ”œโ”€โ”€ src โ”‚ โ”œโ”€โ”€ components โ”‚ โ”‚ โ”œโ”€โ”€ Processes.tsx (์‹คํ–‰๊ณผ์ •๋งŒ ์ถœ๋ ฅ) โ”‚ โ”‚ โ”œโ”€โ”€ Result.tsx (์‹คํ–‰๊ฒฐ๊ณผ๋งŒ ์ถœ๋ ฅ) โ”‚ โ”œโ”€โ”€ containers โ”‚ โ”‚ โ”œโ”€โ”€ App.test.tsx โ”‚ โ”‚ โ”œโ”€โ”€ App.tsx (๋ฉ”์ธ ์ปจํ…Œ์ด๋„ˆ) โ”‚ โ”œโ”€โ”€ modules โ”‚ โ”‚ โ”œโ”€โ”€ Car.test.ts โ”‚ โ”‚ โ”œโ”€โ”€ Car.ts (Car ๊ฐ์ฒด) โ”‚ โ”‚ โ”œโ”€โ”€ formValidator.test.ts โ”‚ โ”‚ โ”œโ”€โ”€ formValidator.ts (์‚ฌ์šฉ์ž ์ธํ’‹ ๊ฒ€์ฆ) โ”‚ โ”‚ โ”œโ”€โ”€ racingCar.test.tsx โ”‚ โ”‚ โ”œโ”€โ”€ racingCar.tsx (์ž๋™์ฐจ ๊ด€๋ จ ํ•จ์ˆ˜)

6. ํ…Œ์ŠคํŠธ์ฝ”๋“œ ์ž‘์„ฑ๊ทœ์น™ & ํŒ

๊ทธ๋ฆฌ๊ณ ย jestย ๋ฅผ ์ด์šฉํ•ด์„œ ๋ชจ๋“ˆ๋“ค์˜ ์œ ๋‹› ํ…Œ์ŠคํŠธ๋ฅผ ์ˆ˜ํ–‰ํ•  ํ…Œ์ŠคํŠธ์ฝ”๋“œ๋„ ์ž‘์„ฑํ•ด์ฃผ์—ˆ๋‹ค. ํ…Œ์ŠคํŠธ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์€ ์•„์ง๋„ ์ต์ˆ™์น˜ ์•Š์•„์„œ ์–ด๋ ค์šด ๊ฒƒ ๊ฐ™๋‹ค. ์ €๋ฒˆ ์‹œ๋ฆฌ์ฆˆ์—์„œ ํฌ์ŠคํŒ…ํ–ˆ๋˜ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ ์ž‘์„ฑ ํŒ์— ์ด๋ฒˆ์ฃผ ์˜คํ”„๋ผ์ธ ์Šคํ„ฐ๋””์—์„œ ๋ฐฐ์šด ๋‚ด์šฉ์„ ์ถ”๊ฐ€ํ•ด์„œ ๋‹ค์‹œ ์ ์–ด๋ณด๋ คํ•œ๋‹ค.

1๏ธโƒฃ ํ…Œ์ŠคํŠธ ์ด๋ฆ„์€ย ํ•œ๊ธ€๋กœ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค. ์œ„์˜ ํ…Œ์ŠคํŠธ๋Š” ๋งค์šฐ ๊ฐ„๋‹จํ•˜์ง€๋งŒ ํ”„๋กœ๊ทธ๋žจ์ด ๋ณต์žกํ•ด์ง€๋ฉด ํ…Œ์ŠคํŠธ๋ช…๋„ ๊ธธ์–ด์งˆ ๊ฒƒ์ด๊ณ  ๊ฐ๊ฐ ํ…Œ์ŠคํŠธ๋งˆ๋‹ค ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ณ  ์˜๋ฏธ๋ฅผ ์ž˜ ์ „๋‹ฌํ•ด์ฃผ์–ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
2๏ธโƒฃ ํ…Œ์ŠคํŠธ๋Š”ย ๊ฐ€์žฅ ์ž‘์€ ๋‹จ์œ„์˜ ๊ธฐ๋Šฅ๋ถ€ํ„ฐย ํ…Œ์ŠคํŠธํ•œ๋‹ค. ์˜ˆ๋ฅผ๋“ค์–ด, A,B๊ฐ€ C๋ผ๋Š” ๊ธฐ๋Šฅ์— ์˜์กด๋  ๊ฒฝ์šฐ, A,B๋ฅผ ํ…Œ์ŠคํŠธํ•˜๊ณ  ๊ฒ€์ฆ์ด ์™„๋ฃŒ๋˜๋ฉด C์—์„œ A,B๊ฐ€ ํฌํ•จ๋˜์ง€ ์•Š์€ ๊ธฐ๋Šฅ๋งŒ ํ…Œ์ŠคํŠธํ•˜๋ฉด ๋œ๋‹ค.
3๏ธโƒฃ ํ•˜๋‚˜์˜ ํ…Œ์ŠคํŠธ๋Š”ย ๋…๋ฆฝ์ ์ด์–ด์•ผ ํ•œ๋‹ค. ํ…Œ์ŠคํŠธ๋ผ๋ฆฌ ์˜์กดํ•ด์„œ๋Š” ์•ˆ๋œ๋‹ค.
4๏ธโƒฃ ํ…Œ์ŠคํŠธ๋Š”ย ํ•˜๋‚˜์˜ ๊ฐœ๋…๋งŒ ํ…Œ์ŠคํŠธย ํ•œ๋‹ค. ์ด๋ฒˆ ๋ฏธ์…˜์˜ ๊ฒฝ์šฐ, ์ž๋™์ฐจ๊ฐ€ ๊ฐ€๋Š”์ง€ ์•ˆ๊ฐ€๋Š”์ง€ ํ…Œ์ŠคํŠธํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ๊ฐ€๋Š” ๊ฒฝ์šฐ ํ•˜๋‚˜, ์•ˆ๊ฐ€๋Š” ๊ฒฝ์šฐ ํ•˜๋‚˜ ์ด๋Ÿฐ ๋ฐฉ์‹์œผ๋กœ ํ…Œ์ŠคํŠธ ํ•œ๋‹ค.
5๏ธโƒฃ ํ…Œ์ŠคํŠธ๋Š”ย 3๋‹จ๊ณ„๋กœ ๋‚˜๋ˆ„๊ธฐ. ์ฒซ ๋ฒˆ์งธ๋กœ ํ…Œ์ŠคํŠธย ๋ฐ์ดํ„ฐ๋ฅผย ๋งŒ๋“œ๋Š” ๋ถ€๋ถ„. (given) ๋‘ย ๋ฒˆ์งธ๋กœย ํ…Œ์ŠคํŠธย ๋ฐ์ดํ„ฐ๋ฅผย ์กฐ์ž‘ํ•˜๋Š” ๋ถ€๋ถ„. (when)์„ธย ๋ฒˆ์งธ๋กœย ์กฐ์ž‘ํ•œย ๊ฒฐ๊ณผ๊ฐ€ย ์˜ฌ๋ฐ”๋ฅธ์ง€ย ํ™•์ธํ•˜๋Š” ๋ถ€๋ถ„. (then)

7. ์ฐธ๊ณ 

8. ๋งˆ์น˜๋ฉฐ

์Šคํ„ฐ๋””๋ฅผ ํ•˜๋ฉด์„œ ์ฝ”๋“œ๋ฅผ ์ž์‹ ๋งŒ ์•Œ ์ˆ˜ ์žˆ๊ฒŒ ์งœ๋Š” ๊ฒƒ์ด ์‹ค๋ ฅ์ด ์•„๋‹ˆ๋ผ ๋ˆ„๊ตฌ๋‚˜ ์•Œ์•„๋ณผ ์ˆ˜ ์žˆ๊ฒŒ ์งœ๋Š” ๊ฒƒ์ด ์‹ค๋ ฅ์ด๋ผ๋Š” ๋ง์„ ๋“ฃ๊ฒŒ ๋˜์—ˆ๋‹ค. ์ด๋ฒˆ ์ฃผ์—๋Š”ย ์‰ฝ๊ณ , ํŽธํ•˜๊ฒŒ ํ๋ฆ„๋Œ€๋กœ ์ฝ์„ ์ˆ˜ ์žˆ๋Š” ํด๋ฆฐํ•œ ์ฝ”๋“œ๋ฅผ ์งœ๋Š” ๊ฒƒ๋„ ์ •๋ง ์ค‘์š”ํ•˜๊ตฌ๋‚˜๋ฅผ ๋Š๋‚„ ์ˆ˜ ์žˆ์—ˆ๋‹ค. ๋‹ค์Œ ๋ฏธ์…˜๋ถ€ํ„ฐ๋Š” ๊ตฌํ˜„๋ณด๋‹ค๋Š” ์ฝ”๋“œ๋ฅผ ๋‚˜๋ง๊ณ  ๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด ์ฝ์„ ๋•Œ๋„ ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ์งœ๋Š” ๊ฒƒ์— ๋” ์ค‘์ ์„ ๋‘๊ณ  ์ง„ํ–‰ํ•ด๋ณด์•„์•ผ๊ฒ ๋‹ค.

Loading Comments...