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

[๋ฆฌ๋‰ด์–ผ] React๋กœ NodeBird SNS ๋งŒ๋“ค๊ธฐ

๋ฆฌ์•กํŠธ & ๋„ฅ์ŠคํŠธ & ๋ฆฌ๋•์Šค & ๋ฆฌ๋•์Šค์‚ฌ๊ฐ€ & ์ต์Šคํ”„๋ ˆ์Šค ์Šคํƒ์œผ๋กœ ํŠธ์œ„ํ„ฐ์™€ ์œ ์‚ฌํ•œ SNS ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค์–ด๋ด…๋‹ˆ๋‹ค. ๋์œผ๋กœ ๊ฒ€์ƒ‰์—”์ง„ ์ตœ์ ํ™” ํ›„ AWS์— ๋ฐฐํฌํ•ฉ๋‹ˆ๋‹ค.

Thumbnail

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

์ด๋Ÿฐ ๊ฑธ
๋ฐฐ์›Œ์š”!

  • ๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ

  • ๋ฆฌ๋•์Šค&๋ฆฌ๋•์Šค ์‚ฌ๊ฐ€

  • ๋ฆฌ์•กํŠธ Hooks ์‚ฌ์šฉ

  • Styled Components

  • Ant Design

  • SWR

  • ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง

  • ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”

  • AWS ๋ฐฐํฌ

์ƒˆ๋กœ ๋งŒ๋‚˜๋Š” ์ œ๋กœ์ดˆ์˜ ๋ฆฌ์•กํŠธ ๋…ธ๋“œ๋ฒ„๋“œ ํ”„๋กœ์ ํŠธ!

๋ฆฌ๋‰ด์–ผ๋œ ์‚ฌํ•ญ

next@9, styled-components@5, antd@4, node.js@14 ๋“ฑ์˜ ๋ฒ„์ „์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

next@14์™€ node.js@20๊ณผ๋„ ํ˜ธํ™˜๋˜๋‹ˆ ์ตœ์‹  ๋ฒ„์ „์œผ๋กœ ์ง„ํ–‰ํ•˜์…”๋„ ๋ฉ๋‹ˆ๋‹ค. antd@5, next-redux-wrapper@8์˜ migration ๋ฐฉ๋ฒ•์€ ๊ฐ•์˜๋…ธํŠธ์™€ ์ƒˆ์†Œ์‹(๊ณต์ง€์‚ฌํ•ญ)์— ์ •๋ฆฌํ•ด๋‘์—ˆ์Šต๋‹ˆ๋‹ค. ์ฐธ๊ณ ํ•˜๋ฉด์„œ ๋ณด์„ธ์š”!

์ด ๊ฐ•์ขŒ๋Š” Pages Router๋ฅผ ๋‹ค๋ฃน๋‹ˆ๋‹ค. App Router ๊ฐ•์ขŒ๋Š” ์ด ๋งํฌ(ํด๋ฆญ)์— ์žˆ์Šต๋‹ˆ๋‹ค. App router ๊ฐ•์ขŒ๊ฐ€ ๋” ์ตœ์‹ ์ด์ง€๋งŒ ์ด ๊ฐ•์ขŒ๋ฅผ ๋‚จ๊ฒจ๋‘” ์ด์œ ๋Š”, App Router๊ฐ€ ์•„์ง ๋ถˆ์•ˆ์ •ํ•ด์„œ ์‹ค๋ฌด์—์„œ ์“ฐ๊ธฐ์—” ์กฐ๊ธˆ ์œ„ํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์•ˆ์ •ํ™”๋  ๋•Œ๊นŒ์ง€๋Š” Pages Router๋ฅผ ์‹ค๋ฌด์—์„œ ์“ฐ์‹œ๋Š” ๊ฑธ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค.


๋‹น๋ถ€์˜ ๋ง์”€

