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

React + Firebase ํ’€์Šคํƒ ๊ฐœ๋ฐœ - ํŒŒ์ด์–ด๋ฒ ์ด์Šค ํŒŒ์ด์–ด์Šคํ† ์–ด Data Modeling

์ด ๊ฐ•์˜๋ฅผ ํ†ตํ•ด ํŒŒ์ด์–ด๋ฒ ์ด์Šค๋กœ DB์˜ ๊ด€๊ณ„๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šฐ์‹œ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋น ๋ฅด๊ฒŒ ๋ฆฌ์•กํŠธ ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ณ ์šฉ์ด ๋ถˆ์•ˆ์ •ํ•œ ์ง€๊ธˆ ์ด ์‹œ๋Œ€์—๋Š” ์ƒˆ๋กœ์šด ๊ธฐ์ˆ ์„ ๋ฐฐ์›Œ ์ž์‹ ์˜ ๊ฐ€์น˜๋ฅผ ์˜ฌ๋ ค์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ฌด์–ธ๊ฐ€๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ์™€ ์•„์ด๋””์–ด๋ฅผ ๊ตฌํ˜„ ํ•  ๋•Œ ๋ฐ์ดํ„ฐ์˜ "๊ด€๊ณ„"๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ฐ•์˜๋Š” ํŒŒ์ด์–ด๋ฒ ์ด์Šค "ํŒŒ์ด์–ด์Šคํ† ์–ด"๋กœ "๊ด€๊ณ„"๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€ ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

(4.7) ์ˆ˜๊ฐ•ํ‰ 9๊ฐœ

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

๋‚œ์ด๋„ ์ดˆ๊ธ‰

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

์ด๋ก  ์‹ค์Šต ๋ชจ๋‘
์ด๋ก  ์‹ค์Šต ๋ชจ๋‘
์ˆ˜์ตํ™”
์ˆ˜์ตํ™”
์†”๋กœํ”„๋ฆฌ๋„ˆ
์†”๋กœํ”„๋ฆฌ๋„ˆ
์ด๋ก  ์‹ค์Šต ๋ชจ๋‘
์ด๋ก  ์‹ค์Šต ๋ชจ๋‘
์ˆ˜์ตํ™”
์ˆ˜์ตํ™”
์†”๋กœํ”„๋ฆฌ๋„ˆ
์†”๋กœํ”„๋ฆฌ๋„ˆ

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

4.7

5.0

๊น€์ข…์›

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

์ƒˆ๋กญ๊ณ  ์•Œ์ฐฌ ๋‚ด์šฉ ๋งŽ์€ ๋„์›€๊ณผ ๊ธธ์žก์ด๊ฐ€ ๋ฉ๋‹ˆ๋‹ค!

์ฒดํ—˜๋‹จ ํ›„๊ธฐ

5.0

๋‚จ์œคํ˜ธ

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

๊ฐ•์˜ ๋„ˆ๋ฌด ๊น”๋”ํ•˜๊ณ  ์ข‹๋„ค์š”. ํ’€์Šคํƒ ์ค€๋น„ํ•˜์‹œ๋Š” ๋ถ„๋“ค์—๊ฒŒ ๊ธฐ์ค€์ด ๋˜๋Š” ๊ฐ•์˜๊ฐ€ ๋˜์ง€ ์•Š์„๊นŒ ์‹ถ์Šต๋‹ˆ๋‹ค.

5.0

yong821209

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

์ •๋ง ์œ ์ตํ•œ ๊ฐ•์˜ ์ž…๋‹ˆ๋‹ค!

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

  • Firebase Firestore ๋ฐ์ดํ„ฐ ๋ชจ๋ธ๋ง ๊ธฐ์ดˆ ๋ฐฐ์šฐ๊ธฐ

  • Firebase Firestore ํŠน์„ฑ์„ ๋ฐฐ์›Œ ์‘์šฉ ๊นŒ์ง€

  • Firestore๋กœ One To One, One To Many, Many To Many ๊ตฌํ˜„ํ•˜๊ธฐ

  • ๊ฐ„๋‹จ ์„œ๋น„์Šค : VanillaJS + Firebase ๋กœ ๋น„์ •๊ทœํ™”(Denormalization) ๊ตฌํ˜„

  • SNS ์„œ๋น„์Šค : React + Firebase ๋กœ ์ •๊ทœํ™”(Normalization) ๊ตฌํ˜„

  • React ๊ธฐ์ดˆ + ํ•„์š”์‹œ ๋ถ€๋ถ„์  JS ํ•™์Šต

  • Firebase Authentication, Storage

  • Vite(+Vanilla +React) / React Router

  • ๋น„๊ต์  ๋น ๋ฅธ ์‹œ๊ฐ„ ๋‚ด์— Full-Stack ๊ฐœ๋ฐœ์ž ๋˜๊ธฐ

