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

์›น ๊ฒŒ์ž„์„ ๋งŒ๋“ค๋ฉฐ ๋ฐฐ์šฐ๋Š” React์— TypeScript ์ ์šฉํ•˜๊ธฐ

๋ฆฌ์•กํŠธ๋กœ ๋งŒ๋“  ์›น ๊ฒŒ์ž„๊ณผ React Router, Redux, MobX์— ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ถ™์—ฌ๋ณด๋ฉด์„œ ๋ฆฌ์•กํŠธ์™€ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ฐ™์ด ์‚ฌ์šฉํ•ด๋ด…์‹œ๋‹ค.

(4.7) ์ˆ˜๊ฐ•ํ‰ 27๊ฐœ

์ˆ˜๊ฐ•์ƒ 905๋ช…

๋‚œ์ด๋„ ์ค‘๊ธ‰์ด์ƒ

์ˆ˜๊ฐ•๊ธฐํ•œ ๋ฌด์ œํ•œ

๋จผ์ € ๊ฒฝํ—˜ํ•œ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ํ›„๊ธฐ

๋จผ์ € ๊ฒฝํ—˜ํ•œ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ํ›„๊ธฐ

4.7

5.0

๊ฝƒ๊ฐˆํ”ผ

100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

๋ฆฌ๋ทฐ์–ด๋กœ ์ฐธ์—ฌํ•˜๊ฒŒ ๋˜์–ด ์ข‹์€ ๊ธฐํšŒ๋กœ ํ‰์†Œ ๋“ฃ๊ณ ์‹ถ์—ˆ๋˜ ํ•ด๋‹น ๊ฐ•์˜๋ฅผ ๋ฌด๋ฃŒ๋กœ ๋“ฃ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋จผ์ € ์ด ๊ฐ•์˜๋Š” React์™€ TypeScript์— ๋Œ€ํ•œ ์„ ํ–‰ ์ง€์‹์ด ์žˆ์–ด์•ผ ํ•˜๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. React์™€ TypeScript์˜ ๋ฌธ๋ฒ•์„ ๊ฐ€๋ฅด์ณ์ฃผ๋Š” ๊ฐ•์˜๋Š” ์•„๋‹™๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ด์— ๋Œ€ํ•œ ์ง€์‹์ด ์•„์˜ˆ ์—†๋‹ค๋ฉด ์ˆ˜์—…์„ ๋”ฐ๋ผ๊ฐ€๋Š”๋ฐ ์ง€์žฅ์ด ์žˆ์„๊ฒ๋‹ˆ๋‹ค. ๋‹ค๋งŒ, ์ œ ๊ฐœ์ธ์ ์ธ ์ƒ๊ฐ์œผ๋กœ๋Š” React์™€ TypeScript ๋‘˜ ๋‹ค ๊ธฐ์ดˆ ์ˆ˜์ค€์˜ ๊ธฐ๋ณธ์ ์ธ ๋ฌธ๋ฒ• ์ •๋„๋งŒ ์•Œ๊ณ  ์žˆ๋‹ค๋ฉด ๊ฐ•์˜๋ฅผ ๋“ฃ๋Š” ๋ฐ ํฐ ์–ด๋ ค์›€์€ ์—†์œผ๋ฆฌ๋ผ ์ƒ๊ฐ๋ฉ๋‹ˆ๋‹ค. ์ œ ๊ฒฝ์šฐ์—๋Š” ๊ฐ•์˜ ์ดˆ๋ฐ˜์— '์ƒ๊ฐ๋ณด๋‹ค ์‰ฌ์šด๋ฐ?' ํ•˜๋ฉด์„œ ์ž์‹ ๊ฐ์ด ๋ถ™์—ˆ์Šต๋‹ˆ๋‹ค. ๋ฌผ๋ก  ๋ชจ๋“  ๋‚ด์šฉ์ด ์‰ฝ๋‹ค๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๊ณ , ๋“ฃ๋‹ค ๋ณด๋ฉด ์–ด๋ ค์šด ๋‚ด์šฉ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ Redux ๋Š” ์–ด๋А ์ •๋„ ์ง€์‹์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ €๋Š” Redux ์™ธ์— React Router, ContextAPI, MobX๋Š” ๋”ฐ๋กœ ๊ณต๋ถ€ํ•œ ์ ์ด ์—†์–ด์„œ ์ž˜ ๋ชฐ๋ž๋Š”๋ฐ๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์ถฉ๋ถ„ํžˆ ๊ฐ•์˜๋ฅผ ๋”ฐ๋ผ๊ฐˆ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค๋ฉด, ๋ฆฌ์•กํŠธ๋Š” ๊ฐ•์˜๋งˆ๋‹ค ๋‚˜์˜ค๋Š” ๋‚ด์šฉ์— ๋Œ€ํ•ด ๊ฐ€๋ณ๊ฒŒ ๊ฐœ๋…์„ ์งš์–ด ์ฃผ์‹œ๋ฉด์„œ ์ง„ํ–‰ํ•˜์‹ญ๋‹ˆ๋‹ค. TypeScript๋„ ๊ฐ€๋ณ๊ฒŒ ๊ทธ๋ฆฌ๊ณ  ๋ฐ˜๋ณต์ ์œผ๋กœ ์„ค๋ช…ํ•˜๊ณ  ๋„˜์–ด๊ฐ€ ์ฃผ์…”์„œ ๊ธฐ์กด์— ์•Œ๊ณ  ์žˆ๋˜ TypeScript ๊ฐœ๋…์„ ํ•œ ๋ฒˆ ๋” ์ •๋ฆฌํ•˜๋Š” ๋А๋‚Œ๋„ ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. (๋ฌผ๋ก  ๊ฐœ์ธ์ฐจ๋กœ ์„ค๋ช… ์•ˆ ํ•ด์ฃผ์‹œ๋Š” ๋ถ€๋ถ„๋„ ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค) ๊ทธ๋ฆฌ๊ณ  ์ œ๊ฐ€ ์ด ๊ฐ•์˜๋ฅผ ์„ ํƒํ•œ ๋˜ ๋‹ค๋ฅธ ์ด์œ  ์ค‘ ํ•˜๋‚˜๋Š” Q&A ๋ฐฉ์ด ํ™œ์„ฑํ™”๋˜์–ด์žˆ๋‹ค๋Š” ์ ์ธ๋ฐ, ์งˆ๋ฌธ ๊ธ€์ด ์˜ฌ๋ผ์˜ค๋ฉด ๋น ๋ฅด๊ฒŒ ๋‹ต๋ณ€ํ•ด์ฃผ์‹œ๋Š” ๋ถ€๋ถ„๋„ ์ข‹์•˜์Šต๋‹ˆ๋‹ค. ์“ฐ๋‹ค ๋ณด๋‹ˆ ๊ธ€์ด ๊ธธ์–ด์กŒ๋Š”๋ฐ ์ง€์›ํ•˜๊ณ  ์‹ถ์—ˆ๋˜ ํšŒ์‚ฌ์—์„œ React์— TypeScript๋ฅผ ์ ์šฉํ•˜๋Š” ๊ณผ์ œ๋ฅผ ์ œ์ถœํ•ด์•ผ ํ–ˆ๋˜ ์ ์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์งง์€ ๊ธฐ๊ฐ„ ๋‚ด์— ๋…ํ•™ํ•ด๋ณด๋ ค๊ณ  ํ–ˆ์ง€๋งŒ ์ผ์ผ์ด ์ฐพ์œผ๋ฉฐ ๊ณต๋ถ€ํ•˜๋ ค๋‹ˆ ๋ง‰๋ง‰ํ•จ์ด ๋А๊ปด์กŒ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๊ณ„์† ๊ธฐ์ดˆ ์ˆ˜์ค€์—์„œ ๋จธ๋ฌผ๋ €๋Š”๋ฐ, ์ด ๊ฐ•์ขŒ๋ฅผ ๋“ฃ๊ณ  ๋‚˜์„œ๋Š” ์ด์ œ ํฐ ์–ด๋ ค์›€์„ ๋А๋ผ์ง€ ์•Š๊ณ  ๋ฆฌ์•กํŠธ์— ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ ์šฉํ•ด์„œ ์ฝ”๋”ฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ƒˆ๋กœ์šด ๋‚ด์šฉ์„ ์ ‘ํ•˜๊ณ  ๋ฐฐ์šฐ๋‹ˆ, ๊ฐœ๋ฐœ ์‹ค๋ ฅ ํ–ฅ์ƒ์ด ๋˜์ง€ ์•Š์•„ ๊ฒช์—ˆ๋˜ ์Šฌ๋Ÿผํ”„๋„ ์–ด๋А ์ •๋„ ํšŒ๋ณต๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ข‹์€ ๊ฐ•์˜ ๋งŒ๋“ค์–ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•˜๊ณ , ๋Š˜ ์ข‹์€ ์ผ๋“ค ๊ฐ€๋“ํ•˜์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค :D

