Vue TDD

Vue TDD - ํšŒ๊ณ ํŽธ

2020. 8. 10. 10:54
๋ชฉ์ฐจ
  1. ๐Ÿ“Œ ๋ชฉ์ฐจ
  2. ๐Ÿ“Œ ์„œ๋ก 
  3. ๐Ÿ“Œ TDD๋ฅผ ํ•˜๋ฉด์„œ ๊ฒช์—ˆ๋˜ ์–ด๋ ค์›€๋“ค
  4. 1. ์–ด๋””๊นŒ์ง€ test๋ฅผ ํ•ด์•ผํ• ๊นŒ?
  5. 2. ์–ด๋–ป๊ฒŒ ํ•˜๋ฉด ์˜์กด์„ฑ์„ ์ค„์ผ ์ˆ˜ ์žˆ์„๊นŒ?
  6. 3. testcase๊ฐ€ ์ž˜๋ชป ๋˜๋ฉด ์–ด์ฉŒ์ง€?
  7. ๐Ÿ“Œ TDD๋ฅผ ํ•˜๋ฉด์„œ ์ข‹์•˜๋˜ ์ ๋“ค
  8. ๐Ÿ“Œ ๊ฒฐ๋ก 
๋ฐ˜์‘ํ˜•

๐Ÿ“Œ ๋ชฉ์ฐจ

  • ์„œ๋ก 
  • TDD๋ฅผ ํ•˜๋ฉด์„œ ๊ฒช์—ˆ๋˜ ์–ด๋ ค์›€๋“ค
  • TDD๋ฅผ ํ•˜๋ฉด์„œ ์ข‹์•˜๋˜ ์ ๋“ค
  • ๊ฒฐ๋ก 

๐Ÿ“Œ ์„œ๋ก 

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ๊ทธ๋™์•ˆ ๋‹ค๋ค˜๋˜ tdd์— ๊ด€ํ•ด ํšŒ๊ณ  ํ•ด๋ณด๋Š” ํฌ์ŠคํŒ… ์ž…๋‹ˆ๋‹ค. ๊ฐœ์ธ์ ์œผ๋กœ tdd๋ฅผ ํ•˜๋ฉด์„œ ๊ฒช์—ˆ๋˜ ์–ด๋ ค์›€๋“ค ๊ทธ๋ฆฌ๊ณ  ๋А๊ผˆ๋˜ ์ƒ๊ฐ๋“ค์„ ์ •๋ฆฌํ•ด ๋ณด๋Š” ํฌ์ŠคํŒ…์ž…๋‹ˆ๋‹ค.

๐Ÿ“Œ TDD๋ฅผ ํ•˜๋ฉด์„œ ๊ฒช์—ˆ๋˜ ์–ด๋ ค์›€๋“ค

TDD๋ฅผ ํ•˜๋ฉด์„œ ๊ฒช์—ˆ๋˜ ์–ด๋ ค์›€๋“ค์€ ๋‹ค์Œ ์„ธ๊ฐ€์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

  1. ์–ด๋””๊นŒ์ง€ test๋ฅผ ํ•ด์•ผํ• ๊นŒ?
  2. ์–ด๋–ป๊ฒŒ ํ•˜๋ฉด ์˜์กด์„ฑ์„ ์ค„์ผ ์ˆ˜ ์žˆ์„๊นŒ?
  3. testcase๊ฐ€ ์ž˜๋ชป ๋˜๋ฉด ์–ด์ฉŒ์ง€?

1. ์–ด๋””๊นŒ์ง€ test๋ฅผ ํ•ด์•ผํ• ๊นŒ?

