- ํ๋ฃจ๋ฅผ ๊ธฐ๋กํ๋ ์จ๋ผ์ธ ์ผ๊ธฐ์ฅ ์ ๋๋ค.
- ์ค๋ ํ๋ฃจ ์ด๋ ๋ ์ง ์ ๊ณ ์ฌ์ง์ ์ ์ฅํ ์ ์์ต๋๋ค.
- ์ผ๊ธฐ์ฅ์ ๋ด๊ธด ๋์ ๊ธฐ๋ถ์ ๋ถ์ํ๊ณ , ์ด๋ค ํ๋ฃจ์๋ ์ง ๋ณด์ฌ์ค ์ ์์ต๋๋ค.
- ์์ ์ ๊ฐ์ ์ ์์งํ๊ฒ ๋๋ฌ๋ด๊ณ , ๊ธฐ๋กํ ์ ์์ต๋๋ค.
- Local ํ๊ฒฝ์์ ์คํํ๋ ๊ฒ์ ๊ฐ์ ํ์ ๋ ํ์ํ ๊ฒ๋ค
1-1) Firebase API Key
1-2) Google Cloud API Key
1-3) Cloudinary Image Upload URL
- Git Clone & ์คํ
- Frontend
#1 git clone
git clone https://github.com/Kwongiseok/Emotion-Diary.git
#2 Firebase API Key
https://console.firebase.google.com/?hl=ko ๋ก ์ ์ํ์ฌ API Key๋ฅผ ์์ฑ
#3 Cloudinary Image Upload URL ์์ฑ
https://cloudinary.com/ ์ฌ์ดํธ์ ์ ์
#4 ์ต์๋จ ๋๋ ํ ๋ฆฌ์ .env ํ์ผ (ํ๊ฒฝ ๋ณ์ ๊ด๋ฆฌ) ํ์ผ์ ์์ฑ
.env ํ์ผ ๋ด์ ์์ฑํ Firebase Key, Cloudinary Upload URL์ ๋ณ์๋ก ๋์
REACT_APP_FIREBASE_API_KEY = "your API key"
REACT_APP_FIREBASE_PROJECT_ID = "your Project ID key"
REACT_APP_FIREBASE_STORAGE_BUCKET = "your Storage Bucket key"
REACT_APP_FIREBASE_DATABASE_URL = "your Database Url key"
REACT_APP_FIREBASE_APP_ID = "your App ID key"
REACT_APP_FIREBASE_AUTH_DOMAIN = "your Auth Domain key"
REACT_APP_CLOUDINARY_URL = "your Cloudinary URL"
#5 npm install
#6 npm start
- Backend
#1 git clone https://github.com/Kwongiseok/Emotion-Diary-Back.git
#2 Google Cloud Project ์์ฑ ํน์ ์ ํ, ํ๋ก์ ํธ์์ Google Natural Language API๋ฅผ ์ฌ์ฉ ์ค์ ํฉ๋๋ค.
#3 Google Cloud Key
https://cloud.google.com/?hl=ko
์ ์ฃผ์๋ก ์ ์ํ์ฌ ๋น๊ณต๊ฐ cloud API key JSON์ผ๋ก ๋ค์ด๋ก๋ ํฉ๋๋ค.
#4 ํด๋น ํด๋๊ฐ ์๋ ๊ฒฝ๋ก์์ ํ๊ฒฝ๋ณ์ ์ค์ ํฉ๋๋ค.
export GOOGLE_APPLICATION_CREDENTIALS="[PATH]"
export GOOGLE_APPLICATION_CREDENTIALS="/home/user/Downloads/my-key.json"
#5 npm install
#6 npm start
์ฐ๋ฆฌ๊ฐ ๋ณด๋ด๋ ํ๋ฃจ๋ค์ด ๋๋ถ๋ถ ํ๋ฒํ ๋ ๋ค์ด๋ผ ๋๊ปด์ง ๊ฒ๋๋ค. ํ๋ฒํ ํ๋ฃจ๋ค์ด ์์ฌ ์ง๊ธ์ ๋ด๊ฐ ๋ง๋ค์ด์ง ๊ฒ์ฒ๋ผ ๊ฒฐ์ฝ ํ๋ฒํ๋ค๊ณ ํด์ ๊ฐ๋ณ๊ณ ๋น์ฐํ ๋ ๋ค์ ์๋ ๊ฒ๋๋ค.
๋ง์ด ํ๋ค์๋ ๋ , ํ๋ณตํ๊ณ ์ฆ๊ฑฐ์ ๋ ๋ , ๋ ์๋ฌด์ผ์ด ์๋ ๋ ์ด๋ผ๋, ๋ด๊ฐ ์ง๋ด์จ ์ค์ํ ๋๋ ๋ค์ ์ฌ์ง๊ณผ ํจ๊ป ๊ธฐ๋กํ๊ณ ์ถ์ด ์ผ๊ธฐ์ฅ์ ๋ง๋ค๊ธฐ๋ก ํ์ต๋๋ค.
๋, ์ผ๊ธฐ๋ ๊ทธ ๋ ์ ์ข์๋ ์ ๊ณผ ๋๋นด๋ ์ ๋ค์ด ๋ชจ๋ ๋ด๊ฒจ์ ธ ์์ด ์จ์ ํ ๋์ ๋ด๋ฉด์ ๋ง์ฃผํ ์ ์๋ ์ข์ ์๋จ์ด๋ผ ์๊ฐํฉ๋๋ค.
๋ด๊ฐ ๊ธฐ๋กํ๋ ๋ ๋ค์ ๊ฐ์ ์ ๋ถ์ํ๊ณ , ๊ทธ ๋ ์ ๊ฐ์ ์ ๊ฐ๊ด์ ์ผ๋ก ํํํด์ค ์ ์๋ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๋ค๋ฉด ์ข ๋ ์์งํ ๊ฐ์ ์ ๋ง์ฃผํ ์ ์์๊ฑฐ๋ผ ์๊ฐํ์ต๋๋ค.
์ด๋์๋ ์ฝ๊ฒ ์์ฑํ๊ณ , ์ด์ด๋ณผ ์ ์๋ ๋๋ง์ ์ํ ์ผ๊ธฐ์ฅ์ ๊ฐ๋ฐ ๋ชฉ์ ์ ๋๋ค.
React์ createPortal์ ์ฌ์ฉํ์ฌ ๋ก๊ทธ์ธ ์ฐฝ์ ์๋ก์ด DOM์ Renderingํ๋ ๊ฒ์ผ๋ก ๊ตฌํํ์ต๋๋ค. event๋ฅผ ๋ฑ๋กํด ๋ก๊ทธ์ธ ์ฐฝ ์ธ๋ถ๋ฅผ ํด๋ฆญํ์ ๋ ๋ซํ๋๋ก ํ์ต๋๋ค.
์ฌ์ง์ด ์์ ๊ฒฝ์ฐ ์ฌ์ง์, ์ฌ์ง์ด ์์ ๊ฒฝ์ฐ ์ ๋ชฉ์ preview ํ์์ผ๋ก ๋ณผ ์ ์์ต๋๋ค.
์นด๋๋ฅผ Hoverํ๊ฒ๋๋ฉด ์ ๋ชฉ๊ณผ ์ฒซ ์ค์ ๋ด์ฉ์ด ๋ณด์ฌ์ง๋๋ค.
์ผ๊ธฐ ์์ฑ์ ๋ฌ๋ ฅ์ ํด๋ฆญํ๋ฉด ํด๋น ๋ ์ง์ ์ผ๊ธฐ๋ฅผ ๊ธฐ๋กํ ์ ์์ต๋๋ค.
์ผ๊ธฐ์ฅ Form์ createPortal๋ก ์๋ก์ด DOM์ ๊ทธ๋ ค์ค๋๋ค.
๋ฌ๋ ฅ์๋ ๊ธฐ๋กํ ๋ ๋ค์ ๊ฐ์ ๋ค์ด ํจ๊ป ๋ณด์ฌ์ง๋๋ค.
๊ฐ์ ๋ถ์ ์ด๋ชจํฐ์ฝ์ ๋๋ฅด๊ฒ ๋๋ฉด
์์ฑํ ์ผ๊ธฐ ๋ด์ฉ์ ํ ๋๋ก ๊ทธ ๋ ์ ๊ฐ์ ์ ๋์จ , ๋ณดํต , ์ข์์ผ๋ก ๋๋
์ด๋ชจ์ง๋ก ๊ฐ์ ์ ํํํฉ๋๋ค. (Heroku๊ฐ ์๊ณ ์์ผ๋ฉด ์๊ฐ์ด ์ฝ๊ฐ ๊ฑธ๋ฆด ์ ์์ต๋๋ค!)
์ผ๊ธฐ ์นด๋๋ฅผ ํด๋ฆญํด์ ์ผ๊ธฐ์ฅ์ ์ด์์ ๋
createPortal์ ์ด์ฉํด ์๋ก์ด DOM์์ ๋ ๋๋งํ์์ต๋๋ค.
์ผ๊ธฐ์ฅ์๋ ์์ ํ๊ธฐ , ์ญ์ ๊ธฐ๋ฅ์ด ํฌํจ๋์ด ์์ต๋๋ค.
-
Frontend
React Hooks CSS Module Axios Firebase Antd Cloudinary date-fns createPortal -
Backend
Node.js Express Cors Google Cloud API
์ผ๊ธฐ์ฅ์ ๋ก์ง์ ๊ฐ๋จํ๋ค ์๊ฐํ์ง๋ง, ์ผ๊ธฐ์ ํน์ฑ์ ๋ ์ง๊ฐ ์ค์ํ๋ค ๋ณด๋ ๋๋ถ๋ถ์ ์ปดํฌ๋ํธ๋ค์ด ๋ ์ง๋ก ๋ฌถ์ด๊ฒ ๋์์ต๋๋ค. Hooks๋ก๋ง ์ํ๊ด๋ฆฌ๋ฅผ ํ๋ค๋ณด๋ ํด๋น ๋ฌ์ ๋ฆฌ์คํธ๋ฅผ ๋ฐ์์ค๋ ๊ฒ, ๋ฌ๋ ฅ์ ์์ฑํ ๋ ์ง ๋ฑ props๋ฅผ ํ๊ณ ํ๊ณ ๋์ด๊ฐ๋ ๊ฒฝ์ฐ๊ฐ ์์ด ํ๋ก์ ํธ๊ฐ ๋ณต์กํ๊ฒ ์งํ๋ ๊ฒ ๊ฐ์ต๋๋ค.
๋ณต์กํ ๋งํผ ๋ง์ ์ปดํฌ๋ํธ๋ค์ด ํ์ํ๊ณ , ์ด๋ฅผ ํ๋ํ๋ ๋ง๋ค์ด๋์ผ๋ก์จ ๋ฆฌ์กํธ์ ์ ์ ๋ ์ต์ํด์ง ์ ์์์ต๋๋ค.
์๋ฅผ ๋ค๋ฉด ์ญ์ ๋ ์์ ์ฒ๋ผ ์์ํ ์ ํ๋ฆฌ์ผ์ด์ ๊ธฐ๋ฅ๋ค์ ์ฌ์ธ ๊ฒ ๊ฐ์์ผ๋, ๋ง์ ๊ตฌํํ๋ค ๋ณด๋ ๋ง์ฃผํ๋ ์ํ ๊ด๋ฆฌ๋ก ์ธํด ์ ๋ฅผ ๋จน๊ธฐ๋ ํ์ต๋๋ค.
์ด๋ก ์์ผ๋ก ์๊ณ ์๋ ๊ฒ์ ํ๋ก์ ํธ๋ฅผ ํตํด ๊ฒฝํ์ผ๋ก ๋ น์ฌ ๋ธ ๋์ ์์ ๊ฐ์ ์ป๊ธฐ๋ ํ๊ณ , ์ฒ์๋ถํฐ ๋๊น์ง ๋ฌธ์ ํด๊ฒฐ์ ์ฐพ์๋ด๊ณ , ์์ฑํ ์ฒซ ๋ฆฌ์กํธ ํ๋ก์ ํธ์ธ ๋งํผ ๋ฟ๋ฏํ๊ณ , ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ฌ๋ฏธ๋ฅผ ์ ์ ์์๋ ๊ธฐํ์์ต๋๋ค.