์ฑ„๋„ํ†ก ์•„์ด์ฝ˜
BEST

ํ•˜๋ฃจ๋งŒ์— Cypress๋กœ ์ž‘์„ฑํ•˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ E2E ํ…Œ์ŠคํŠธ ์ฝ”๋“œ

ํ”„๋ก ํŠธ์—”๋“œ๋Š” ์‚ฌ์šฉ์ž์™€์˜ ์ ‘์ ์ด ์ด๋ฃจ์–ด์ง€๋Š” ๊ณณ์ด๊ธฐ ๋•Œ๋ฌธ์— ๊ฐœ๋ฐœ์ž์˜ ์ž…์žฅ์ด ์•„๋‹Œ, ์‚ฌ์šฉ์ž์˜ ์ž…์žฅ์—์„œ์˜ ํ…Œ์ŠคํŠธ๊ฐ€ ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. E2Eํ…Œ์ŠคํŠธ๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ์ž ์‹œ๋‚˜๋ฆฌ์˜ค๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ๋™์ž‘ํ•˜๋Š”์ง€ ๊ฒ€์ฆํ•ด๋ณด๊ณ  ๋‚ด ์ฝ”๋“œ์— ๋Œ€ํ•ด ๋‘๋ ค์›€์—์„œ ์ž์‹ ๊ฐ์„ ๊ฐ€์ง€๋Š” ๊ฒฝํ—˜์„ ํ•ด๋ณด์„ธ์š”!

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์†Œํ”„ํŠธ์›จ์–ด ํ…Œ์ŠคํŠธ, Cypress] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • Cypress

  • ํ”„๋ก ํŠธ์—”๋“œ E2E ํ…Œ์ŠคํŠธ

  • ํ”„๋ก ํŠธ์—”๋“œ์˜ ํ…Œ์ŠคํŠธ ์ข…๋ฅ˜

์ฝ”๋“œ ์ž‘์„ฑ์˜ ๋‘๋ ค์›€, E2E ํ…Œ์ŠคํŠธ๋กœ ๋–จ์ณ๋‚ด๋ณด์„ธ์š”!

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์งœ๋ฉด์„œ
์ด๋Ÿฐ ๊ณ ๋ฏผ์ด ๋“ค์ง„ ์•Š์œผ์„ธ์š”?

๐Ÿ˜… ์ด ํ•จ์ˆ˜๋ฅผ ์ œ๊ฑฐํ•ด๋„ ๊ดœ์ฐฎ์„๊นŒ?
๐Ÿง ๋ฐ˜๋ณต๋˜๋Š” ๊ธฐ๋Šฅ ํ…Œ์ŠคํŠธ๋ฅผ ๋น ๋ฅด๊ฒŒ ํ•  ์ˆœ ์—†์„๊นŒ?
๐Ÿค” ๋‚ด ์ฝ”๋“œ๋ฅผ ์–ด๋–ป๊ฒŒ ๊ฒ€์ฆํ• ๊นŒ?

๊ฐœ๋ฐœ์ž๋Š” ์ž‘์„ฑํ•œ ํ”„๋กœ๊ทธ๋žจ์˜ ํ€„๋ฆฌํ‹ฐ์— ๋Œ€ํ•œ ์ฑ…์ž„์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ QA์— ๊ธฐ๋Šฅ ํ…Œ์ŠคํŠธ๋ฅผ ๋„˜๊ธฐ๊ธฐ ์ „ ๊ธฐ๋ณธ ์š”๊ตฌ์‚ฌํ•ญ์„ ๋ชจ๋‘ ๋งŒ์กฑํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ๊ฒ€์ฆ์€ ๊ฐœ๋ฐœ์ž ์Šค์Šค๋กœ ํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์‹ ๋ขฐํ•  ์ˆ˜ ์žˆ๋Š” ์ž๋™ํ™” ํ…Œ์ŠคํŠธ๋ฅผ ํ†ตํ•ด ์ž์‹ ์˜ ์ฝ”๋“œ์— ์ž์‹ ๊ฐ์„ ๋ถˆ์–ด๋„ฃ๋Š” ๊ฒฝํ—˜์„ ํ•ด๋ณด์„ธ์š”!


