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

MERN STACK ์ปค๋ฎค๋‹ˆํ‹ฐ : ์‹œ์ž‘๋ถ€ํ„ฐ ๋ฐฐํฌ๊นŒ์ง€ ์•Œ๋ ค์ฃผ๋Š” React

MERN Stack์„ ํ™œ์šฉํ•˜์—ฌ ์ปค๋ฎค๋‹ˆํ‹ฐ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ œ์ž‘ํ•˜๊ณ , ๋ฐฐํฌํ•ฉ๋‹ˆ๋‹ค. (MongoDB, Express, React, Node + Firebase)

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

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

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

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

ํ† ์ดํ”„๋กœ์ ํŠธ
ํ† ์ดํ”„๋กœ์ ํŠธ
ํ† ์ดํ”„๋กœ์ ํŠธ
ํ† ์ดํ”„๋กœ์ ํŠธ
ํ•œํ™”์‹œ์Šคํ…œ/ICT
์•„๋ชจ๋ ˆํผ์‹œํ”ฝ
CJ
ํ˜„๋Œ€๊ธ€๋กœ๋น„์Šค
LG์ „์ž

์ผ€์ดํ‹ฐ

LG์ „์ž

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

ํ•œํ™”์‹œ์Šคํ…œ/ICT
์•„๋ชจ๋ ˆํผ์‹œํ”ฝ
CJ
ํ˜„๋Œ€๊ธ€๋กœ๋น„์Šค
LG์ „์ž

์ผ€์ดํ‹ฐ

LG์ „์ž

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

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

4.8

5.0

Dana Kim

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

๊ฐ•์˜ ๋„ˆ๋ฌด ์œ ์ตํ•˜๊ณ , ์‰ฝ๊ฒŒ ์•Œ๋ ค์ฃผ์‹ญ๋‹ˆ๋‹ค! ์ธํ”„๋Ÿฐ์—์„œ ๋‹ค๋ฅธ ๊ฐ•์˜ ์ด๊ฒƒ์ €๊ฒƒ ๋งŽ์ด ์ˆ˜๊ฐ•ํ•ด๋ดค๋Š”๋ฐ, ๋ฆฌ๋ทฐ ์ฒ˜์Œ ๋‹ฌ์•„๋ณผ ์ •๋„๋กœ ๋งŒ์กฑ๋„ ๋†’์€ ๊ฐ•์˜์—์š” ! ๋””ํ…Œ์ผํ•˜๊ฒŒ AtoZ ๋‹ค๋ค„์ฃผ์‹œ๋Š” ๊ฒƒ๋„ ๋„ˆ๋ฌด ์ข‹์•˜๊ณ , ์กฐ๊ธˆ ๋” ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ํฌ์ธํŠธ๋ฅผ ์ž˜ ์ง‘์–ด์ฃผ์‹  ๊ฒƒ ๊ฐ™์•„์š”. ์‚ฌ์‹ค ๋น„์ „๊ณต์ž๋กœ์„œ ๊ฐœ๋ฐœ๋ฐฐ์šฐ๊ธฐ ๋ง‰๋ง‰ํ–ˆ๋Š”๋ฐ ๊น”๋”ํ•œ ์„ค๋ช…์ด ๋„ˆ๋ฌด ์ข‹์•„์š”. ์ตœ๊ทผ ์—ฌ๋Ÿฌ ์›น์‚ฌ์ดํŠธ์—์„œ ํ™œ์šฉํ•˜๋Š” react ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉํ•˜๋‹ˆ๊นŒ ์‹ค๋ฌด์—์„œ๋„ ๋งŽ์ด ๋„์›€๋  ๊ฑฐ ๊ฐ™๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค! react ๊ด€์‹ฌ ์žˆ์œผ์‹  ๋ถ„๋“ค ์ด ๊ฐ•์˜ ํ•œ๋ฒˆ ๋“ค์œผ๋ฉด ์•„์ฃผ ๊น”๋”ํ•˜๊ฒŒ ์ดํ•ด๋˜์‹ค ๊ฒƒ ๊ฐ™์•„์š” :) ํŒ๋‹ค์ฝ”๋”ฉ๋‹˜ ์ข‹์€ ๊ฐ•์˜ ์ •๋ง ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค !! ๋‹ค๋ฅธ ๊ฐ•์˜๋„ ์–ผ๋ฅธ ๋‚ด์ฃผ์„ธ์š”!!!

