๐Ÿ’ฌ 2021๋…„๋„ ๊ฐœ๋ฐœ ํšŒ๊ณ ๋ก

์ธ๋„ค์ผ

์ „์—ญ

์ „์—ญ ํ”„์—”(X) ๊ทธ๋ƒฅ ๋ชฌ์Šคํ„ฐ(O)

๋“œ๋””์–ด ์ „์—ญํ–ˆ๋‹ค! ํ•™๊ต ๋‹ค๋‹ ๋•Œ๋Š” ์ ์ฒด๋ผ์„œ ๋ชป ๊ฐ€๊ณ  ์žˆ๋‹ค๊ฐ€ ์กธ์—…ํ•˜๊ณ  ๋‚˜์„œ์•ผ ๊ฒจ์šฐ ์—ฐ๋ง์— ์ž…๋Œ€ํ•ด์„œโ€ฆ ๋“œ๋””์–ด ์ „์—ญ์˜ ํ•ด๊ฐ€ ๋ฐ์•˜์Šต๋‹ˆ๋‹ค.

๋ฌผ๋ก  ๊ตฐ์ƒํ™œ ํ•˜๋ฉด์„œ๋„ ๊พธ์ค€ํžˆ ์ฝ”๋”ฉ๋„ ํ•˜๊ณ , ์ผ๊ณผ ์‹œ๊ฐ„ ๋„์ค‘ ๋‚จ๋Š” ์‹œ๊ฐ„์—” ๊ฐœ๋ฐœ ์„œ์  ์ฝ๊ณ , ์ถœํ‡ด๊ทผ ๋•Œ๋Š” ํฐ์œผ๋กœ ๋ธ”๋กœ๊ทธ ๊ธ€๋“ค์„ ๊พธ์ค€ํžˆ ๋ด์™”์ง€๋งŒโ€ฆ ์ „์—ญํ•˜๊ณ  ํ•˜๋Š” ๊ณต๋ถ€์˜ ์–‘์ด ํ›จ์”ฌ ๋” ๋งŽ๋‹ค๊ณ  ๋Š๊ปด์ง„๋‹ค.

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

์œ„ ์‚ฌ์ง„์€ ํ•™๋ถ€ + ๋™์•„๋ฆฌ ์‹œ์ ˆ์— ํ”„๋ก ํŠธ์—”๋“œ + JS๋กœ ์Šคํƒ€ ๊ฐœ๋ฐœ์žโ€ฆ? ๊ฐ€ ๋˜์–ด๋ฒ„๋ ค์„œ ์ƒ๊ธด ๋ณ„๋ช…์ž…๋‹ˆ๋‹คใ…‹ใ…‹ใ…‹ใ…‹

์ทจ์ค€ ์‹œ์ž‘

์ทจ์ค€

์ผ๋‹จ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ๋‹ค์ง€๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค. ๋ณต๋ฌดํ•˜๋Š” ๋™์•ˆ ์ •๋ง ๋งŽ์ด๋„ ๋‹ค๋ฅธ ๊ธธ๋กœ ์ƒˆ์„œ ํ•ด๋ณด๊ณ  ์‹ถ์—ˆ๋˜ ๊ฐœ๋ฐœ๋“ค์„ ํ•ด๋ดค์œผ๋‹ˆ, ์ด์   ์ทจ์ค€์— ํ•„์š”ํ•œ ์Šคํ‚ฌ๋“ค์„ ๊ณต๋ถ€ํ•  ๋•Œ๋ผ๊ณ  ํŒ๋‹จํ–ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

๊ฐœ๋ฐœ ์„œ์ ๋“ค

๊ทธ๋ ‡๊ฒŒ ์žก์€ ์ฑ…๋“ค์€

  • JS ๋กœ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive
  • React๋Š” ๋ฆฌ์•กํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ธฐ์ˆ 
  • ์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ๋กœ๋Š” ์ด๊ฒƒ์ด ์ทจ์—…์„ ์œ„ํ•œ ์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ๋‹ค with ํŒŒ์ด์ฌ
  • ํด๋ฆฐ ์ฝ”๋“œ

