Skip to content

Kwongiseok/Emotion-Diary

Repository files navigation

๐Ÿ“– Emotion Diary ๊ฐ์ • ์ผ๊ธฐ


แ„†แ…ฆแ„‹แ…ตแ†ซแ„’แ…ชแ„†แ…งแ†ซ

  • ํ•˜๋ฃจ๋ฅผ ๊ธฐ๋กํ•˜๋Š” ์˜จ๋ผ์ธ ์ผ๊ธฐ์žฅ ์ž…๋‹ˆ๋‹ค.
  • ์˜ค๋Š˜ ํ•˜๋ฃจ ์–ด๋• ๋Š” ์ง€ ์ ๊ณ  ์‚ฌ์ง„์„ ์ €์žฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์ผ๊ธฐ์žฅ์— ๋‹ด๊ธด ๋‚˜์˜ ๊ธฐ๋ถ„์„ ๋ถ„์„ํ•˜๊ณ , ์–ด๋–ค ํ•˜๋ฃจ์˜€๋Š” ์ง€ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์ž์‹ ์˜ ๊ฐ์ •์„ ์†”์งํ•˜๊ฒŒ ๋“œ๋Ÿฌ๋‚ด๊ณ , ๊ธฐ๋กํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ”— Link

๐Ÿ How to start project


  1. Local ํ™˜๊ฒฝ์—์„œ ์‹คํ–‰ํ•˜๋Š” ๊ฒƒ์„ ๊ฐ€์ •ํ–ˆ์„ ๋•Œ ํ•„์š”ํ•œ ๊ฒƒ๋“ค 1-1) Firebase API Key 1-2) Google Cloud API Key 1-3) Cloudinary Image Upload URL
  2. 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

๐Ÿ’ช ๊ฐ์ • ์ผ๊ธฐ๋ฅผ ๋งŒ๋“  ์ด์œ 


์šฐ๋ฆฌ๊ฐ€ ๋ณด๋‚ด๋Š” ํ•˜๋ฃจ๋“ค์ด ๋Œ€๋ถ€๋ถ„ ํ‰๋ฒ”ํ•œ ๋‚ ๋“ค์ด๋ผ ๋Š๊ปด์งˆ ๊ฒ๋‹ˆ๋‹ค. ํ‰๋ฒ”ํ•œ ํ•˜๋ฃจ๋“ค์ด ์Œ“์—ฌ ์ง€๊ธˆ์˜ ๋‚ด๊ฐ€ ๋งŒ๋“ค์–ด์ง„ ๊ฒƒ์ฒ˜๋Ÿผ ๊ฒฐ์ฝ” ํ‰๋ฒ”ํ•˜๋‹ค๊ณ  ํ•ด์„œ ๊ฐ€๋ณ๊ณ  ๋‹น์—ฐํ•œ ๋‚ ๋“ค์€ ์•„๋‹ ๊ฒ๋‹ˆ๋‹ค.

๋งŽ์ด ํž˜๋“ค์—ˆ๋˜ ๋‚ , ํ–‰๋ณตํ•˜๊ณ  ์ฆ๊ฑฐ์› ๋˜ ๋‚ , ๋˜ ์•„๋ฌด์ผ์ด ์—†๋˜ ๋‚ ์ด๋ผ๋„, ๋‚ด๊ฐ€ ์ง€๋‚ด์˜จ ์ค‘์š”ํ•œ ๋‚˜๋‚ ๋“ค์„ ์‚ฌ์ง„๊ณผ ํ•จ๊ป˜ ๊ธฐ๋กํ•˜๊ณ  ์‹ถ์–ด ์ผ๊ธฐ์žฅ์„ ๋งŒ๋“ค๊ธฐ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋˜, ์ผ๊ธฐ๋Š” ๊ทธ ๋‚ ์˜ ์ข‹์•˜๋˜ ์ ๊ณผ ๋‚˜๋นด๋˜ ์ ๋“ค์ด ๋ชจ๋‘ ๋‹ด๊ฒจ์ ธ ์žˆ์–ด ์˜จ์ „ํžˆ ๋‚˜์˜ ๋‚ด๋ฉด์„ ๋งˆ์ฃผํ•  ์ˆ˜ ์žˆ๋Š” ์ข‹์€ ์ˆ˜๋‹จ์ด๋ผ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ๊ธฐ๋กํ–ˆ๋˜ ๋‚ ๋“ค์˜ ๊ฐ์ •์„ ๋ถ„์„ํ•˜๊ณ , ๊ทธ ๋‚ ์˜ ๊ฐ์ •์„ ๊ฐ๊ด€์ ์œผ๋กœ ํ‘œํ˜„ํ•ด์ค„ ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•œ๋‹ค๋ฉด ์ข€ ๋” ์†”์งํ•œ ๊ฐ์ •์„ ๋งˆ์ฃผํ•  ์ˆ˜ ์žˆ์„๊ฑฐ๋ผ ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.

์–ด๋””์„œ๋“  ์‰ฝ๊ฒŒ ์ž‘์„ฑํ•˜๊ณ , ์—ด์–ด๋ณผ ์ˆ˜ ์žˆ๋Š” ๋‚˜๋งŒ์„ ์œ„ํ•œ ์ผ๊ธฐ์žฅ์˜ ๊ฐœ๋ฐœ ๋ชฉ์ ์ž…๋‹ˆ๋‹ค.

๐Ÿ™Œ๐Ÿผ Project Demo

