Vue๋กœ Nodebird SNS ๋งŒ๋“ค๊ธฐ

Vue์™€ Nuxt ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•ด SNS ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ์„œ๋น„์Šค์— ํ•„์š”ํ•œ ํ’€์Šคํƒ ์ง€์‹์„ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

(4.8) ์ˆ˜๊ฐ•ํ‰ 49๊ฐœ

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

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

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

์ผ€์ดํ‹ฐ
NHN KCP
์นด์นด์˜ค
๋งˆ์ผ“์ปฌ๋ฆฌ
ํ”Œ๋ฆฌํ† 

ํ”Œ๋ฆฌํ† 

์ž„์ง์›๋“ค๋„ ์ด ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ์žˆ์–ด์š”!

์ผ€์ดํ‹ฐ
NHN KCP
์นด์นด์˜ค
๋งˆ์ผ“์ปฌ๋ฆฌ
ํ”Œ๋ฆฌํ† 

ํ”Œ๋ฆฌํ† 

์ž„์ง์›๋“ค๋„ ์ด ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ์žˆ์–ด์š”!

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

4.8

5.0

์„œ๊ธฐํ˜„

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

์†”์งํ•˜๊ฒŒ ์ˆ˜๊ฐ•ํ‰ ๋‚จ๊ธฐ๊ฒ ์Šต๋‹ˆ๋‹ค. ๋‹จ์ ๋ถ€ํ„ฐ ๋ง์”€๋“œ๋ฆฌ๋ฉด ์ •์‹ ์ด ์—†๋‹ค ์ž…๋‹ˆ๋‹ค. 1. ์ฑ„ํŒ…์ฐฝ 2. ๋‹จ์ˆœํ•œ ์˜คํƒ€๋„ ํ›„์— ํŽธ์ง‘ ์—†์ด ๋‚˜์ค‘์— ๊ณ ์นจ 3. ๋‹จ์ˆœํžˆ ์„œ๋ฒ„๋ฅผ ํ‚ค์ง€ ์•Š์€๊ฒƒ 2,3๋ฒˆ์€ ๋””๋ฒ„๊น…ํ• ๋•Œ ์•„ ์ด๋ž˜์„œ ์ด๋Ÿฐ ์˜ค๋ฅ˜๊ฐ€ ๋‚˜์™”๋‚˜ ์‹ถ๊ธฐ๋„ ํ•˜์ง€๋งŒ ์ง‘์ค‘๋„๋ฅผ ๋–จ์–ดํŠธ๋ฆฌ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. 2,3๋ฒˆ์ด ์•„๋‹Œ ๊ตฌ์กฐ์˜ ๋ฌธ์ œ๋‚˜ ๋‚ด๊ฐ€ ๋นผ๋จน์€ ๊ฒƒ๋“ค์„ ๋‚˜์ค‘์— ๊ณ ์น˜๋Š”๊ฑด ์ข‹์•˜์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ์—๋„ ๋ณ„ 5๊ฐœ๋ฅผ ์ค€์ ์€ ์‹ค๋ฌด์™€ ๊ต‰์žฅํžˆ ์—ฐ๊ด€์ด ๊นŠ๋‹ค๋Š” ๊ฒƒ ์ž…๋‹ˆ๋‹ค. ์ €๋Š” ์ธํ”„๋Ÿฐ์—์„œ ๋ฆฌ์•กํŠธ,vue๊ฐ•์˜๋งŒ 7~8๊ฐœ๋ฅผ ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ์ค‘์—๋Š” ์ •๋ฆฌ์™€ ํŽธ์ง‘์€ ์ž˜๋ฌ์œผ๋‚˜ ์ด์ œ ๋ญํ•ด์•ผ์ง€? ๋‹จ์ˆœ์ด ๋ฐฐ์šด๋‚ด์šฉ๋งŒ์œผ๋ก  ์ œ๊ฐ€ ์›ํ•˜๋Š” ๋น„์ง€๋‹ˆ์Šค ๋ชจ๋ธ์„ ๋งŒ๋“ค์ˆ˜ ์—†๋Š” ๊ฐ•์˜๊ฐ€ ์žˆ์—ˆ๊ณ , ํ”„๋ก ํŠธ๋Š” ์ œ์ž‘ํ•  ์ˆ˜ ์žˆ์„๋งŒํผ ์ดํ•ดํ–ˆ์œผ๋‚˜ ๋ฐฑ์—”๋“œ๋Š”? ํ•˜๋Š” ๊ฐ•์˜๋„ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๋ฌผ๋ก  ์•ž์„œ ๋‹ค๋ฅธ ๊ฐ•์˜๋“ค์„ ๋ณด๊ณ  ์™€์„œ ๊ทธ๋Ÿฐ์ง€ ์ดํ•ดํ•˜๋Š”๋ฐ ์–ด๋ ค์›€๋„ ์—†์—ˆ๊ณ  ์ด์ œ ์ œ๊ฐ€ ์–ด๋–ค ์„œ๋น„์Šค๋ฅผ ์–ด๋–ป๊ฒŒ ์ง„ํ–‰ํ•ด์•ผ ํ•˜๋Š”์ง€ ํ™•์‹คํ•˜๊ฒŒ ๊ฐ์ด ์žกํ˜”์Šต๋‹ˆ๋‹ค. ์‹ค๋ฌด๋ฅผ ๋‹น์žฅ ํˆฌ์ž…ํ•˜์…”์•ผ ํ•œ๋‹ค๋ฉด ์ „ ์ด ๊ฐ•์˜๋ฅผ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค! ์นœ์ ˆํ•˜์ง€๋Š” ์•Š์ง€๋งŒ ๋”ฐ๋ผ์˜ค๋ฉด์„œ ์ดํ•ดํ•œ๋‹ค๋ฉด ์‹ค๋ฌด ํˆฌ์ž…์ด ๊ฐ€๋Šฅํ•  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค

5.0

sizz F

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

2๋…„๋™์•ˆ ์ค‘์†Œ๊ธฐ์—…์—์„œ ํ•˜๋“œ์›จ์–ด, ์ธ๋ฒ ๋””๋“œ, ์›น, ์•ฑ, ์‹œํ‚ค๋Š”๊ฑฐ ๋‹คํ•˜๋‹ค๋ณด๋‹ˆ ์ ์  ์ด๋„์ €๋„ ์•„๋‹Œ์‚ฌ๋žŒ์ด ๋˜์–ด๊ฐ€๋Š”๊ฒƒ ๊ฐ™์•„ ์ž์‹ ๊ฐ์ด ๋ฐ”๋‹ฅ์ด์—ˆ๋Š”๋ฐ ํ‡ด์‚ฌํ•˜๊ณ  ์šฐ์—ฐํžˆ ์กฐํ˜„์˜๋‹˜ ๋ฌด๋ฃŒ๊ฐ•์˜๋ฅผ ๋ณด๊ธฐ ์‹œ์ž‘ํ•ด์„œ ์—ฌ๊ธฐ๊นŒ์ง€ ์™”๋„ค์š”. ์ด๋ฒˆ์— ์ดํ”„๋กœ์ ํŠธ ๋งŒ๋“ค์–ด ๋ณด๋ฉด์„œ ๋‹ค์‹œ ์ž์‹ ๊ฐ์ด ์ƒ๊ธฐ๊ฒŒ ๋๋„ค์š”. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ๊ฐ•์˜ ๋‚ด์šฉ์€ ๊ณต์‹๋ฌธ์„œ์—์„œ ํ™•์ธ ๊ฐ€๋Šฅํ•œ ๋ถ€๋ถ„์€ ๋น ๋ฅด๊ฒŒ ๋„˜์–ด๊ฐ€๊ณ  ์ง„์งœ ํ•„์š”ํ•œ ๋ถ€๋ถ„์„ ๋”ฑ๋”ฑ ์ง‘์–ด์„œ ์„ค๋ช…ํ•ด์ฃผ์…”์„œ ์ข‹์•˜์Šต๋‹ˆ๋‹ค. ์ €๋Š” ์—ญ์‹œ ์ฃผ์ž…์‹ ๊ฐ•์˜๋ณด๋‹ค ํ•„์š”ํ•œ ๋ถ€๋ถ„๋“ค์„ ์ง์ ‘ ์ฐพ์•„๊ฐ€๋ฉด์„œ ์•Œ์•„๋‚ด๋„๋ก ํ•˜๋Š”์ ์ด ๋” ์ข‹๊ฒŒ ๋‹ค๊ฐ€์˜จ๊ฒƒ ๊ฐ™์•„์š”. ๊ทธ๋Ÿฐ๋ถ€๋ถ„์ด ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๊ผญํ•„์š”ํ•œ ๋ถ€๋ถ„์ด๊ธฐ๋„ ํ•˜๊ณ ์š”. ์—ด์‹ฌํžˆ ํ•ด์„œ ์กฐํ˜„์˜๋‹˜ ๊ฐ™์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ธธ! * ์ค‘๊ณ ์‹ ์ž…์œผ๋กœ ์ž…์‚ฌํ•œ์ง€ ์ผ๋…„์—ฌ๋งŒ์— ์—ฐ๋ด‰ 67%์ธ์ƒ์— ์„ฑ๊ณตํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! 2022-05-01