์ด๋ ‡๊ฒŒ ๋˜์‹œ๊ฒ ๋‹ค.

์ด์ œ๋ณด๋‹ˆ ์ €์ž๋ถ„๋“ค์ด ๋‹ค ์Šคํƒ€ ๊ฐœ๋ฐœ์ž์ด์‹œ๋‹คโ€ฆ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive๋Š” ์š”๊ทผ๋ž˜ ๋‚˜์˜จ JS ์ฑ…๋“ค ์ค‘์—์„œ ์ƒ๋‹นํžˆ ์ข‹์€ ์ฑ…์ด์—ˆ๋‹ค. ๊ทธ๋™์•ˆ ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ž…๋ฌธ ์ด๋‚˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์™„๋ฒฝ ๊ฐ€์ด๋“œ ์ฑ…์„ ์ฝ์–ด๋ดค์—ˆ์ง€๋งŒ, ๋ฌธ๋ฒ•๊ณผ ๊ฐ€๋…์„ฑ์˜ ๋ฉด์—์„œ ์ด ์ฑ…์„ ๋”ฐ๋ผ์˜ฌ ์ˆ˜๋Š” ์—†๋‹ค.

es6์ดํ›„์˜ es-next ์ˆ˜์ค€์„ ๋‹ค๋ฃจ๊ณ  ์žˆ๊ณ , ์ฑ…์˜ ๋ณผ๋ฅจ๋„ ์ƒ๋‹นํ•˜๋‹ค. ์ฒœ ํŽ˜์ด์ง€ ์ •๋„ ๋˜์—ˆ๋˜ ๊ฑธ๋กœ.

๋‹ค๋งŒ ๋‹ค๋ฅธ ์ฑ…์— ๋น„ํ•ด ๋ถ€์กฑํ•œ ๊ฑด, โ€˜์˜ˆ์‹œ๊ฐ€ ๋˜๋Š” ์•Œ๊ณ ๋ฆฌ์ฆ˜โ€™ ๊ณผ โ€˜์—ฐ์Šต ๋ฌธ์ œโ€™ ์ด๋‹ค. ๊ทธ๋ž˜์„œ ๋ญ”๊ฐ€ ๊ณต๋ถ€๋ฅผ ํ–ˆ๋‹ค๊ณ  ๋”ฐ๋กœ ์†์œผ๋กœ ์ฝ”๋”ฉ์„ ํ•˜๊ฑฐ๋‚˜ ํ•˜๋Š” ๋ถ€๋ถ„์ด ์—†์–ด์„œ ์ฐธ๊ณ ์„œ๋กœ์˜ ๊ธฐ๋Šฅ๋งŒ์„ ํ•œ๋‹ค.

๋ฆฌ์•กํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ธฐ์ˆ 

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

ํ•˜์ง€๋งŒ ๋ฆฌ์•กํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ธฐ์ˆ ์€ ์ตœ์‹  ๋ฆฌ์•กํŠธ ๊ธฐ์ˆ ์„ ๋‹ด๊ณ  ์žˆ์œผ๋ฉด์„œ๋„ SSR ์— ๊ด€ํ•œ ์ง€์‹๋„ ์žˆ๊ณ , ์ตœ์ ํ™”์— ๊ด€ํ•œ ์ง€์‹๋„ ์•Œ๋ ค์ค€๋‹ค! (์™€!) ๊ฒŒ๋‹ค๊ฐ€ ์˜คํƒˆ์ž๋Š” ์ €์ž๋ถ„ ๊นƒํ—ˆ๋ธŒ์—์„œ ์—…๋ฐ์ดํŠธ๊ฐ€ ๋œ๋‹ค. A/S ๊นŒ์ง€ ํ™•์‹คํ•˜๋‹คใ„ทใ„ท