์ง€๊ธˆ ๋‹ค๋‹ˆ๊ณ  ์žˆ๋Š” ํšŒ์‚ฌ...
๋งŒ์กฑ ํ•˜์‹œ๋‚˜์š”?

50์„ธ๊ฐ€ ๋„˜์–ด์„œ ๊นŒ์ง€...
์•ˆ์ •์ ์ธ ์ง์žฅ ์ƒํ™œ์ด ๊ฐ€๋Šฅํ• ๊นŒ์š”?

ํšŒ์‚ฌ๊ฐ€ ๋‹น์‹ ์˜ ์‚ถ์˜
์•ˆ์ •์ ์ธ ๋ฒ„ํŒ€๋ชฉ์ด ๋˜์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค.


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

...์ง€๊ธˆ์€

์ž์‹ ์˜ ๋ฏธ๋ž˜๋Š” ์ž์‹  ์Šค์Šค๋กœ๊ฐ€ ์ค€๋น„ ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์œ ์ผ์€ ํ•ด๊ฒฐ์ฑ…์€ ๋ฌด์—‡์ผ๊นŒ์š”?

๋ฒ„ํ‹ฐ๋ฉด์„œ ์ƒˆ๋กœ์šด ๊ธฐ์ˆ ์„ ๋ฐฐ์šฐ๊ณ  ์ค€๋น„ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค!

  • ๋ฌด์–ธ๊ฐ€๋ฅผ ๋งŒ๋“ค๊ณ , ์ž์‹ ์˜ ์•„์ด๋””์–ด๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์–ด์•ผํ•จ

  • ์ž์‹ ๋งŒ์˜ ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉฐ, ํฌํŠธํด๋ฆฌ์˜ค๋ฅผ ์ค€๋น„ ํ•ด์•ผํ•จ

  • ์ž์‹ ๋งŒ์˜ ์ƒˆ๋กœ์šด ๊ฐ€์น˜๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์–ด์•ผํ•จ

์ž์‹ ์˜ ์•„์ด๋””์–ด๋ฅผ ์‹ค์ œ๋กœ ๊ตฌํ˜„ํ•˜๋ ค๋ฉด?
์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ ค๋ฉด?
์ง์ ‘ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“œ๋ ค๋ฉด?
์†Œํ”„ํŠธ์›จ์–ด ๋„๋ฉ”์ธ ๊ด€์ ์—์„œ >> ๋น„์ฆˆ๋‹ˆ์ฆˆ ๋„๋ฉ”์ธ ๊ด€์ ์œผ๋กœ ๊ฐ€๋ ค๋ฉด?


๋ฐ์ดํ„ฐ์˜ ๊ด€๊ณ„๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

One To One, One To Many, Many To Many


์ด ๊ฐ•์ขŒ๋Š” ํŒŒ์ด์–ด์Šคํ† ์–ด database-modeling ๊ธฐ์ดˆ๋ฅผ ๋ฐฐ์šฐ๊ณ  > ๊ด€๊ณ„๋ฅผ ๊ตฌํ˜„ํ•˜๊ฒŒ ๋˜๊ณ 
react-fullstack ๊ฐœ๋ฐœ์ž๊ฐ€ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ณ  ์‹ถ์€ ๋ถ„

VanillaJS + Firebase ์กฐํ•ฉ, React + Firebase ์กฐํ•ฉ์„
๋ฐฐ์šฐ์‹œ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

๋ฐ์ดํ„ฐ ๊ด€๊ณ„๋ฅผ ๋‹ค๋ฃจ๊ณ  ์‹ถ์€ ๋ถ„

ํŒŒ์ด์–ด๋ฒ ์ด์Šค ํŒŒ์ด์–ด์Šคํ† ์–ด ๋ฐ์ดํ„ฐ ๋ชจ๋ธ๋ง ๊ธฐ์ดˆ๋ฅผ ๋ฐฐ์›Œ, ๊ด€๊ณ„๋ฅผ ๊ตฌํ˜„ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