๋ชจ๋“  ์ฝ”๋“œ๋ฅผ test code๋กœ ์ปค๋ฒ„ํ•œ๋‹ค๋Š” ๊ฒƒ์€ ๋งค์šฐ ์–ด๋ ต๊ณ  ๋น„์ƒ์‚ฐ์ ์ธ ์ผ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ์–ด๋””๊นŒ์ง€ testcode๋ฅผ ์ž‘์„ฑ์„ ํ•ด์•ผํ• ๊นŒ์š”? ์–ด๋А ๋ถ€๋ถ„์—์„œ ์‹ค์ˆ˜๊ฐ€ ๊ฐ€์žฅ ๋งŽ์ด ๋‚ ๊นŒ์š”? ์ด๋Ÿฐ๊ฒƒ๋“ค์€ ์–ด์ฉ”์ˆ˜ ์—†๋Š” ๊ฒฝํ—˜์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ testcode๋ฅผ ์ฒ˜์Œ์—๋Š” ๊ณต๋ถ€ํ•˜๋“ฏ์ด ๋ชจ๋“  ๊ฒƒ์„ ํ…Œ์ŠคํŒ…ํ•ด๋ณด๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ๊ฐ€๊ณ  ์ ์ฐจ ์ด๋Ÿฐ ๋ถ€๋ถ„์€ ๊ตณ์ด ํ•ด์•ผํ• ๊นŒ? ์ด๋Ÿฐ ๋ถ€๋ถ„์—์„œ๋Š” test๊ฐ€ ํ•„์š”์—†์„๊ฑฐ ๊ฐ™์•„. ๋ผ๊ณ  ํ•˜๋Š” ๋ถ€๋ถ„์ด ์ƒ๊ธฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ๊ทธ๋•Œ ์ฐจ๊ทผํžˆ ์ค„์—ฌ๋‚˜๊ฐ€๊ณ  ์ •๋ง ํ•„์š”ํ•œ ๋ถ€๋ถ„๋“ค์„ test๋ฅผ ํ•˜๋Š” ๊ฒฝํ—˜์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

2. ์–ด๋–ป๊ฒŒ ํ•˜๋ฉด ์˜์กด์„ฑ์„ ์ค„์ผ ์ˆ˜ ์žˆ์„๊นŒ?

ํ…Œ์ŠคํŠธ๋ฅผ ํ•˜๋ฉด์„œ ๊ฐ€์žฅ ํฌ๊ฒŒ ๊ณ ๋ฏผ์„ ํ–ˆ๋˜ ๋ถ€๋ถ„๋“ค์€ ์ตœ๋Œ€ํ•œ ๊ฒฝ๋Ÿ‰ํ™” ํ•˜์—ฌ ๊ธฐ๋Šฅ์ด ์ถ”๊ฐ€๋˜์–ด๋„ ๊ธฐ์กด์˜ test๊ฐ€ ๊นจ์ง€์ง€ ์•Š๊ฒŒ ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋„ˆ๋ฌด ์ž‘์€ ๋‹จ์œ„๋กœ ์ชผ๊ฐœ์ง€๋ฉด testcode๋งŒ ๋งŽ์•„์งˆ ๋ฟ ์•„๋‹ˆ๋ผ ๊ฐ€๋…์„ฑ์ด ๋„ˆ๋ฌด ๋–จ์–ด์ง€๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ด๋ถ€๋ถ„ ๋˜ํ•œ ๊ฒฝํ—˜์— ์˜ํ•œ... ์ด๋ผ๊ณ  ๋ง์„ ํ•  ์ˆ˜ ์—†์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค...๐Ÿ˜ญ

3. testcase๊ฐ€ ์ž˜๋ชป ๋˜๋ฉด ์–ด์ฉŒ์ง€?

์ž˜๋ชป๋œ ํ˜น์€ ์ปค๋ฒ„ํ•˜์ง€ ๋ชปํ•˜๋Š” testcase๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋•Œ ๋‚ด๊ฐ€ ์ง  test code๋Š” ์–ผ๋งˆ๋‚˜ ์‹ ๋ขฐํ•  ์ˆ˜ ์žˆ๋А๋ƒ ๋ผ๋Š” ๋ฌธ์ œ์— ์ง๋ฉด ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ด๋ถ€๋ถ„๋„ ๊ฒฝํ—˜์— ์˜ํ•ด ์Œ“์—ฌ๊ฐ€์•ผ ํ•˜๋Š” ๋ถ€๋ถ„์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ € ๊ฐ™์€ ๊ฒฝ์šฐ ์˜คํ”ˆ์†Œ์Šค์— ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ์งœ๋…ผ test code๋ฅผ ํ•œ๋ฒˆ์”ฉ ๋ณด๋Š” ๊ฒƒ ์–ด๋–ค ์‹์œผ๋กœ ํ…Œ์ŠคํŠธ๋ฅผ ํ•˜๋‚˜๋ฅผ ๊ฒฝํ—˜ํ•ด๋ณด๋ฉด์„œ ์ž๊ธฐ ๊ฒƒ์— ํ•˜๋‚˜ํ•˜๋‚˜ ์ ์šฉํ•ด๊ฐ€ ๋ณด๋Š”๊ฒƒ ์ž…๋‹ˆ๋‹ค.

