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

์‹ค์ „ ๋ฆฌ์•กํŠธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ

[์‹ค์ „ ๋ฆฌ์•กํŠธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ] ์ฑ…์˜ ์ €์ž ์ง๊ฐ•! ๋ฆฌ์•กํŠธ์˜ ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์‹ค์ „ ํ™œ์šฉ๋ฒ•๊นŒ์ง€ ์ตํž ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Thumbnail

์ค‘๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[ํ”„๋ก ํŠธ์—”๋“œ, ์›น ๊ฐœ๋ฐœ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

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

  • ๋ฆฌ์•กํŠธ ๊ธฐ๋ณธ ์›๋ฆฌ ๋ฐ ์‚ฌ์šฉ๋ฒ•

  • ์‹ค์ „์—์„œ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ฆฌ์•กํŠธ ํ™œ์šฉ๋ฒ•

  • ๋ฆฌ๋•์Šค ๊ธฐ์ดˆ ๋ฐ ๊ณ ๊ธ‰ ํ™œ์šฉ๋ฒ•

์ €์ž ์ง๊ฐ•! ์ตœ์‹  ๋ฆฌ์•กํŠธ(React) ํ•™์Šต, 
๊ธฐ์ดˆ๋ถ€ํ„ฐ ์‹ค์ „ ํ™œ์šฉ๊นŒ์ง€ ์•Œ์ฐจ๊ฒŒ ๋ฐฐ์›Œ๋ณด์„ธ์š”.

[์‹ค์ „ ๋ฆฌ์•กํŠธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ] ๊ฐœ์ •ํŒ์„
๊ธฐ๋ฐ˜์œผ๋กœ ๋งŒ๋“  ๊ฐ•์˜! ๐Ÿ“–

2020๋…„ 7์›”์— ์ถœํŒ๋œ ๋ฆฌ์•กํŠธ ์ฑ…์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ฐ•์˜๋ฅผ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
๋น ๋ฅด๊ฒŒ ๋ฐœ์ „ํ•˜๋Š” ์›น ๊ธฐ์ˆ ์˜ ์ตœ์‹  ํŠธ๋ Œ๋“œ๋ฅผ ์ตํžˆ๋ ค๋ฉด ๊ฐ•์˜ ์ž๋ฃŒ์˜ ์ตœ์‹ ํ™”๊ฐ€ ๊ฐ€์žฅ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.
๋ฆฌ์•กํŠธ ํ›…์„ ์ค‘์ ์ ์œผ๋กœ ๋‹ค๋ฃจ๋Š” [์‹ค์ „ ๋ฆฌ์•กํŠธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ] ๊ฐœ์ •ํŒ์œผ๋กœ ๋ฆฌ์•กํŠธ๋ฅผ ๋ฐฐ์šฐ์„ธ์š”!

โ–ฒ <์‹ค์ „ ๋ฆฌ์•กํŠธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ> ๊ฐœ์ •ํŒ์ด ๊ถ๊ธˆํ•˜๋‹ค๋ฉด ์ฑ… ์ด๋ฏธ์ง€๋ฅผ ํด๋ฆญํ•ด์ฃผ์„ธ์š”.

์ด ๊ฐ•์˜์—์„œ ๋ฐฐ์šฐ๋Š” ๊ฒƒ๋“ค โœ๏ธ

์ด ๊ฐ•์˜์—์„œ ๋‹ค๋ฃจ๋Š” ์ฑ…์˜ ๋‚ด์šฉ์€ ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • 1์žฅ: ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ํ•˜๊ธฐ
  • 3์žฅ: ์ค‘์š”ํ•˜์ง€๋งŒ ํ—ท๊ฐˆ๋ฆฌ๋Š” ๋ฆฌ์•กํŠธ ๊ฐœ๋… ์ดํ•ดํ•˜๊ธฐ
  • 4์žฅ: ๋ฆฌ์•กํŠธ ์‹ค์ „ ํ™œ์šฉ๋ฒ•
  • 6์žฅ: ๋ฆฌ๋•์Šค๋กœ ์ƒํƒœ ๊ด€๋ฆฌํ•˜๊ธฐ
  • ๊ทธ๋ฆฌ๊ณ  ์ฑ…์—๋Š” ์—†๋Š” 2๊ฐœ์˜ ํ”„๋กœ์ ํŠธ!

ํ”„๋กœ์ ํŠธ1: 2048 ๊ฒŒ์ž„ ๋งŒ๋“ค๊ธฐ ๐Ÿ•น๏ธ

์ˆœ์ˆ˜ํ•˜๊ฒŒ ๋ฆฌ์•กํŠธ๋งŒ ์‚ฌ์šฉํ•ด์„œ 2048 ๊ฒŒ์ž„์„ ๋งŒ๋“ค์–ด ๋ด…๋‹ˆ๋‹ค.
๋ฆฌ์•กํŠธ์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ์ธ useState, useEffect์˜ ์‚ฌ์šฉ๋ฒ•์„ ์ตํž ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

โ–ฒ ์ˆœ์ˆ˜ ๋ฆฌ์•กํŠธ๋กœ ์ œ์ž‘ํ•œ 2048 ๊ฒŒ์ž„

ํ”„๋กœ์ ํŠธ2: ๋‹ด๋‹น์ž ์ฐพ๊ธฐ ์„œ๋น„์Šค ๋งŒ๋“ค๊ธฐ ๐Ÿ”

์ง‘๋‹จ์ง€์„ฑ์„ ์ด์šฉํ•œ ๋‹ด๋‹น์ž ์ฐพ๊ธฐ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค์–ด๋ด…๋‹ˆ๋‹ค.
๋ชจ๋‘๊ฐ€ ์‰ฝ๊ฒŒ ์ •๋ณด๋ฅผ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋„๋ก ํŽธ๋ฆฌํ•œ ์ˆ˜์ • ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
์ด ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค์–ด๋ณด๋ฉด์„œ ํ”„๋ก ํŠธ์—”๋“œ์—์„œ์˜ ์ธ์ฆ์ฒ˜๋ฆฌ ๋ฐฉ์‹๊ณผ,
redux, redux-saga๋ฅผ ์ด์šฉํ•œ API ํ†ต์‹  ์ฝ”๋“œ ์ž‘์„ฑ ๋ฐฉ๋ฒ•์„ ๋ฐฐ์›๋‹ˆ๋‹ค.

โ–ฒ ๋‹ด๋‹น์ž ์ฐพ๊ธฐ ์„œ๋น„์Šค

์˜จ๋ผ์ธ ์‹ค์Šต ์ฝ”๋“œ ์ œ๊ณต โšก

๊ฐ•์˜์—์„œ ์‚ฌ์šฉ๋œ ๊ฑฐ์˜ ๋ชจ๋“  ์ฝ”๋“œ๋ฅผ ์˜จ๋ผ์ธ IDE(CodeSandbox)์—์„œ ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!
๊ฐ ๊ฐ•์˜ ํ™”๋ฉด์—์„œ ํ•˜๋‹จ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.
์˜จ๋ผ์ธ์—์„œ ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ์ˆ˜์ •ํ•˜๋ฉด์„œ ๊ฒฐ๊ณผ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ํ•™์Šต์— ํฐ ๋„์›€์ด ๋  ๊ฒƒ์œผ๋กœ ๊ธฐ๋Œ€ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
>> ์ƒ˜ํ”Œ ๋งํฌ <<

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

Q. ๋น„์ „๊ณต์ž๋„ ๋“ค์„ ์ˆ˜ ์žˆ๋‚˜์š”?
A. ๋งŒ์•ฝ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ฒฝํ—˜์ด ์—†๋‹ค๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋จผ์ € ์ตํžˆ๊ณ  ๋“ค์œผ์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค.
๊ผญ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์•„๋‹ˆ๋”๋ผ๋„ ํ•˜๋‚˜ ์ด์ƒ์˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์— ๋Œ€ํ•œ ์ดํ•ด๊ฐ€ ์žˆ๋‹ค๋ฉด ์ด ๊ฐ•์˜๋ฅผ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Q. ์ด ๊ฐ•์˜๋งŒ์˜ ํŠน๋ณ„ํ•œ ์žฅ์ ์ด ์žˆ์„๊นŒ์š”?
A. ์ฑ…์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜๋Š” ๊ฐ•์˜์ธ ๋งŒํผ ์งœ์ž„์ƒˆ ์žˆ๋Š” ์ปค๋ฆฌํ˜๋Ÿผ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
๊ฒŒ๋‹ค๊ฐ€ ์ฑ…์—๋Š” ์—†๋Š” ์‹ค์Šต ํ”„๋กœ์ ํŠธ 2๊ฐœ๋ฅผ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.

Q. ์ด ๊ฐ•์˜์—์„œ๋Š” ์–ด๋–ค ํ”„๋กœ๊ทธ๋žจ์„ ์‚ฌ์šฉํ•˜๋‚˜์š”?
A. ์ด ๊ฐ•์˜์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์ฃผ์š” ํŒจํ‚ค์ง€๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.
react, create-react-app, react-router-dom, redux, redux-saga, antd, axios
๊ทธ๋ฆฌ๊ณ  IDE๋Š” vscode๋ฅผ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค.

Q. ์ฑ…์—์„œ๋Š” ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ, Next.js๋„ ๋‹ค๋ฃจ๋˜๋ฐ์š”?
A. ์ฑ…์— ์žˆ๋Š” ๋‚ด์šฉ์„ ํ•˜๋‚˜์˜ ๊ฐ•์˜๋กœ ๋‹ด๊ธฐ์—๋Š” ๋‚ด์šฉ์ด ๋„ˆ๋ฌด ๋งŽ์•„์„œ ๋‚˜๋ˆ ์„œ ๊ฐ•์˜๋ฅผ ์ œ์ž‘ํ•  ์ƒ๊ฐ์ž…๋‹ˆ๋‹ค.
๊ทธ๋ž˜์„œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ, Next.js๋ฅผ ๊ฐ๊ฐ ๋ณ„๋„์˜ ๊ฐ•์˜๋กœ ์ œ์ž‘ํ•ด๋ณผ๊นŒ ์ƒ๊ฐ ์ค‘์ž…๋‹ˆ๋‹ค.

Q. ์ž๋ง‰์„ ์ง€์›ํ•˜๋‚˜์š”?
A. ํ”„๋กœ์ ํŠธ2๋ฅผ ์ œ์™ธํ•œ ๋ชจ๋“  ์˜์ƒ์—์„œ ์ž๋ง‰์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

Q. ์ฑ…์„ ๊ตฌ๋งคํ•ด์•ผํ•˜๋‚˜์š”?
A. ์•„๋‹ˆ์š” ์ฑ…์ด ์—†์–ด๋„ ์ดํ•ดํ•˜์‹ค ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.
Typescript, Next.js, ์›นํŒฉ/๋ฐ”๋ฒจ ๋“ฑ์„ ์ถ”๊ฐ€๋กœ ๊ณต๋ถ€ํ•˜์‹ค ๋ถ„๋“ค๋งŒ ๊ตฌ๋งคํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

 

๋‹ค๋ฅธ ๊ฐ•์˜ ๋ณด๊ธฐ ๐Ÿ“š

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

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

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

  • ๋ฆฌ์•กํŠธ๋ฅผ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ํ˜„์—… ๊ฐœ๋ฐœ์ž

  • ๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•ด๋ดค์ง€๋งŒ ์•„์ง ํ—ท๊ฐˆ๋ฆฌ๋Š” ๋ถ„๋“ค

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

  • HTML

  • CSS

  • JAVASCRIPT

์•ˆ๋…•ํ•˜์„ธ์š”
์ด์žฌ์Šน์ž…๋‹ˆ๋‹ค.

1,983

๋ช…

์ˆ˜๊ฐ•์ƒ

146

๊ฐœ

์ˆ˜๊ฐ•ํ‰

307

๊ฐœ

๋‹ต๋ณ€

4.7

์ 

๊ฐ•์˜ ํ‰์ 

2

๊ฐœ

๊ฐ•์˜

- [์‹ค์ „ ๋ฆฌ์•กํŠธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ] ์ €์ž

- react contributor (PR ๋งํฌ)

- if kakao 2019 ์ปจํผ๋Ÿฐ์Šค์—์„œ [๋ฆฌ์•กํŠธ: ๊ทธ๊ฒƒ๋งˆ์ € ๊ฒฐ์ •ํ•ด์ฃผ๋งˆ] ๋ฐœํ‘œ

- ์นด์นด์˜คํŽ˜์ด์ง€ ๊ธ€๋กœ๋ฒŒ์›น ๊ฐœ๋ฐœ ์ค‘

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

์ „์ฒด

53๊ฐœ โˆ™ (9์‹œ๊ฐ„ 56๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

98๊ฐœ

4.4

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

๊ณต๊ฐœํ•˜์ง€ ์•Š๋Š” ๊ฐ•์˜๋กœ ์ˆ˜๊ฐ•์ด ์ œํ•œ๋ฉ๋‹ˆ๋‹ค.