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

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

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

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

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

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

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

  • ๋ฆฌ์•กํŠธ 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 ์ง€์‹

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

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

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

63,824

๋ช…

์ˆ˜๊ฐ•์ƒ

1,523

๊ฐœ

์ˆ˜๊ฐ•ํ‰

9,598

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

22

๊ฐœ

๊ฐ•์˜

์ œ ๊ฐ•์˜์˜ ์žฅ์ ์€ 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

  • CTO at SmoreTalk

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

๋”๋ณด๊ธฐ

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

์ „์ฒด

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

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

178๊ฐœ

4.9

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

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

    ์ˆ˜๊ฐ•ํ‰ 2

    โˆ™

    ํ‰๊ท  ํ‰์  3.5

    3

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

    ์ด ๊ฐ•์˜์˜ ์žฅ๋‹จ์ ์„ ์ ์˜ค๋ณด๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. ์žฅ์  1. ๊ฐ•์˜ ๋‚ด์šฉ์ด ๋„ˆ๋ฌด ์•Œ์ฐจ๋‹ค ๋‹จ์  1. ์ฝ”๋“œ๋ฅผ ๋ณต์‚ฌ ๋ถ™์—ฌ๋„ฃ๊ธฐ ํ•˜๋Š” ๊ตฌ๊ฐ„์ด๋‚˜, ํŽธ์ง‘ํ•ด์„œ ๊ฐ‘์ž๊ธฐ ์™„์„ฑ๋œ ์ฝ”๋“œ๊ฐ€ ๋‚˜์˜ฌ ๋•Œ๋งˆ๋‹ค ๊ฐ‘์ž๊ธฐ ์ƒ๊ธด ์ฝ”๋“œ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ด ์ฝ”๋“œ๋ฅผ ์–ด๋””์„œ ๊ฐ€์ ธ์™”๋Š”์ง€, ์–ด๋–ค ๋‚ด์šฉ์„ ์ˆ˜์ •ํ–ˆ๋Š”์ง€์— ๋Œ€ํ•œ ์„ค๋ช…์ด ๋ถ€์กฑํ•ด ์ด ๋ถ€๋ถ„์—์„œ ์‹œ๊ฐ„์ด ๋งŽ์ด ์†Œ์š”๋จ 2. ๊ฐ•์˜๋ฅผ ์ž˜ ๋”ฐ๋ผ์˜ค๋ฉด ์ค‘๊ฐ„์— ์—๋Ÿฌ๊ฐ€ ์ƒ๊ธฐ๋Š”๋ฐ ๊ฐ•์˜ ์ž์ฒด์—์„œ ์ƒ๊ธด ์‹ค์ˆ˜์ด๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค์Œ ๊ฐ•์˜์—์„œ ์ •์ •ํ•˜๋Š” ๊ตฌ๊ฐ„์ด ๋‚˜์˜ค์ง€๋งŒ ์ด์— ๋Œ€ํ•œ ์–ธ๊ธ‰์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค์Œ ๊ฐ•์˜๋ฅผ ๋ณด๊ธฐ ์ „๊นŒ์ง€๋Š” ๋ณธ์ธ์ด ์–ด๋””์„œ ์‹ค์ˆ˜๋ฅผ ํ–ˆ๋Š”์ง€ ๊ณ„์† ์ฐพ๊ฒŒ ๋จ ๊ฐ•์˜ ๋‚ด์šฉ์ด ๋„ˆ๋ฌด ์•Œ์ฐจ์ง€๋งŒ ํŽธ์ง‘ ๋ถ€๋ถ„์ด ๋งŽ์ด ์•„์‰ฝ๋‹ค.

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

      ์ˆ˜๊ฐ•ํ‰ 2

      โˆ™

      ํ‰๊ท  ํ‰์  4.5

      5

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

      ํ˜„์—… ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์„ ์–ด๋ ค์›Œ ํ–ˆ์—ˆ๊ณ , ๋ฐฐํฌ๋ฅผ ํ•ด๋ณด๊ณ  ์‹ถ์—ˆ์ง€๋งŒ ๋ง‰์—ฐํ•œ ๋‘๋ ค์›€ ๋•Œ๋ฌธ์— ์‹œ์ž‘ํ•˜์ง€ ๋ชปํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ด ๊ฐ•์˜๋ฅผ ํ†ตํ•ด์„œ ์ง์ ‘ ๋ฐฐํฌ๋„ ํ•ด๋ณด๊ณ , ๋ฐฑ์—”๋“œ ์ž‘์—…๋„ ํ•ด์„œ ์ •๋ง ์ข‹์•˜์Šต๋‹ˆ๋‹ค! ๊ฐ•์˜๋ฅผ ๋“ค์œผ์‹œ๋Š” ๋ถ„๋“ค ๊ฒฝ์šฐ redux์™€ saga ์ˆ˜์—… ๋“ค์œผ์‹ค๋•Œ, ์–ด๋А ์ •๋„ ํŒจํ„ด์— ์ต์ˆ™ํ•ด ์ง€์‹œ๋ฉด ์ œ๋กœ์ดˆ๋‹˜์ด redux, saga ์ž‘์—… ํ•˜๊ธฐ์ „์— ๋ฏธ๋ฆฌ ๋ฉˆ์ถฐ๋†“๊ณ  ํ”„๋ก ํŠธ์—์„œ redux์™€ saga, backend router ์ž‘์—…์„ ๋ฏธ๋ฆฌ ํ•ด๋ณด์‹œ๊ณ  ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค^^!

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

        ์ˆ˜๊ฐ•ํ‰ 18

        โˆ™

        ํ‰๊ท  ํ‰์  4.8

        5

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

        ๊ฐ•์˜ ๊ตฌ๋งค ๊ณ ๋ฏผํ•˜์‹œ๋ฉด์„œ ์ด ๊ธ€์„ ๋ณด์‹ ๋‹ค๋ฉด ๋‹น์žฅ ์ˆ˜๊ฐ•ํ•˜์„ธ์š” ํ›„ํšŒํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์•ˆ๋…•ํ•˜์„ธ์š” ์ด ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ์ทจ์—…ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•œ ๋’ค๋‚˜ ์ˆ˜๊ฐ•ํ•˜๋ฉด์„œ ํ† ์ด ํ”„๋กœ์ ํŠธ๋ฅผ ์ •ํ•˜๊ณ  ์‹คํ–‰ํ•˜์„ธ์š”. ๊ทธ๋ฆฌ๊ณ  ๊ธฐ๋กํ•˜๋Š” ์Šต๊ด€์ด ์žˆ์œผ๋ฉด ์ข‹์Šต๋‹ˆ๋‹ค. ๋˜๋Š” ๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ๋ฅผ ๋งŒ๋“œ์„ธ์š”. ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•˜๋ฉด์„œ ๋ชจ๋ฅด๋Š” ๋ถ€๋ถ„์€ ๊ผญ ๊ธฐ๋กํ•˜์„ธ์š”. ๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ์—๋Š” ์™„์ „ํžˆ ์ดํ•ดํ•˜๊ณ , ๋‚ด ๊ฒƒ์œผ๋กœ ๋งŒ๋“ค์—ˆ๋‹ค๋Š” ๋งˆ์Œ์œผ๋กœ ์“ฐ๋ฉด ๋„์›€์ด ๋  ๊ฒ๋‹ˆ๋‹ค. ์ œ ์Šคํ† ๋ฆฌ๋ฅผ ๋‹ค ํ’€๊ณ  ์‹ถ์ง€๋งŒ ๋„ˆ๋ฌด ๊ธธ์–ด์ ธ์„œ... ์ œ๊ฐ€ ์ทจ์—…ํ•˜๊ธฐ๊นŒ์ง€ ํ•™์Šต ์ˆœ์„œ๋Š” 1. ์ œ๋กœ์ดˆ Node ํฌ๋กค๋ง (์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ญฃ๋„ ๋ชจ๋ฅผ ๋•Œ) 2. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ (๊ณ„์† ๋ฐ˜๋ณต ํ•™์Šตํ•˜๊ณ  ์ธํ”„๋Ÿฐ ์œ„์ฃผ๋กœ ๊ณต๋ถ€ํ–ˆ์Šต๋‹ˆ๋‹ค.) 3. ์ œ๋กœ์ดˆ, ์บกํ‹ดํŒ๊ต vue (์‚ด์ง ๋ง›๋งŒ ๋ด„, ์ง€๊ธˆ vue๋กœ ํ”„๋กœ์ ํŠธ ํ•˜๋ผํ•˜๋ฉด ๋ชปํ•จ) 4. ์ƒํ™œ์ฝ”๋”ฉ react, redux (์œ ํŠœ๋ธŒ) 5. John Ahn ๋ฆฌ์•กํŠธ ์‹œ๋ฆฌ์ฆˆ (์ธํ”„๋Ÿฐ) 6. ์ œ๋กœ์ดˆ [๋ฆฌ๋‰ด์–ผ] react nodebird 7. nextjs ํ† ์ดํ”„๋กœ์ ํŠธ (์ œ์ผ ์ค‘์š”!! ์ธ์ƒ์˜ ์ „ํ™˜์ ) 8. github ์ž”๋”” ๊ด€๋ฆฌ 9. ๊ฐœ๋ฐœ๋ธ”๋กœ๊ทธ 10. ์ด๋ ฅ์„œ, ํฌํŠธํด๋ฆฌ์˜ค ๊ด€๋ฆฌ 11. ๋ฉด์ ‘ ๋ฐ ์ทจ์—… ์ œ๋Œ€๋กœ ์ทจ์—…ํ•˜๊ธฐ ์œ„ํ•ด ์ค€๋น„ํ•œ ๊ธฐ๊ฐ„์ด ์ƒ๊ฐ๋ณด๋‹ค ์งง์€๋ฐ(4๊ฐœ์›”?) ๋ญ”๊ฐ€ ์ข€ ๋งŽ์ดํ•œ ๋А๋‚Œ๋„ ๋“ค๊ธดํ•ฉ๋‹ˆ๋‹ค. ๊ณต๋ถ€๋ฅผ ๋งŽ์ดํ•  ์ˆ˜ ์žˆ์—ˆ๋˜ ๊ณ„๊ธฐ๊ฐ€ ๊ธˆํ† ์ผ ์•ผ๊ฐ„ ์•Œ๋ฐ”ํ•˜๋ฉด์„œ ์ผ ์—†์„ ๋•Œ ๊ณ„์† ๊ณต๋ถ€ํ•ด์™”๋‹ค๊ฐ€, ์ฝ”๋กœ๋‚˜๋กœ ์žฅ์‚ฌ ์•ˆ ๋˜์„œ ์•Œ๋ฐ” ๋ชป๋‚˜๊ฐˆ ๋•Œ ๊ทธ๋•Œ ๊ณต๋ถ€ ์—„์ฒญํ•œ๊ฑฐ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ผญ ์ด ๊ฐ•์˜๋งŒ ๋ด์„œ ์ทจ์—…ํ•˜์ง„ ์•Š์•˜์ง€๋งŒ ์ด ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•จ์œผ๋กœ์จ ์ทจ์—…ํ•˜๊ธฐ ์œ„ํ•ด ๋„์›€์ด ๋งŽ์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์•„๋งˆ ์ด ๊ฐ•์˜๊ฐ€ ์—†์—ˆ๋‹ค๋ฉด ๋‹ค๋ฅธ ์•Œ๋ฐ” ์ผํ•˜๋ฉด์„œ ๊ณ„์† ๊ณต๋ถ€ํ•˜๊ณ  ์žˆ์„๊ฑฐ๋ผ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ฐ•์˜๋ฅผ ๋ณด๊ณ  ๋‚˜์‹œ๋ฉด ์–ด๋–ค ์‚ฌ์ดํŠธ๋“  ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ์ž์‹ ๊ฐ์ด ์ƒ๊น๋‹ˆ๋‹ค. ํŒŒ์ดํŒ…!!

        • next.js ํ† ์ดํ”„๋กœ์ ํŠธ๋Š” ์–ด๋””์„œ ์ˆ˜๊ฐ•ํ•˜์‹ ๊ฑด๊ฐ€์š”?

        • ์ด๋ฃธ๋‹˜ ๋‹ต๋ณ€์ด ๋งŽ์ด ๋Šฆ์—ˆ๋„ค์š” ์•Œ๋žŒ์ด ์•ˆ ์™€์„œ ๋‹ต๊ธ€์ด ๋‹ฌ๋ฆฐ ์ค„๋„ ๋ชฐ๋ž์Šต๋‹ˆ๋‹ค. ํ† ์ด ํ”„๋กœ์ ํŠธ๋Š” ํด๋ก  ์ฝ”๋”ฉ์ด๋ž‘ ์œ ์‚ฌํ•œ๋ฐ ๊ฐ•์˜๋กœ ๋“ฃ์ง€ ์•Š๊ณ  ํŠน์ • ์‚ฌ์ดํŠธ ์ •ํ•ด์„œ ํ•˜๋‚˜ํ•˜๋‚˜ ํด๋ก  ํ–ˆ์Šต๋‹ˆ๋‹ค.

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

        ์ˆ˜๊ฐ•ํ‰ 4

        โˆ™

        ํ‰๊ท  ํ‰์  2.5

        5

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

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

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

          ์ˆ˜๊ฐ•ํ‰ 2

          โˆ™

          ํ‰๊ท  ํ‰์  5.0

          5

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

          ์•ˆ๋…•ํ•˜์„ธ์š”! ์ œ๋กœ์ดˆ๋‹˜ ์ˆ˜์—…๋“ฃ๊ณ  ๋ธ”๋ก์ฒด์ธ ํšŒ์‚ฌ์— ์ทจ์—…๋„ ํ–ˆ๊ณ , ๋”ฐ๋กœ ์ œ ํ”„๋กœ์ ํŠธ ํ™๋ณด๋„ ํ•  ๊ฒธ ํ•ด์„œ ์ˆ˜๊ฐ•ํ‰์„ ์ž‘์„ฑํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค:) ํ˜„์žฌ๋„ ํšŒ์‚ฌ ๋‹ค๋‹ˆ๋ฉด์„œ ์œ ์ง€๋ณด์ˆ˜์ค‘์ธ ํ”„๋กœ์ ํŠธ ๋จผ์ € ๊ณต๊ฐœํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค! ์—ฌ๊ธฐ ์“ด ๋…ธ๋“œ๋ฒ„๋“œ๋ž‘ ๊ฑฐ์˜ ๋™์ผํ•œ ์Šคํƒ์ธ๋ฐ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ, Nest๊ฐ€ ์ถ”๊ฐ€๋์–ด์š”! https://musicsseolprise.com ์—ฌ๊ธฐ ๋“ค์–ด์˜ค์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค! ํ”„๋กœ์ ํŠธ ์ฃผ์ œ์ด์‹  ๋ถ„์ด ๋ฐฉ์†ก ๋‚˜์˜ค์…”์„œ ํ™๋ณด๋„ ํ•  ๊ฒธ ํ•ด์„œ ์ˆ˜๊ฐ•ํ‰ ์“ฐ๊ฒŒ ๋˜์—ˆ์–ด์š”โ˜บ๏ธ ์ œ๊ฐ€ ๊ณต๊ฐœํ•  ํ”„๋กœ์ ํŠธ๋Š” ํ”„๋ก ํŠธ์— ํ•œํ•ด์„œ ๋…ธ๋“œ๋ฒ„๋“œ ๊ฐ•์˜๋งŒ ์ž˜ ์ดํ•ดํ•ด๋„ ์ถฉ๋ถ„ํžˆ ํ•  ์ˆ˜ ์žˆ๋Š” ๋‚œ์ด๋„์—์š”! ๋ฐฑ์•ค๋“œ๋Š” Nest.js๋ฅผ ๋”ฐ๋กœ ๊ณต๋ถ€ํ•˜์…”์•ผ ํ•˜๊ตฌ์š”. ์ €๋Š” ์ „๊ณต์ž์˜€์ง€๋งŒ ํ•™๋ถ€ ์‹œ์ ˆ ๋งˆ์ง€๋ง‰ ํ•™๊ธฐ ๋•Œ ๋“ค์€ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋ฅผ ์ œ์™ธํ•˜๊ณ  ๋ฐฉํ™ฉ์„ ๋งŽ์ด ํ–ˆ์–ด์„œ ํ•™์ ๋„ ์ข‹์ง€ ์•Š๊ณ , ๋น„์ „๊ณต์ž๋ž‘ ๋ฒ ์ด์Šค๊ฐ€ ์ฐจ์ด๊ฐ€ ์—†์—ˆ๋‹ค๊ณ  ๋ณด์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์ผ๋‹จ ๊ฐ•์˜์˜ ๊ฐ€์žฅ ํฐ ์žฅ์ ์€ ์งˆ๋ฌธ๋‹ต๋ณ€! ์ „๊ณต์ž์ง€๋งŒ ๋Œ€ํ•™์„ ๋Šฆ๊ฒŒ ๋“ค์–ด๊ฐ€์„œ ์ธ๋งฅ์ด ๋ถ€์กฑํ–ˆ์–ด์š”. ๊ทธ๋ž˜์„œ ๋ผ์ด๋ธŒ ๊ฐ•์˜ํ•˜์‹ค๋•Œ๋‚˜ ์ธํ”„๋Ÿฐ ์งˆ๋ฌธ์ด๋‚˜ ์—ด์‹ฌํžˆ ์˜ฌ๋ฆฌ๋ฉด ๋‹ต๋ณ€ ๋„ˆ๋ฌด ์นœ์ ˆํ•˜๊ฒŒ ๋‹ฌ์•„์ฃผ์…จ์–ด์š”. ๋•๋ถ„์— ๋ฆฌ๋ˆ…์Šค๊นŒ์ง€ ๊ฐ™์ด ๊ณต๋ถ€ํ•ด์„œ ์ด๋ฒˆ ํšŒ์‚ฌ ๋“ค์–ด๊ฐ€๋Š”๋ฐ ํฐ ๋„์›€์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค! ๊ทธ๋ฆฌ๊ณ  ํ”„๋ก ํŠธ์•ค๋“œ๋Š” ๋ณ€ํ™”๊ฐ€ ๋„ˆ๋ฌด ๋นจ๋ผ์š”. ๊ทธ๋ž˜์„œ ๊ณต๋ถ€ํ•˜์‹ค ๋•Œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์™œ ์“ฐ์‹œ๋Š”์ง€ ์Šค์Šค๋กœ ์งˆ๋ฌธ ํ•ด๋ณด์‹œ๊ณ  ๊ทธ๋ž˜๋„ ์•ˆ ํ’€๋ฆฌ์‹œ๋ฉด ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋„ ์ฐพ์•„๋ณด์‹œ๊ณ  ์งˆ๋ฌธ์„ ํ™œ์šฉํ•ด์ฃผ์‹œ๋ฉด ์‹ค๋ ฅ์ด ๋งŽ์ด ๋А์‹ค๊ฑฐ์—์š”! ๊ฐœ์ธ์ ์œผ๋กœ ์ €๋Š” ์ทจ์ค€์ƒ์ด๋ผ๋ฉด ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ Recoil.js๋ฅผ ํ•˜์‹œ๋Š”๊ฑฐ ์ถ”์ฒœ๋“œ๋ ค์š”. ๋ฆฌ๋•์Šค๋Š” ์‚ฌ์‹ค ์‚ฌ๊ฐ€๊นŒ์ง€ ํ•˜์‹œ๋ฉด ์ฝ”๋“œ๋Ÿ‰์ด ๋„ˆ๋ฌด ๋งŽ์•„์ ธ์„œ ์ƒ์‚ฐ์„ฑ์ด ๋–จ์–ด์ง€๊ฑฐ๋“ ์š”. ๊ทธ๋ฆฌ๊ณ  Nest.js๋Š” ๋‚˜์ค‘์— ๊ฐ•์˜๋กœ๋„ ์˜ฌ๋ ค์ฃผ์‹ค๊ฑฐ์ง€๋งŒ ์‚ฌ์‹ค ์‚ฌ์ „์— ์ต์Šคํ”„๋ ˆ์Šค๋ฅผ ๊ณต๋ถ€ํ•˜์‹œ๋Š”๊ฒŒ ๋” ์ข‹์•„์„œ ๊ณต๋ถ€ํ•ด๋ณด์‹œ๊ณ  ๋ฆฌํŒฉํ† ๋ง์œผ๋กœ ์งˆ๋ฌธํ•˜์‹œ๋ฉด์„œ ๊ณต๋ถ€ํ•˜์‹œ๋Š”๊ฑฐ ์ถ”์ฒœ๋“œ๋ ค์š”! ์ฐธ๊ณ ๋กœ ์ €๋Š” ์ถ”๊ฐ€๋กœ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ณต๋ถ€ ํ•ด์„œ ์ง  ์ฝ”๋“œ๋ฅผ ์ „๋ถ€ ๋‹ค ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ๊ต์ฒดํ–ˆ์Šต๋‹ˆ๋‹ค! ๊ทธ๋ฆฌ๊ณ  ์Šคํƒ€์ผ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋‹ค๋ฅธ๊ฑฐ ์ผ๊ตฌ์š”. ์ €๋„ ๋ฆฌ๋•์Šค๋Š” ์ผ๋‹ค๊ฐ€ ์ œ๊ฑฐํ•˜๊ณ  swr๋กœ ajax๋ฅผ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ฌดํ•œ์Šคํฌ๋กค์€ intersection observer๋ผ๊ณ  ๋ธŒ๋ผ์šฐ์ € ๋‚ด์žฅ api๋ฅผ ์ผ๊ตฌ์š”. ์–ด์งธํŠผ ๋ฐ”์˜์‹ ๋ฐ ์งˆ๋ฌธ ํ•ญ์ƒ ์นœ์ ˆํ•˜๊ฒŒ ๋‹ฌ์•„์ฃผ์…”์„œ ์ œ๋กœ์ดˆ๋‹˜ ์ •๋ง ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!!

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

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

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

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

          ์›” โ‚ฉ17,600

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

          โ‚ฉ88,000