5.0

๊น€์‹œํ›ˆ

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

์™„์ „ ์ข‹์Šต๋‹ˆ๋‹ค! ์—ฌ๊ธฐ์„œ ๋ฐฐ์šฐ๋Š” ๋‚ด์šฉ ๋Œ€๋ถ€๋ถ„ ์‹ค๋ฌด์—์„œ ์‘์šฉํ•  ์ˆ˜ ์žˆ์–ด์„œ ๋„์›€ ์ •๋ง ๋งŽ์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ข‹์€ ๊ฐ•์˜ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ์•ž์œผ๋กœ๋„ ์ข‹์€ ๊ฐ•์˜ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค~ ๊ฐœ์ธ์ ์œผ๋กœ graphql ๊ฐ•์˜ ๊ธฐ๋Œ€ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค!

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

  • Vue

  • Nuxt

  • Vuex

  • Vuetify

  • Vue Router

  • SSR + SEO

  • Node.js + MySQL

  • AWS ๋ฐฐํฌ

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

ํŠธ์œ„ํ„ฐ์™€ ๋น„์Šทํ•œ(์ด๋ผ๊ณ  ์“ฐ๊ณ  ์งํ‰์ด๋ผ ์ฝ๋Š”๋‹ค) ์ œ๋กœ์ดˆ์˜ ์‹œ๊ทธ๋‹ˆ์ฒ˜ ํ”„๋กœ์ ํŠธ NodeBird SNS๋ฅผ ๋งŒ๋“ค์–ด๋ณด๋ฉฐ, Vue + Vuex + Nuxt.js(SSR) + Vuetify + Node + Express + Sequelize(MySQL)๋ฅผ ๋ฐฐ์›๋‹ˆ๋‹ค.
๊ฒ€์ƒ‰์—”์ง„ ์ตœ์ ํ™”์™€ AWS ๋ฐฐํฌ(๊ฐ„๋‹จํ•˜๊ฒŒ EC2 + Lambda + S3 + Route53 ์‚ฌ์šฉ)๋Š” ๋ณด๋„ˆ์Šค!

์‹ค์Šต์„ ํ†ตํ•ด ์ง์ ‘ ๋งŒ๋“ค๋ฉฐ
๋ฐฐ์›Œ๋ณผ ์ˆ˜ ์žˆ์–ด์š”!

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

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

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


#1
์†Œ์Šค ์ฝ”๋“œ๋ฅผ
์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

https://github.com/zerocho/vue-nodebird (๋ฐ”๋กœ๊ฐ€๊ธฐ)

ํ•ด๋‹น ๊ฐ•์˜์˜ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ๋ชจ๋‘ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

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

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


์ฐธ๊ณ  ์‚ฌํ•ญ

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

์—ฐ๊ด€ ๊ฐ•์ขŒ

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

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

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

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

Node.js์— TypeScript ์ ์šฉํ•˜๊ธฐ(feat. NodeBird)
NodeBird(ํŠธ์œ„ํ„ฐ ๋”ฐ๋ผ ๋งŒ๋“ค๊ธฐ) ๊ฐ•์ขŒ์˜ ์˜ˆ์ œ๋ฅผ
ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ์ „ํ™˜ํ•ด๋ด…๋‹ˆ๋‹ค.
 

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

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

  • Vue๋กœ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์€ ๋ถ„

  • SSR์„ ํ†ตํ•ด ๊ฒ€์ƒ‰์—”์ง„์ตœ์ ํ™”๋ฅผ ํ•˜๊ณ ์‹ถ์€ ๋ถ„

  • ํ’€์Šคํƒ ๊ฐ•์ขŒ๋ฅผ ์›ํ•˜์‹œ๋Š” ๋ถ„

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

  • Vue ๊ธฐ๋ณธ ๋ฌธ๋ฒ•(๋ฌด๋ฃŒ ๊ฐ•์ขŒ ์‹œ์ฒญํ•˜๊ธฐ)

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