์ด ์ฑ…๋„ ์ฒœ ํŽ˜์ด์ง€ ์ •๋„๋กœ ๋ณผ๋ฅจ๋„ ๋งŽ๊ณ , ๋ฐฐ์šธ ์ ์ด ๊ต‰์žฅํžˆ ๋งŽ๋‹ค. ๋ฆฌ์•กํŠธ ์ดˆ๋ณด์ž ํ•„๋… ๋„์„œ! ๋•๋ถ„์— ํ›„์†์ž‘์ธ ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ธฐ์ˆ ์„ ์ถฉ๋™๊ตฌ๋งคํ•˜๋ ค๋‹ค ๊ฒจ์šฐ ์ฐธ์•˜๋‹ค. ์ง€๊ธˆ์€ ์ €๊ฑธ ๊ณต๋ถ€ํ•  ๋•Œ๊ฐ€ ์•„๋‹ˆ๋‹ˆ๊นโ€ฆ

๋‹จ์ ์ด๋ผ๊ณ  ํ•œ๋‹ค๋ฉด, ์‹ค์Šต์—์„œ ์“ฐ์ด๋Š” ๋ฐฑ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ์ทจํ–ฅ์„ ํƒ„๋‹ค๋Š” ๊ฑฐ ์ •๋„.

๋ฆฌ์•กํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ธฐ์ˆ ์„ ์ •๋ฆฌํ•œ ๋ ˆํฌ

์ด๊ฒƒ์ด ์ทจ์—…์„ ์œ„ํ•œ ์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ๋‹ค with ํŒŒ์ด์ฌ

ํ•ญ์ƒ ์ฐ”๋”์ฐ”๋”์”ฉ ๋ณด๋Š” ์ฑ…โ€ฆ ์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ๋ฅผ ์—„์ฒญ ์ข‹์•„ํ•˜์ง€๋Š” ์•Š๋Š”์ง€๋ผ ์ž˜ ์•ˆ ๋ณด๊ฒŒ ๋˜์—ˆ๋‹ค. ์ง€๊ธˆ๋„ ๊ฐ€๋” ์ด๋ก ๋งŒ ์ฝ์–ด๋ณด๊ณ  ๊ทธ๋ƒฅ ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๊ฐ€์„œ ๋ฌธ์ œ ํ’€๊ณ  ์žˆ๋‹ค.

์ฒ˜์Œ์— ๊ณต๋ถ€ํ•  ๋•Œ๋Š” ์ฑ…์— ๋‚˜์˜จ๋Œ€๋กœ ํŒŒ์ด์ฌ์„ ์‚ฌ์šฉํ–ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ฐฑ์ค€์ด๋ž‘ solved.ac ์—์„œ๋„ ๋˜‘๊ฐ™์ด ํŒŒ์ด์ฌ ์œผ๋กœ ๋ฌธ์ œ๋“ค์„ ํ’€์—ˆ๋‹ค. ๊ทธ๋Ÿฌ๋˜ ์–ด๋Š ๋‚ , ๋ญ”๊ฐ€๋ฅผ ๊นจ๋‹ฌ์€ ๋“ฏ์ด ํŒŒ์ด์ฌ์„ ๋ฉ€๋ฆฌํ•˜๊ณ  JS๋กœ ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ํ’€๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค. ์—ญ์‹œ ์ฃผ๋ ฅ๊ธฐ๋กœ ์ฝ”๋”ฉํ•˜๋Š” ๊ฒŒ ๋ง˜์ด ํŽธํ•˜๋‹ค. ํ•˜์ง€๋งŒ ๊ทธ ๋•๋ถ„์— JS ์ธํ’‹์„ ๊ธฐ๋ณธ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ๋ฐฑ์ค€์„ ๋– ๋‚˜๊ณ , ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฌธ์ œ๋ฅผ ํ’€๊ฒŒ ๋˜์—ˆ๋‹คโ€ฆ