ํŒŒ์ด์–ด๋ฒ ์ด์Šค๋ฅผ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ๋ถ„

๋ฆฌ์•กํŠธ / ๋ทฐ / ํ”Œ๋Ÿฌํ„ฐ์— ๋ถ™์—ฌ์„œ ๋‚˜์˜จ ํŒŒ์ด์–ด๋ฒ ์ด์Šค ๋ณด๋‹ค, ๋” ๊ธฐ์ดˆ๋ฅผ ๋‹ค์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

๋ฆฌ์•กํŠธ + ํŒŒ์ด์–ด๋ฒ ์ด์Šค ์ˆ˜๊ฐ• ํ›„์—๋Š”

  • ๋ฆฌ์•กํŠธ(js ์ง€์‹)๊ณผ ํŒŒ์ด์–ด๋ฒ ์ด์Šค ๋ฐ์ดํ„ฐ ๋ชจ๋ธ๋ง ๊ธฐ์ดˆ๋ฅผ ๋ฐฐ์šฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

  • No-SQL์ธ ํŒŒ์ด์–ด์Šคํ† ์–ด ํŠน์„ฑ์— ๋Œ€ํ•ด์„œ ๋ฐฐ์šฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ( ๊ธฐ์ดˆ์—์„œ ์‘์šฉ๊นŒ์ง€ )


  • One To One, One To Many, Many To Many์˜ ๊ด€๊ณ„๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

  • ๊ฐ„๋‹จํ•œ SNS ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

ํŒŒ์ด์–ด๋ฒ ์ด์Šค ํŒŒ์ด์–ด์Šคํ† ์–ด(Firestore)๋Š”
NoSQL์ด๋ผ ๊ด€๊ณ„๋ฅผ ๊ตฌํ˜„ ํ•  ์ˆ˜ ์—†๋‹ค๊ณ  ์ƒ๊ฐ ํ•˜์‹œ๋Š” ๋ถ„์ด ๋งŽ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ Firestore ํŠน์„ฑ์„ ํ™œ์šฉํ•˜์—ฌ Firestore ๋งŒ์˜ ๊ด€๊ณ„๋ฅผ ์‰ฝ๊ฒŒ ๊ตฌํ˜„์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

์ด ๊ฐ•์˜์˜ ํŠน์ง•

1. ๊ฐ•์˜ ์ˆ˜๊ฐ• ์‹œ CSS ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ๋ฐฐ์šด๋‹ค๊ณ  ํž˜๋“œ์…จ์ฃ ?

๋งค๋ฒˆ ์ƒˆ๋กœ์šด ๊ฐ•์ขŒ๋ฅผ ๋“ค์„ ๋•Œ ๋งˆ๋‹ค CSS ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ๋ฐฐ์šฐ๋Š” ๊ฒƒ์ด ๋ฒˆ๊ฑฐ๋กœ์šฐ์‹œ์ฃ ? ์ด ๊ฐ•์ขŒ๋Š” CSS ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ , CSS module์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ณธ ๊ฐ•์ขŒ๋Š” html, css ๊ฐ•์ขŒ๊ฐ€ ์•„๋‹ˆ๋ฏ€๋กœ ๋ฒˆ๊ฑฐ๋กœ์šด html, css๋Š” ๋ณต์‚ฌ / ๋ถ™์—ฌ ๋„ฃ๊ธฐ๋ฅผ ํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

ํ•„์š”์‹œ ์˜์ƒ ํ•˜๋‹จ์— ๋งํฌ๋ฅผ ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ๋ฐ”๋กœ ๋ณต์‚ฌ / ๋ถ™์—ฌ ๋„ฃ๊ธฐ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

2. ๊ฐ•์˜ ๋งˆ๋‹ค ์ด๋ก ์„ ์„ค๋ช…ํ•˜๋Š” ์Šฌ๋ผ์ด๋“œ ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

๊ฐ•์ขŒ์—์„œ ๋ฐฐ์šฐ๊ฒŒ ๋˜๋Š” React ๋ฌธ๋ฒ•, Javascript ์ด๋ก , Firebase ์ง€์‹์€ ๋ง๋กœ๋งŒ ์„ค๋ช… ๋“œ๋ฆฌ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ชจ๋‘ ์นœ์ ˆํ•˜๊ฒŒ ์Šฌ๋ผ์ด๋“œ ์ •๋ฆฌํ•ด์„œ ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ๋งค ์˜์ƒ๋งˆ๋‹ค ์ž๋ฃŒ๋Š” ํ•˜๋‹จ์— ์žˆ์œผ๋‹ˆ ๋ฐ”๋กœ ๋“ค์–ด๊ฐ€์„œ ๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

