Day 1

1. 프로젝트 생성

$ npx create-react-app youngstagram

---

2. GitHub 연동

$ git init
$ git add .
$ git commit -m "First Commit"
$ git remote add origin https://github.com/youngjin96/youngstagram.git
$ git push origin master

---

3. 라이브러리 설치

Firebase

$ npm install firebase

 

MUI

$ npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

 

react-router-dom

$ npm install react-router-dom

 

SweetAlert2

$ npm install sweetalert2

---

4. Flow Chart

로그인을 한 유저만 사용할 수 있게 플로우차트를 그렸다.

---

5. DB 설계

- Firebase Firestore Database 사용

 

- users (유저 컬렉션)

Column Name	Data Type	Note
user_id	string	유저 고유 아이디 (Firebase Authentication에서 제공)
email	string	유저 이메일
name	string	유저 이름 (닉네임)
image	string	대표 이미지
count_feed	number	게시물 수
introduce	string	소개 글

 

- feeds (피드 컬렉션)

Column Name	Data Type	Note
user_id	string	유저 고유 아이디
feed_id	string	문서 고유 아이디 (컬렉션 생성 시 자동으로 id 제공)
image	string	유저가 업로드한 이미지
content	string	유저가 업로드한 내용