5.0

์ธํ”„๋Ÿฐ

42% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

๊ฐ•์ถ”๊ฐ•์ถ”

5.0

ina9377

100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

์กฐ๊ธˆ์กฐ๊ธˆ์”ฉ ํ•œ๊ฐ•์˜์”ฉ ๋“ฃ๋‹ค๋ณด๋‹ˆ ๋ฒŒ์จ ์™„๊ฒฐ์ด๋„ค์š” :D ์Šคํƒ€์ผ ์ž…ํ˜€์„œ ์ด์˜๊ฒŒ ๋งŒ๋“ค์–ด๋ณผ๊ฒŒ์š”

์ˆ˜๊ฐ• ํ›„ ์ด๋Ÿฐ๊ฑธ ์–ป์„ ์ˆ˜ ์žˆ์–ด์š”

  • React + TypeScript

  • DefinitelyTyped

  • React Router ํƒ€์ดํ•‘

  • Redux ํƒ€์ดํ•‘

  • MobX ํƒ€์ดํ•‘

๋ฆฌ์•กํŠธ๋กœ ์›น ๊ฒŒ์ž„์„ ๋งŒ๋“ค๊ณ  ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ถ™์—ฌ๋ณด๋Š” ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด
์•ˆ์ •์ ์ธ ๋ฆฌ์•กํŠธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ํ•™์Šตํ•ด ๋ด…๋‹ˆ๋‹ค.