3. ์ด๋ก ์€ ์Šฌ๋ผ์ด๋“œ๋ฅผ ํ†ตํ•ด ์ตœ๋Œ€ํ•œ ์ž์„ธํ•˜๊ฒŒ ์„ค๋ช… ๋“œ๋ฆฝ๋‹ˆ๋‹ค

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

Firebase ์ธ์ฆ๊ณผ ์Šคํ† ๋ฆฌ์ง€๋Š” ๊ธฐ์ดˆ์ ์ธ ๊ฒƒ๋“ค๋งŒ ํ•™์Šตํ•˜์ง€๋งŒ

Firebase ํŒŒ์ด์–ด์Šคํ† ์–ด(Firestore)๋Š” ๊ธฐ์ดˆ์—์„œ ์‘์šฉ๊นŒ์ง€ ๊ฐˆ ์ˆ˜ ์žˆ๋„๋ก ๋„์™€๋“œ๋ฆฝ๋‹ˆ๋‹ค.

Firestore๋ฅผ ๋ฐฐ์šฐ๊ฒŒ ๋˜์–ด์„œ, ์†ํ•ด ๋ณผ ๊ฒƒ์€ ์—†์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋‚ด์šฉ์„ ๋ฐฐ์›Œ์š”

๊ฐ•์ขŒ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ์ˆ 

Firebase @11

Vite(Vanilla, React@13)

React Router@7

๊ถ๊ธˆํ•œ ์ ์ด ์žˆ๋‚˜์š”?

Q. ๋‹ค๋ฅธ ์–ธ์–ด ๊ฐœ๋ฐœ์ž์ธ๋ฐ ์ˆ˜๊ฐ•ํ•ด๋„ ๋˜๋‚˜์š”?

  • html / css๋Š” ๋ณต์‚ฌ ๋ถ™์—ฌ๋„ฃ๊ธฐ ํ•˜๊ธฐ ๋•Œ๋ฌธ์—, html / css๋Š” ์•ฝ๊ฐ„์ด๋ผ๋„ ์•„์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  • ๋ฐ์ดํ„ฐํƒ€์ž…, IF๋ฌธ, ๊ฐ์ฒด, ๋ฐฐ์—ด, ํ•จ์ˆ˜์— ๋Œ€ํ•œ ์ดํ•ด๋Š” ์žˆ์œผ์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค.
    ๊ทธ๋Ÿฌ๋‚˜ ๊ฐ•์ขŒ์—์„œ ์ง„ํ–‰ํ•˜๋Š” ๋ฐ˜๋ณต๋ถ„(forEach/map), DOM์กฐ์ž‘, ์‚ผํ•ญ์—ฐ์‚ฐ์ž, ์˜ต์…”๋„์ฒด์ด๋‹, ๋น„๋™๊ธฐ์ฒ˜๋ฆฌ๋Š” ๋ชจ๋‘ ์Šฌ๋ผ์ด๋“œ ์ด๋ก ์„ ์„ค๋ช…ํ•ด ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์‹ค์Šต์— ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค.

  • ๋‹น์—ฐํžˆ ๋ฆฌ์•กํŠธ ๊ธฐ์ดˆ ์ด๋ก  / ๋ฌธ๋ฒ•๋„ ์ž์„ธํ•˜๊ฒŒ ์„ค๋ช… ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

Q. ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ์ตœ์‹  ๋ฒ„์ „์œผ๋กœ ์˜ฌ๋ผ๊ฐ€๋ฉด ๋™์ž‘ํ•˜์ง€ ์•Š๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ๋‚˜์š”?

  • ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‚˜ ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ์—…๋ฐ์ดํŠธ ๋˜๋ฉด, ๊ฐ•์ขŒ๋ฅผ ์ฒดํฌํ•˜๊ณ  ์ง์ ‘ ํ…Œ์ŠคํŠธ ํ•ด์„œ ์ž˜ ๋Œ์•„๊ฐ€๋Š”์ง€ ํ™•์ธํ•˜๊ณ  ๊ณ„์†ํ•ด์„œ ์—…๋ฐ์ดํŠธ ํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

