[๋ฉ‹์Ÿ์ด ์‚ฌ์ž์ฒ˜๋Ÿผ] ๋ฉ‹์‚ฌ ํ”„๋ก ํŠธ์—”๋“œ ์Šค์ฟจ 5๊ธฐ 13์ฃผ์ฐจ 4LS ํšŒ๊ณ  (Redux, TDD, ์ž๋ฃŒ๊ตฌ์กฐ, ์•Œ๊ณ ๋ฆฌ์ฆ˜, Big O, ์›น ์ ‘๊ทผ์„ฑ)

2023. 5. 27. 18:16ใ†๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ

๋ฐ˜์‘ํ˜•

[๋ฉ‹์Ÿ์ด ์‚ฌ์ž์ฒ˜๋Ÿผ] ๋ฉ‹์‚ฌ ํ”„๋ก ํŠธ์—”๋“œ ์Šค์ฟจ 5๊ธฐ 13์ฃผ์ฐจ 4LS ํšŒ๊ณ  (Redux, TDD, ์ž๋ฃŒ๊ตฌ์กฐ, ์•Œ๊ณ ๋ฆฌ์ฆ˜, Big O)

 โค๏ธ‍๐Ÿ”ฅ Liked
  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค 0๋‹จ๊ณ„๋ฅผ ๊พธ์ค€ํžˆ ํ’€๊ณ  ์žˆ๋Š”๋ฐ ๋Œ€๋ถ€๋ถ„์˜ ๋ฌธ์ œ๋ฅผ ๋ฐฐ์—ด ํ˜•์‹์œผ๋กœ ๋ฉ”์†Œ๋“œ์ฒด์ด๋‹ํ•ด์„œ ํ’€๊ณ  ์žˆ์—ˆ์ง€ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๊ณ  ๊ด€๋ฆฌํ•˜๋Š” ์ž๋ฃŒ๊ตฌ์กฐ ๋ฐฉ๋ฒ•๋ก ์œผ๋กœ ์ ‘๊ทผํ•˜๊ธฐ๋Š” ์ฒ˜์Œ์ด์—ˆ๋‹ค. ์ž๋ฃŒ๊ตฌ์กฐ์— ์ž‘๋™ ๋ฐฉ์‹์— ๋”ฐ๋ฅธ ์„ฑ๋Šฅ ์ฐจ์ด์— ๋Œ€ํ•œ ์ง€์‹์„ ๋ณด์™„ํ•  ์ˆ˜ ์žˆ์—ˆ๊ณ  ์ ˆ์ฐจ์  ํ•ด๊ฒฐ๋ ฅ์„ ํ‚ค์šฐ๋Š” ๋ฐ ๋„์›€์ด ๋˜์—ˆ๋‹ค. ์ปดํ“จํ„ฐ์˜ ๋…ผ๋ฆฌ๋กœ ์‚ฌ๊ณ ํ•˜๋Š” ๊ฒƒ์„ ๋” ์—ฐ์Šตํ•ด์•ผ๊ฒ ๋‹ค.
  • Jasmin, Jest๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ฐ„๋‹จํ•œ TDD๋ฅผ ์ง„ํ–‰ํ•ด ๋ดค๋Š”๋ฐ, ์‹ค๋ฌด์—์„œ ์ฃผ๋‹ˆ์–ด ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ฐ”๋กœ ํˆฌ์ž…๋˜๋Š” ์˜์—ญ์€ ์•„๋‹์ง€๋ผ๋„ ์ˆ˜์—…์„ ํ†ตํ•ด ์ „์ฒด์ ์ธ TDD ๊ฐœ๋ฐœ ํ”„๋กœ์„ธ์Šค๋ฅผ ์ดํ•ดํ•ด ๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ฒฝํ—˜์ด๋ผ ์œ ์ตํ–ˆ๋‹ค.
  • ์žฅ์• ์ธ, ์†Œ์ˆ˜์ž ์ธ๊ถŒ์„ ์œ„ํ•ด ์ œ๋„๋ฅผ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋งŽ์€ ํˆฌ์Ÿ๊ณผ ๋น„์šฉ, ์‹œ๊ฐ„์ด ํ•„์š”ํ•˜๋‹ค.
    ์ด๋ฒˆ์ฃผ, ์นด์นด์˜ค ์†Œ์† ๊น€ํ˜œ์ผ๋‹˜์˜ ์›น ์ ‘๊ทผ์„ฑ ํŠน๊ฐ•์„ ํ†ตํ•ด ๊ฒฐํ•จ์„ ๊ฒช๋Š” ์ด๋“ค์ด ์˜จ๋ผ์ธ์—์„œ๋‚˜๋งˆ ์†Œ์™ธ์™€ ๋‹จ์ ˆ์„ ๊ฒช์ง€ ์•Š๋„๋ก ์›น ์ ‘๊ทผ์„ฑ ์„œ๋น„์Šค ๊ฐœ์„ ์„ ์œ„ํ•ด 2006๋…„๋ถ€ํ„ฐ ์ง€๊ธˆ๊นŒ์ง€ IT์—…๊ณ„์—์„œ๋„ ์กฐ์ง์ ์œผ๋กœ ํ™œ๋™ํ•˜๊ณ  ์žˆ์—ˆ๋‹ค๋Š” ๊ฑธ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค.
    ๋‚˜ ์—ญ์‹œ ์›น ์ ‘๊ทผ์„ฑ์— ๋Œ€ํ•ด ๊ธฐ์ˆ ๋กœ๋งŒ ์ ‘๊ทผํ•˜๋Š” ๊ฒŒ ์•„๋‹ˆ๋ผ ๊ฒฐํ•จ์„ ๊ฒช๋Š” ๋ถ„๋“ค์˜ ์ฒ˜์šฐ ๊ฐœ์„ ์„ ์œ„ํ•ด ํ˜‘๋ ฅํ•œ๋‹ค๋Š” ์ง์—…์œค๋ฆฌ๋ฅผ ๊ฐ€์ง€๊ณ  ๊ธฐ์—ฌํ•˜๊ณ  ์‹ถ์—ˆ๊ณ , ๋ฉ‹์‚ฌ ๊ณผ์ •์ด ๋๋‚œ ์ดํ›„์—๋„ ๊พธ์ค€ํžˆ ๊ณต๋ถ€ํ•˜๊ณ  ์‹ถ์–ด์„œ ์‹คํ–‰ ๋ชฉ๋ก์— ์˜ฌ๋ ค ๋‘์—ˆ๋‹ค. ์•ˆํƒ€๊นŒ์šด ๊ฑด ์ฑ…์„ ํ•œ ๊ถŒ ์‚ฌ์„œ ์ฝ๊ณ  ์‹ถ์–ด์„œ ์ฐพ์•„๋ดค๋Š”๋ฐ 2015๋…„์— NHN์—์„œ ๋ฌด๋ฃŒ ์ถœํŒ๋ฌผ์„ ๋ฐœํ–‰ํ•œ ์ดํ›„๋กœ ๊ดœ์ฐฎ์€ ์ถœํŒ๋ฌผ์ด ๋‚˜์˜ค์ง€ ์•Š์•˜๋‹ค๋Š” ์‚ฌ์‹ค์ด ํ˜„์žฌ ์›น ์ ‘๊ทผ์„ฑ์— ๋Œ€ํ•œ ๋Œ€์ค‘๋“ค์˜ ์ธ์‹์„ ๊ทธ๋Œ€๋กœ ๋ฐ˜์˜ํ•œ ๊ฒฐ๊ณผ๋Š” ์•„๋‹Œ๊ฐ€ ์‹ถ์€ ๋งˆ์Œ์— ๋ฐ˜์„ฑ๊ณผ ํ•จ๊ป˜ ์•ž์œผ๋กœ ๋” ์ง€์†์ ์œผ๋กœ ๊ด€์‹ฌ์„ ๊ฐ–๊ณ  ์ฃผ์œ„์— ๋งŽ์ด ์ด์•ผ๊ธฐํ•ด์•ผ๊ฒ ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค.

 

 