FE ํ…Œ์ŠคํŠธ ์ž…๋ฌธ์ž๋ฅผ ์œ„ํ•œ
Cypress E2E ํ…Œ์ŠคํŠธ ๊ฐ•์˜. ๐Ÿ’ก 

์šฉ๊ธฐ๋Š” ๋‘๋ ค์›€์ด ์—†๋Š” ์ƒํƒœ๊ฐ€ ์•„๋‹ˆ๋‹ค.
์ง„์ •ํ•œ ์šฉ๊ธฐ๋ž€ ๋‘๋ ค์›€์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ํ–‰๋™ํ•˜๋Š” ์ƒํƒœ์ด๋‹ค. 
- ๊ดดํ…Œ

ํ”„๋ก ํŠธ์—”๋“œ ํ…Œ์ŠคํŠธ์ฝ”๋“œ๋ฅผ ์งœ์•ผํ•œ๋‹ค๋Š” ๋‘๋ ค์›€์„, ์ž์‹ ๊ฐ์œผ๋กœ ๋ฐ”๊พธ๋Š” ๊ฒฝํ—˜์„ 'ํ•จ๊ป˜' ๋งŒ๋“ค์–ด ๋‚˜๊ฐ‘๋‹ˆ๋‹ค.


์ด๋Ÿฐ ๋ถ„๋“ค์—๊ฒŒ
๋„์›€์ด ๋  ๊ฒƒ ๊ฐ™์•„์š”! 
๐Ÿ™‹๐Ÿปโ€โ™‚๏ธ

๊ธฐ๋ณธ์ ์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋…์„ ์•Œ๊ณ  ์žˆ๋Š” ๋ถ„

ํ…Œ์ŠคํŠธ ์ฝ”๋“œ์— ๋Œ€ํ•œ ๊ฐˆ์ฆ์ด ์žˆ๋Š” ๋ถ„

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

๐Ÿ”ญ ์ด ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ๋‚˜๋ฉด?

  • ํ…Œ์ŠคํŠธ ์ฝ”๋“œ ์ž‘์„ฑ์— ๋Œ€ํ•œ ๋‘๋ ค์›€์ด ์—†์–ด์ง‘๋‹ˆ๋‹ค.
  • ์‚ฌ์šฉ์ž ์‹œ๋‚˜๋ฆฌ์˜ค๋Œ€๋กœ ๋‚ด๊ฐ€ ์ž‘์„ฑํ•œ ์•ฑ์„ ๋ฐ˜๋ณต ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ…Œ์ŠคํŠธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ์ ์ด ๋‹ฌ๋ผ์š”! โœจ

๊ฑฐ๊พธ๋กœ
ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๊ฐ€ ์ด ๊ฐ•์˜๋ฅผ ๋“ฃ๋Š” ์ด์œ ๋Š” ๋ฐ”๋กœ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ์•ฑ์˜ ๊ธฐ๋Šฅ์„ ๊ฒ€์ฆํ•˜๊ธฐ ์œ„ํ•ด์„œ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์•ฑ์˜ ๊ธฐ๋Šฅ ๊ฒ€์ฆ์„ ๋จผ์ €ํ•˜๊ณ , ์ด๋ก ์„ ๋‚˜์ค‘์— ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

ํ…Œ์ŠคํŠธ ์ฝ”๋“œ ์ž‘์„ฑ์˜
ํ•œ ์‚ฌ์ดํด์„ ๊ฒฝํ—˜ํ•ฉ๋‹ˆ๋‹ค.

๋ฉ”์„œ๋“œ๋‚˜, ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ฒ˜์Œ๋ถ€ํ„ฐ ์ž์„ธํžˆ ์„ค๋ช…ํ•˜๊ธฐ ๋ณด๋‹ค๋Š” ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ์ „์ฒด ์‚ฌ์ดํด์„ ๋จผ์ € ๊ฒฝํ—˜ํ•ฉ๋‹ˆ๋‹ค.

ํ…Œ์ŠคํŠธ ์ฝ”๋“œ ์ž์ฒด์— 
์ง‘์ค‘ํ•  ์ˆ˜ ์žˆ๋„๋ก.