๋ฆฌ์•กํŠธ + ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ
์›น๊ฒŒ์ž„ ์˜ˆ์ œ๋กœ ์‹ค๋ฌด์— ์ ์‘ํ•˜์„ธ์š”!

์›น ๊ฒŒ์ž„์„ ๋งŒ๋“ค๋ฉฐ ๋ฐฐ์šฐ๋Š” React์˜ ํ›„์†์ž‘์œผ๋กœ ๊ฐ™์€ ๊ฒŒ์ž„์„ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ ์šฉํ•˜์—ฌ ๋งŒ๋“ค์–ด๋ด…๋‹ˆ๋‹ค.
๋˜, ์›น ๊ฒŒ์ž„๋งŒ ํƒ€์ดํ•‘ํ•˜๋ฉด ์•„์‰ฌ์šฐ๋‹ˆ๊นŒ ๋ฆฌ์•กํŠธ์™€ ์ž์ฃผ ๊ฐ™์ด ์“ฐ์ด๋Š” React Router, Redux, MobX์— ๋Œ€ํ•œ ํƒ€์ดํ•‘๋„ ๋ฐฐ์›Œ๋ด…๋‹ˆ๋‹ค. Class์™€ Hooks ๋ฌธ๋ฒ• ๋ชจ๋‘ ๊ฐ™์ด ํƒ€์ดํ•‘ํ•ฉ๋‹ˆ๋‹ค.

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ถ™์ž„์œผ๋กœ์จ ๋”๋”์šฑ ์•ˆ์ •์ ์ธ React ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด ๊ฐ€๋Šฅํ•ด์ง‘๋‹ˆ๋‹ค.


๐ŸŒˆ ๊ฐ•์˜ ์˜ˆ์ œ ๋ฏธ๋ฆฌ๋ณด๊ธฐ

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

๐Ÿ™Œ ์—ฌ๊ธฐ์„œ ๋‹ค๋ฃจ๋Š” ํˆด

ํฌ๋กฌ ๋ธŒ๋ผ์šฐ์ €์™€ Visual Studio Code(๋˜๋Š” ์›น์Šคํ†ฐ)์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.


๐Ÿ—’ ์งˆ๋ฌธ์— ๋น ๋ฅด๊ฒŒ
๋Œ€๋‹ตํ•ด ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์ œ ๊ฐ•์ขŒ์˜ ์žฅ์ ์€ Q&A์ž…๋‹ˆ๋‹ค. ์งˆ๋ฌธํ•˜์‹œ๋ฉด ํ•˜๋ฃจ ์•ˆ์— ๋‹ต๋ณ€๋“œ๋ ค์š”.
๊ฐ•์ขŒ ๊ด€๋ จ ๋‚ด์šฉ์„ ์ž์œ ๋กญ๊ฒŒ ์งˆ๋ฌธํ•˜์‹œ๋ฉด์„œ ๋Šฅ๋™์ ์œผ๋กœ ๊ณต๋ถ€ํ•ด ๋ณด์„ธ์š”.
๋‚ด์šฉ์„ ์ดํ•ดํ•˜๊ธฐ์— ๋” ๋„์›€์ด ๋  ๊ฑฐ์˜ˆ์š”!


