the-zero ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό μž‘μ„±ν•˜λ©°

the-zero ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό μž‘μ„±ν•˜λ©°

Nov 26, 2023

κΉ€ν˜„κΈ°

#WEB

λ“€μ–΄κ°€λ©°

the-zero λ°±μ—”λ“œλ₯Ό λ‹΄λ‹Ήν•˜λ©΄μ„œ μž‘μ„±ν•˜κ²Œ 된 ν…ŒμŠ€νŠΈ μ½”λ“œμ— λŒ€ν•΄ κ³΅μœ ν•˜λŠ” μ‹œκ°„μ„ 가져보렀 ν•©λ‹ˆλ‹€.

ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό μž‘μ„±ν•˜κ²Œ 된 이유

ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό μž‘μ„±ν•˜κ²Œ 된 μ΄μœ λŠ” μ•„λž˜ 두 κ°€μ§€ λ•Œλ¬Έμž…λ‹ˆλ‹€.

  1. the-zero μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ μ‹ λ’°μ„±
  2. 이 μ½”λ“œλ₯Ό 보게 될 미래의 그룹원과 미래의 λ‚˜λ₯Ό μœ„ν•΄μ„œ

μ‹ λ’°μ„±

  • 잘 λ™μž‘ν•˜λŠ” μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ λ§Œλ“€μ—ˆλ‹€.
  • 일정에 μ«“κΈ°λŠλΌ λ§ˆμŒμ— λ“€μ§€ μ•ŠλŠ” μ½”λ“œλ₯Ό μˆ˜μ •ν•˜κ³  μ‹Άμ§€λ§Œ 잘 λ™μž‘ν•˜λŠ” μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ κ³ μž₯λ‚ κΉŒ κ±±μ •ν•˜λ©° λ¦¬νŒ©ν„°λ§μ„ 미룬닀.
  • κΈ‰ν•˜κ²Œ λ‹€μŒ 버전 κΈ°λŠ₯ μΆ”κ°€, μˆ˜μ •μ„ μœ„ν•΄ μ½”λ“œλ₯Ό μΆ”κ°€ν•œλ‹€.
  • κΈ°μ‘΄ μ½”λ“œμ™€ μƒˆλ‘œμš΄ κΈ°λŠ₯을 ν•˜λŠ” μ½”λ“œκ°€ μ–½νžˆκ³ μ„€ν‚€λ©° λ³΅μž‘ν•΄μ§„λ‹€.
  • κΈ°μ‘΄ κΈ°λŠ₯κ³Ό μƒˆλ‘œμš΄ κΈ°λŠ₯이 잘 λ™μž‘ν•˜λŠ”μ§€ ν…ŒμŠ€νŠΈν•œλ‹€.
  • κΈ°μ‘΄ κΈ°λŠ₯μ—μ„œ 였λ₯˜κ°€ λ°œμƒν•œλ‹€. μƒˆλ‘œμš΄ κΈ°λŠ₯ μ½”λ“œλ₯Ό μˆ˜μ •ν•œλ‹€.
  • μƒˆλ‘œμš΄ κΈ°λŠ₯μ—μ„œ 였λ₯˜κ°€ λ°œμƒν•œλ‹€. κΈ°μ‘΄ κΈ°λŠ₯ μ½”λ“œλ₯Ό μˆ˜μ •ν•œλ‹€.
  • κΈ°μ‘΄ κΈ°λŠ₯, μƒˆλ‘œμš΄ κΈ°λŠ₯을 μ™„λ²½νžˆ κ³ μ³€μ§€λ§Œ μ‹œκ°„μ΄ λ„ˆλ¬΄ 많이 지났고 μ½”λ“œλ₯Ό λ³΄λ‹ˆ 더 엉망진창이 λ˜μ–΄λ²„λ Έλ‹€.

μœ„μ™€ 같은 κ²½μš°λŠ” μ‹€λ¬΄μ—μ„œ μƒλ‹Ήνžˆ 많이 μ ‘ν•˜κ²Œ λ©λ‹ˆλ‹€. ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό μž‘μ„±ν•˜λ©΄ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 신뒰성에 λŒ€ν•œ μ΅œμ†Œν•œμ˜ μ•ˆμ „μž₯치λ₯Ό 확보할 수 μžˆμŠ΅λ‹ˆλ‹€.

