bluegram - 계획서

1. 목적

1. 유명 SNS인 Facebook과 Instagram을 참고해서 여러 기능을 따라 만들어봄으로써 유명 기능의 구현 방법에 대해 공부하고 이해한다.

2. CRA의 세팅이 아닌 webpack은 직접 사용함으로써 원리에 대해 공부와 이해를 한다.

3. 프론트엔드, 백엔드, 데이터베이스를 모두 직접 만들어보고 협업 툴을 이용해 봄으로써 협업과 서로의 개발과정에 대한 이해를 한다.

2. 특징

1. create-react-app을 이용해서 리액트에서 제공해 주는 환경을 그대로 사용하는 것이 아닌 실제로 환경을 바닥부터 구현해 봄으로써 webpack에 대한 이해와 react와의 관계에 대한 이해를 증진시킨다.

2. 프론트 엔드 영역만 직접 만드는 것이 아닌 백 엔드 영역도 모두 같이 만듦으로써 상호 협업 간의 문제에 대한 공감력과 이해를 증진시킨다.

3. 팀

1인 개발

4. 개발할 기능들

• 버전 1.0.0
  1. 회원가입, 로그인
  2. 게시글 CRUD
  3. 댓글 CRUD
  4. 답글 CRUD
  5. 내 정보 CRUD
  6. 본인 게시글 검색
  7. 좋아요 게시글 검색
  8. 해시태그
  9. 팔로잉, 팔로워
  10. OAuth ( 네이버, 구글, 카카오 로그인 )

• 이후 버전에 추가 계획인 기능
  1. DM ( socket.io )
  2. 챗봇 ( goole Dialogflow )

5. 사용할 툴

5.1 개발환경 및 에디터

• window11에서 개발
• Visual Studio code 사용

5.2 프로젝트 관리

1. trello
2. velog
3. git/github

• git 관련 사용 툴은 git bash와 source tree를 같이 사용

6. 기술 스택

6.1 프론트 엔드

1. react hook
2. redux ( + redux-saga )
3. styled-component
4. webpack ( + babel )

6.2 백 엔드

1. express
2. sequelize
3. passport

6.3 데이터 베이스

1. mysql

• docker를 이용해서 데이터 베이스 서버를 열지만 정확하게 docker가 정확하게 무엇인지에 대한 이해는 없고 사용만 하고 있습니다.

6.4 코드 스타일

1. eslint
2. prettier

7. DataBase의 Table 설계

• 기본 테이블
  1. users
  2. posts
  3. comments
  4. hashtags
  5. images

• 중간 테이블
  1. follows ( users와 users)
  2. likes ( users와 posts)
  3. postHashtags ( posts와 hashtags)

8. API설계

여기에 작성하기에는 양이 너무 많아서 GitHub으로 대체

개발하면서 지킬 원칙

1. 생성한 함수에 개발자-한줄요약-날짜 형태로 주석 달기
2. 개발하면서 겪은 문제점과 해결한 방법 정리하기
3. 깨달은 점 정리하기
   컴포넌트 구조도 작성 (draw.io)