์ฑ…์€ ๊ทธ๋ƒฅ ์ฝ”๋”ฉ ๋ฌธ์ œ๋ฅผ ์•Œ๋ ค์ฃผ๋Š” ๊ฒŒ ์•„๋‹ˆ๋ผ, ์—ฌ๋Ÿฌ ์ž๋ฃŒ๊ตฌ์กฐ์™€ ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ์•Œ๋ ค์ค€๋‹ค. ํ•™๋ถ€ ์‹œ์ ˆ์˜ ๊ธฐ์–ต์ด ์ƒˆ๋ก์ƒˆ๋ก ๋– ์˜ฌ๋ผ์„œ ๋ฐ˜๊ฐ€์› ๋‹ค. ์ด๋ฏธ ๋ฐฐ์›Œ๋ณธ ๋ถ€๋ถ„์ด๋ผ ๋น ๋ฅด๊ฒŒ ํ›‘์–ด๋ณด๊ณ  ๋ฌธ์ œ๋กœ ๋“ค์–ด๊ฐ€๋Š”๋ฐโ€ฆ ์–ด๋ ค์›Œ!! ๋ฌผ๋ก  ์ง€๊ธˆ์€ ๊ทธ๋ฆฌ ์•ˆ ์–ด๋ ต์ง€๋งŒ, ์ฒ˜์Œ ๋ดค์„ ๋• ์–ด๋ ค์› ๋‹ค.

์ด ์ฑ…์˜ ๋‹จ์ ์ด๋ผ๊ณ  ํ•œ๋‹ค๋ฉด ์—ญ์‹œ ์ฑ…์˜ ํ•œ๊ณ„์™€๋„ ๊ฐ™์€ ๊ฒƒ์ธ๋ฐ, ๋ฐ”๋กœ ์ฝ”๋”ฉ ๋ฌธ์ œ์— ๋Œ€ํ•œ ๋‹ต์„ ํ’€๊ณ  ํ…Œ์ŠคํŠธ ์ผ€์ด์Šค๋‚˜ ์‹œ๊ฐ„ ์ œํ•œ์„ ์•Œ ์ˆ˜ ์—†๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ๊ทธ๋ž˜์„œ ์–ด๋–ป๊ฒŒ๋“  ๋‹ต๋งŒ ๋‚ด๋Š” ๋ฐฉ์‹์œผ๋กœ ํ’€๊ฒŒ ๋˜๋Š” ๋ถ€์ž‘์šฉ์„ ๋‚ณ์„ ์ˆ˜ ์žˆ๋‹ค.

์ด๊ฒƒ์ด ์ทจ์—…์„ ์œ„ํ•œ ์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ๋‹ค with ํŒŒ์ด์ฌ์„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์ •๋ฆฌํ•œ ๋ ˆํฌ

ํด๋ฆฐ ์ฝ”๋“œ

๋ง์ด ํ•„์š”์—†๋‹ค. ๋‹น์žฅ ๊ฐ€์„œ ์ฝ์–ด๋ผ. ๋‚˜์—๊ฒŒ ์ฝ”๋”ฉ ์ž˜ํ•˜๋Š” ๋ฒ•์„ ์•Œ๋ ค์ฃผ์‹  ํ•™๋ถ€ ์กฐ๊ต๋‹˜โ€ฆ ์ด ์ฑ…์„ ๋ณด๊ณ  ์•Œ๋ ค์ฃผ์‹  ๊ฒƒ์ด์—ˆ๊ตฐ์š”โ€ฆ