5.0

๊น€๋™๋ฏผ

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

์†๋„๊ฐ€ ์กฐ๊ธˆ ๋น ๋ฅด๊ธดํ•˜์ง€๋งŒ ๊ดœ์ฐฎ์•„์š” ์—ฌ๋Ÿฌ๋ฒˆ ๋“ค์œผ๋ฉด๋ฉ๋‹ˆ๋‹ค~~ ์ด์ œ 30% ์กฐ๊ธˆ ๋„˜๊ฒผ๋Š”๋ฐ ์žฌ๋ฐŒ์–ด์š” ~ ๋ทฐ๋กœ ๊ฐœ๋ฐœํ•˜๋‹ค๊ฐ€ ๋ฆฌ์•กํŠธ ํ•ด๋ณด๋ ค๋‹ˆ ๊ฒ๋‚ฌ์—ˆ๋Š”๋ฐ ๊ฐ•์‚ฌ๋‹˜๋•๋ถ„์— ์žฌ๋ฐŒ๊ฒŒ ํ•˜๊ณ ์žˆ์–ด์š”! // ์ถ”๊ฐ€ ๋„ˆ๋ฌด ๋ฐ”๋นด์–ด์„œ ๋๊นŒ์ง€ ๋“ฃ๋Š”๋ฐ ์‹œ๊ฐ„์ด ๊ฝค ์˜ค๋ž˜๊ฑธ๋ ธ๋„ค์š” ใ…œใ…œ ์–ป์–ด๊ฐ€๋Š”๊ฒŒ ๋„ˆ๋ฌด ๋งŽ์•„์„œ ์–ด๋–ป๊ฒŒ ๊ฐ์‚ฌ๋“œ๋ ค์•ผ ํ• ์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค! ์›น๊ฐœ๋ฐœ์ด ์–ด๋–ค์‹์œผ๋กœ ์ง„ํ–‰๋˜๋Š”์ง€ ํฐ ๊ทธ๋ฆผ ์žก๊ธฐ ๋„ˆ๋ฌด ์ข‹์•˜๊ณ  ์•„์ง ๋งŽ์ด ๋ถ€์กฑํ•œ ๋ถ€๋ถ„๋“ค์„ ์•Œ๊ฒŒ ๋˜์—ˆ๊ธฐ์— ๊ทธ ๋ถ€๋ถ„์€ ์ œ๊ฐ€ ๋”ฐ๋กœ ํ”„๋กœ์ ํŠธ ์ง„ํ–‰ํ•˜๋ฉด์„œ ๋” ๊ณต๋ถ€ํ•ด ๋‚˜๊ฐˆ ์ƒ๊ฐ์ž…๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค~

5.0

copperhun

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

์ง„ํ–‰์†๋„ ๊ฐœ๋นจ๋ผ์„œ ์ข€ ๋นก์…‰๋‹ˆ๋‹ค. ๊ทผ๋ฐ ๋ฐฑ์—”๋“œ๋ถ€๋ถ„ ๋„ˆ๋ฌด ์œ ์šฉํ•œ๊ฑฐ๊ฐ™์•„์š”. ์ดˆ๋ณด์—ฌ๋„ ๋ณผ๋งŒํ•œ๋“ฏ. ๊ณ„์† ๋ฐ˜๋ณตํ•ด์„œ ๋ณผ ์˜ˆ์ •

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

  • React

  • Express

  • MongoDB (Mongoose)

  • Firebase (Authentication)

  • AWS E3 (Naver Cloud Service)

MERN Stack์œผ๋กœ ๋ฐฐ์šฐ๋Š” ํ’€์Šคํƒ ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ!

MongoDB, Express, React, Node.js 
์ปค๋ฎค๋‹ˆํ‹ฐ ์‚ฌ์ดํŠธ ์ œ์ž‘ (feat. Firebase) 

  • โœ… MERN Stack์„ ํ™œ์šฉํ•˜์—ฌ ์ปค๋ฎค๋‹ˆํ‹ฐํ˜• ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ฐœ๋ฐœํ•ฉ๋‹ˆ๋‹ค.
  • โœ… Front-end์™€ Back-end ๋ชจ๋“  ์ง€์‹์„ ๋‹ค๋ฃจ๋ฉฐ, ์™„์„ฑ๋œ WEB/APP ์ œ์ž‘์„ ๋ชฉํ‘œ๋กœ ํ•ฉ๋‹ˆ๋‹ค.

