Skip to content

๐Ÿคธ๐Ÿปโ€โ™‚๏ธ ์šฐ๋‹นํƒ•ํƒ• TDD ์ ์šฉ๊ธฐ

Soobeen Yoon edited this page Nov 17, 2022 · 30 revisions

TDD, ๊ณผ์—ฐ ๋ฌด์—‡์ธ๊ฐ€?

๊ณ ๋ฏผ

1. TDD๋ฅผ ์ ์šฉ ๋ฒ”์œ„๋Š” ์–ด๋–ป๊ฒŒ ์ •ํ• ๊นŒ?

  • ๊ธฐ๋ณธ ์ •๋ ฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜์—๋งŒ ์ ์šฉํ•˜์ž!
    • ๋ณตํ•ฉ ์ •๋ ฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜์˜ ๊ฒฝ์šฐ, ๊ธฐ๋ณธ ์ •๋ ฌ์ด ์™„๋ฒฝํ•˜๋‹ค๋ฉด ๋ฌธ์ œ ์—†์ด ์ˆ˜ํ–‰๋  ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ.
    • ํ”„๋กœ์ ํŠธ์˜ ํ•ต์‹ฌ feature๊ฐ€ TodoList ์ •๋ ฌ์ด๊ธฐ ๋•Œ๋ฌธ์—, ์‹œ๊ฐ„/๋น„์šฉ์„ ๊ณ ๋ คํ•˜์—ฌ core logic์—๋งŒ TDD๋ฅผ ์ ์šฉํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค.

๊ธฐ๋ณธ ์ •๋ ฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜

  • ์ •๋ ฌ์กฐ๊ฑด ๋‹น function 1๊ฐœ ์„ ์–ธ์„ ๊ฐ€์ •ํ•˜๊ณ , function ํ•˜๋‚˜ ๋‹น ํ•˜๋‚˜์˜ ํ…Œ์ŠคํŠธ ์ผ€์ด์Šค๋ฅผ ๋งŒ๋“ ๋‹ค.
Category Type Task Description
์•Œ๊ณ ๋ฆฌ์ฆ˜(TDD) ๊ธฐ๋ณธ ์ •๋ ฌ ํ…Œ์ŠคํŠธ Imminence ์ •๋ ฌ ๋‹ค๋ฅธ ์กฐ๊ฑด์ด ๋ชจ๋‘ ๋™์ผํ•˜๋‹ค๋ฉด, Imminent Todo๊ฐ€ Active๋œ๋‹ค.
์•Œ๊ณ ๋ฆฌ์ฆ˜(TDD) ๊ธฐ๋ณธ ์ •๋ ฌ ํ…Œ์ŠคํŠธ Importance ์ •๋ ฌ ๋‹ค๋ฅธ ์กฐ๊ฑด์ด ๋ชจ๋‘ ๋™์ผํ•˜๋‹ค๋ฉด, Importance๊ฐ€ ๋†’์€ Todo๊ฐ€ Active๋œ๋‹ค.
์•Œ๊ณ ๋ฆฌ์ฆ˜(TDD) ๊ธฐ๋ณธ ์ •๋ ฌ ํ…Œ์ŠคํŠธ EDF ์ •๋ ฌ ๋‹ค๋ฅธ ์กฐ๊ฑด์ด ๋ชจ๋‘ ๋™์ผํ•˜๊ณ , Deadline์ด ๋น ๋ฅธ Todo๊ฐ€ Active๋œ๋‹ค.