๐Ÿ™‹๐Ÿปโ€โ™‚๏ธ ์˜ˆ์ƒ ์งˆ๋ฌธ QnA

Q. ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ๋ช‡ ๋ฒ„์ „์„ ์‚ฌ์šฉํ•˜๋‚˜์š”?

A. 3.8๋ฒ„์ „์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ์ดํ›„ ๋ฒ„์ „์„ ์„ค์น˜ํ•˜์…”๋„ ๋ฌด๋ฐฉํ•ฉ๋‹ˆ๋‹ค.

Q. ์†Œ์Šค์ฝ”๋“œ๋Š” ์–ด๋””์— ์žˆ๋‚˜์š”?

A. https://github.com/zerocho/ts-react 

Q. ๋ฆฌ์•กํŠธ, ๋ฆฌ๋•์Šค ๊ฐœ๋…๋„ ๋‹ค๋ฃจ๋‚˜์š”?

A. ์ด ๋ถ€๋ถ„์€ ์•„๋ž˜ ์„ ์ˆ˜๊ณผ๋ชฉ์„ ๋จผ์ € ๋“ฃ๊ณ  ์˜ค์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ฐ•์ขŒ์—๋Š” ํƒ€์ดํ•‘์„ ๋ถ™์ด๋Š” ๊ฒƒ๋งŒ ์„ค๋ช…ํ•˜๊ณ , ๊ทธ ์ž์ฒด์˜ ๊ฐœ๋…์€ ์„ค๋ช…ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

Q. ์„ ์ˆ˜๊ณผ๋ชฉ์ด ์žˆ๋‚˜์š”?

A. ์›น๊ฒŒ์ž„์„ ๋งŒ๋“ค๋ฉฐ ๋ฐฐ์šฐ๋Š” React ๊ฐ•์ขŒ, ์›น๊ฒŒ์ž„์„ ๋งŒ๋“ค๋ฉฐ ๋ฐฐ์šฐ๋Š” TypeScript๋ฅผ ๋ณด์‹œ๊ณ  ์˜ค์…”์•ผ ๋ฉ๋‹ˆ๋‹ค. TypeScript ๊ฐ•์ขŒ๋Š” ์œ ๋ฃŒ์ด๋ฏ€๋กœ ๊ณต์‹๋ฌธ์„œ๋ฅผ ๋ณด์‹œ๋Š” ๊ฒƒ์œผ๋กœ ์–ด๋А ์ •๋„ ๋Œ€์ฒด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

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

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

  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ฐฐ์› ์œผ๋‚˜ ๋ฆฌ์•กํŠธ์— ์–ด๋–ป๊ฒŒ ๋ถ™์—ฌ์•ผํ• ์ง€ ๋ชจ๋ฅด๊ฒ ๋Š” ๋ถ„

  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์™€ ๋ฆฌ์•กํŠธ๋ฅผ ์‹ค๋ฌด์—์„œ ์‚ฌ์šฉํ•˜์‹ค ๋ถ„

  • ๋‚จ์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํƒ€์ดํ•‘์— ๋‘๋ ค์›€์„ ๊ฐ–๊ณ  ๊ณ„์‹  ๋ถ„

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

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

  • ๋ฆฌ์•กํŠธ ์›น๊ฒŒ์ž„ ๊ฐ•์ขŒ

  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์›น๊ฒŒ์ž„ ๊ฐ•์ขŒ

  • Redux, MobX ๊ธฐ์ดˆ ๊ฐœ๋…

์•ˆ๋…•ํ•˜์„ธ์š”
์ œ๋กœ์ดˆ(์กฐํ˜„์˜)์ž…๋‹ˆ๋‹ค.

67,598

๋ช…

์ˆ˜๊ฐ•์ƒ

1,737

๊ฐœ

์ˆ˜๊ฐ•ํ‰

9,765

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

25

๊ฐœ

๊ฐ•์˜