์ด ๊ฐ•์˜์—์„œ ๋‹ค๋ฃจ๋Š” ๊ธฐ์ˆ 

React 
(๋ฆฌ์•กํŠธ) 

Express 
(์ต์Šคํ”„๋ ˆ์Šค) 

MongoDB/Mongoose 
(๋ชฝ๊ณ DB/๋ชฝ๊ตฌ์Šค) 

Firebase 
(ํŒŒ์ด์–ด๋ฒ ์ด์Šค) 


๊ทธ๋Ÿฐ๋ฐ, React๊ฐ€ ๋ญ์ฃ ? โœจ

React๋Š” Facebook์—์„œ ๋งŒ๋“  JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.
Vue.js, Angular ๋“ฑ ์˜ค๋Š˜๋‚  ์šฐ๋ฆฌ๊ฐ€ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋งŽ์€ Javascript Framework/Library๊ฐ€ ์žˆ์Œ์—๋„ React๋Š” Front-end ์„ธ์ƒ์—์„œ ๊ฐ€์žฅ ์ธ๊ธฐ์žˆ๊ณ , ๊ฐœ๋ฐœ์ž๊ฐ€ ๊ฐ€์žฅ ๋งŽ์ด ์ฐพ๋Š” ์˜ต์…˜ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. 

React์˜ ํŠน์ง•

1๏ธโƒฃ JSX

Javascript XML์œผ๋กœ์„œ, XML/HTML๊ณผ ๊ฐ™์€ ๋ฌธ๋ฒ•์ž…๋‹ˆ๋‹ค. HTML๊ณผ ์œ ์‚ฌํ•œ ์ฝ”๋“œ๊ฐ€ JS ์•ˆ์—์„œ ๋™์ž‘๋  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋ฉฐ ์ด๋Š” ๋‹ค์‹œ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ฝ์„ ์ˆ˜ ์žˆ๋Š” JS๋กœ ์ตœ์ ํ™”๋˜์–ด ๋ Œ๋”๋ง๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ผ๋ฐ˜ JS๋ณด๋‹ค ํ›จ์”ฌ ๋น ๋ฅธ ์†๋„๋ฅผ ์ž๋ž‘ํ•ฉ๋‹ˆ๋‹ค.

2๏ธโƒฃ Virtual DOM

2013๋…„ ์ด์ „์—๋Š” ์›น์‚ฌ์ดํŠธ ํ˜น์€ ์›นํŽ˜์ด์ง€๊ฐ€ ์ƒˆ๋กœ์šด ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ฃผ๋ ค๋ฉด ํ•ญ์ƒ ์ƒˆ๋กœ๊ณ ์นจ์„ ์ด์šฉํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ React๋Š” ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ฐ”๋€Œ๋Š” ๋ถ€๋ถ„๋งŒ ์ƒˆ๋กœ ๋ณด์—ฌ์ฃผ๋ฉฐ ์›นํŽ˜์ด์ง€๋ฅผ ์žฌ๋ Œ๋”๋งํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์ด๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์•ฑ๊ณผ ์œ ์‚ฌํ•œ ๊ฒฝํ—˜์„ React WEB/APP์—์„œ ์ œ๊ณตํ•ด์ค„ ์ˆ˜ ์žˆ๋‹จ ๋œป์ด์ฃ ! 


๊ฐ•์˜ ํ•˜๋‚˜์— 
MERN Stack์„ ์žก์•˜๋‹ค!

#1.
React

๊ฒŒ์‹œ๊ธ€ ์ž‘์„ฑ, ํšŒ์›๊ฐ€์ž… ๋“ฑ ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด๋ณด๋ฉฐ ์ปค๋ฎค๋‹ˆํ‹ฐ ์‚ฌ์ดํŠธ์— ํ•„์š”ํ•œ ๋ชจ๋“  ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค. ํ•„์š”์— ๋”ฐ๋ผ Hook์„ ์ปดํฌ๋„ŒํŠธ ์‚ฌ์ดํด์— ๋งž์ถ”์–ด ์ œ๊ณตํ•˜๊ณ , User ์„œ๋น„์Šค๋Š” Firebase๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋น ๋ฅด๊ฒŒ ๊ฐœ๋ฐœํ•˜๋ฉฐ ์ด๋Š” Redux๋ฅผ ์‚ฌ์šฉํ•ด ๊ด€๋ฆฌ๋ฉ๋‹ˆ๋‹ค. 

