FeConf2020 ๋ฆฌ๋ทฐ๐Ÿ–Š: ํ”„๋ก ํŠธ์—”๋“œ์—์„œ TDD๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ๊ฒƒ์„ ๋ณด์—ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์ •์€๊ฒฝยท2020๋…„ 11์›” 2์ผ
1

๐Ÿ‘ธ Front-End Queen

๋ชฉ๋ก ๋ณด๊ธฐ
101/271

๊ฐ•์—ฐ๋‚ด์šฉ ์‚ดํŽด๋ณด๊ธฐ

TDD (Test Driven Development)

  • 2014/์ผ„ํŠธ ๋ฒก, ํ…Œ์ŠคํŠธ ์ฃผ๋„ ๊ฐœ๋ฐœ
  • ํด๋ฆฐ์ฝ”๋“œ์˜ ๊ถ๊ทน์ ์ธ ๋ชฉํ‘œ๋Š”! "Clean Code that works"
  • TDD๋Š” "Test First Programming"์ด๋ผ๊ณ ๋„ ํ•จ

    TDD Cycle

TDD ์™œ ์–ด๋ ค์šด๊ฐ€?

  • ์ฝ”๋“œ์ž์ฒด๊ฐ€ testableํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ!
  • TDD๊ฐ€ ์‰ฌ์›Œ์ง€๋Š” ํ•ด๊ฒฐ๋ฒ•์€ "์ฝ”๋“œ๋ฅผ Testableํ•˜๊ฒŒ ์งœ๋Š” ๊ฒƒ!"

Testable Code ์–ด๋–ป๊ฒŒ ์งญ๋‹ˆ๊นŒ?

  • testable ์ฝ”๋“œ ์–ด๋–ป๊ฒŒ ์งญ๋‹ˆ๊นŒ?

๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ (Separation of Concerns)

  • testableํ•œ ์ฝ”๋“œ๋ฅผ ์งœ๊ธฐ ์œ„ํ•ด์„œ๋Š”, ๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ๋ฅผ ์ ์šฉํ•ด์•ผ!
  • ๊ฐ ๊ฐœ๋ณ„ ์š”์†Œ๋Š” ๊ฐœ๋ณ„์ด ๊ด€์‹ฌ์‚ฌ๋งŒ ๋‹ค๋ฃฐ ๊ฒƒ!
  • ๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ๊ฐ€ ์ œ๋Œ€๋กœ ์ด๋ฃจ์–ด์ง€์ง€ ์•Š์œผ๋ฉด! ๊ฑฐ๋Œ€ํ•œ ์ง„ํ™ ๋ฉ์–ด๋ฆฌ (Big Ball of Mud)๋กœ ๋ณ€ํ•œ๋‹ค!

Live Coding์œผ๋กœ TDD

์ฝ”๋“œ๋Š” ์—ฌ๊ธฐ์—

Redux ์™œ์จ์š”?

  • ์ƒํƒœ๊ด€๋ฆฌ ๋•Œ๋ฌธ์— ์“ด๋‹ค!
  • ๊ทธ๋ฆฌ๊ณ ! ์—ฐ์‚ฌ๋ถ„๊ป˜์„œ๋Š” "React์˜ ๊ด€์‹ฌ์‚ฌ" ๋ถ„๋ฆฌ ๋•Œ๋ฌธ์— ์“ด๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค๊ณ  ํ•˜์‹ ๋‹น!

React์˜ ๊ด€์‹ฌ์‚ฌ๋ž€?

  • React์˜ ๊ด€์‹ฌ์‚ฌ๋Š” ์ƒํƒœ์˜ ๋ฐ˜์˜(State Reflection)์ด๋‹ค!
  • ๋ฆฌ์•กํŠธ๋Š” ์ƒํƒœ์˜ ๋ฐ˜์˜์—๋งŒ ๊ด€์‹ฌ์žˆ์ง€! ์ƒํƒœ ๊ด€๋ฆฌ์—๋Š” ๊ด€์‹ฌ์ด ์—†๋‹ค๊ณ  ํ•œ๋‹ค.

Presentational Components์™€ Container Components

  • Container Components์˜ ํ•ต์‹ฌ์€! Container Components๋งŒ ๋ฆฌ๋•์Šค์˜ ์กด์žฌ๋ฅผ ์•ˆ๋‹ค๋Š” ๊ฒƒ!

๋Š๋‚€ ์ 

test๊ฐ€ ์–ด๋ ค์šด ๊ฒƒ์€ testableํ•˜์ง€ ๋ชปํ•ด์„œ๋ผ๋Š” ๋ง์— ๋”ฑ๐ŸŒฐ ํ•œ๋Œ€ ๋งž์•˜๋‹ค
ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ˆ˜ํ–‰ํ•˜๋Š” ์—ญํ• ์ด ๋งŽ์„ ๋•Œ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ ์ž‘์„ฑํ•˜๊ธฐ ๋‚œ๊ฐํ•ด์„œ, ๊ธฐ๋Šฅ์ด ๋ช…ํ™•ํ•œ ์ž‘์€ ์ปดํฌ๋„ŒํŠธ๋“ค๋งŒ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณค ํ–ˆ์—ˆ๋‹ค
์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ ์›์น™์— ๋”ฐ๋ผ ์ž˜ ๋‚˜๋ˆ ์„œ ํ…Œ์ŠคํŠธ์ฝ”๋“œ ์ž‘์„ฑ์ด ์šฉ์ดํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค๊ณ , ๊ฒฐ๊ณผ์ ์œผ๋กœ ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ์— test์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์•ผ๊ฒ ๋‹ค!

TDD๋Š” ์ฝ”๋”ฉ์Šต๊ด€
์ž‘์€ ๊ธฐ๋Šฅ(ํ•จ์ˆ˜๋ณด๋‹ค ์ž‘์€ ๋‹จ์œ„)์„ ์œ„ํ•œ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ฅผ ์งœ๊ณ  ์‹ค์ œ ์ฝ”๋“œ๋ฅผ ์งœ๊ณ  ํ™•์ธ
์ด ๊ณผ์ •์˜ ๋ฐ˜๋ณต๊ณผ
์ด๋ ‡๊ฒŒ ์ฝ”๋”ฉํ•˜๋Š” ์Šต๊ด€์„ ๊ธธ๋“ค์ด๋Š” ๊ฒƒ

Reference

profile
#์˜์‹์˜ํ๋ฆ„ #์ˆœ๊ฐ„์ˆœ๊ฐ„ #์ƒ๊ฐ์˜์Šค๋ƒ…์ƒท

0๊ฐœ์˜ ๋Œ“๊ธ€