๋ณตํ•ฉ ์ •๋ ฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜

  • ์ •๋ ฌ ํ•จ์ˆ˜๊ฐ€ ์ œ๋Œ€๋กœ ํ˜ธ์ถœ๋˜์—ˆ๋Š”์ง€ ์ˆ˜์ค€์œผ๋กœ๋งŒ ํ…Œ์ŠคํŠธ์ผ€์ด์Šค๋ฅผ ์ž‘์„ฑํ•œ๋‹ค.
  • ๋ณตํ•ฉ์ ์ธ ์ƒํ™ฉ์ด๋ž€, ๋™์ ์ธ ๋ณ€ํ™”๊ฐ€ ์ƒ๊ฒผ์„ ๋•Œ ์ •๋ ฌ ๊ธฐ์ค€์— ๋งž๊ฒŒ ์ •๋ ฌ์ด ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ ์šฉ๋˜์—ˆ๋Š”์ง€ ํ™•์ธํ•˜๋Š” ์ž‘์—…์ด๋‹ค.
  • ์ด ๊ฒฝ์šฐ, ์ •๋ ฌ ํ•จ์ˆ˜๊ฐ€ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์„ค๊ณ„๋˜์—ˆ๋‹ค๋ฉด ํฐ ์ด์ƒ์ด ์—†์„ ๊ฒƒ์œผ๋กœ ํŒ๋‹จ๋˜๋ฏ€๋กœ, ์ œํ•œ์ ์œผ๋กœ ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋˜์—ˆ๋Š”์ง€ ํ™•์ธํ•˜๋Š” ์ˆ˜์ค€์œผ๋กœ ํ…Œ์ŠคํŠธํ•œ๋‹ค. TDD๋ฅผ ์™„์ „ํžˆ ์ ์šฉํ•œ๋‹ค๊ธฐ ๋ณด๋‹ค๋Š”, ๊ฐœ๋ฐœ์ž๊ฐ€ ์ง์ ‘ ํ™•์ธํ•˜๋Š” ๊ฒƒ์„ ๊ธฐ๋ณธ์œผ๋กœ ํ•œ๋‹ค.
Category Type Task Description
์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ณตํ•ฉ CREATE Imminent Todo List๊ฐ€ ๋น„์–ด ์žˆ๋Š” ์ƒํ™ฉ์—, Imminent Todo๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค. ์ด ๊ฒฝ์šฐ, ์ƒˆ๋กœ ์ƒ์„ฑ๋œ Todo๊ฐ€ Active๋œ๋‹ค.
์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ณตํ•ฉ CREATE Imminent Todo List์— Todo๊ฐ€ 1๊ฐœ ์ด์ƒ์ธ ์ƒํ™ฉ์— Imminent Todo๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค. ์ด ๊ฒฝ์šฐ, Imminent Todo List ์ค‘ Importance๊ฐ€ ๊ฐ€์žฅ ๋†’์€ Todo๊ฐ€ Active๋œ๋‹ค.
์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ณตํ•ฉ DELETE + ์ˆœ์„œ๊ด€๊ณ„ Imminent Todo List๊ฐ€ ๋น„์–ด์žˆ๊ณ , Distant Todo List์˜ Todo๊ฐ€ 2๊ฐœ ์ด์ƒ์ผ ๋•Œ Active Todo๋ฅผ ์ œ๊ฑฐํ•˜๋ฉด ๋‹ค์Œ Todo๊ฐ€ Active๋œ๋‹ค.

์ง„ํ–‰ ๋ฐฉ์‹

  • Test Code ์ž‘์„ฑ ํ›„ ์„ฑ๊ณต 100%๋˜๊ฒŒ๋” ๋งŒ๋“ค์ž
  • ์ฒ˜์Œ์—๋Š” 100% fail
  • ํ•œ ํ•ญ๋ชฉ์”ฉ success๋ฅผ ๋Š˜๋ ค๋‚˜๊ฐ€์ž๊ตฌ!

2. ํ…Œ์ŠคํŠธ ์ฝ”๋“œ ์ž‘์„ฑ์€ ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ํ•  ๊ฒƒ์ธ๊ฐ€?

  • ๊ณตํ†ต ์ „์ œ
    1. ์ „์ฒด Todo List๋Š” State๋กœ ๊ด€๋ฆฌํ•œ๋‹ค.
    2. ๋ชจ๋“  function์€ ์›๋ณธ ๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์ •ํ•˜์ง€ ์•Š๋„๋ก ์ž‘์„ฑํ•œ๋‹ค. (๋ถˆ๋ณ€์„ฑ ์ค€์ˆ˜)

1) TodoList Class ๋จผ์ € ์„ ์–ธ ํ›„ ํ…Œ์ŠคํŠธ

class TodoList {
  sort() {}
  update() {}
  push() {}
  pop() {}
}

const [todoList, setTodoList] = useState(new TodoList());

// sort ์ง„ํ–‰ ์‹œ
setTodoList(prevTodoList => {
  return prevTodoList.sort();
});

์žฅ์ 

  1. ํ•จ์ˆ˜ import๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.
  2. todoList.pop().sort(); ์™€ ๊ฐ™์ด ์ฒด์ด๋‹ํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
  3. todoList๋ผ๋Š” parameter๋ฅผ ๋งค๋ฒˆ ๋„˜๊ธฐ์ง€ ์•Š์•„๋„ ๋œ๋‹ค.