#2.
Express

Express๋ฅผ ํ†ตํ•ด ์›น ์„œ๋ฒ„๋ฅผ ์ œ์ž‘ํ•˜๊ณ , React๋กœ ๋งŒ๋“  ์•ฑ์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค. ํด๋ผ์ด์–ธํŠธ๋‹จ์—์„œ ์ „์†ก๋˜๋Š” ํ…์ŠคํŠธ/์ด๋ฏธ์ง€ ๋ฐ์ดํ„ฐ๋“ค์„ DB, ํ˜น์€ ์„œ๋ฒ„์— ์ €์žฅํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ฐ•์˜์—์„  Naver Cloud๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์™ธ๋ถ€ ์Šคํ† ๋ฆฌ์ง€์— ์ด๋ฏธ์ง€๋ฅผ ์ €์žฅํ•˜๋Š” ๋ฒ• ์—ญ์‹œ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

#3.
MongoDB / 
Mongoose

NoSQL DB์ธ MongoDB๋ฅผ Mongoose๋ฅผ ํ†ตํ•ด ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ๊ฒŒ์‹œ๊ธ€ ์ •๋ณด์™€ ์‚ฌ์šฉ์ž ์ •๋ณด๋ฅผ DB์— ์ €์žฅํ•˜๊ณ , ์ฝ๊ณ , ์ˆ˜์ •ํ•˜๊ณ , ์‚ญ์ œํ•˜๋Š” CRUD ๊ณผ์ •์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ณผ์ •์—์„œ Mongoose๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ MongoDB์—์„œ ๋ชจ๋ธ์„ ์ƒ์„ฑํ•˜๊ณ , ๊ทธ ๋ชจ๋ธ์„ ๋‹ค์–‘ํ•œ method๋กœ ๋‹ค๋ฃน๋‹ˆ๋‹ค. 

#4.
React-Bootstrap, 
Emotion

๋น ๋ฅด๊ฒŒ UI/UX๋ฅผ ์™„์„ฑํ•  ์ˆ˜ ์žˆ๋Š” React-Bootstrap์„ ํ”„๋กœ์ ํŠธ์— ๋„์ž…ํ•˜๊ณ , ํ•„์š”์— ๋”ฐ๋ผ SASS ๊ธฐ๋ฐ˜ ์Šคํƒ€์ผ๋ง ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ Emotion์„ ํ™œ์šฉํ•˜์—ฌ ์›น์‚ฌ์ดํŠธ ๋””์ž์ธ์„ ์ œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.

๋กœ๊ทธ์ธ/๋กœ๊ทธ์•„์›ƒ ๊ตฌํ˜„
์œ ์ € ํ”„๋กœํ•„ ๋“ฑ๋ก ๊ตฌํ˜„

์ œ๊ฐ€ ์ด ๊ฐ•์˜๋ฅผ  
๋“ค์–ด๋„ ๋ ๊นŒ์š”? ๐Ÿ™‹โ€โ™‚๏ธ

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

Q. ์ด ๊ฐ•์˜๋ฅผ ํ†ตํ•ด ์›น ๊ฐœ๋ฐœ์— ์ž…๋ฌธํ•ด๋„ ๋ ๊นŒ์š”?