Q. Node.js ์ƒํƒœ๊ณ„๊ฐ€ ์ต์ˆ™ํ•˜์ง€ ์•Š์€๋ฐ, ์ˆ˜๊ฐ• ํ•ด๋„ ๋˜๋‚˜์š”?

  • node.js๋ฅผ ์„ค์น˜ํ•˜๊ณ  > npm์„ ํ†ตํ•ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ/ํ”„๋ ˆ์ž„์›Œํฌ ์„ค์น˜ ํ•˜๊ณ  > ์‹คํ–‰ํ•˜๋Š” ์ง€์‹์€ ์žˆ์œผ์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋งŒ์•ฝ ๋ชจ๋ฅด๊ฒ ๋‹ค๋ฉด ๋‹ค๋ฅธ ์ž…๋ฌธ ๊ฐ•์ขŒ๋ฅผ ๋“ค์œผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

  • ์Šฌ๋ผ์ด๋“œ, ๋ณต์‚ฌ/๋ถ™์—ฌ ๋„ฃ๊ธฐ ์ฝ”๋“œ๋ฅผ ๋“œ๋ฆฌ์ง€๋งŒ... ํ˜น์‹œ๋‚˜ ๋ชฐ๋ผ์„œ node_modules๊ฐ€ ํฌํ•จ๋œ ์ „์ฒด ์ฝ”๋“œ๋ฅผ ํ†ต์œผ๋กœ ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

Q. ์งˆ๋ฌธ ๋‹ต๋ณ€์€ ์ž˜ ํ•ด์ฃผ์‹œ๋‚˜์š”?

  • ๋„ค, ์งˆ๋ฌธ์— ๋Œ€ํ•œ ๋‹ต๋ณ€์€ ๋ชจ๋‘ ํ•ด๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ

์‹ค์Šต ํ™˜๊ฒฝ

  • ์šด์˜ ์ฒด์ œ ๋ฐ ๋ฒ„์ „(OS) : Windows 11

  • ์‚ฌ์šฉ ๋„๊ตฌ: node.js/ npm / vscode

ํ•™์Šต ์ž๋ฃŒ - ๊ฐ„ํŽธํ•œ ํ™œ์šฉ ๊ฐ€๋Šฅ

  • ๋™์˜์ƒ ๊ฐ•์˜ ํ•˜๋‹จ์— ๋งํฌ๋กœ ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

  • ๋™์˜์ƒ ๊ฐ•์˜ ํ•˜๋‹จ์— ๋ณต์‚ฌ/๋ถ™์—ฌ ๋„ฃ๊ธฐ ์ฝ”๋“œ ๋งํฌ๋กœ ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

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

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

  • ์ƒˆ๋กœ์šด ๊ธฐ์ˆ ์„ ๊ฐ€์ ธ์„œ ๊ฒฝ์Ÿ๋ ฅ์„ ๊ฐ€์ง€๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž

  • ๋น ๋ฅด๊ฒŒ ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ

  • ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋ฅผ ๊ธ‰ํ•˜๊ฒŒ ๋‹ค๋ค„์•ผ ํ•  ๊ฒฝ์šฐ

  • ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž ์ด์ง€๋งŒ ๋ฆฌ์•กํŠธ(js)์™€ ํŒŒ์ด์–ด๋ฒ ์ด์Šค ์ง€์‹์„ ๋น ๋ฅด๊ฒŒ ์Šต๋“ํ•˜๊ณ  ์‹ถ์„ ๋•Œ

  • ํ”Œ๋Ÿฌํ„ฐ, ์ฝ”ํ‹€๋ฆฐ, ์Šค์œ„ํ”„ํŠธ ๊ฐœ๋ฐœ์ž์ธ๋ฐ ํŒŒ์ด์–ด๋ฒ ์ด์Šค ์ง€์‹์„ ๋น ๋ฅด๊ฒŒ ์Šต๋“ํ•˜๊ณ ์ž ํ•˜๋Š” ๋ถ„

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

  • HTML, CSS ๊ธฐ์ดˆ ์ง€์‹ (์ฝ”๋“œ๋ฅผ ๋ณด๊ณ  ์ดํ•ดํ•  ์ˆ˜ ์žˆ์œผ๋ฉด ๋จ)

  • HTML, CSS ๋Š” ๋ณต์‚ฌ / ๋ถ™์—ฌ๋„ฃ๊ธฐ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

  • JavaScript ๊ธฐ์ดˆ ์ง€์‹ (if๋ฌธ, ๊ฐ์ฒด, ๋ฐฐ์—ด, ํ•จ์ˆ˜๋Š” ์•„์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค.)

  • React๋ฅผ ๋ฐฐ์šฐ๋ฉฐ ํ•„์š”ํ•œ JS ์ง€์‹์€ ๋ถ€๋ถ„์ ์œผ๋กœ ์„ค๋ช… ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”
