MERN Stack์ ํ์ฉํ์ฌ ์ปค๋ฎค๋ํฐ ์ดํ๋ฆฌ์ผ์ด์ ์ ์ ์ํ๊ณ , ๋ฐฐํฌํฉ๋๋ค. (MongoDB, Express, React, Node + Firebase)
React
Express
MongoDB (Mongoose)
Firebase (Authentication)
AWS E3 (Naver Cloud Service)
MERN Stack์ผ๋ก ๋ฐฐ์ฐ๋ ํ์คํ ์น ํ๋ก๊ทธ๋๋ฐ!
React
(๋ฆฌ์กํธ)
Express
(์ต์คํ๋ ์ค)
MongoDB/Mongoose
(๋ชฝ๊ณ DB/๋ชฝ๊ตฌ์ค)
Firebase
(ํ์ด์ด๋ฒ ์ด์ค)
React๋ Facebook์์ ๋ง๋ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์
๋๋ค.
Vue.js, Angular ๋ฑ ์ค๋๋ ์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ ์ ์๋ ๋ง์ Javascript Framework/Library๊ฐ ์์์๋ React๋ Front-end ์ธ์์์ ๊ฐ์ฅ ์ธ๊ธฐ์๊ณ , ๊ฐ๋ฐ์๊ฐ ๊ฐ์ฅ ๋ง์ด ์ฐพ๋ ์ต์
์ค ํ๋์
๋๋ค.
1๏ธโฃ JSX
Javascript XML์ผ๋ก์, XML/HTML๊ณผ ๊ฐ์ ๋ฌธ๋ฒ์ ๋๋ค. HTML๊ณผ ์ ์ฌํ ์ฝ๋๊ฐ JS ์์์ ๋์๋ ์ ์๋๋ก ํ๋ฉฐ ์ด๋ ๋ค์ ๋ธ๋ผ์ฐ์ ๊ฐ ์ฝ์ ์ ์๋ JS๋ก ์ต์ ํ๋์ด ๋ ๋๋ง๋๊ธฐ ๋๋ฌธ์ ์ผ๋ฐ JS๋ณด๋ค ํจ์ฌ ๋น ๋ฅธ ์๋๋ฅผ ์๋ํฉ๋๋ค.
2๏ธโฃ Virtual DOM
2013๋ ์ด์ ์๋ ์น์ฌ์ดํธ ํน์ ์นํ์ด์ง๊ฐ ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉ์์๊ฒ ๋ณด์ฌ์ฃผ๋ ค๋ฉด ํญ์ ์๋ก๊ณ ์นจ์ ์ด์ฉํด์ผ ํ์ต๋๋ค. ๊ทธ๋ฌ๋ React๋ ํ์ํ ๋ถ๋ถ๋ง ๋ฐ์ดํฐ๊ฐ ๋ฐ๋๋ ๋ถ๋ถ๋ง ์๋ก ๋ณด์ฌ์ฃผ๋ฉฐ ์นํ์ด์ง๋ฅผ ์ฌ๋ ๋๋งํ ํ์๊ฐ ์์ต๋๋ค. ์ด๋ ์ฌ์ฉ์๊ฐ ์ฑ๊ณผ ์ ์ฌํ ๊ฒฝํ์ React WEB/APP์์ ์ ๊ณตํด์ค ์ ์๋จ ๋ป์ด์ฃ !
๊ฒ์๊ธ ์์ฑ, ํ์๊ฐ์ ๋ฑ ๋ค์ํ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์ด๋ณด๋ฉฐ ์ปค๋ฎค๋ํฐ ์ฌ์ดํธ์ ํ์ํ ๋ชจ๋ ๊ธฐ๋ฅ์ ๊ตฌํํฉ๋๋ค. ํ์์ ๋ฐ๋ผ Hook์ ์ปดํฌ๋ํธ ์ฌ์ดํด์ ๋ง์ถ์ด ์ ๊ณตํ๊ณ , User ์๋น์ค๋ Firebase๋ฅผ ์ฌ์ฉํ์ฌ ๋น ๋ฅด๊ฒ ๊ฐ๋ฐํ๋ฉฐ ์ด๋ Redux๋ฅผ ์ฌ์ฉํด ๊ด๋ฆฌ๋ฉ๋๋ค.
Express๋ฅผ ํตํด ์น ์๋ฒ๋ฅผ ์ ์ํ๊ณ , React๋ก ๋ง๋ ์ฑ์ ๋ณด์ฌ์ค๋๋ค. ํด๋ผ์ด์ธํธ๋จ์์ ์ ์ก๋๋ ํ ์คํธ/์ด๋ฏธ์ง ๋ฐ์ดํฐ๋ค์ DB, ํน์ ์๋ฒ์ ์ ์ฅํฉ๋๋ค. ์ด๋ฒ ๊ฐ์์์ Naver Cloud๋ฅผ ์ฌ์ฉํ์ฌ ์ธ๋ถ ์คํ ๋ฆฌ์ง์ ์ด๋ฏธ์ง๋ฅผ ์ ์ฅํ๋ ๋ฒ ์ญ์ ํ์ตํฉ๋๋ค.
NoSQL DB์ธ MongoDB๋ฅผ Mongoose๋ฅผ ํตํด ๊ด๋ฆฌํฉ๋๋ค. ๊ฒ์๊ธ ์ ๋ณด์ ์ฌ์ฉ์ ์ ๋ณด๋ฅผ DB์ ์ ์ฅํ๊ณ , ์ฝ๊ณ , ์์ ํ๊ณ , ์ญ์ ํ๋ CRUD ๊ณผ์ ์ ๋ํด ํ์ตํฉ๋๋ค. ์ด ๊ณผ์ ์์ Mongoose๋ฅผ ์ฌ์ฉํ์ฌ MongoDB์์ ๋ชจ๋ธ์ ์์ฑํ๊ณ , ๊ทธ ๋ชจ๋ธ์ ๋ค์ํ method๋ก ๋ค๋ฃน๋๋ค.
๋น ๋ฅด๊ฒ 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๋ถ)
ํด๋น ๊ฐ์์์ ์ ๊ณต:
Introduction
02:59
MEAN Stack
06:40
Setting
02:14
Create-React-App
04:31
Component
11:09
JSX
11:42
useState (1)
08:01
useState (2)
06:21
useState (3)
07:50
react-router-dom
10:06
props
06:24
useEffect
06:52
Express
12:10
MongoDB
08:45
axios & cors
11:42
Mongoose Model
08:13
React Bootstrap
06:55
Emotion
13:47