์ž‘๋…„์— ๋งŽ์€ ์ˆ˜๊ฐ•์ƒ๋ถ„๋“ค์ด ์ด ๊ฐ•์ขŒ๋ฅผ ๋“ค์–ด์ฃผ์…จ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋‹ค๋งŒ ๋“œ๋ฆฌ๊ณ  ์‹ถ์€ ๋ง์”€์ด ํ•˜๋‚˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹จ์ˆœํžˆ ๊ฐ•์˜๋ฅผ ๋ˆˆ์œผ๋กœ ๋ณธ๋‹ค๊ณ  ํ•ด์„œ ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค(๊ทธ๊ฒƒ์€ ์š•์‹ฌ์ž…๋‹ˆ๋‹ค). ์ง์ ‘ ๋”ฐ๋ผ์„œ ์น˜์‹œ๊ณ , ๋ฐœ์ƒํ•˜๋Š” ์—๋Ÿฌ๋“ค์„ ํ•ด๊ฒฐํ•˜๊ณ , ๊ฐ•์ขŒ์—๋Š” ์—†๋Š” ๊ธฐ๋Šฅ์„ ๋งŒ๋“ค์–ด๋ณด๋ฉด์„œ ๋‚˜์˜ค๋Š” ๊ธฐ์ˆ ์„ ์ž๊ธฐ ๊ฒƒ์œผ๋กœ ๋งŒ๋“ค์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ด ๊ฐ•์ขŒ๋Š” ์‹ค์ œ๋กœ 6๊ฐœ์›” ์ด์ƒ์ด ๊ฑธ๋ฆฌ๋Š” ์ปค๋ฆฌํ˜๋Ÿผ์„ 20์‹œ๊ฐ„ ๊ฐ€๊นŒ์ด ์ด์–ด์„œ ๋ณด์—ฌ๋“œ๋ฆฌ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. HTML, CSS, JS, Node, MySQL, AWS ๋ชจ๋‘ ์ตœ์†Œ 1๋‹ฌ ์ด์ƒ์„ ํˆฌ์žํ•ด์•ผ ์–ด๋Š ์ •๋„ ์†Œํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๊ฐ•์ขŒ๋Š” 20์‹œ๊ฐ„ ๋ถ„๋Ÿ‰์ด๋”๋ผ๋„ ๋ณ„๋„์˜ ๊ณต๋ถ€๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.


์ œ๋กœ์ดˆ์˜ React๋กœ ๋ฐฐ์šฐ๋Š”
20์‹œ๊ฐ„ ํ’€์Šคํƒ ๊ฐ•์ขŒ!

โ–ฒ NodeBird SNS ๋งŒ๋“ค๊ธฐ

  • ํŠธ์œ„ํ„ฐ์™€ ๋น„์Šทํ•œ(์ด๋ผ๊ณ  ์“ฐ๊ณ  ์งํ‰์ด๋ผ ์ฝ๋Š”๋‹ค) ์ œ๋กœ์ดˆ์˜ ์‹œ๊ทธ๋‹ˆ์ฒ˜ ํ”„๋กœ์ ํŠธ NodeBird SNS๋ฅผ ๋งŒ๋“ค์–ด๋ณด๋ฉฐ, ์„œ๋น„์Šค ๊ตฌํ˜„๋ถ€ํ„ฐ ๋ฐฐํฌ๊นŒ์ง€ ๋ชจ๋‘ ๋ฐฐ์›Œ๋ด์š”.
  • Next.js(SSR) + React Hooks + Redux + Redux saga + Ant Design + Styled Components + Node + Express + Sequelize(MySQL)๋ฅผ ๋ฐฐ์›๋‹ˆ๋‹ค.
  • ๊ฒ€์ƒ‰์—”์ง„ ์ตœ์ ํ™”์™€ AWS ๋ฐฐํฌ(๊ฐ„๋‹จํ•˜๊ฒŒ EC2 + Lambda + S3 + Route53 ์‚ฌ์šฉ)๋Š” ๋ณด๋„ˆ์Šค!

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

๋กœ๊ทธ์ธ, ๊ฒŒ์‹œ๊ธ€ ์ž‘์„ฑ, ์ข‹์•„์š”
์ด๋ฏธ์ง€ ์—…๋กœ๋“œ, ๋Œ“๊ธ€, ๋ฆฌํŠธ์œ—

 

