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

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

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

Thumbnail

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

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

  • 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

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

21,335

๋ช…

์ˆ˜๊ฐ•์ƒ

509

๊ฐœ

์ˆ˜๊ฐ•ํ‰

268

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

6

๊ฐœ

๊ฐ•์˜

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

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

์ „์ฒด

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

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

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

์ˆ˜๊ฐ•ํ‰

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