์ฑ…์˜ ์•ž์žฅ์—๋„ ์“ฐ์—ฌ์žˆ์ง€๋งŒ ๊ฐ€๋ณ๊ฒŒ ์ฝ๋Š” ์ฑ…์ด ์•„๋‹ˆ๋‹ค. ๋‚˜๋„ ํŽœ์„ 2๊ฐœ๋‚˜ ๋‹ค ์จ๊ฐ€๋ฉด์„œ ์™„๋…ํ–ˆ๋‹ค.

์•„์‰ฌ์› ๋˜ ์ ์€, ๋งˆ์ง€๋ง‰ ์‹ค์Šต? ํŒŒํŠธ๊ฐ€ java ๋กœ ์“ฐ์—ฌ์žˆ๋‹ค๋Š” ์ โ€ฆ JS ๋ฒ„์ „๋„ ๋‚ด์ฃผ์„ธ์š”!

์ธํ„ฐ๋„ท์œผ๋กœ ๋ฐฐ์šฐ๊ธฐ

์„œ์ ์ด ์•„๋‹Œ ์ธํ„ฐ๋„ท ๊ฐ•์˜๋‚˜ ๋ธ”๋กœ๊ทธ๋กœ ๋ฐฐ์šด ๊ฒƒ๋„ ์žˆ๋‹ค. ์ฑ…๊ณผ๋Š” ๋‹ฌ๋ฆฌ ๋ณต๋ฌด ์ค‘๋ถ€ํ„ฐ ํ•ด์˜จ ๊ฒƒ๋“ค์ด ๋งŽ๋‹ค.

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœํ™˜๊ฒฝ

๋จผ์ € ์›นํŒฉ์— ๋Œ€ํ•ด ๊ฐœ๋…์„ ์ •๋ฆฌํ–ˆ๋‹ค. ๊ณ„๊ธฐ๋Š” ํ† ์Šค์˜ ๊ฐœ๋ฐœ ์ปจํผ๋Ÿฐ์Šค. ์–ด๋Š ํ”„๋ ˆ์  ํ…Œ์ด์…˜์—์„œ ๋งํ•˜๊ธฐ๋ฅผ CRA๋ฅผ ํ†ตํ•ด ์Šค์บํด๋”ฉํ•œ ๋ฆฌ์•กํŠธ๋ฅผ ๊ฒฐ๊ตญ ์‹น ๊ฐˆ์•„์—Ž๊ณ  ์›นํŒฉ ์„ค์ •๋ถ€ํ„ฐ ๋‹ค์‹œ ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค๊ณ โ€ฆ

๊ทธ๋ž˜์„œ webpack, babel, eslint, prettier ๋“ฑ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์— ๋Œ€ํ•ด ๊ณต๋ถ€๋ฅผ ํ–ˆ์—ˆ๋‹ค. ๊ทธ์— ๋Œ€ํ•œ ์‹ค์Šต์œผ๋กœ CRA ์—†์ด ๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๊ตฌ์„ฑํ•˜๊ธฐ๋„ ํ•ด๋ณด์•˜๋‹ค.

๊ฑฐ๊ธฐ์— ์ถ”๊ฐ€๋กœ ๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๊ตฌ์„ฑํ•˜๋Š” ๊น€์— RTK(Redux Tool Kit)๋„ ๊ณต๋ถ€ํ•ด๋ณด์•˜๋‹ค. ๊ฝค ๊ต‰์žฅํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ผ ๋‹ค์Œ์— ์“ธ ๊ธฐํšŒ๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ๋‹ค.

์ •๋ฆฌ ๋ ˆํฌ

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋„ ๋นผ๋จน์„ ์ˆ˜ ์—†๋‹ค. ์›น์œผ๋กœ๋„ ๋ฐฐ์šฐ๊ณ , ์„œํ‰ ์ด๋ฒคํŠธ๋กœ ๋ฐ›์€ ์„œ์ ์œผ๋กœ ๊ทผ๋ฌด์ง€์—์„œ๋„ ๊ณต๋ถ€ํ–ˆ๋‹ค. ์ข‹์€ ํƒ€์ดํ•‘์„ ํ•˜๋Š” ๋ธ”๋กœ๊ทธ ๊ธ€์„ ๋งŽ์ด ์ฝ์—ˆ๋Š”๋ฐ, ๊ฐํƒ„๋งŒ ํ•˜๊ณ  ๋งŽ์ด ํก์ˆ˜ํ•˜์ง€๋Š” ๋ชป ํ•œ ๊ฑฐ ๊ฐ™๋‹คโ€ฆ