๊ธฐ๋Šฅ์ด ์ด๋ฏธ ๊ตฌํ˜„๋œ ์•ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์—ฌ๋Ÿฌ๋ถ„์€ ์ฒ˜์Œ์— ํ…Œ์ŠคํŠธ ์ฝ”๋“œ ์ž‘์„ฑ ์ž์ฒด์—๋งŒ ์ง‘์ค‘ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.


์ง์ ‘ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”! ๐Ÿ“š

1. ์นด์šดํ„ฐ ์•ฑ

๐Ÿ“” ์ €์žฅ์†Œ: https://github.com/blackcoffee-study/js-counter-test
๐Ÿ’ป ๋ฐ๋ชจ: https://blackcoffee-study.github.io/js-counter-test/

์นด์šดํ„ฐ ์•ฑ์˜ ๋”ํ•˜๊ธฐ, ๋นผ๊ธฐ, ๋ฆฌ์…‹ ๊ธฐ๋Šฅ์„ ํ…Œ์ŠคํŠธ ํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๋Šฅ์„ ์ง์ ‘ ๊ตฌํ˜„ํ•˜์…”๋„ ๊ดœ์ฐฎ๊ณ , ํ…Œ์ŠคํŠธ ์ž์ฒด์— ์ง‘์ค‘ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ๊ธฐ๋Šฅ์ด ๊ตฌํ˜„๋œ ๋ธŒ๋žœ์น˜์—์„œ ํ…Œ์ŠคํŠธ๋งŒ ์ž‘์„ฑํ•ด๋ณด์„ธ์š”!

2. ๊ณ„์‚ฐ๊ธฐ ์•ฑ

๐Ÿ“” ์ €์žฅ์†Œ: https://github.com/blackcoffee-study/js-calculator-test/tree/main
๐Ÿ’ป ๋ฐ๋ชจ: https://blackcoffee-study.github.io/js-calculator-test/

์‚ฌ์น™์—ฐ์‚ฐ๊ณผ ๊ฐ™์€ ๊ธฐ์ดˆ์ ์ธ ๊ณ„์‚ฐ๊ธฐ ๊ธฐ๋Šฅ์„ ํ…Œ์ŠคํŠธ ํ•ฉ๋‹ˆ๋‹ค.


์งˆ๋ฌธ์ด ์žˆ์œผ์‹ ๊ฐ€์š”? ๐Ÿ™Œ

Q. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ดˆ๋ณด์ž๊ฐ€ ๋“ค์–ด๋„ ๊ดœ์ฐฎ๋‚˜์š”?

๋„ค ๋ฌผ๋ก ์ž…๋‹ˆ๋‹ค. ์ •๋ง ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ดˆ๋ณด์ž๋ถ„๋“ค์„ ์œ„ํ•œ ๊ฐ„๋‹จํ•œ ์•ฑ์„ ์ค€๋น„ํ–ˆ๊ณ , ๊ธฐ๋Šฅ ๊ตฌํ˜„์ด ์•„๋‹Œ ํ…Œ์ŠคํŠธ ์ž์ฒด์— ์ง‘์ค‘ํ•  ์ˆ˜ ์žˆ๋Š” ๋ธŒ๋žœ์น˜๋ฅผ ๋”ฐ๋กœ ๋งˆ๋ จํ–ˆ์œผ๋‹ˆ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”!

Q. ์ฐธ๊ณ ํ• ๋งŒํ•œ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๊ฐ€ ์žˆ์„๊นŒ์š”?

๋ฉ”์ด์ปค์ค€์˜ ๋ชจ๋“  ๋ฏธ์…˜์€ ์ž์ฒด ์Šคํ„ฐ๋””์—์„œ๋„ ๋‹ค๋ฃจ๋Š”๋ฐ์š”. ์Šคํ„ฐ๋””์› ๋ถ„๋“ค์ด ์˜ฌ๋ฆฌ์‹  PR๋“ค์„ ํ†ตํ•ด์„œ ๋‹ค๋ฅธ ๋ถ„๋“ค์˜ ์ฝ”๋“œ๋„ ์ฐธ๊ณ ํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Q. ์ด ๊ฐ•์˜๋Š” TDD๋„ ๋ฐฐ์šฐ๋‚˜์š”?