์›น ์ ‘๊ทผ์„ฑ ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ํ•˜๊ธฐ - YES24

์ด ์ฑ…์€ ์˜ค๋žœ ์‹œ๊ฐ„ ๋™์•ˆ ์ถ•์ ํ•œ NHN์˜ ์›น ์ ‘๊ทผ์„ฑ ๊ด€๋ จ ๊ฒฝํ—˜๊ณผ ํ•ต์‹ฌ ๋…ธํ•˜์šฐ๊ฐ€ ๋‹ด๊ฒจ ์žˆ๋Š”, ์›น ์ ‘๊ทผ์„ฑ ์ „๋ฐ˜์„ ์•„์šฐ๋ฅด๋Š” ์ฑ…์ด๋‹ค. ์›น ํ‘œ์ค€ ๊ฐœ๋ฐœ ๊ฐ€์ด๋“œ์ธ ๋„๋ฆฌ ์‚ฌ์ดํŠธ(http://html.nhncorp.com)์˜ ๋‚ด์šฉ์„ ๋ฐ”ํƒ•

www.yes24.com

 

AOA11Y

์ •๋ณด์ ‘๊ทผ์„ฑ ์ธ์‹๊ฐœ์„  ๋ฐ ๊ธฐ์ˆ ๊ธฐ๋ฐ˜ ํ™•์‚ฐ์„ ๋ชฉํ‘œ๋กœ ํ•œ๊ตญ์ง€๋Šฅ์ •๋ณด์‚ฌํšŒ์ง„ํฅ์›(NIA)์ด ์šด์˜ํ•˜๋Š” Youtube ์ฑ„๋„

www.youtube.com

 

์ œ์ด์ง€ ํ•˜ํŠธ ์ด๋ชจํ‹ฐ์ฝ˜
์•ž์œผ๋กœ ๋‚ด ์ตœ์•  ์ด๋ชจํ‹ฐ์ฝ˜์€ ์ œ์ด์ง€ ํ˜œ์ผ๋‹˜

 

 

 

 ๐Ÿ’ฃ Lacked
  • ํ•˜๋ฃจ ๋™์•ˆ Redux๋ฅผ ๋ฐฐ์› ๋Š”๋ฐ ์ผ๋‹จ React Props๋ž‘ Context๋„ ๊ฒจ์šฐ ์ดํ•ดํ•˜๊ณ  ์žˆ๋Š” ์ƒํƒœ๋ผ ๋„ˆ๋ฌด ์–ด๋ ต๊ฒŒ ๋Š๊ปด์กŒ๋‹ค.. ์šฐ์„  ์ƒํƒœ ๊ด€๋ฆฌ๋Š” React ๊ธฐ๋ณธ ๊ธฐ๋Šฅ์œผ๋กœ ๊ตฌํ˜„ํ•˜๊ณ  ์ถ”ํ›„์— ๋ณด์™„ํ•ด์•ผ๊ฒ ๋‹ค. ์งง์€ ์‹œ๊ฐ„์— ๋งŽ์€ ๊ธฐ์ˆ ์„ ๋ฐฐ์šฐ๋‹ค ๋ณด๋‹ˆ ์„ ํƒ๊ณผ ์ง‘์ค‘์ด ์ •๋ง ์ค‘์š”ํ•˜๋‹ค๊ณ  ๋Š๋‚€๋‹ค.
  • ์ด๋ฒˆ์ฃผ๋Š” ์ •๊ทœ ์ˆ˜์—…์—์„œ Redux, TDD, ์•Œ๊ณ ๋ฆฌ์ฆ˜ ํ’€์ด๋ฅผ ์ง„ํ–‰ํ–ˆ๋Š”๋ฐ React์— ๋Œ€ํ•œ ์ดํ•ด๊ฐ€ ๋ถ€์กฑํ•œ ์ƒํƒœ์—์„œ ๊ต์œก ๊ณผ์ •์ด ๋๋‚˜๊ณ  ์ƒˆ๋กœ์šด ๊ธฐ์ˆ ์„ ๊ณต๋ถ€ํ•˜๋‹ค ๋ณด๋‹ˆ ์–ด๋Š ๊ฒƒ์— ์ง‘์ค‘ํ•ด์•ผ ํ• ์ง€ ํ˜ผ๋ž€์ด ๊ฐ€์ค‘๋˜๋Š” ํ•œ ์ฃผ์˜€๋‹ค. ์‹ค์ œ๋กœ ์ˆ˜์—… ์‹œ๊ฐ„์— React ๋ณด์™„ํ•™์Šต์„ ๋”ฐ๋กœ ์ง„ํ–‰ํ•˜๋Š” ์ˆ˜๊ฐ•์ƒ๋„ ๋งŽ์€ ๊ฒƒ ๊ฐ™๋‹ค. ํ”„๋กœ์ ํŠธ ์ฐฉ์ˆ˜๋ฅผ ์•ž๋‘๊ณ  ์žˆ๋‹ค ๋ณด๋‹ˆ ํ•œ์ •์ ์ธ ์‹œ๊ฐ„์„ ์–ด๋–ป๊ฒŒ ํšจ์œจ์ ์œผ๋กœ ์‚ฌ์šฉํ•ด์•ผ ํ• ์ง€ ๊ณ ๋ฏผ์ด ๋” ๋งŽ์•„์ง„๋‹ค... ๐Ÿซค

 

 

 

 โœ๏ธ Learned
  • ์ƒˆ๋กœ์šด ๋ฐ์ดํ„ฐ๋กœ ๊ธฐ์กด ๋ถˆ๋ณ€ ๋ฐ์ดํ„ฐ๋ฅผ ๋Œ€์ฒด์‹œํ‚ค๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฒคํŠธ๋ฅผ ์ถ”์ ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ํŠน์ง•์ด Redux์˜ ์ฃผ์š” ์žฅ์ 
  • ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ Redux dev tool์„ ์„ค์น˜ํ•˜๋ฉด ํƒ€์ž„๋จธ์‹ ๊ณผ ๊ฐ™์ด ์ด๋ฒคํŠธ๋ฅผ ์ถ”์ ํ•  ์ˆ˜ ์žˆ๊ณ  json์œผ๋กœ ์ถœ๋ ฅ ๊ฐ€๋Šฅ.
  • Redux๋Š” ์ „์—ญ state๊ฐ’์„ ์‚ฌ์šฉํ•จ์— ์žˆ์–ด์„œ Context๋ณด๋‹ค ์ตœ์ ํ™”๊ฐ€ ์ž˜ ๋˜์–ด ์žˆ๊ณ ,
    ์ƒํƒœ๊ด€๋ฆฌ๋„ ํ•ด์ฃผ๋Š” ๋“ฑ์˜ ํŽธ์˜์„ฑ ๋•Œ๋ฌธ์— ๊ฑฐ๋Œ€ํ•œ ๊ทœ๋ชจ์˜ ์ƒํƒœ๊ด€๋ฆฌ ์‹œ ์œ ์šฉํ•˜๋‹ค.
  • TDD๋Š” Test Driven Development์˜ ์•ฝ์ž, ํ…Œ์ŠคํŠธ ์ฃผ๋„ ๊ฐœ๋ฐœ ์ฆ‰, ํ…Œ์ŠคํŠธ๋ฅผ ํ†ตํ•œ ๊ธฐ๋Šฅ ๊ตฌํ˜„์„ ์˜๋ฏธ.
  • TDD ์ง„ํ–‰ ์‹œ ๋Œ€๋ถ€๋ถ„ Jest ํ”„๋ ˆ์ž„์›Œํฌ ์‚ฌ์šฉ.
  • ํ…Œ์ŠคํŠธ์˜ ์ข…๋ฅ˜๋กœ๋Š” ํŠน์ • ์กฐ๊ฑด์—์„œ ํ•จ์ˆ˜(Unit)๊ฐ€ ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•ด์•ผ ํ•˜๋Š”์ง€ ์ •์˜ํ•˜๊ณ  ์ž‘๋™์„ ํ™•์ธํ•˜๋Š” ๋‹จ์œ„ ํ…Œ์ŠคํŠธ,
    ๋ธŒ๋ผ์šฐ์ €์™€ ์ƒํ˜ธ ์ž‘์šฉ์„ ํ†ตํ•ด ํ…Œ์ŠคํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋Š” E2E ํ…Œ์ŠคํŠธ๊ฐ€ ์žˆ๋‹ค.
  • TDD์˜ ๋‹จ๊ณ„๋Š” ํ…Œ์ŠคํŠธ์— ์‹คํŒจํ•˜๋Š” ์ ์ƒ‰ ๋‹จ๊ณ„, ์„ฑ๊ณตํ•˜๋Š” ๋…น์ƒ‰ ๋‹จ๊ณ„, ์ฝ”๋“œ ํ’ˆ์งˆ์„ ๋†’์ด๋Š” ๋ฆฌํŒฉํ„ฐ ๋‹จ๊ณ„ 3๊ฐ€์ง€๋กœ ๊ตฌ์„ฑ.
  • TDD๋ฅผ ํ†ตํ•ด ์ฝ”๋“œ๋ฅผ ์•ˆ์ •์ ์ด๊ณ  ๊ฒฌ๊ณ ํ•˜๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ณ , ์„œ๋น„์Šค์— ๋Œ€ํ•œ ์ดํ•ด๋„์™€ ํ’ˆ์งˆ ์šฐ์„ ์  ์‚ฌ๊ณ ๋ฅผ ๋†’์ผ ์ˆ˜ ์žˆ๋‹ค.
  • ๊ฐ ์ž๋ฃŒ๊ตฌ์กฐ๋Š” ํŠน์ • ์ž‘์—…์— ๋Œ€ํ•ด ๋›ฐ์–ด๋‚œ ์„ฑ๋Šฅ์„ ๋ณด์ด๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์œผ๋ฏ€๋กœ, ๋ฌธ์ œ์˜ ์š”๊ตฌ์‚ฌํ•ญ์— ๋งž๋Š” ์ž๋ฃŒ๊ตฌ์กฐ๋ฅผ ์„ ํƒํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”.
  • ์ž๋ฃŒ๊ตฌ์กฐ์˜ ๊ธฐ๋ณธ ์ž‘๋™๋ฐฉ์‹์œผ๋กœ๋Š” Access(์ ‘๊ทผ) Search(ํƒ์ƒ‰) Insertion(์‚ฝ์ž…) Deletion(์‚ญ์ œ) ๊ฐ€ ์žˆ๋‹ค.
  • ์•Œ๊ณ ๋ฆฌ์ฆ˜์˜ ํšจ์œจ์„ฑ์„ ๊ฒฐ์ •ํ•˜๋Š” ์ง€ํ‘œ๋กœ ๋น…์˜ค(Big O) ํ‘œ๊ธฐ๋ฒ•์ด ์žˆ๋‹ค.
  • Big O ํ‘œ๊ธฐ๋ฒ•์€ ์‹œ๊ฐ„ ๋ณต์žก์„ฑ(์•Œ๊ณ ๋ฆฌ์ฆ˜์ด ์‹คํ–‰๋˜๋Š” ๋ฐ ๊ฑธ๋ฆฌ๋Š” ์‹œ๊ฐ„) ๋ฐ
    ๊ณต๊ฐ„ ๋ณต์žก์„ฑ(์•Œ๊ณ ๋ฆฌ์ฆ˜์ด ์‹คํ–‰๋˜๋Š” ๋ฐ ํ•„์š”ํ•œ ๋ฉ”๋ชจ๋ฆฌ ์–‘)์„ ์‚ฌ์šฉํ•˜์—ฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜์˜ ํšจ์œจ์„ฑ๊ณผ ์„ฑ๋Šฅ์„ ์ธก์ •.
  • ๊ธฐ๋ณธ ์ž๋ฃŒ๊ตฌ์กฐ๋กœ๋Š” Queue, Stack, Heap, Array, HashTable์ด ์žˆ๋‹ค.
  • ์›น ์ ‘๊ทผ์„ฑ์ด๋ž€ ์žฅ์• ๋ฅผ ๊ฒฝํ—˜ํ•˜๋Š” ์‚ฌ๋žŒ์ด ๋…๋ฆฝ์ ์œผ๋กœ ํƒ€์ธ๊ณผ ๋™๋“ฑํ•œ ํ™œ๋™์— ์ฐธ์—ฌํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ธฐ์ˆ .

 

 

 

 ๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป Longed For
  • 10km ๋Ÿฌ๋‹, ์ˆ˜์˜
  • ๋ชจ๋˜ JavaScript ํŠœํ† ๋ฆฌ์–ผ, ํŒŒํŠธ 2 form ๋‹จ๋ฝ ์ˆ™์ง€.
  • ํšŒ๊ณ ์กฐ React ๊ณต์‹๋ฌธ์„œ ์Šคํ„ฐ๋”” ์ฐธ์—ฌ.
  • React๋กœ ์ƒ˜ํ”Œ ๋ธ”๋กœ๊ทธ ๊ตฌํ˜„.
  • React์— ๊ณต๊ณต IP ๊ฐ€์ ธ์™€์„œ ๋‚ ์”จ ์œ„์ ฏ ๋งŒ๋“ค๊ธฐ.
  • ์›น ์ ‘๊ทผ์„ฑ ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ํ•˜๊ธฐ ์ถœํŒ๋ฌผ ์ฝ์–ด๋ณด๊ธฐ.

 

 

 

๋ฐ˜์‘ํ˜•