์ œ ๊ฐ•์˜์˜ ์žฅ์ ์€ Q&A์ž…๋‹ˆ๋‹ค(์ธํ”„๋Ÿฐ ๋‹ต๋ณ€์™• 2ํšŒ ์ˆ˜์ƒ). 24์‹œ๊ฐ„ ์ด๋‚ด์— ์ตœ๋Œ€ํ•œ ๋‹ต๋ณ€๋“œ๋ฆฝ๋‹ˆ๋‹ค! ๊ฐ™์ด ๊ณ ๋ฏผํ•œ๋‹ค๋Š” ๋А๋‚Œ์œผ๋กœ ๋‹ต๋ณ€ ๋“œ๋ฆด๊ฒŒ์š”!

One of the key strengths of my courses is the Q&A support. (Winner of the Inflearn Q&A King award twice) I respond to your questions within 24 hours, doing my best to help you out! Youโ€™ll feel like weโ€™re solving the problems together.

๐Ÿ‘‰ZeroCho Lectures
์ œ๋กœ์ดˆ ๊ฐ•์˜ ์ „์ฒด ๋กœ๋“œ๋งต. A complete roadmap of all my courses is available here.

โ€“ Node.js๊ต๊ณผ์„œ, ์ฝ”๋”ฉ์ž์œจํ•™์Šต ์ œ๋กœ์ดˆ์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, Let's Get IT ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ๊ต๊ณผ์„œ ์ €์ž 
โ€“ ZeroCho.com ์šด์˜์ž
โ€“ ํ˜„) ์œ ํŠœ๋ธŒ์—์„œ ZeroCho TV๋กœ ๊ฐœ๋ฐœ ๊ด€๋ จ ๋ฐฉ์†ก์ค‘ 
โ€“ ์ „) ์Šค๋ชจ์–ดํ†ก CTO 
โ€“ ์ „) ์˜ค๋Š˜์˜ํ”ฝ์—… CTO(์นด์นด์˜ค๋ชจ๋นŒ๋ฆฌํ‹ฐ์— ์—‘์‹ฏ ํ›„ ์นด์นด์˜ค๋ชจ๋นŒ๋ฆฌํ‹ฐ ์ตœ์—ฐ์†Œ ๊ฐœ๋ฐœํŒŒํŠธ์žฅ)

  • Author of Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript, and TypeScript Textbook

  • Operator of ZeroCho.com

  • Currently running a YouTube channel ZeroCho TV, covering development topics

  • Former CTO at SmoreTalk

  • Former CTO at Today Pickup (acquired by Kakao Mobility, where I became the youngest lead developer)

๋”๋ณด๊ธฐ

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

์ „์ฒด