์ด๋ฒˆ ๊ฐ•์˜์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“  ์Šคํƒ์€ ํ•ด๋‹น ๊ธฐ์ˆ ์„ ์ฒ˜์Œ ์ ‘ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์„ ๋Œ€์ƒ์œผ๋กœ ๊ฐ•์˜ ๋‚ด์šฉ์ด ๊ธฐํš๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ, ํ•ด๋‹น ๊ธฐ์ˆ ์— ๋Œ€ํ•œ ์ง€์‹์ด ์ „๋ฌดํ•˜์…”๋„ ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•˜์‹œ๋Š” ๋ฐ์— ํฐ ์ง€์žฅ์ด ์—†๋„๋ก ์ถฉ๋ถ„ํ•œ ์„ค๋ช…์ด ์ด๋ฃจ์–ด์ง€๋‚˜ HTML/JS/CSS ๋“ฑ ๊ธฐ์ดˆ์ ์ธ ์›น๊ฐœ๋ฐœ ์ง€์‹์ด ์—†๋‹ค๋ฉด ๋‹ค์†Œ ์–ด๋ ค์šฐ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (์„ ์ˆ˜ ์ง€์‹์„ ๊ผญ ํ™•์ธํ•ด์ฃผ์„ธ์š”!)

Q. ์ €๋Š” ํ”„๋ก ํŠธ์—”๋“œ(๋ฐฑ์—”๋“œ)๋ฐ–์— ๊ฒฝํ—˜์ด ์—†๋Š”๋ฐ ๊ดœ์ฐฎ์„๊นŒ์š”?

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

Q. ์ด ๊ฐ•์˜๋ฅผ ํ†ตํ•ด MERN Stack์„ ๋ชจ๋‘ ๋งˆ์Šคํ„ฐํ•  ์ˆ˜ ์žˆ๋‚˜์š”?

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

Q. ์–ด๋А ์ •๋„์˜ ์„ ์ˆ˜์ง€์‹์ด ํ•„์š”ํ• ๊นŒ์š”?

์ด ๋ฌธ์„œ๋ฅผ ์‚ดํŽด๋ณด์‹œ๋Š” ๊ฒƒ์ด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ JavaScript์˜ Dataํ˜•๊ณผ(๋ฐฐ์—ด๊ณผ object๋ฅผ ํฌํ•จํ•˜์—ฌ), ์‚ฌ์šฉ์ž ์ •์˜ ํ•จ์ˆ˜์˜ ์„ ์–ธ๊ณผ ์‚ฌ์šฉ ์ •๋„์˜ ์ง€์‹์ด ์žˆ๋‹ค๋ฉด ํฐ ์ง€์žฅ์ด ์—†์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

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

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

  • React๋ฅผ ์ด์šฉํ•ด ์™„์„ฑ๋œ ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ฐœ๋ฐœํ•ด๋ณด๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

  • BackEnd ์ง€์‹์ด ๋ถ€์กฑํ•ด ํ”„๋กœ์ ํŠธ ๊ตฌํ˜„์ด ํž˜๋“  ์‚ฌ๋žŒ

  • ๋ณธ์ธ๋งŒ์˜ ์‚ฌ์ดํŠธ๋ฅผ ์ง์ ‘ ๋ฐฐํฌํ•ด๋ณด๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

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

  • HTML/CSS

  • JavaScript

์•ˆ๋…•ํ•˜์„ธ์š”
ํŒ๋‹ค์ฝ”๋”ฉ์ž…๋‹ˆ๋‹ค.

22,919

๋ช…

์ˆ˜๊ฐ•์ƒ

612

๊ฐœ

์ˆ˜๊ฐ•ํ‰

268

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

6

๊ฐœ

๊ฐ•์˜

๋ฌธ์˜ : nani6765@gmail.com

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

์ „์ฒด

49๊ฐœ โˆ™ (6์‹œ๊ฐ„ 45๋ถ„)

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

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

29๊ฐœ