1. ๋กœ๊ทธ์ธ ํ™”๋ฉด

React์˜ createPortal์„ ์‚ฌ์šฉํ•˜์—ฌ ๋กœ๊ทธ์ธ ์ฐฝ์„ ์ƒˆ๋กœ์šด DOM์— Renderingํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค. event๋ฅผ ๋“ฑ๋กํ•ด ๋กœ๊ทธ์ธ ์ฐฝ ์™ธ๋ถ€๋ฅผ ํด๋ฆญํ–ˆ์„ ๋•Œ ๋‹ซํžˆ๋„๋ก ํ–ˆ์Šต๋‹ˆ๋‹ค. แ„…แ…ฉแ„€แ…ณแ„‹แ…ตแ†ซแ„’แ…ชแ„†แ…งแ†ซ

2. ๋‚ด ์ผ๊ธฐ์žฅ ๋ฆฌ์ŠคํŠธ

์‚ฌ์ง„์ด ์žˆ์„ ๊ฒฝ์šฐ ์‚ฌ์ง„์„, ์‚ฌ์ง„์ด ์—†์„ ๊ฒฝ์šฐ ์ œ๋ชฉ์„ preview ํ˜•์‹์œผ๋กœ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์นด๋“œ๋ฅผ Hoverํ•˜๊ฒŒ๋˜๋ฉด ์ œ๋ชฉ๊ณผ ์ฒซ ์ค„์˜ ๋‚ด์šฉ์ด ๋ณด์—ฌ์ง‘๋‹ˆ๋‹ค. myDiarypage1 myDiarypage2

3. ์ผ๊ธฐ ์ž‘์„ฑ

์ผ๊ธฐ ์ž‘์„ฑ์€ ๋‹ฌ๋ ฅ์„ ํด๋ฆญํ•˜๋ฉด ํ•ด๋‹น ๋‚ ์งœ์˜ ์ผ๊ธฐ๋ฅผ ๊ธฐ๋กํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ผ๊ธฐ์žฅ Form์€ createPortal๋กœ ์ƒˆ๋กœ์šด DOM์— ๊ทธ๋ ค์ค๋‹ˆ๋‹ค. ๋‹ฌ๋ ฅ์—๋Š” ๊ธฐ๋กํ•œ ๋‚ ๋“ค์˜ ๊ฐ์ •๋“ค์ด ํ•จ๊ป˜ ๋ณด์—ฌ์ง‘๋‹ˆ๋‹ค. แ„‹แ…ตแ†ฏแ„€แ…ตแ„Œแ…กแ†จแ„‰แ…ฅแ†ผ

4. ๊ฐ์ • ๋ถ„์„

๊ฐ์ • ๋ถ„์„ ์ด๋ชจํ‹ฐ์ฝ˜์„ ๋ˆ„๋ฅด๊ฒŒ ๋˜๋ฉด ์ž‘์„ฑํ•œ ์ผ๊ธฐ ๋‚ด์šฉ์„ ํ† ๋Œ€๋กœ ๊ทธ ๋‚ ์˜ ๊ฐ์ •์„ ๋‚˜์จ , ๋ณดํ†ต , ์ข‹์Œ์œผ๋กœ ๋‚˜๋ˆ  ์ด๋ชจ์ง€๋กœ ๊ฐ์ •์„ ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค. (Heroku๊ฐ€ ์ž๊ณ ์žˆ์œผ๋ฉด ์‹œ๊ฐ„์ด ์•ฝ๊ฐ„ ๊ฑธ๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!) แ„€แ…กแ†ทแ„Œแ…ฅแ†ผ แ„‡แ…ฎแ†ซแ„‰แ…ฅแ†จ

5. ์ผ๊ธฐ์žฅ ์—ด๊ธฐ

์ผ๊ธฐ ์นด๋“œ๋ฅผ ํด๋ฆญํ•ด์„œ ์ผ๊ธฐ์žฅ์„ ์—ด์—ˆ์„ ๋•Œ createPortal์„ ์ด์šฉํ•ด ์ƒˆ๋กœ์šด DOM์œ„์— ๋ Œ๋”๋งํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์ผ๊ธฐ์žฅ์—๋Š” ์ˆ˜์ •ํ•˜๊ธฐ , ์‚ญ์ œ ๊ธฐ๋Šฅ์ด ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. แ„‹แ…ตแ†ฏแ„€แ…ตแ„Œแ…กแ†ผ แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2021-03-01 แ„‹แ…ฉแ„’แ…ฎ 1 48 40

๐Ÿ‘จโ€๐Ÿ’ป Tech Stack


  • Frontend

    React
    Hooks
    CSS Module
    Axios
    Firebase
    Antd
    Cloudinary
    date-fns
    createPortal
  • Backend

    Node.js
    Express
    Cors
    Google Cloud API

๐Ÿฅณ ํ”„๋กœ์ ํŠธ ์™„์„ฑ ํ›„ ์†Œ๊ฐ

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

๋ณต์žกํ•œ ๋งŒํผ ๋งŽ์€ ์ปดํฌ๋„ŒํŠธ๋“ค์ด ํ•„์š”ํ–ˆ๊ณ , ์ด๋ฅผ ํ•˜๋‚˜ํ•˜๋‚˜ ๋งŒ๋“ค์–ด๋ƒ„์œผ๋กœ์จ ๋ฆฌ์•กํŠธ์— ์ ์  ๋” ์ต์ˆ™ํ•ด์งˆ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

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

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published