36๊ฐœ โˆ™ (7์‹œ๊ฐ„ 38๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

27๊ฐœ

4.7

27๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • ๊ฝƒ๊ฐˆํ”ผ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    ๊ฝƒ๊ฐˆํ”ผ

    ์ˆ˜๊ฐ•ํ‰ 7

    โˆ™

    ํ‰๊ท  ํ‰์  4.9

    5

    100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ๋ฆฌ๋ทฐ์–ด๋กœ ์ฐธ์—ฌํ•˜๊ฒŒ ๋˜์–ด ์ข‹์€ ๊ธฐํšŒ๋กœ ํ‰์†Œ ๋“ฃ๊ณ ์‹ถ์—ˆ๋˜ ํ•ด๋‹น ๊ฐ•์˜๋ฅผ ๋ฌด๋ฃŒ๋กœ ๋“ฃ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋จผ์ € ์ด ๊ฐ•์˜๋Š” React์™€ TypeScript์— ๋Œ€ํ•œ ์„ ํ–‰ ์ง€์‹์ด ์žˆ์–ด์•ผ ํ•˜๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. React์™€ TypeScript์˜ ๋ฌธ๋ฒ•์„ ๊ฐ€๋ฅด์ณ์ฃผ๋Š” ๊ฐ•์˜๋Š” ์•„๋‹™๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ด์— ๋Œ€ํ•œ ์ง€์‹์ด ์•„์˜ˆ ์—†๋‹ค๋ฉด ์ˆ˜์—…์„ ๋”ฐ๋ผ๊ฐ€๋Š”๋ฐ ์ง€์žฅ์ด ์žˆ์„๊ฒ๋‹ˆ๋‹ค. ๋‹ค๋งŒ, ์ œ ๊ฐœ์ธ์ ์ธ ์ƒ๊ฐ์œผ๋กœ๋Š” React์™€ TypeScript ๋‘˜ ๋‹ค ๊ธฐ์ดˆ ์ˆ˜์ค€์˜ ๊ธฐ๋ณธ์ ์ธ ๋ฌธ๋ฒ• ์ •๋„๋งŒ ์•Œ๊ณ  ์žˆ๋‹ค๋ฉด ๊ฐ•์˜๋ฅผ ๋“ฃ๋Š” ๋ฐ ํฐ ์–ด๋ ค์›€์€ ์—†์œผ๋ฆฌ๋ผ ์ƒ๊ฐ๋ฉ๋‹ˆ๋‹ค. ์ œ ๊ฒฝ์šฐ์—๋Š” ๊ฐ•์˜ ์ดˆ๋ฐ˜์— '์ƒ๊ฐ๋ณด๋‹ค ์‰ฌ์šด๋ฐ?' ํ•˜๋ฉด์„œ ์ž์‹ ๊ฐ์ด ๋ถ™์—ˆ์Šต๋‹ˆ๋‹ค. ๋ฌผ๋ก  ๋ชจ๋“  ๋‚ด์šฉ์ด ์‰ฝ๋‹ค๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๊ณ , ๋“ฃ๋‹ค ๋ณด๋ฉด ์–ด๋ ค์šด ๋‚ด์šฉ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ Redux ๋Š” ์–ด๋А ์ •๋„ ์ง€์‹์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ €๋Š” Redux ์™ธ์— React Router, ContextAPI, MobX๋Š” ๋”ฐ๋กœ ๊ณต๋ถ€ํ•œ ์ ์ด ์—†์–ด์„œ ์ž˜ ๋ชฐ๋ž๋Š”๋ฐ๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์ถฉ๋ถ„ํžˆ ๊ฐ•์˜๋ฅผ ๋”ฐ๋ผ๊ฐˆ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค๋ฉด, ๋ฆฌ์•กํŠธ๋Š” ๊ฐ•์˜๋งˆ๋‹ค ๋‚˜์˜ค๋Š” ๋‚ด์šฉ์— ๋Œ€ํ•ด ๊ฐ€๋ณ๊ฒŒ ๊ฐœ๋…์„ ์งš์–ด ์ฃผ์‹œ๋ฉด์„œ ์ง„ํ–‰ํ•˜์‹ญ๋‹ˆ๋‹ค. TypeScript๋„ ๊ฐ€๋ณ๊ฒŒ ๊ทธ๋ฆฌ๊ณ  ๋ฐ˜๋ณต์ ์œผ๋กœ ์„ค๋ช…ํ•˜๊ณ  ๋„˜์–ด๊ฐ€ ์ฃผ์…”์„œ ๊ธฐ์กด์— ์•Œ๊ณ  ์žˆ๋˜ TypeScript ๊ฐœ๋…์„ ํ•œ ๋ฒˆ ๋” ์ •๋ฆฌํ•˜๋Š” ๋А๋‚Œ๋„ ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. (๋ฌผ๋ก  ๊ฐœ์ธ์ฐจ๋กœ ์„ค๋ช… ์•ˆ ํ•ด์ฃผ์‹œ๋Š” ๋ถ€๋ถ„๋„ ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค) ๊ทธ๋ฆฌ๊ณ  ์ œ๊ฐ€ ์ด ๊ฐ•์˜๋ฅผ ์„ ํƒํ•œ ๋˜ ๋‹ค๋ฅธ ์ด์œ  ์ค‘ ํ•˜๋‚˜๋Š” Q&A ๋ฐฉ์ด ํ™œ์„ฑํ™”๋˜์–ด์žˆ๋‹ค๋Š” ์ ์ธ๋ฐ, ์งˆ๋ฌธ ๊ธ€์ด ์˜ฌ๋ผ์˜ค๋ฉด ๋น ๋ฅด๊ฒŒ ๋‹ต๋ณ€ํ•ด์ฃผ์‹œ๋Š” ๋ถ€๋ถ„๋„ ์ข‹์•˜์Šต๋‹ˆ๋‹ค. ์“ฐ๋‹ค ๋ณด๋‹ˆ ๊ธ€์ด ๊ธธ์–ด์กŒ๋Š”๋ฐ ์ง€์›ํ•˜๊ณ  ์‹ถ์—ˆ๋˜ ํšŒ์‚ฌ์—์„œ React์— TypeScript๋ฅผ ์ ์šฉํ•˜๋Š” ๊ณผ์ œ๋ฅผ ์ œ์ถœํ•ด์•ผ ํ–ˆ๋˜ ์ ์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์งง์€ ๊ธฐ๊ฐ„ ๋‚ด์— ๋…ํ•™ํ•ด๋ณด๋ ค๊ณ  ํ–ˆ์ง€๋งŒ ์ผ์ผ์ด ์ฐพ์œผ๋ฉฐ ๊ณต๋ถ€ํ•˜๋ ค๋‹ˆ ๋ง‰๋ง‰ํ•จ์ด ๋А๊ปด์กŒ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๊ณ„์† ๊ธฐ์ดˆ ์ˆ˜์ค€์—์„œ ๋จธ๋ฌผ๋ €๋Š”๋ฐ, ์ด ๊ฐ•์ขŒ๋ฅผ ๋“ฃ๊ณ  ๋‚˜์„œ๋Š” ์ด์ œ ํฐ ์–ด๋ ค์›€์„ ๋А๋ผ์ง€ ์•Š๊ณ  ๋ฆฌ์•กํŠธ์— ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ ์šฉํ•ด์„œ ์ฝ”๋”ฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ƒˆ๋กœ์šด ๋‚ด์šฉ์„ ์ ‘ํ•˜๊ณ  ๋ฐฐ์šฐ๋‹ˆ, ๊ฐœ๋ฐœ ์‹ค๋ ฅ ํ–ฅ์ƒ์ด ๋˜์ง€ ์•Š์•„ ๊ฒช์—ˆ๋˜ ์Šฌ๋Ÿผํ”„๋„ ์–ด๋А ์ •๋„ ํšŒ๋ณต๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ข‹์€ ๊ฐ•์˜ ๋งŒ๋“ค์–ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•˜๊ณ , ๋Š˜ ์ข‹์€ ์ผ๋“ค ๊ฐ€๋“ํ•˜์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค :D

    • BM WORLD๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
      BM WORLD

      ์ˆ˜๊ฐ•ํ‰ 11

      โˆ™

      ํ‰๊ท  ํ‰์  4.8

      5

      100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      ๋””ํ…Œ์ผํ•œ ์ง€์‹ / ์ •๋ง ํ•„์š”ํ•œ ๊ณณ์— ์ง‘์ค‘ํ•ด์„œ ์„ค๋ช…ํ•ด์ฃผ๋Š” ๊ฒƒ์„ ํ†ตํ•ด ์–‘์งˆ์˜ ์ •๋ณด๋ฅผ ์–ป์–ด๊ฐ‘๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

      • ๋กœ์ฝ”๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
        ๋กœ์ฝ”

        ์ˆ˜๊ฐ•ํ‰ 22

        โˆ™

        ํ‰๊ท  ํ‰์  5.0

        5

        100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

        ์ข‹์€ ๊ฐ•์˜ ์ž˜ ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค :)

        • ์ธํ”„๋Ÿฐ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
          ์ธํ”„๋Ÿฐ

          ์ˆ˜๊ฐ•ํ‰ 67

          โˆ™

          ํ‰๊ท  ํ‰์  4.9

          5

          42% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

          ๊ฐ•์ถ”๊ฐ•์ถ”

          • ina9377๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
            ina9377

            ์ˆ˜๊ฐ•ํ‰ 4

            โˆ™

            ํ‰๊ท  ํ‰์  5.0

            5

            100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

            ์กฐ๊ธˆ์กฐ๊ธˆ์”ฉ ํ•œ๊ฐ•์˜์”ฉ ๋“ฃ๋‹ค๋ณด๋‹ˆ ๋ฒŒ์จ ์™„๊ฒฐ์ด๋„ค์š” :D ์Šคํƒ€์ผ ์ž…ํ˜€์„œ ์ด์˜๊ฒŒ ๋งŒ๋“ค์–ด๋ณผ๊ฒŒ์š”

            ์ œ๋กœ์ดˆ(์กฐํ˜„์˜)๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

            ์ง€์‹๊ณต์œ ์ž๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

            ๋น„์Šทํ•œ ๊ฐ•์˜

            ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

            ์›” โ‚ฉ160,603

            5๊ฐœ์›” ํ• ๋ถ€ ์‹œ

            โ‚ฉ38,500