์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
BEST

React๋กœ NodeBird SNS ๋งŒ๋“ค๊ธฐ

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

Thumbnail

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

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

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

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

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

  • Styled Components

  • Ant Design

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

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

  • AWS ๋ฐฐํฌ

๊ฐ•์ขŒ ๋ฆฌ๋‰ด์–ผ ๊ณต์ง€

์•ˆ๋…•ํ•˜์„ธ์š”. ์˜ค๋Š˜(6.2)๋ถ€ํ„ฐ ์œ ํŠœ๋ธŒ์—์„œ ๋ฆฌ์•กํŠธ ๋…ธ๋“œ๋ฒ„๋“œ ๋ฆฌ๋‰ด์–ผ ๊ฐ•์ขŒ๊ฐ€ ์‹œ์ž‘๋ฉ๋‹ˆ๋‹ค.

1๋‹ฌ ์ •๋„ ์ดฌ์˜ํ•  ์˜ˆ์ •์ด๊ณ  7์›” ์ดˆ์— ์ƒˆ๋กœ์šด ๊ฐ•์ขŒ๋กœ ์ธํ”„๋Ÿฐ์— ๋“ฑ๋ก๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

๊ธฐ์กด ๊ตฌ๋ฒ„์ „ ๊ฐ•์ขŒ ๊ตฌ๋งคํ•˜์‹  ๋ถ„๋“ค๊ป˜๋Š” ์‹ ๊ทœ ๊ฐ•์ขŒ 50% ํ• ์ธ ์ฟ ํฐ์ด ์ง€๊ธ‰๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ฃผ์š”ํ•œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์€ next@9, antd@4, next-redux-wrapper@6, node@14 ์‚ฌ์šฉ์ž…๋‹ˆ๋‹ค.

๊ตฌ๋ฒ„์ „ ๊ฐ•์ขŒ์— ๋งŽ์€ ์งˆ๋ฌธ๋“ค์ด ๋‹ฌ๋ ธ๋Š”๋ฐ ์ด์— ๋Œ€ํ•œ ๋‹ต๋ณ€๋“ค์„ ๊ฐ•์ขŒ์— ์ข€ ๋” ๋ช…ํ™•ํ•˜๊ฒŒ ๋ฐ˜์˜ํ•ด๋“œ๋ฆด ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

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

ํŠธ์œ„ํ„ฐ์™€ ๋น„์Šทํ•œ(์ด๋ผ๊ณ  ์“ฐ๊ณ  ์งํ‰์ด๋ผ ์ฝ๋Š”๋‹ค) ์ œ๋กœ์ดˆ์˜ ์‹œ๊ทธ๋‹ˆ์ฒ˜ ํ”„๋กœ์ ํŠธ NodeBird SNS๋ฅผ ๋งŒ๋“ค์–ด๋ณด๋ฉฐ,

Next.js(SSR) + React Hooks + Redux + Redux saga + Ant Design + Styled Components + Node + Express + Sequelize(MySQL)๋ฅผ ๋ฐฐ์›๋‹ˆ๋‹ค.

๊ฒ€์ƒ‰์—”์ง„ ์ตœ์ ํ™”์™€ AWS ๋ฐฐํฌ(๊ฐ„๋‹จํ•˜๊ฒŒ EC2 + Lambda + S3 + Route53 ์‚ฌ์šฉ)๋Š” ๋ณด๋„ˆ์Šค!

(์ด ๊ฐ•์ขŒ๋Š” ์‹œ๋ฆฌ์ฆˆ์ด๋ฉฐ ์ถ”ํ›„ Vue, TS, GraphQL, MobX๋“ฑ์„ ์‚ฌ์šฉํ•œ ๋‹ค๋ฅธ ๋ฒ„์ „์˜ NodeBird๋„ ์ œ์ž‘๋ฉ๋‹ˆ๋‹ค.)

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

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

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

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

์—ฐ๊ด€๋œ ๊ฐ•์ขŒ

Node.js๊ต๊ณผ์„œ - ๊ธฐ๋ณธ๋ถ€ํ„ฐ ํ”„๋กœ์ ํŠธ ์‹ค์Šต๊นŒ์ง€ 
๋…ธ๋“œ์— ๋Œ€ํ•œ ํ•ต์‹ฌ ๊ฐœ๋…์„ ์ตํžŒ ํ›„, ์‹ค์ „ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์‹ค๋ฌด์— ๋›ฐ์–ด๋“ค ์ค€๋น„๋ฅผ ๊ฐ–์ถฅ๋‹ˆ๋‹ค.

Vue๋กœ๋„ ๋งŒ๋“ค์–ด ๋ณผ๊นŒ์š”?

Vue๋กœ Nodebird SNS ๋งŒ๋“ค๊ธฐ
Vue๋กœ ๋งŒ๋“œ๋Š” ํ’€์Šคํƒ SNS ๊ฐ•์ขŒ!

์ฐธ๊ณ  ์‚ฌํ•ญ

  • ์„ ์ˆ˜ ๊ณผ๋ชฉ: ๋ฆฌ์•กํŠธ ๋ฌด๋ฃŒ ๊ฐ•์ขŒ
  • ํ”„๋ก ํŠธ๋ฅผ ์ค‘์ ์œผ๋กœ ๋‹ค๋ฃจ๊ณ  ๋ฐฑ์—”๋“œ๋Š” ๋ถ€๊ฐ€์ ์ธ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. (๋…ธ๋“œ๊ต๊ณผ์„œ ์ฝ”๋“œ์™€ ๋น„์Šทํ•˜๊ฒŒ ๊ฐ‘๋‹ˆ๋‹ค.)

  • Node.js๊ต๊ณผ์„œ ์ฑ…์ด๋‚˜ ๊ฐ•์ขŒ๋ฅผ ๋จผ์ € ๋ณด๊ณ  ์˜ค์‹œ๋ฉด ๋ฐฑ์—”๋“œ ์ดํ•ด์— ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

  • ์šด์˜์ค‘์ธ ์‚ฌ์ดํŠธ: nodebird.com

  • ์†Œ์Šค ์ฝ”๋“œ: https://github.com/zerocho/react-nodebird

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

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

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

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

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

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

  • HTML, CSS ์ง€์‹

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

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

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

62,399

๋ช…

์ˆ˜๊ฐ•์ƒ

1,441

๊ฐœ

์ˆ˜๊ฐ•ํ‰

9,544

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

21

๊ฐœ

๊ฐ•์˜

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

https://www.zerocho.com/lecture

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

 

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

๋”๋ณด๊ธฐ

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

์ „์ฒด

111๊ฐœ โˆ™ (23์‹œ๊ฐ„ 39๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!

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