๋‹จ์ 

  1. ๋ฏธ๋ฆฌ ์„ ์–ธํ•ด๋‘์—ˆ๋‹ค๊ฐ€ ํด๋ž˜์Šค์˜ ๊ตฌ์กฐ๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด ๋‹ค์‹œ ์„ ์–ธํ•ด์•ผ ํ•  ์ˆ˜ ์žˆ๋‹ค.
  2. ํ…Œ์ŠคํŠธ ์‹œ ๋ณต์žกํ•  ์ˆ˜ ์žˆ๋‹ค.
expect(new TodoList([todo2, todo3, todo1]).sort()).toEqual(new TodoList([todo1, todo2, todo3])); //..? ํ™•์‹คํ•˜์ง„ ์•Š์Œ

์žฅ๋‹จ์„ ํŒŒ์•…ํ•˜๊ธฐ ์–ด๋ ค์šด ๋ถ€๋ถ„

  • todoList๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ํ•จ์ˆ˜๋“ค(sort, update ๋“ฑ)์ด class ๋‚ด์— ์„ ์–ธ๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ ๊ฐ•๊ฒฐํ•ฉ์ธ ๊ฑด ์•„๋‹Œ์ง€ ๊ณ ๋ฏผ๋œ๋‹ค. (?)

2) ๊ธฐ๋Šฅ ๋‹น ํ•จ์ˆ˜ ํ•˜๋‚˜์”ฉ ์„ ์–ธ ํ›„ ํ…Œ์ŠคํŠธ

const MANAGE_TODOLIST = {
  sort : () => {},
  update : () => {},
  push : () => {},
  pop : () => {},
};

const [todoList, setTodoList] = useState(new TodoList());

// sort ์ง„ํ–‰ ์‹œ
setTodoList(prevTodoList => {
  return MANAGE_TODOLIST.sort(todoList);
});

์žฅ์ 

  1. ํ…Œ์ŠคํŠธ ์ฝ”๋“œ/๋ฐ์ดํ„ฐ๊ฐ€ ๋‹จ์ˆœํ•˜๋‹ค. (๋‹จ์ˆœ ๋ฐฐ์—ด๋กœ ํ…Œ์ŠคํŠธ ๋ฐ์ดํ„ฐ๋ฅผ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.)
expect(sort([todo2, todo3, todo1])).toEqual([todo1, todo2, todo3]);

2. ์ •๋ง ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ๊ฐ™๋‹ค(?)

๋‹จ์ 

  1. ์ฒด์ด๋‹์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค. (ํ™•์žฅ์„ฑ์— ๋ถˆ๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค.)
  2. ๋งค๋ฒˆ todoList๋ฅผ parameter๋กœ ๋„˜๊ฒจ์•ผ ํ•œ๋‹ค.

์ถ”๊ฐ€๋กœ ๋…ผ์˜ํ–ˆ๋˜ ๋‚ด์šฉ๋“ค

FP์™€ OOP๋Š” ์„œ๋กœ ๋ฐฐ์ฒ™ํ•˜๋Š” ๊ฐœ๋…์ด ์•„๋‹ˆ๋‹ค.

  • ์•ž์„œ ๋…ผ์˜ํ–ˆ๋˜ class๋กœ ๊ด€๋ฆฌํ•˜๋Š” TodoList ์—ญ์‹œ ๋‚ด๋ถ€ ํ•จ์ˆ˜๋ฅผ ์ˆœ์ˆ˜ํ•จ์ˆ˜๋กœ ์ž‘์„ฑํ•˜๋ฉด FP + OOP์˜ ์žฅ์ ์„ ๋ชจ๋‘ ๋ˆ„๋ฆด ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

๐Ÿ’Š ๋น„ํƒ€500

๐Ÿ“Œ ํ”„๋กœ์ ํŠธ

๐Ÿพ ๊ฐœ๋ฐœ ์ผ์ง€

๐Ÿฅ‘ ๊ทธ๋ฃนํ™œ๋™

๐ŸŒด ๋ฉ˜ํ† ๋ง
๐Ÿฅ• ๋ฐ์ผ๋ฆฌ ์Šคํฌ๋Ÿผ
๐Ÿ’ ๋ฐ์ผ๋ฆฌ ๊ฐœ์ธ ํšŒ๊ณ 
๐Ÿฅ ์ฃผ๊ฐ„ ํšŒ๊ณ 
๐Ÿ‘ฏ ๋ฐœํ‘œ ์ž๋ฃŒ

Clone this wiki locally