μ‚¬μ΄λ“œ μ΄νŽ™νŠΈ μ΅œμ†Œν™”, κΈ°λŠ₯ μΆ”κ°€, μˆ˜μ •, λ¦¬νŒ©ν„°λ§μ— λŒ€ν•œ μ΅œμ†Œν•œμ˜ μ•ˆμ „μž₯치 확보λ₯Ό 톡해 ν…ŒμŠ€νŠΈ μ½”λ“œλŠ” μ• ν”Œλ¦¬μΌ€μ΄μ…˜ 신뒰성에 λŒ€ν•œ ν”Όλ“œλ°±μ„ λΉ λ₯΄κ²Œ μ–»μŒμœΌλ‘œμ¨(성곡 ν˜Ήμ€ μ‹€νŒ¨), μ½”λ“œ λ¦¬νŒ©ν„°λ§λ„ 더 적극적이게 λ©λ‹ˆλ‹€. 그리고 μ΄λŸ¬ν•œ κ²°κ³ΌλŠ” μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 신뒰성을 λ†’νžˆκ²Œ λ©λ‹ˆλ‹€.

μ½”λ“œλ₯Ό 보게될 미래의 그룹원과 미래의 λ‚˜λ₯Ό μœ„ν•΄μ„œ

  • ν•¨μˆ˜ ν•˜λ‚˜ν•˜λ‚˜, κΈ°λŠ₯ ν•˜λ‚˜ν•˜λ‚˜μ— 일일이 주석을 달 ν•„μš” 없이 κΉ”λ”ν•˜κ³  μ΄ν•΄ν•˜κΈ° 쒋은 μ½”λ“œ
  • 잘 μ§œμ—¬μ§„ ν…ŒμŠ€νŠΈ μ½”λ“œ

μœ„ 두 κ°€μ§€κ°€ κ°–μΆ°μ§„λ‹€λ©΄ 미래의 그룹원 ν˜Ήμ€ 미래의 λ‚΄κ°€ μ–΄λ–€ κΈ°λŠ₯을 ν•˜λŠ” μ½”λ“œμΈμ§€ μ‰½κ²Œ μ•Œ 수 μžˆλ„λ‘ λ„μ™€μ€λ‹ˆλ‹€.

ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό μž‘μ„±ν•˜λ‹€ 보면 ν•¨μˆ˜κ°€ μƒλ‹Ήνžˆ 잘게 μͺΌκ°œμ Έμ•Ό ν•˜κ³ , ν•˜λ‚˜μ˜ κΈ°λŠ₯만 ν•΄μ•Ό ν•œλ‹€λŠ” 사싀을 μ•Œκ²Œ λ©λ‹ˆλ‹€. 그리고 이런 μ½”λ“œλŠ” λ‹€λ₯Έ μ‚¬λžŒμ΄ μ΄ν•΄ν•˜κΈ° μ‰¬μš΄ μ½”λ“œλ‘œ λ°œμ „ν•˜κ²Œ λ©λ‹ˆλ‹€.

μ™„λ²½ν•˜μ§€ μ•Šλ”λΌλ„ μ½”λ“œμ— λŒ€ν•΄ μ‹ κ²½ μ“°κ³  κ³ λ―Όν•˜λŠ” λ…Έλ ₯ μžμ²΄κ°€ 미래의 본인 ν˜Ήμ€ λ‹€λ₯Έ μ‚¬λžŒμ΄ μ½”λ“œλ₯Ό μ΄ν•΄ν•˜λŠ”λ° μΆ©λΆ„νžˆ 도움을 쀄 수 μžˆμŠ΅λ‹ˆλ‹€.

ν…ŒμŠ€νŠΈ μ½”λ“œλž€? ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό μž‘μ„±ν•΄μ•Ό ν•˜λŠ” 이유

ν…ŒμŠ€νŠΈ μ½”λ“œμ— λŒ€ν•œ μ •μ˜ 및 κ΄€λ ¨ λ‚΄μš©μ€ κ²€μƒ‰ν•˜λ©΄ 쒋은 λ‚΄μš©μ΄ 많이 λ‚˜μ˜΅λ‹ˆλ‹€.

μ €λŠ” Kent C. Dodds의 Static vs Unit vs Integration vs E2E Testing for Frontend Apps의 글을 μ°Έκ³ ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

static-vs-unit-vs-integration-vs-e2e-tests

