- 하루를 기록하는 온라인 일기장 입니다.
- 오늘 하루 어땠는 지 적고 사진을 저장할 수 있습니다.
- 일기장에 담긴 나의 기분을 분석하고, 어떤 하루였는 지 보여줄 수 있습니다.
- 자신의 감정을 솔직하게 드러내고, 기록할 수 있습니다.
- 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를 타고타고 넘어가는 경우가 있어 프로젝트가 복잡하게 진행된 것 같습니다.
복잡한 만큼 많은 컴포넌트들이 필요했고, 이를 하나하나 만들어냄으로써 리액트에 점점 더 익숙해질 수 있었습니다.
예를 들면 삭제나 수정 처럼 자잘한 애플리케이션 기능들은 쉬울 것 같았으나, 막상 구현하다 보니 마주하는 상태 관리로 인해 애를 먹기도 했습니다.
이론 상으로 알고 있던 것을 프로젝트를 통해 경험으로 녹여 낸 덕에 자신감을 얻기도 했고, 처음부터 끝까지 문제 해결을 찾아내고, 완성한 첫 리액트 프로젝트인 만큼 뿌듯하고, 프론트엔드 개발의 재미를 알 수 있었던 기회였습니다.