ํƒ€์ดํ•‘์„ ํ•˜๋‹ˆ ์กฐ๊ธˆ ๋ฒˆ๊ฑฐ๋กญ์ง€๋งŒ, ์ž๋™์™„์„ฑ์ด ์™„๋ฒฝํ•˜๊ฒŒ ๋˜๋Š” ๊ฒŒ ์ œ์ผ ๋ง˜์— ๋“ ๋‹ค. ํƒ€์ž…๋„ ์ ์  ๋งŽ์•„์ง€๋‹ˆ ๊ด€๋ฆฌํ•˜๊ธฐ, ๋กœ์ง ์งœ๋Š” ๊ฒŒ ํž˜๋“ค์–ด์ง€๋Š” ๊ฒŒ ๋Š๊ปด์ง„๋‹ค. ์ ์  ์–ด๋ ค์›Œ์ง€๋Š” ํ”„๋ก ํŠธ์—”๋“œ ์—…๊ณ„๐Ÿ˜ญ

์ •๋ฆฌ ๋ ˆํฌ

ํ…Œ์ŠคํŒ… ๋„๊ตฌ

ํ…Œ์ŠคํŒ…๋„ ์กฐ๊ธˆ ๋ฐฐ์› ๋‹ค. ํ† ์Šค์—์„œ ๋‚ด์ค€ ๊ณผ์ œ๋ฅผ TDD๋กœ ํ•ด์•ผํ•œ๋‹ค๊ธธ๋ž˜, ๋ถ€๋ฆฌ๋‚˜์ผ€ jest ๊ณต์‹ ๋ฌธ์„œ ์ฝ๊ณ  ๊ฐœ์ธ ํ”Œ์ ๋„ ํ•ด๋ณด๊ณ , FEConf์—์„œ ๋ฐœํ‘œํ•œ TDD ํ”„๋ ˆ์  ํ…Œ์ด์…˜๋„ ๋ณด๊ณ  ๊ทธ๋žฌ๋‹ค.

ํ•˜์ง€๋งŒ ๊ณผ์ œ๋Š” ๊ทธ ํ”„๋ก ํŠธ์—”๋“œ๋กœ ๋‚˜์˜จ ๊ฒŒ ์•„๋‹ˆ์—ˆ๊ณ โ€ฆ ์—ฌ๊ธฐ๊นŒ์ง€๋งŒ ๋งํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

์ •๋ฆฌํ•œ ๋ ˆํฌ๋Š” ๋น„๊ณต๊ฐœ์ž…๋‹ˆ๋‹ค^^

์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ

ํ‚ค๋ณด๋“œ ํƒ€์ดํ•‘

์ทจ์ค€์ด๋ผ๊ณ ๋Š” ๋งํ–ˆ์ง€๋งŒ, ์ง€๊ธˆ๋„ ๊ทธ๋ ‡๊ณ  ์ ๊ทน์ ์œผ๋กœ ํ•˜๊ณ  ์žˆ์ง€๋Š” ์•Š์•˜๋‹ค. ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์ด์œ ๊ฐ€ ์žˆ๋Š”๋ฐ,

  1. ๋ณด์ƒ ์‹ฌ๋ฆฌ - ์ „์—ญํ–ˆ์œผ๋‹ˆ ๋ช‡ ๊ฐœ์›” ๋†€์•„๋„ ๋˜๊ฒ ์ง€? (๊ทธ๋ž˜๋„ ๋งค์ผ ๊ณต๋ถ€๋Š” ํ•˜์ง€๋งŒ)
  2. ์ทจ์—…ํ•œ ์นœ๊ตฌ - ์–˜ ๋งจ๋‚  ์•ผ๊ทผํ•ด;;