4.8

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

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

    ์ˆ˜๊ฐ•ํ‰ 1

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

    ๊ฐ•์˜ ๋„ˆ๋ฌด ์œ ์ตํ•˜๊ณ , ์‰ฝ๊ฒŒ ์•Œ๋ ค์ฃผ์‹ญ๋‹ˆ๋‹ค! ์ธํ”„๋Ÿฐ์—์„œ ๋‹ค๋ฅธ ๊ฐ•์˜ ์ด๊ฒƒ์ €๊ฒƒ ๋งŽ์ด ์ˆ˜๊ฐ•ํ•ด๋ดค๋Š”๋ฐ, ๋ฆฌ๋ทฐ ์ฒ˜์Œ ๋‹ฌ์•„๋ณผ ์ •๋„๋กœ ๋งŒ์กฑ๋„ ๋†’์€ ๊ฐ•์˜์—์š” ! ๋””ํ…Œ์ผํ•˜๊ฒŒ AtoZ ๋‹ค๋ค„์ฃผ์‹œ๋Š” ๊ฒƒ๋„ ๋„ˆ๋ฌด ์ข‹์•˜๊ณ , ์กฐ๊ธˆ ๋” ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ํฌ์ธํŠธ๋ฅผ ์ž˜ ์ง‘์–ด์ฃผ์‹  ๊ฒƒ ๊ฐ™์•„์š”. ์‚ฌ์‹ค ๋น„์ „๊ณต์ž๋กœ์„œ ๊ฐœ๋ฐœ๋ฐฐ์šฐ๊ธฐ ๋ง‰๋ง‰ํ–ˆ๋Š”๋ฐ ๊น”๋”ํ•œ ์„ค๋ช…์ด ๋„ˆ๋ฌด ์ข‹์•„์š”. ์ตœ๊ทผ ์—ฌ๋Ÿฌ ์›น์‚ฌ์ดํŠธ์—์„œ ํ™œ์šฉํ•˜๋Š” react ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉํ•˜๋‹ˆ๊นŒ ์‹ค๋ฌด์—์„œ๋„ ๋งŽ์ด ๋„์›€๋  ๊ฑฐ ๊ฐ™๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค! react ๊ด€์‹ฌ ์žˆ์œผ์‹  ๋ถ„๋“ค ์ด ๊ฐ•์˜ ํ•œ๋ฒˆ ๋“ค์œผ๋ฉด ์•„์ฃผ ๊น”๋”ํ•˜๊ฒŒ ์ดํ•ด๋˜์‹ค ๊ฒƒ ๊ฐ™์•„์š” :) ํŒ๋‹ค์ฝ”๋”ฉ๋‹˜ ์ข‹์€ ๊ฐ•์˜ ์ •๋ง ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค !! ๋‹ค๋ฅธ ๊ฐ•์˜๋„ ์–ผ๋ฅธ ๋‚ด์ฃผ์„ธ์š”!!!

    • ํŒ๋‹ค์ฝ”๋”ฉ
      ์ง€์‹๊ณต์œ ์ž

      ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค :) - ์ฒซ ๋ฒˆ์งธ๋กœ ์ˆ˜๊ฐ•ํ‰์„ ๋‚จ๊ฒจ์ฃผ์…จ๋„ค์š”, ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค :) ์ €๋„ ๋น„์ „๊ณต์ž์˜ ์ž…์žฅ์—์„œ ์ฝ”๋”ฉ์„ ์ž…๋ฌธํ•˜์˜€๊ณ , ํ˜„์žฌ ๊ฐœ๋ฐœ์ž๋กœ ์ผํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ฝ”๋”ฉ์„ ๋ฐฐ์šฐ๋ฉฐ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ์  ์ค‘ ํ•˜๋‚˜๋Š” ์ฝ”๋”ฉ์— ๊ด€๋ จ๋œ ํฅ๋ฏธ๋ฅผ ์žƒ์ง€ ์•Š๋Š” ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ์˜๋ฏธ์—์„œ ๋‹จ์ˆœํ•œ ๋ฌธ๋ฒ• ์„ค๋ช…๊ณผ ๋‚˜์—ด์˜ ๊ฐ•์˜๋ฅผ ํƒˆํ”ผํ•˜๊ณ ์ž ๋งŽ์ด ์• ์ผ์Šต๋‹ˆ๋‹ค. ์•ž์œผ๋กœ๋„ ์ฝ”๋”ฉ์— ํฅ๋ฏธ๋ฅผ ์žƒ์ง€ ์•Š์œผ์‹ค ์ˆ˜ ์žˆ๋„๋ก ์• ์จ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

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

    ์ˆ˜๊ฐ•ํ‰ 4

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

    ์†๋„๊ฐ€ ์กฐ๊ธˆ ๋น ๋ฅด๊ธดํ•˜์ง€๋งŒ ๊ดœ์ฐฎ์•„์š” ์—ฌ๋Ÿฌ๋ฒˆ ๋“ค์œผ๋ฉด๋ฉ๋‹ˆ๋‹ค~~ ์ด์ œ 30% ์กฐ๊ธˆ ๋„˜๊ฒผ๋Š”๋ฐ ์žฌ๋ฐŒ์–ด์š” ~ ๋ทฐ๋กœ ๊ฐœ๋ฐœํ•˜๋‹ค๊ฐ€ ๋ฆฌ์•กํŠธ ํ•ด๋ณด๋ ค๋‹ˆ ๊ฒ๋‚ฌ์—ˆ๋Š”๋ฐ ๊ฐ•์‚ฌ๋‹˜๋•๋ถ„์— ์žฌ๋ฐŒ๊ฒŒ ํ•˜๊ณ ์žˆ์–ด์š”! // ์ถ”๊ฐ€ ๋„ˆ๋ฌด ๋ฐ”๋นด์–ด์„œ ๋๊นŒ์ง€ ๋“ฃ๋Š”๋ฐ ์‹œ๊ฐ„์ด ๊ฝค ์˜ค๋ž˜๊ฑธ๋ ธ๋„ค์š” ใ…œใ…œ ์–ป์–ด๊ฐ€๋Š”๊ฒŒ ๋„ˆ๋ฌด ๋งŽ์•„์„œ ์–ด๋–ป๊ฒŒ ๊ฐ์‚ฌ๋“œ๋ ค์•ผ ํ• ์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค! ์›น๊ฐœ๋ฐœ์ด ์–ด๋–ค์‹์œผ๋กœ ์ง„ํ–‰๋˜๋Š”์ง€ ํฐ ๊ทธ๋ฆผ ์žก๊ธฐ ๋„ˆ๋ฌด ์ข‹์•˜๊ณ  ์•„์ง ๋งŽ์ด ๋ถ€์กฑํ•œ ๋ถ€๋ถ„๋“ค์„ ์•Œ๊ฒŒ ๋˜์—ˆ๊ธฐ์— ๊ทธ ๋ถ€๋ถ„์€ ์ œ๊ฐ€ ๋”ฐ๋กœ ํ”„๋กœ์ ํŠธ ์ง„ํ–‰ํ•˜๋ฉด์„œ ๋” ๊ณต๋ถ€ํ•ด ๋‚˜๊ฐˆ ์ƒ๊ฐ์ž…๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค~

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

    ์ˆ˜๊ฐ•ํ‰ 1

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

    ๊ธฐ๋Œ€ํ–ˆ๋˜ ๊ฒƒ ๋ณด๋‹ค ๋” ์—ฌ๋Ÿฌ๊ฐ€์ง€๋ฅผ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์—ˆ๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋‹จ์ˆœํžˆ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์™€ ๊ธฐ์ˆ ์Šคํƒ์˜ ์‚ฌ์šฉ๋ฒ•๋งŒ์ด ์•„๋‹Œ ์‘์šฉํ•˜๋Š” ๋ฒ•์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์—ˆ๊ณ  ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ์‹์˜ ์ฐจ์ด๋กœ ์ธํ•ด ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๊ฐœ์„ ์ ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

    • ํŒ๋‹ค์ฝ”๋”ฉ
      ์ง€์‹๊ณต์œ ์ž

      ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค :) - ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ๋‹ต๋ณ€์ด ๋Šฆ์—ˆ๋„ค์š”! ๋‹จ์ˆœํžˆ ๋ฌธ๋ฒ•์„ ๋ฐฐ์šฐ๋Š” ๋ฐ์— ๊ทธ์น˜์ง€ ๋งˆ์‹œ๊ณ  ๊ทธ๊ฒƒ์„ ์‘์šฉํ•˜๊ณ  ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์›Œ๊ฐ€์…จ์œผ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค (__)

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

    ์ˆ˜๊ฐ•ํ‰ 1

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

    ์ง„ํ–‰์†๋„ ๊ฐœ๋นจ๋ผ์„œ ์ข€ ๋นก์…‰๋‹ˆ๋‹ค. ๊ทผ๋ฐ ๋ฐฑ์—”๋“œ๋ถ€๋ถ„ ๋„ˆ๋ฌด ์œ ์šฉํ•œ๊ฑฐ๊ฐ™์•„์š”. ์ดˆ๋ณด์—ฌ๋„ ๋ณผ๋งŒํ•œ๋“ฏ. ๊ณ„์† ๋ฐ˜๋ณตํ•ด์„œ ๋ณผ ์˜ˆ์ •

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

    ์ˆ˜๊ฐ•ํ‰ 4

    โˆ™

    ํ‰๊ท  ํ‰์  4.8

    4

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

    React์™€ node๋ฅผ ํ•œ๋ฒˆ์”ฉ ๋‹ค๋ค„๋ณธ ํ›„ ๊ฐ•์˜ ์ˆ˜๊ฐ•ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ „๋ฐ˜์ ์œผ๋กœ ์˜ˆ์ „์— ๋ฐฐ์šด ๋‚ด์šฉ์„ ํ›‘์œผ๋ฉฐ ์ƒ๊ธฐ์‹œํ‚ค๊ธฐ์— ์ข‹์•˜๊ณ  react์™€ node๋ฅผ ์–ด๋–ป๊ฒŒ ์—ฐ๊ฒฐํ•˜์—ฌ ๋‹ค๋ฃฐ์ง€ ๋ง‰๋ง‰ํ–ˆ๋Š”๋ฐ axios๋กœ ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ ๋ฐ์ดํ„ฐ ์˜ฎ๊ธฐ๋Š” ๋ฒ•์„ ์•Œ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋งŒ ์•„์‰ฌ์› ๋˜ ์ ์€ ๊ฐ•์‚ฌ๋‹˜ ide์— ํฐํŠธ๊ฐ€ ๋„ˆ๋ฌด ์ž‘์•„์„œ ์ œ ํƒœ๋ธ”๋ฆฟ์œผ๋กœ ๊ฐ•์˜๋ฅผ ๋ณด๋ฉด ๊ฐ€๋…์„ฑ์ด ์ข‹์ง€ ์•Š์•˜๊ณ  ์งง์€ ์ˆ˜์—…์œผ๋กœ ๋‹ค์–‘ํ•˜๊ฒŒ ์ „๋ฐ˜์ ์œผ๋กœ ๋‹ค๋ค„์ฃผ์‹œ๋ ค๋‹ค๋ณด๋‹ˆ reduxํŒŒํŠธ๋Š” ์ฝ”๋“œ๊ฐ€ ์ „ํ˜€ ์ดํ•ด๊ฐ€ ๋˜์งˆ ์•Š์•„์„œ ์˜ˆ์ „์— ๋ดค๋˜ ๊ฐ•์˜๋ฅผ ํ•œ๋ฒˆ ๋” ๋’ค์ ์—ฌ๋ดค์Šต๋‹ˆ๋‹ค. ์•„๋งˆ์กด S3๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋„ค์ด๋ฒ„ ํด๋ผ์šฐ๋“œ๋ฅผ ์ด์šฉํ•˜๋Š” ๊ฒƒ์ธ ์ค„๋„ ์‚ฌ์‹ค ๋ชฐ๋ž์Šต๋‹ˆ๋‹ค. ์ด๊ฑด ์ œ ์ž˜๋ชป์ด๊ตฐ์š”. ๋งˆ์ง€๋ง‰์œผ๋กœ๋Š” ์งˆ๋ฌธ์„ ์˜ฌ๋ ค๋„ ๋‹ต๋ณ€์ด 2์ฃผ์งธ ์•ˆ ์˜ค๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ•์‚ฌ๋‹˜์ด ๋ฐ”์˜์‹ ๊ฑด์ง€ ใ… ใ… .. ์œ ๋ฃŒ ๊ฐ•์˜์ธ ๋งŒํผ ์กฐ๊ธˆ ๋” ์งˆ๋ฌธ ๋‹ต๋ณ€์— ์‹ ๊ฒฝ์จ์ฃผ์…จ์œผ๋ฉด ํ•˜๋Š” ๋งˆ์Œ์ด ์žˆ๋„ค์š”. ๊ทธ๋ž˜๋„ ์ „๋ฐ˜์ ์œผ๋กœ ํ”„๋ก ํŠธ, ๋ฐฑ์—”๋“œ, db, ์™ธ๋ถ€ ์ €์žฅ์†Œ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•ด์•ผ ํ• ์ง€ ํฐ ๊ทธ๋ฆผ์„ ์žก์„ ์ˆ˜ ์žˆ๋Š”๊ฑด ์ข‹์•˜์Šต๋‹ˆ๋‹ค.

ํŒ๋‹ค์ฝ”๋”ฉ๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

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

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

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

โ‚ฉ38,500