์ธํ”„๋Ÿฐ์ธ์ฆ

์ปค๋ฆฌ์–ด์ธ์ฆ

68,408

๋ช…

์ˆ˜๊ฐ•์ƒ

1,786

๊ฐœ

์ˆ˜๊ฐ•ํ‰

9,773

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

27

๊ฐœ

๊ฐ•์˜

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

๋”๋ณด๊ธฐ

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

์ „์ฒด

71๊ฐœ โˆ™ (15์‹œ๊ฐ„ 11๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

49๊ฐœ

4.8

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

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

    ์ˆ˜๊ฐ•ํ‰ 1

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

    2๋…„๋™์•ˆ ์ค‘์†Œ๊ธฐ์—…์—์„œ ํ•˜๋“œ์›จ์–ด, ์ธ๋ฒ ๋””๋“œ, ์›น, ์•ฑ, ์‹œํ‚ค๋Š”๊ฑฐ ๋‹คํ•˜๋‹ค๋ณด๋‹ˆ ์ ์  ์ด๋„์ €๋„ ์•„๋‹Œ์‚ฌ๋žŒ์ด ๋˜์–ด๊ฐ€๋Š”๊ฒƒ ๊ฐ™์•„ ์ž์‹ ๊ฐ์ด ๋ฐ”๋‹ฅ์ด์—ˆ๋Š”๋ฐ ํ‡ด์‚ฌํ•˜๊ณ  ์šฐ์—ฐํžˆ ์กฐํ˜„์˜๋‹˜ ๋ฌด๋ฃŒ๊ฐ•์˜๋ฅผ ๋ณด๊ธฐ ์‹œ์ž‘ํ•ด์„œ ์—ฌ๊ธฐ๊นŒ์ง€ ์™”๋„ค์š”. ์ด๋ฒˆ์— ์ดํ”„๋กœ์ ํŠธ ๋งŒ๋“ค์–ด ๋ณด๋ฉด์„œ ๋‹ค์‹œ ์ž์‹ ๊ฐ์ด ์ƒ๊ธฐ๊ฒŒ ๋๋„ค์š”. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ๊ฐ•์˜ ๋‚ด์šฉ์€ ๊ณต์‹๋ฌธ์„œ์—์„œ ํ™•์ธ ๊ฐ€๋Šฅํ•œ ๋ถ€๋ถ„์€ ๋น ๋ฅด๊ฒŒ ๋„˜์–ด๊ฐ€๊ณ  ์ง„์งœ ํ•„์š”ํ•œ ๋ถ€๋ถ„์„ ๋”ฑ๋”ฑ ์ง‘์–ด์„œ ์„ค๋ช…ํ•ด์ฃผ์…”์„œ ์ข‹์•˜์Šต๋‹ˆ๋‹ค. ์ €๋Š” ์—ญ์‹œ ์ฃผ์ž…์‹ ๊ฐ•์˜๋ณด๋‹ค ํ•„์š”ํ•œ ๋ถ€๋ถ„๋“ค์„ ์ง์ ‘ ์ฐพ์•„๊ฐ€๋ฉด์„œ ์•Œ์•„๋‚ด๋„๋ก ํ•˜๋Š”์ ์ด ๋” ์ข‹๊ฒŒ ๋‹ค๊ฐ€์˜จ๊ฒƒ ๊ฐ™์•„์š”. ๊ทธ๋Ÿฐ๋ถ€๋ถ„์ด ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๊ผญํ•„์š”ํ•œ ๋ถ€๋ถ„์ด๊ธฐ๋„ ํ•˜๊ณ ์š”. ์—ด์‹ฌํžˆ ํ•ด์„œ ์กฐํ˜„์˜๋‹˜ ๊ฐ™์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ธธ! * ์ค‘๊ณ ์‹ ์ž…์œผ๋กœ ์ž…์‚ฌํ•œ์ง€ ์ผ๋…„์—ฌ๋งŒ์— ์—ฐ๋ด‰ 67%์ธ์ƒ์— ์„ฑ๊ณตํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! 2022-05-01

    • ์ทจ์—…๋„ ์„ฑ๊ณตํ–ˆ์Šต๋‹ˆ๋‹ค ์ •๋ง ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค~~~

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

    ์ˆ˜๊ฐ•ํ‰ 5

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

    ์†”์งํ•˜๊ฒŒ ์ˆ˜๊ฐ•ํ‰ ๋‚จ๊ธฐ๊ฒ ์Šต๋‹ˆ๋‹ค. ๋‹จ์ ๋ถ€ํ„ฐ ๋ง์”€๋“œ๋ฆฌ๋ฉด ์ •์‹ ์ด ์—†๋‹ค ์ž…๋‹ˆ๋‹ค. 1. ์ฑ„ํŒ…์ฐฝ 2. ๋‹จ์ˆœํ•œ ์˜คํƒ€๋„ ํ›„์— ํŽธ์ง‘ ์—†์ด ๋‚˜์ค‘์— ๊ณ ์นจ 3. ๋‹จ์ˆœํžˆ ์„œ๋ฒ„๋ฅผ ํ‚ค์ง€ ์•Š์€๊ฒƒ 2,3๋ฒˆ์€ ๋””๋ฒ„๊น…ํ• ๋•Œ ์•„ ์ด๋ž˜์„œ ์ด๋Ÿฐ ์˜ค๋ฅ˜๊ฐ€ ๋‚˜์™”๋‚˜ ์‹ถ๊ธฐ๋„ ํ•˜์ง€๋งŒ ์ง‘์ค‘๋„๋ฅผ ๋–จ์–ดํŠธ๋ฆฌ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. 2,3๋ฒˆ์ด ์•„๋‹Œ ๊ตฌ์กฐ์˜ ๋ฌธ์ œ๋‚˜ ๋‚ด๊ฐ€ ๋นผ๋จน์€ ๊ฒƒ๋“ค์„ ๋‚˜์ค‘์— ๊ณ ์น˜๋Š”๊ฑด ์ข‹์•˜์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ์—๋„ ๋ณ„ 5๊ฐœ๋ฅผ ์ค€์ ์€ ์‹ค๋ฌด์™€ ๊ต‰์žฅํžˆ ์—ฐ๊ด€์ด ๊นŠ๋‹ค๋Š” ๊ฒƒ ์ž…๋‹ˆ๋‹ค. ์ €๋Š” ์ธํ”„๋Ÿฐ์—์„œ ๋ฆฌ์•กํŠธ,vue๊ฐ•์˜๋งŒ 7~8๊ฐœ๋ฅผ ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ์ค‘์—๋Š” ์ •๋ฆฌ์™€ ํŽธ์ง‘์€ ์ž˜๋ฌ์œผ๋‚˜ ์ด์ œ ๋ญํ•ด์•ผ์ง€? ๋‹จ์ˆœ์ด ๋ฐฐ์šด๋‚ด์šฉ๋งŒ์œผ๋ก  ์ œ๊ฐ€ ์›ํ•˜๋Š” ๋น„์ง€๋‹ˆ์Šค ๋ชจ๋ธ์„ ๋งŒ๋“ค์ˆ˜ ์—†๋Š” ๊ฐ•์˜๊ฐ€ ์žˆ์—ˆ๊ณ , ํ”„๋ก ํŠธ๋Š” ์ œ์ž‘ํ•  ์ˆ˜ ์žˆ์„๋งŒํผ ์ดํ•ดํ–ˆ์œผ๋‚˜ ๋ฐฑ์—”๋“œ๋Š”? ํ•˜๋Š” ๊ฐ•์˜๋„ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๋ฌผ๋ก  ์•ž์„œ ๋‹ค๋ฅธ ๊ฐ•์˜๋“ค์„ ๋ณด๊ณ  ์™€์„œ ๊ทธ๋Ÿฐ์ง€ ์ดํ•ดํ•˜๋Š”๋ฐ ์–ด๋ ค์›€๋„ ์—†์—ˆ๊ณ  ์ด์ œ ์ œ๊ฐ€ ์–ด๋–ค ์„œ๋น„์Šค๋ฅผ ์–ด๋–ป๊ฒŒ ์ง„ํ–‰ํ•ด์•ผ ํ•˜๋Š”์ง€ ํ™•์‹คํ•˜๊ฒŒ ๊ฐ์ด ์žกํ˜”์Šต๋‹ˆ๋‹ค. ์‹ค๋ฌด๋ฅผ ๋‹น์žฅ ํˆฌ์ž…ํ•˜์…”์•ผ ํ•œ๋‹ค๋ฉด ์ „ ์ด ๊ฐ•์˜๋ฅผ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค! ์นœ์ ˆํ•˜์ง€๋Š” ์•Š์ง€๋งŒ ๋”ฐ๋ผ์˜ค๋ฉด์„œ ์ดํ•ดํ•œ๋‹ค๋ฉด ์‹ค๋ฌด ํˆฌ์ž…์ด ๊ฐ€๋Šฅํ•  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค

    • ๊น€์‹œํ›ˆ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
      ๊น€์‹œํ›ˆ

      ์ˆ˜๊ฐ•ํ‰ 2

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

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

      ์™„์ „ ์ข‹์Šต๋‹ˆ๋‹ค! ์—ฌ๊ธฐ์„œ ๋ฐฐ์šฐ๋Š” ๋‚ด์šฉ ๋Œ€๋ถ€๋ถ„ ์‹ค๋ฌด์—์„œ ์‘์šฉํ•  ์ˆ˜ ์žˆ์–ด์„œ ๋„์›€ ์ •๋ง ๋งŽ์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ข‹์€ ๊ฐ•์˜ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ์•ž์œผ๋กœ๋„ ์ข‹์€ ๊ฐ•์˜ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค~ ๊ฐœ์ธ์ ์œผ๋กœ graphql ๊ฐ•์˜ ๊ธฐ๋Œ€ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค!

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

        ์ˆ˜๊ฐ•ํ‰ 1

        โˆ™

        ํ‰๊ท  ํ‰์  1.0

        1

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

        ๋ฌด์–ธ๊ฐ€๋ฅผ ์•Œ๋ ค์ฃผ๋ ค๊ณ  ๊ฐ•์˜๋ฅผ ๋งŒ๋“ ๊ฒŒ ์•„๋‹ˆ๋ผ ์ž์‹ ์ด ๊ณต๋ถ€ํ•œ ๊ฑธ ์ •๋ฆฌํ•œ ์ˆ˜์ค€์ž…๋‹ˆ๋‹ค. ๊ฐ€๊ฒฉ๋„ ๋น„์‹ธ๋‹ˆ ๋งŽ์ด ์•„์‰ฝ์Šต๋‹ˆ๋‹ค. ๋ฐ๋ชจ์‚ฌ์ดํŠธ์ธ nodebird์‚ฌ์ดํŠธ๋ฅผ ๋ณด๋ฉด ์กฐ๊ธˆ ๋‹ต๋‹ตํ•ด์ง‘๋‹ˆ๋‹ค. 1. ๋จผ์ € Vuetify๋ฅผ ์ด๋ ‡๊ฒŒ ์‚ฌ์šฉํ•˜์ง€ ์•Š์„๊ฑฐ๋ฉด ์™œ ์„ ํƒํ–ˆ๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ์–ด์š”. ์„ค๋งˆ ๊ฐ•์˜ ํ™๋ณด์šฉ์ธ๊ฐ€์š”? 2. ๊ฐ•์˜ ์ค‘๊ฐ„์ค‘๊ฐ„์— ๋‚˜์˜ค๋Š” ์นดํ†ก์ด๋‚˜ ์•Œ๋ฆผ์†Œ๋ฆฌ๋Š” ์ข€ ์—†์• ๊ณ  ์˜ฌ๋ฆฌ์…จ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์‹ ๊ฒฝ์ด ๋งŽ์ด ์“ฐ์—ฌ์š”. 3. ํ”„๋ก ํŠธ์™€ ๋ฐฑ์„ ์™„์ „ํžˆ ๋ถ„๋ฆฌํ•ด์„œ ๋‚ด์šฉ ์—ฐ๊ฒฐ์ด ์•ˆ๋ฉ๋‹ˆ๋‹ค. ์‹ค๋ฌด์—์„œ๋Š” ๋ฐฑ๋‹จ์„ ์ƒ์ƒํ•˜๋ฉฐ ์ฝ”๋”ฉํ•˜์ง€ ์•Š์•„์š”. 4. ์•Œ๋ ค์ฃผ๊ธฐ ๋ณต์žกํ•œ ๊ฒƒ๋“ค๋„ ํž˜๋“œ์‹œ๊ฒ ์ง€๋งŒ ์„ค๋ช…์„ ํ•˜์…จ์–ด์•ผํ•ด์š”. ๊ฐœ๋…์„ค๋ช…์€ ํ•˜์ง€ ๋ชปํ•˜๋”๋ผ๋„ ๊ฐ•์˜์— ์“ฐ์ธ ์ฝ”๋“œ๋งŒํผ์€ ์ด๊ฑธ ์™œ ์“ฐ๋Š”์ง€ ์„ค๋ช…์„ ํ•ด์ค˜์•ผ ํ•˜์ง€ ์•Š์•˜์„๊นŒ์š”. 5. ๋ฌดํ•œ์Šคํฌ๋กค(infinite scroll)์ด ๊ฐ€์žฅ ์•ˆ์ข‹์•˜์–ด์š”. ์š”์ƒˆ๋Š” event ์—ฌ๊ธฐ์ €๊ธฐ ๋ถ™์—ฌ๊ฐ€๋ฉฐ ๋งŒ๋“ค์ง€ ์•Š์•„์š”. Intersection Observer๋ฅผ ์ด์šฉํ•˜์ฃ . ์ด ๋ถ€๋ถ„ ๊ฐ•์˜ํ•˜์‹ค๋•Œ ๋„ˆ๋ฌด ์„ฑ์˜ ์—†์œผ์…จ์–ด์š”. Vue๋Š” ์˜ค๋ž˜ํ–ˆ์ง€๋งŒ Nuxt๋Š” ์ฒ˜์Œ์ด์—ˆ๊ณ  ์šฐ๋ฆฌ๋‚˜๋ผ์— Nuxt ๊ฐ•์˜๊ฐ€ ์—†์–ด์„œ ์™ธ๊ตญ๊ฐ•์˜์™€ ์ž๋ฃŒ๋“ค๋งŒ ๋ณด๋ฉฐ ์ตํžŒ ํ›„ ๊ฐœ๋ฐœ์„ ํ•ด์˜ค๋‹ค ์ด ๊ฐ•์˜๋ฅผ ์šฐ์—ฐํžˆ ์•Œ๊ฒŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์†”์งํžˆ ๋‹ค๋ฅธ ์‚ฌ๋žŒ์€ nuxt๋กœ ์–ด๋–ป๊ฒŒ ๋งŒ๋“œ๋Š”์ง€ ๊ถ๊ธˆํ•ด์„œ ์ด ์ˆ˜์—…์„ ๋“ค์—ˆ์–ด์š”. ๊ทธ๋ž˜๋„ ๊ฝค ์—ด์‹ฌํžˆ ๋“ค์—ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์กฐ์‹ฌ์Šค๋Ÿฐ ๊ฒฐ๋ก ์ด์ง€๋งŒ, ์ œ ๊ฐœ์ธ์ ์ธ ์ƒ๊ฐ์œผ๋กœ๋Š” ์ด๋ ‡๊ฒŒ ๊ฐ•์˜ํ•˜์‹œ๋ฉด ์•ˆ๋ ๊ฑฐ ๊ฐ™์•„์š”. ์ดˆ๊ธ‰์ž๋“ค์ด ์ตํž์ˆ˜ ์žˆ๋Š” ์นœ์ ˆํ•จ๋„ ์•„๋‹ˆ๊ณ  ์ค‘๊ธ‰์ž๋“ค์ด ์ตํž ์ˆ˜ ์žˆ๋Š” ๋…ธํ•˜์šฐ๋„ ์—†๊ณ  ์•„๋งˆ ์Šค์Šค๋กœ๋„ ์ธ์ •ํ•˜์‹œ๊ฒ ์ง€๋งŒ nuxt๋งŒ์˜ ์žฅ์ ์ด๋‚˜ ํŠน์ง•์„ ์‚ด๋ฆฐ๋ถ€๋ถ„๋„ ์—†์–ด์š”. ๋ฌด์—‡๋ณด๋‹ค ๊ฐ•์˜ ์„ฑ์˜๊ฐ€ ๋„ˆ๋ฌด ์—†์—ˆ์–ด์š”. ์œ ํŠœ๋ธŒ ๋ฌด๋ฃŒ ๊ฐ•์˜๊ฐ€ ์•„๋‹ˆ์ž–์•„์š”. aws, vuetify, seo, mysql ๊ฐ™์€ ๋ฉ‹์ง„ ๋ธŒ๋žœ๋“œ๋“ค๋กœ ๊ฐ•์˜๋ฅผ ํ™๋ณดํ–ˆ์ง€๋งŒ, ์†”์งํžˆ ๋งํ•ด์„œ.. ์ €๋Ÿฐ (์“ธ๋งŒํ•œ)๋‚ด์šฉ์ด ์žˆ์—ˆ๋‚˜์š”? ๋„ˆ๋ฌด ์ƒ์ˆ ์—๋งŒ ์น˜์ค‘ํ•˜์‹ ๊ฑฐ ์•„๋‹Œ๊ฐ€์š”? ๋‚˜์œ ํ‰์„ ์ ์–ด ๋ฏธ์•ˆํ•ฉ๋‹ˆ๋‹ค. ์ œ ๊ฐœ์ธ์ ์ธ ์ƒ๊ฐ์ด์—ˆ์Šต๋‹ˆ๋‹ค.

        • ์ œ๋กœ์ดˆ(์กฐํ˜„์˜)
          ์ง€์‹๊ณต์œ ์ž

          1. ํ•„์š”ํ•œ ๋””์ž์ธ์€ ๋ชจ๋‘ Vuetify๋กœ ํ•˜์˜€๋Š”๋ฐ ๋ญ˜ ๋” ํ•ด์•ผํ•˜๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. 2. ์ด ๋ถ€๋ถ„์€ ๋” ์‹ ๊ฒฝ์“ฐ๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. 3. ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž๊ฐ€ ์•„๋‹Œ ์ด์ƒ์—๋Š” ํ”„๋ก ํŠธ์™€ ๋ฐฑ์ด ๋ถ„๋ฆฌ๋ผ์„œ ๊ฐœ๋ฐœ๋˜๋Š” ๊ฒŒ ์ผ๋ฐ˜์ ์ž…๋‹ˆ๋‹ค. ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ถ€์žฌ์ค‘์ธ ์ƒํ™ฉ์—์„œ๋„ ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์€ ๋˜์–ด์•ผํ•˜๊ณ , ๋ฐ˜๋Œ€๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋‹ˆ๊นŒ์š”. ์ด ๋ถ€๋ถ„์€ ์ œ ๊ฐ•์ขŒ๊ฐ€ ์‹ค๋ฌด์ ์ธ ๊ฒƒ ๊ฐ™๋„ค์š”. 4. ์ œ๊ฐ€ ๋ญ˜ ์„ค๋ช…์„ ์•ˆ ํ–ˆ๋‚˜์š”? 5. Intersection Observer๋Š” ๊ฐ•์ขŒ ์ œ์ž‘ ์‹œ์ ์—์„œ๋Š” ์ง€๋‚˜์น˜๊ฒŒ ์ตœ์‹  ๊ธฐ์ˆ ์ด์—ˆ์Šต๋‹ˆ๋‹ค(์•„์ง๋„ ์ •์‹ ์ŠคํŽ™์ด ์•„๋‹ˆ๊ณ ์š”). ๋‹ค์Œ ๊ฐ•์ขŒ๋ฅผ ์ค€๋น„ํ•  ๋•Œ๋Š” ๋„์ž…ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์ œ ๊ฐ•์ขŒ๋Š” Vue๋ฅผ ๋ง‰ ์ž…๋ฌธํ•˜์—ฌ ์ด์ œ์•ผ ๋ฌธ๋ฒ•์„ ๋—€ ๋ถ„๋“ค๊ป˜ ๊ฐ€์žฅ ์‰ฝ๊ฒŒ ์›น์‚ฌ์ดํŠธ๋ฅผ ์ „์ฒด ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ๋ ค๋“œ๋ฆฌ๋Š” ๊ฐ•์ขŒ์ž…๋‹ˆ๋‹ค. ์•™์•™๋‹˜์˜ ์‹ค๋ ฅ์ด ์ค‘๊ธ‰ ์ด์ƒ์ด์…”์„œ ์ด ๊ฐ•์ขŒ๊ฐ€ ์‹œ์‹œํ•˜๊ฒŒ ๋А๊ปด์ง€๋Š” ๊ฒƒ ๊ฐ™๋„ค์š”.

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

        ์ˆ˜๊ฐ•ํ‰ 27

        โˆ™

        ํ‰๊ท  ํ‰์  4.8

        4

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

        ์ •์‹ ์—†์ด ์™„๊ฐ•๊นŒ์ง€ ์™”๋„ค์š”. ๋ช‡๋ฒˆ ๋”๋ด์•ผ ์ œ๋Œ€๋กœ ์•Œ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค๋งŒ ์ข‹์€ ๊ฐ•์˜ ์ž˜ ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

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

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

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

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