๊ทธ๋ž˜์„œ ๋„ค์ด๋ฒ„, ์นด์นด์˜ค, ํ† ์Šค ๋“ฑ๋“ฑ ์ง€์› ๊ธฐ๊ฐ„์ด ์žˆ๋Š” ๊ณต์ฑ„๋“ค๋งŒ ์ง€์›์„ ํ–ˆ๋‹ค.

๋„ค์ด๋ฒ„ ๊ณต์ฑ„ ์ฝ”ํ…Œ

์ด 4๋ฌธ์ œ(3๋ฌธ์ œ ์˜€๋‚˜).

์ด์ „ ๋…„๋„ ๋ฌธ์ œ๋“ค์„ ํ’€๊ณ  ์™”์œผ๋‹ˆ ํ’€ ์ˆ˜ ์žˆ๊ฒ ์ง€!!!

0์†” ๊ด‘ํƒˆ

๋‚˜๋งŒ ์—ญ๋Œ€๊ธ‰์œผ๋กœ ์–ด๋ ค์› ์–ดโ€ฆ??

์นด์นด์˜ค ๊ณต์ฑ„ ์ฝ”ํ…Œ

์ด 6๋ฌธ์ œ

ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค์—์„œ ์นด์นด์˜ค ์ฝ”ํ…Œ ๋ฌธ์ œ๋“ค์„ ๋‹ค ํ’€๊ณ  ์™”๋‹ค!!!

3.5์†” ๊ด‘ํƒˆ

ํฌ์œฝโ€ฆ ์‹œ๊ฐ„ ์ œํ•œ ์ผ€์ด์Šค๋งŒ ๋„˜๊ฒผ์–ด๋„

ํ† ์Šค ๊ณต์ฑ„ ์ฝ”ํ…Œ

์ด 4๋ฌธ์ œ

์ผ๋ฐ˜ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ฌธ์ œ๊ฐ€ ์•„๋‹ˆ๋ผ ํ”„๋ก ํŠธ์—”๋“œ ์ง€์‹์„ ํ™œ์šฉํ•˜๋Š” ๋ฌธ์ œ๊ฐ€ ์ถœ์ œ๋˜์–ด์„œ ์‹ ๊ธฐ

๊ทธ๋Ÿฌ๋‚˜ ์ฒ˜์Œ์œผ๋กœ ๋ณธ ์ฝ”ํ…Œ(์ „์—ญ ๋‹ค์Œ ๋‚ )์ธ๋ฐ๋‹ค ์ค€๋น„ ์—†์ด ๋ดค๋‹คโ€ฆ

2์†” ๊ด‘ํƒˆ

์นด์นด์˜ค ๊ธฐํƒ€ ์ฝ”ํ…Œ

์นด์นด์˜ค ์—”ํ„ฐํ”„๋ผ์ด์ฆˆ

๊ทธ๋Ÿญ์ €๋Ÿญ ์ค€๋น„ํ•œ ํŽธ

300/400 ์  ๋งž๊ณ  ๊ด‘ํƒˆ

์ด๋ฒˆ์—๋„ ์‹œ๊ฐ„ ์ œํ•œ ๋ฌธ์ œ๊ฐ€โ€ฆ ์ด๋ฒˆ์—” ํ”Œ๋žซํผ์„ ๊ตฌ๋ฆ„์„ ์ผ๋Š”๋ฐ ์™€โ€ฆ js ์ธํ’‹ ์ง€์›์ด ์•ˆ ๋ผโ€ฆ ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋Œ๋ ค์ค˜!!

์นด์นด์˜ค ๋ธŒ๋ ˆ์ธ

