- 1월 한달 프론트앤드 기초부터 바로잡기 프로젝트
- AtoZ 첫 서비스 배포 도전 (진행중.. 90%완료)
- vsc -create-react-app
- Firebase
- 02/06 v0.1.0 https://react-react-chat-app.web.app
- 02/07 v0.1.1 https://react-react-chat-app.web.app
(한글화, DM user 카운트 오류수정, enter 전송 keycode 수정)
-개발환경셋팅(기본구조)
- react 설치
- Create React App 구조(Strcuture)
- React Router Dom
- Redux 기본구조
- Aplication 전체적인구조
- REST, WEbSockets 비교
- Firebase
- Firebase 사용 =>개발 시작
-인증처리
- React Bootstrap
- 회원가입 페이지 UI 만들기
- react-hook-form을 이용한 회원가입 유효성체크
- useRef를 이용한 현재 password 값 찾기
- firebase에서 이메일로 유저 생성시 생기는 문제점
- firebase에서 이메일로 유저 생성
- 프로세스 처리 중 Button을 누르지 못하게 막기
- Firebase에 생성한 유저에 상세 정보 추가하기
- Firebase에 생서한 유저 데이터 베이스에 저장
- 로그인 페이지 만들기
- 인증된 이후의 페이지 이동 & useHistory
- Redux 스토에 로그인 유저 정보 저장
-채팅페이지(기본구조)
- 채팅 페이지 UI
- User Panel 기본구조 제작
- 로그아웃과 동시에 리덕스 스토어 유저정보 지우기
- 프로필 이미지 수정 - firebase, 리덕스스토어 데이터변경 및 DB에 저장
- 채팅룸 리스트 UI
- 채팅 룸 생성
- firebase에서 데이터 실시간으로 받기
- Set current chat room
- Clean up event listener
-채팅방 (public)
- 메세지 Header, Body, Form UI 제작
- 메세지 저장하기
- 메세지 보여주기
- 메세지 컴포넌트 생성
- 이미지 파일 업로드
- Progress Bar
- 업로드한 파일 메세지를 상대가 볼 수 있게
- 검색으로 메세지 내용 찾기 -에러해결중
DM (private)
- Side Panel DM UI
- User 목록 가져오기
- 방 생성
- 방 클릭시 이동, 알림, 표시
- Private, Public DB 구분
알림, 즐겨찾기
- 알림 UI 제작
- 알림 정보 제작
- 알림 count 클릭시 사라지게
- 즐겨찾기 버튼, 즐겨찾기 DB에 넣기
- 리프레쉬 후에도 유지
- 채팅방 클릭시 해당 방으로 이동
채팅방정보, 타이핑
- 방 생성자의 프로필과 이름띄우기
- 방설명, 각유저당 쓴 글 데이터 가져오기
- userPost 데이터를 count 높은순서대로 보여주기
- DM에는 방만든사람 안뜨게
- typing 시작시 typing 정보 DB에 저장 - 입력중입니다 구현
- 리스너로 typing 정보 가져오기
- typing UI 추가후 리스너 제거
auto 스크롤, skeleton
- 메세지 전송시 스크롤 내려가게 하기
- 메세지 로딩시 스켈레톤 처리
- crtl + enter 로 메세지 전송
스토리지, DB 규칙 작성, 배포
- Firebase 스토리지 규칙
- Firevase 데이터베이스 규칙
- 배포