얻은 것

  1. μ‚¬κ³ μ˜ ν™•μž₯ μœ λ‹› ν…ŒμŠ€νŠΈλ₯Ό ν•˜κΈ° μœ„ν•΄μ„œλŠ” ν•¨μˆ˜λŠ” ν•˜λ‚˜μ˜ κΈ°λŠ₯을 ν•˜λ„λ‘ ν•΄μ•Ό ν•©λ‹ˆλ‹€. ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό μž‘μ„±ν•˜λ‹€ 보면 μ–΄λ–»κ²Œ ν•˜λ©΄ 쒋을지 κ³ λ―Όν•˜κ²Œ λ§Œλ“œλŠ”λ° 이런 고민을 ν•  수 μžˆλŠ” ν™˜κ²½μ΄ λ§Œλ“€μ–΄μ§€λŠ” μžμ²΄κ°€ μž₯μ μž…λ‹ˆλ‹€.
  2. 버그λ₯Ό λ°œκ²¬ν•˜κ³  μ‚¬μ΄λ“œ μ΄νŽ™νŠΈ 없이 λΉ λ₯΄κ²Œ μˆ˜μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€. ν…ŒμŠ€νŠΈ μ½”λ“œκ°€ λͺ¨λ“  μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 버그λ₯Ό μ»€λ²„ν•˜μ§€λŠ” λͺ»ν•©λ‹ˆλ‹€. ν•˜μ§€λ§Œ ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό μž‘μ„±ν•˜κ²Œ 되면 μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ ν…ŒμŠ€νŠΈ 컀버리지가 λ†’μ•„μ§€κ²Œ 되고 μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 신뒰성을 λ†’νž 수 μžˆμŠ΅λ‹ˆλ‹€.
  3. μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ— λŒ€ν•œ 신뒰성이 있기 λ•Œλ¬Έμ— λ‹€μ–‘ν•œ μ‹œλ„λ₯Ό ν•΄λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.(λ¦¬νŒ©ν„°λ§, 더 쒋은 아이디어 둜직) ν…ŒμŠ€νŠΈ μ½”λ“œλŠ” λ‚΄κ°€ μˆ˜μ •μ„ κ°€ν•œ 뢀뢄에 λŒ€ν•œ ν”Όλ“œλ°±(성곡, μ‹€νŒ¨)을 λΉ λ₯΄κ²Œ 확인할 수 있기 λ•Œλ¬Έμ— μ–΄λ–€ λΆ€λΆ„μ—μ„œ μ½”λ“œκ°€ 잘λͺ»λ˜μ—ˆλŠ”μ§€ λΉ λ₯΄κ²Œ μΊμΉ˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

κ³ λ €ν•΄μ•Ό ν•  것

ν”ΌλΌλ―Έλ“œ

Static vs Unit vs Integration vs E2E Testing for Frontend Appsμ—μ„œλŠ” ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό μž‘μ„±ν•  λ•Œ κ³ λ €ν•΄μ•Ό ν•  것듀을 ν…ŒμŠ€νŠΈ ν”ΌλΌλ―Έλ“œ 그림을 톡해 μ„€λͺ…ν•©λ‹ˆλ‹€.