๐Ÿ“Œ TDD๋ฅผ ํ•˜๋ฉด์„œ ์ข‹์•˜๋˜ ์ ๋“ค

TDD๋ฅผ ํ•˜๋ฉด์„œ ๊ฐ€์žฅ ์ข‹์•˜๋˜ ์ ์€ ์ฝ”๋“œ๊ฐ€ ์ •๋ˆ์ด ๋˜๋Š” ๊ฒƒ ๊ทธ๋ฆฌ๊ณ  debugํ•˜๋Š” ์‹œ๊ฐ„์ด ๊ธฐํ•˜๊ธ‰์ˆ˜์ ์œผ๋กœ ์ค„์—ˆ๋‹ค๋Š” ๊ฒƒ ์ž…๋‹ˆ๋‹ค. ์ดˆ๋ฐ˜์—๋Š” test case๋ฅผ ์งœ๋ณด๋А๋ผ ๊ฐœ๋ฐœ ์‹œ๊ฐ„์ด ๋Š˜์–ด๋‚ฌ์ง€๋งŒ ์ „์ฒด์ ์œผ๋กœ๋Š” debugํ•˜๋Š” ์‹œ๊ฐ„์ด ์ค„์—ˆ๊ธฐ์— ๊ฐœ๋ฐœ ์‹œ๊ฐ„์ด ์ค„์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ถ€๋ถ„์€ ๊ต‰์žฅํžˆ ์ข‹์•˜์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ ์ž๊ธฐ์ž์‹ ์— ๋Œ€ํ•œ ๋Š์Œ ์—†๋Š” ๋„์ „์ž…๋‹ˆ๋‹ค. ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ฅผ ์งœ๋ฉด์„œ ํ•˜๋‹ค๋ณด๋‹ˆ ์ž์—ฐ์Šค๋ž˜ ์ž๊ธฐ ์ž์‹ ์—๊ฒŒ ๋ถ€์กฑํ•œ ๋ถ€๋ถ„๋“ค์ด ๋ณด์˜€์Šต๋‹ˆ๋‹ค. ์ฝ”๋“œ์˜ ๊ฐ„๊ฒฐ์„ฑ, ๋…ผ๋ฆฌ์˜ ํ๋ฆ„, ๋””์ž์ธ ํŒจํ„ด ๋“ฑ ๋Š์ž„์—†์ด ๋ถ€์กฑํ•œ ๋ถ€๋ถ„๋“ค์ด ๋ณด์ด๊ณ , ์ด๋ถ€๋ถ„์€ ์ด๋ ‡๊ฒŒ ๋” ๊ฐ„์†Œํ™”ํ•  ์ˆ˜ ์žˆ์ง„ ์•Š์„๊นŒ? ํ•˜๋ฉด์„œ ์ž๊ทน์ด ๋งŽ์ด ๋˜์—ˆ๋˜๊ฑฐ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๐Ÿ“Œ ๊ฒฐ๋ก 

TDD๊ฐ€ ๋งŒ๋Šฅ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค. ๋” ์ข‹์€ ๊ฐœ๋ฐœ ๋ฐฉ๋ฒ•๋ก ์ด ์žˆ์„์ˆ˜๋„ ์žˆ๊ณ  ์ƒํ™ฉ์— ๋”ฐ๋ผ TDD๋ฅผ ํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•๋ก ์„ ํ•˜๋Š” ๊ฒƒ์ด ๋” ์ข‹์„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ view์— ๊ด€ํ•œ ๋ถ€๋ถ„์€ testing์„ ํ•˜๋Š” ๊ฒƒ์ด ๊ณผ์—ฐ ์˜ณ์€ ์ผ์ผ๊นŒ? ์‚ฌ๋žŒ์˜ ๋ˆˆ์ด ๋” ์ข‹์€๊ฑฐ ๊ฐ™์€๋ฐ... ๋ผ๊ณ  ์ƒ๊ฐ์„ ํ–ˆ๋˜ ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  view๋ฅผ ํ…Œ์ŠคํŒ… ํ•˜๋Š” ๋ถ€๋ถ„์— ๋Œ€ํ•ด์„œ๋Š” ์•„์ง๊นŒ์ง€๋„ testing์„ ํ•˜๊ธฐ ๋ณด๋‹ค ์ง์ ‘ ํ•œ๋ฒˆ ๋” ๋ณด๋Š” ๊ฒƒ์ด ๋งž๋‹ค๊ณ  ํŒ๋‹จ์ด ๋˜์–ด์ง€๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋งŽ์€ ๋ถ€๋ถ„ TDD๋Š” ์ •๋ง ์ข‹์€ ๋ฐฉ๋ฒ•๋ก  ์ด์—ˆ๊ณ  ์ด ๋ฐฉ๋ฒ•๋ก ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋งŽ์€ ์˜๊ฐ์„ ๋ฐ›์•˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ด๊ธ€์„ ํ†ตํ•ด ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž๋“ค์ด ์ œ๊ฐ€ ๋А๊ฒผ๋˜ ๊ฒฝํ—˜๋“ค๊ณผ ์˜๊ฐ์„ ์–ป์–ด ๋”๋งŽ์€ ์ข‹์€ TDD์— ๊ด€ํ•ด ํ† ๋ก ํ•˜๋Š” ์žฅ์ด ์žˆ์—ˆ์œผ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ทธ๋™์•ˆ Vue - TDDํŽธ์„ ์ฝ์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๋ฐ˜์‘ํ˜•