์—ด์‹ฌํžˆ ์ค€๋น„ํ–ˆ๋‹ค. HackerRank๋ฌธ์ œ๋„ ํ’€๊ณ , ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฌธ์ œ๋„ ํ’€์—ˆ๋‹ค!!

4๋ฌธ์ œ ์˜ฌ์†”(!!!)

๋‹ค ํ’€๊ณ  ์ตœ์ ํ™”๋„ ํ•˜๊ณ  40๋ถ„์ด๋‚˜ ๋‚จ๊ธฐ๊ณ  ์ œ์ถœํ•œ ์ง€๋ผ ๊ธฐ์œ ๋งˆ์Œ์œผ๋กœ ๋ฉด์ ‘์„ ์ค€๋น„ํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ

์™„๋ฒฝํ•œ ์ž‘์ „

์˜ฌ์†”์ธ๋ฐ ํƒˆ๋ฝ

๋Œ€์ฒด ์–ด๋–ค ์ธ์žฌ๋ฅผ ์ธํ„ด์œผ๋กœ ๋ฝ‘๊ธธ๋ž˜โ€ฆ

๋„ค์ด๋ฒ„ ์ธํ„ด

ํ˜„์žฌ ์ง„ํ–‰ํ˜•์ด๊ธด ํ•œ๋ฐ ๋ฌธ์ œ๋ฅผ ๋ฐ˜๋ฐ–์— ๋ชป ํ’€์–ด์„œ ๊ธฐ๋Œ€๋Š” ํ•˜์ง€ ์•Š๋Š”๋‹คโ€ฆ

โ˜€๋‚ด๋…„์—๋Š”

21๋…„๋„๊นŒ์ง€๋Š” ๋†€๊ฒ ๋‹ค๊ณ  ์„ ์–ธํ•ด๋‘” ๊ฒŒ ์žˆ์œผ๋‹ˆ ๋‚ด๋…„๋ถ€ํ„ฐ๋Š” ๊ผผ์ง์—†์ด ์ทจ์ค€์„ ํ•  ์ˆ˜ ๋ฐ–์— ์—†๋‹ค. ์ฝ”ํ…Œ ๊ณต๋ถ€ ๋น„์ค‘์„ ๋Š˜๋ฆฌ๊ณ , ์ˆ˜์‹œ ์ง€์›๋„ ์—ฌ๊ธฐ์ €๊ธฐ ํ•ด๋ด์•ผ ํ•  ๋“ฏ ํ•˜๋‹ค.

ํ•˜์ง€๋งŒ ๋‚˜๋Š” ํ† ์ด ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๊ณ  ์‹ถ์€ ๊ฑธ

++์“ฐ๊ณ ๋ณด๋‹ˆ

์† ๊ฐ€๋Š”๋Œ€๋กœ ์“ฐ๋‹ค๋ณด๋‹ˆ ์ค‘๊ตฌ๋‚œ๋ฐฉ์ด ๋˜์–ด๋ฒ„๋ ธ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์•„๋ฌด๋ž˜๋„ ๊ธฐ์–ต๋ ฅ ๋•Œ๋ฌธ์ธ์ง€ ์ตœ๊ทผ ์ผ๋งŒ ์ ์–ด๋ฒ„๋ ธ๋‹คโ€ฆ ํšŒ๊ณ ๋ฅผ 1๋…„์— 2๋ฒˆ ํ•ด์•ผํ•˜๋‚˜โ€ฆ?


Written by@Caesiumy
๐ŸŒ์˜๋ฌธ๊ณผ์—์„œ ์ถœ๋ฐœํ•ด ๐Ÿ’ป์ปดํ“จํ„ฐ๊ณตํ•™์œผ๋กœ ๋„์ฐฉํ•˜๋Š” ํ˜ผ์ข… ๐Ÿ‘จโ€๐Ÿ’ป๊ฐœ๋ฐœ์ž!