νŠΈλ ˆμ΄λ“œ μ˜€ν”„(trade-off): μ™„λ²½ν•œ 것은 μ—†λ‹€. μ„œμ„œνžˆ κΌΌκΌΌν•˜κ²Œ 페인트λ₯Ό μΉ ν•˜λ©΄μ„œ(ν•œμͺ½μœΌλ‘œ 편ν–₯λ˜μ§€ μ•Šμ€ μ μ ˆν•œ λΉ„μœ¨μ˜ ν…ŒμŠ€νŠΈ μ½”λ“œ) 완성도λ₯Ό λ†’μ—¬μ•Ό ν•©λ‹ˆλ‹€.

  • λΉ„μš©: μœ„ κ·Έλ¦Όμ—μ„œ μ•Œ 수 μžˆλ“―μ΄ E2Eμ—μ„œ μƒλ‹Ήνžˆ λ§Žμ€ λΉ„μš©μ΄ λ“ λ‹€λŠ” 것을 μ•Œ 수 μžˆμŠ΅λ‹ˆλ‹€. μ‹€μ œλ‘œ cypress μ½”λ“œλ₯Ό μž‘μ„±ν•  λ•Œ μ‹œκ°„μ΄ κ½€ 많이 걸렸으며 ν™”λ©΄λ‹¨μ˜ μž¦μ€ μˆ˜μ •μœΌλ‘œ 인해 Selector도 같이 μˆ˜μ •ν•΄μ•Ό ν•˜λŠ” λ²ˆκ±°λ‘œμ›€μ΄ μ‘΄μž¬ν–ˆμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ μ™„μ„±λœ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ ν…ŒμŠ€νŠΈν•˜λŠ” κ²ƒμ΄λ―€λ‘œ ν…ŒμŠ€νŠΈ 결과에 λŒ€ν•œ 신뒰성은 ν™•μ‹€ν•˜λ‹€κ³  ν•©λ‹ˆλ‹€.
  • μ‹œκ°„, 속도: jest(unit, integration ν…ŒμŠ€νŠΈ)보닀 cypress(e2e)λ₯Ό ν…ŒμŠ€νŠΈν•˜κΈ° μœ„ν•œ μ½”λ“œ μž‘μ„±μ— μ‹œκ°„μ„ 많이 μ“°κ²Œ λ©λ‹ˆλ‹€. λ˜ν•œ ν…ŒμŠ€νŠΈλ₯Ό μ‹€ν–‰ν•  λ•Œ e2e ν…ŒμŠ€νŠΈλŠ” μ‹€μ œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ ꡬ동 ν›„ ν…ŒμŠ€νŠΈ ν•˜λ―€λ‘œ unit ν…ŒμŠ€νŠΈ 보닀 속도도 λŠλ €μ§€κ²Œ λ©λ‹ˆλ‹€.
  • λΉ„μš©κ³Ό μ‹œκ°„, μ†λ„μ˜ trade-off: 일반적으둜 λ§Žμ€ μ‚¬λžŒλ“€μ€ ν…ŒμŠ€νŠΈ ν”ΌλΌλ―Έλ“œμ— μ–ΈκΈ‰λœ 것 처럼 λΉ„μš©κ³Ό μ†λ„μ˜ trade-off에 λŒ€ν•΄ 많이 이야기 ν•©λ‹ˆλ‹€. ν•˜μ§€λ§Œ 이 trade-off만 μžˆλ‹€λ©΄ ν…ŒμŠ€νŒ… ν”ΌλΌλ―Έλ“œλ₯Ό κ³ λ €ν•  λ•Œ unit test둜만 100% μž‘μ„±ν•΄μ•Ό ν•©λ‹ˆλ‹€. λ¬Όλ‘  μ΄λ ‡κ²Œ ν•˜λ©΄ μ•ˆλ˜κ³  ν…ŒμŠ€νŠΈκ°€ μ†Œν”„νŠΈμ›¨μ–΄ μ‚¬μš© 방식과 μœ μ‚¬ν• μˆ˜λ‘ 더 λ§Žμ€ μ‹ λ’°, μžμ‹ κ°μ„ 얻을 수 있기 λ•Œλ¬Έμ— μΆ©λΆ„νžˆ κ³ λ €ν•˜μ—¬ λ³΅ν•©μ μœΌλ‘œ μž‘μ„±λ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€.

마치며

개인적으둜 ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό μž‘μ„±ν•˜κ²Œ 된 이유 ν•˜λ‚˜κ°€ 더 μžˆλŠ”λ°μš”, λ°”λ‘œ μ €μ˜ ν…ŒμŠ€νŠΈ λŠ₯λ ₯을 μ‹ λ’°ν•  수 μ—†μ–΄μ„œμž…λ‹ˆλ‹€.

μ–΄λ–€ κΈ°λŠ₯을 λ‹€ λ§Œλ“€μ—ˆκ³  ν…ŒμŠ€νŠΈλ₯Ό μ™„λ²½ν•˜κ²Œ ν–ˆλ‹€κ³  μƒκ°ν–ˆμ§€λ§Œ 막상 λ§Žμ€ μ‚¬λžŒλ“€μ΄ μ‚¬μš©ν•˜κ²Œ λ˜κ±°λ‚˜ μ‹œκ°„μ΄ μ’€ μ§€λ‚˜μ„œ 미처 μ²΄ν¬ν•˜μ§€ λͺ»ν•œ 버그듀이 λ°œκ²¬λ˜λŠ” 경우λ₯Ό 많이 κ²½ν—˜ν–ˆμŠ΅λ‹ˆλ‹€.

저희와 같은 κ²½ν—˜μ΄ μžˆμœΌμ‹œλ‹€λ©΄ ν˜„μž¬ μ§„ν–‰ν•˜κ³  κ³„μ‹œλŠ” ν”„λ‘œμ νŠΈμ— ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό λ„μž…ν•΄λ³΄μ‹œλ©΄ 쒋을 것 κ°™μŠ΅λ‹ˆλ‹€.

μ°Έκ³  λ¬Έμ„œ

Grow & Glow Β© 2025

Banner images by undraw.co