๋ธŒ๋ผ์ดํŠธ์ฝ”๋”ฉ์ž…๋‹ˆ๋‹ค.

39

๋ช…

์ˆ˜๊ฐ•์ƒ

9

๊ฐœ

์ˆ˜๊ฐ•ํ‰

1

๊ฐœ

๋‹ต๋ณ€

4.7

์ 

๊ฐ•์˜ ํ‰์ 

1

๊ฐœ

๊ฐ•์˜

๋ฐ˜๊ฐ‘์Šต๋‹ˆ๋‹ค.

ํšŒ์‚ฌ์—์„œ ์†Œํ”„ํŠธ์›จ์–ด ๊ธฐ์ˆ ์„ ํ™œ์šฉํ•˜์—ฌ, ์ฆ๊ฒ๊ฒŒ ๊ฐœ๋ฐœํ•˜๋Š” ์‚ฌ๋žŒ์ž…๋‹ˆ๋‹ค.

์ด์ œ ai ๋ฐœ์ „๊ณผ ๋”๋ถˆ์–ด, Solopreneur ๊ฐ€ ๋Œ€์„ธ๊ฐ€ ๋˜๋Š” ์‹œ๋Œ€๊ฐ€ ๊ณง ์˜ค๋ฆฌ๋ผ ํ™•์‹ ํ•ฉ๋‹ˆ๋‹ค.

๊ทธ ํ—ค๊ฒŒ๋ชจ๋‹ˆ๊ฐ€ ์ด๋™ํ•˜๋Š” ํ๋ฆ„์„ ๋”ฐ๋ผ ์ข‹์€ ๊ฐ•์˜๋ฅผ ์ถœ์‹œํ•˜์—ฌ, ํฐ ๋„์›€์„ ๋“œ๋ฆฌ๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.

๋”๋ณด๊ธฐ

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

์ „์ฒด

62๊ฐœ โˆ™ (9์‹œ๊ฐ„ 59๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

9๊ฐœ

4.7

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

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

    ์ˆ˜๊ฐ•ํ‰ 4

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

    ์ •๋ง ์œ ์ตํ•œ ๊ฐ•์˜ ์ž…๋‹ˆ๋‹ค!

    • ๋ธŒ๋ผ์ดํŠธ์ฝ”๋”ฉ
      ์ง€์‹๊ณต์œ ์ž

      ๋ณ„์  5๊ฐœ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋‹ต๊ธ€์„ ๋Šฆ๊ฒŒ ๋‹ฌ์•˜๋„ค์š” ใ…‹ใ…‹ใ…‹ใ…‹

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

    ์ˆ˜๊ฐ•ํ‰ 1

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    ์ˆ˜์ •๋จ

    5

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

    ์ƒˆ๋กญ๊ณ  ์•Œ์ฐฌ ๋‚ด์šฉ ๋งŽ์€ ๋„์›€๊ณผ ๊ธธ์žก์ด๊ฐ€ ๋ฉ๋‹ˆ๋‹ค!

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

    ์ˆ˜๊ฐ•ํ‰ 1

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    ์ฒดํ—˜๋‹จ ํ›„๊ธฐ

    5

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

    ๊ฐ•์˜ ๋„ˆ๋ฌด ๊น”๋”ํ•˜๊ณ  ์ข‹๋„ค์š”. ํ’€์Šคํƒ ์ค€๋น„ํ•˜์‹œ๋Š” ๋ถ„๋“ค์—๊ฒŒ ๊ธฐ์ค€์ด ๋˜๋Š” ๊ฐ•์˜๊ฐ€ ๋˜์ง€ ์•Š์„๊นŒ ์‹ถ์Šต๋‹ˆ๋‹ค.

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

    ์ˆ˜๊ฐ•ํ‰ 2

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

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

    ์ˆ˜๊ฐ•ํ‰ 5

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

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

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

์‹ ๊ทœ๊ฐ€์ž… 25% ํ• ์ธ

โ‚ฉ53,620

25%

โ‚ฉ71,500

ํ‰์ƒ๊ต์œก์ด์šฉ๊ถŒ ์ง€์› ๊ฐ•์˜