์ธํ”ผ๋‹ˆํŠธ ์Šคํฌ๋กค๋ง, ํŒ”๋กœ์šฐ, ์–ธํŒ”๋กœ์šฐ

 

ํ•ด์‹œํƒœ๊ทธ ๊ฒ€์ƒ‰, ์œ ์ € ํ”„๋กœํ•„

 

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

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


์ง€์‹๊ณต์œ ์ž๋ฅผ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

์›น๊ฐœ๋ฐœ ๋ฒ ์ŠคํŠธ์…€๋Ÿฌ
<Node.js ๊ต๊ณผ์„œ> ์ €์ž

์ฃผ์‹ํšŒ์‚ฌ ์˜ค๋Š˜์˜ํ”ฝ์—…
CTO


์—ฐ๊ด€ ๊ฐ•์˜

์›น ๊ฒŒ์ž„์„ ๋งŒ๋“ค๋ฉฐ ๋ฐฐ์šฐ๋Š” React
๋ฌด๋ฃŒ๋กœ ์›น ๊ฒŒ์ž„์„ ํ†ตํ•ด ๋ฆฌ์•กํŠธ๋ฅผ ๋ฐฐ์›Œ๋ด…๋‹ˆ๋‹ค.
ํ”„๋ก ํŠธ๋ฅผ ์ค‘์ ์œผ๋กœ ๋‹ค๋ฃจ๊ณ  ๋ฐฑ์—”๋“œ๋Š” ๋ถ€๊ฐ€์ ์ธ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.
[๋ฆฌ๋‰ด์–ผ] Node.js ๊ต๊ณผ์„œ - ๊ธฐ๋ณธ๋ถ€ํ„ฐ ํ”„๋กœ์ ํŠธ ์‹ค์Šต๊นŒ์ง€
๋…ธ๋“œ์— ๋Œ€ํ•œ ํ•ต์‹ฌ ๊ฐœ๋…์„ ์ตํžŒ ํ›„,
์‹ค์ „ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์‹ค๋ฌด์— ๋›ฐ์–ด๋“ค ์ค€๋น„๋ฅผ ๊ฐ–์ถฅ๋‹ˆ๋‹ค.
Vue๋กœ Nodebird SNS ๋งŒ๋“ค๊ธฐ
Vue๋กœ ๋งŒ๋“œ๋Š” ํ’€์Šคํƒ SNS ๊ฐ•์ขŒ!

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

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

  • ๋ฆฌ์•กํŠธ Hooks๋‚˜ Next๊ฐ™์ด ๋ฆฌ์•กํŠธ๋ฅผ ์‘์šฉํ•˜๊ณ  ์‹ถ์€ ๋ถ„

  • ํ’€์Šคํƒ ๊ฐœ๋ฐœ์— ๊ด€์‹ฌ์žˆ๋Š” ๋ถ„

  • ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ์ง€๋ง์ƒ

  • Next Page Router๋ฅผ ์ ๊ทน์ ์œผ๋กœ ์‚ฌ์šฉํ•ด๋ณด๊ณ  ์‹ถ์€ ๋ถ„

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

  • HTML, CSS ์ง€์‹

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

  • ์ œ๋กœ์ดˆ์˜ ๋ฆฌ์•กํŠธ ๋ฌด๋ฃŒ ๊ฐ•์ขŒ ์‹œ์ฒญ

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

61,583

๋ช…

์ˆ˜๊ฐ•์ƒ

1,424

๊ฐœ

์ˆ˜๊ฐ•ํ‰

9,496

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

21

๊ฐœ

๊ฐ•์˜

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

https://www.zerocho.com/lecture

์ œ๋กœ์ดˆ ๊ฐ•์˜ ์ „์ฒด ๋กœ๋“œ๋งต

 

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

๋”๋ณด๊ธฐ

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

์ „์ฒด

94๊ฐœ โˆ™ (23์‹œ๊ฐ„ 3๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

178๊ฐœ

4.9

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

์›” โ‚ฉ17,600

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

โ‚ฉ88,000