TDD(Test Driven Development)๋ฅผ ๋ฐฐ์šฐ๋ ค๋ฉด TDD์— ๋Œ€ํ•œ ์ฒ ํ•™ ์ดํ•ด์™€, ๊ธฐ๋Šฅ ๊ตฌํ˜„๊นŒ์ง€ ๋” ๋งŽ์€ ๋ถ€๋ถ„์„ ๋‹ค๋ค„์•ผ ํ•˜๋Š”๋ฐ์š”. ์ด๋ฒˆ ๊ฐ•์˜๋Š” ํ…Œ์ŠคํŠธ ์ฝ”๋“œ์— '์นœ์ˆ™'ํ•ด์ง€๊ณ , ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ฅผ '์ž‘์„ฑํ•ด๋ณด๋Š” ๊ฒฝํ—˜'์„ ์œ„ํ•ด ์ผ๋ถ€๋Ÿฌ ๊ด€๋ จ๋œ ๋‚ด์šฉ์€ ์ œ์™ธํ•˜์˜€์Šต๋‹ˆ๋‹ค. TDD์™€ ๋” ๋‚ด๊ณต์žˆ๋Š” ํ…Œ์ŠคํŠธ ์ฝ”๋“œ์— ๋Œ€ํ•œ ์ด์•ผ๊ธฐ๋Š” ํ›„์† ๊ฐ•์˜์—์„œ ๋งŒ๋‚ ๊ฒŒ์š”!


๋ฉ”์ด์ปค์ค€ ์†Œ๊ฐœ ๐Ÿ˜†

๋ฐ์€ ์—๋„ˆ์ง€๋กœ ํ•จ๊ป˜ ์„ฑ์žฅํ•˜๋Š” 'ํ™˜๊ฒฝ'์„ ๋งŒ๋“œ๋Š” ๋ฉ”์ด์ปค์ค€์ž…๋‹ˆ๋‹ค.
๋ฉ”์ด์ปค์ค€์— ๋Œ€ํ•œ ์ž์„ธํ•œ ์†Œ๊ฐœ๋Š” ๋ฉ”์ด์ปค์ค€ ํ”„๋กœํ•„ ํŽ˜์ด์ง€์—์„œ ์ž์„ธํžˆ ๋ณด์‹ค ์ˆ˜ ์žˆ์–ด์š”!

๐Ÿ”— ๊ด€๋ จ ๋งํฌ 


์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ๋ฐ˜๋ณตํ•ด์„œ ์ง์ ‘ ํด๋ฆญํ•˜๋ฉด์„œ ํ…Œ์ŠคํŠธ ํ•˜์‹œ๋Š” ๋ถ„

  • ๋‚ด๊ฐ€ ๋งŒ๋“  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์–ด๋–ค ๊ธฐ๋Šฅ๋“ค์ด ๋™์ž‘ํ•˜๋Š”์ง€ ๊ตฌ์ฒด์ ์ธ ์ˆ˜์น˜๋กœ ํ‘œํ˜„ํ•˜๊ณ  ์‹ถ์€ ๋ถ„

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ฐ„๋‹จํ•œ ์•ฑ์„ ๋งŒ๋“œ์‹ค ์ˆ˜ ์žˆ๋Š” ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

์•ˆ๋…•ํ•˜์„ธ์š”
๋ฉ”์ด์ปค์ค€์ž…๋‹ˆ๋‹ค.

523

๋ช…

์ˆ˜๊ฐ•์ƒ

51

๊ฐœ

์ˆ˜๊ฐ•ํ‰

3

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

1

๊ฐœ

๊ฐ•์˜

๋ฐ์€ ์—๋„ˆ์ง€๋กœ 
ํ•จ๊ป˜ ์„ฑ์žฅํ•˜๋Š” 'ํ™˜๊ฒฝ'์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

 

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

11๊ฐœ โˆ™ (45๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!

โ‚ฉ11,000