'Vue TDD' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

Vue TDD - ๋ฒˆ์™ธ2 (mixins tesing)  (0) 2020.09.23
Vue TDD - ๋ฒˆ์™ธ1 (Test Double)  (0) 2020.08.22
Test code ์‰ฝ๊ฒŒ ์“ฐ๊ธฐ - 1  (0) 2020.08.06
Vue TDD - E2E ํŽธ  (0) 2020.08.02
Vue TDD - Storybook ํŽธ  (0) 2020.07.31
  1. ๐Ÿ“Œ ๋ชฉ์ฐจ
  2. ๐Ÿ“Œ ์„œ๋ก 
  3. ๐Ÿ“Œ TDD๋ฅผ ํ•˜๋ฉด์„œ ๊ฒช์—ˆ๋˜ ์–ด๋ ค์›€๋“ค
  4. 1. ์–ด๋””๊นŒ์ง€ test๋ฅผ ํ•ด์•ผํ• ๊นŒ?
  5. 2. ์–ด๋–ป๊ฒŒ ํ•˜๋ฉด ์˜์กด์„ฑ์„ ์ค„์ผ ์ˆ˜ ์žˆ์„๊นŒ?
  6. 3. testcase๊ฐ€ ์ž˜๋ชป ๋˜๋ฉด ์–ด์ฉŒ์ง€?
  7. ๐Ÿ“Œ TDD๋ฅผ ํ•˜๋ฉด์„œ ์ข‹์•˜๋˜ ์ ๋“ค
  8. ๐Ÿ“Œ ๊ฒฐ๋ก 
'Vue TDD' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • Vue TDD - ๋ฒˆ์™ธ2 (mixins tesing)
  • Vue TDD - ๋ฒˆ์™ธ1 (Test Double)
  • Test code ์‰ฝ๊ฒŒ ์“ฐ๊ธฐ - 1
  • Vue TDD - E2E ํŽธ
eddie0329
eddie0329
Front-end Developer
๋ฐ˜์‘ํ˜•
eddie0329
Eddie Sunny's Blog
eddie0329
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (100)
    • Summary of Book (0)
    • Vue Study (11)
    • Vue TDD (9)
    • Vue BDD (5)
    • Design Pattern (9)
    • Javascript Study (3)
    • React Study (15)
    • React TDD (1)
    • Vue Storybook (2)
    • Refactoring (0)
    • Graphql_Apollo (3)
    • Svelte (8)
    • Open Source (1)
    • D3 (4)
    • Typescript (1)
    • CSS (2)
    • Android (0)
    • Java (0)
    • Kotlin (0)
    • ์žก๋‹ด (0)
    • Swift (19)
    • Rust (2)
    • ํšŒ์‚ฌ์ด์•ผ๊ธฐ (2)
    • ReactNative Study (2)
    • Vitest (0)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • Home

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • CSS
  • Cypress
  • React Native
  • client only
  • vue3
  • svelte
  • BDD
  • vue tdd
  • TypeScript
  • jest
  • Design Pattern
  • vue bdd
  • Vue test
  • swift5
  • TDD
  • react-component-slot
  • swift
  • apollo
  • Nextjs
  • react useRef
  • react
  • Vue
  • vue cypress
  • Javascript
  • D3
  • Kotlin
  • slot ํŒจํ„ด
  • storybook6
  • vue storybook
  • javascript pattern

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

hELLO ยท Designed By ์ •์ƒ์šฐ.
eddie0329
Vue TDD - ํšŒ๊ณ ํŽธ
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.