Chat App using React and Firebase

---

0. 초기 설정

• 터미널에 다음 코드를 입력합니다.

git clone https://github.com/safak/youtube2022.git
cd youtube2022
git checkout react-chat
code .

• firebase.js 파일 안의 firebaseConfig 값이 유효하지 않기에, 아직 프로젝트를 실행은 불가능합니다.

1. Firebase 프로젝트 생성

• https://console.firebase.google.com/ 에 접속합니다.

• 프로젝트 추가 클릭 → 프로젝트 이름 입력 후, 계속 클릭

• Google 애널리틱스 사용 설정 해제 후, 프로젝트 만들기 클릭 → 계속 클릭

2. 웹 앱에 Firebase 추가

• </> 아이콘 클릭 → 앱 닉네임 입력 후, 앱 등록 클릭

  

• 사이트 내의 코드를 복사 → firebase.js 파일 안에 붙여넣기 → x 버튼 클릭

• 아래와 같이 환경변수를 활용한 코드 작성을 권장합니다.

• 터미널에 다음 코드를 입력합니다. (프로젝트 실행)

yarn
yarn start

“An invalid form control with name='' is not focusable” 오류 해결 방법

• Register.tsx의 67번째 줄 코드에 noValidate를 추가합니다. (사진 참고)

3. Authentication 설정

• 빌드 카테고리 → Authentication 클릭

• 시작하기 클릭 → 이메일/비밀번호 클릭

• 이메일/비밀번호 사용 설정 on → 저장 클릭

4. Storage 설정

• 빌드 카테고리 → Storage 클릭 → 시작하기 클릭

• 시작하기 클릭 → 테스트 모드에서 시작 선택 → 다음 클릭

• 완료 클릭

5. Firebase Database 설정

• 빌드 카테고리 → Firebase Database 클릭

• Create database 클릭

가이드와 화면이 다른 경우

3. Start in test mode 선택 → Next 클릭 → Enable 클릭

6. 프로젝트 실행

• 회원가입을 통해 계정 두 개를 생성합니다.

• Authentication에 식별자(이메일) 및 사용자 UID가 저장됩니다.

• Storage에 프로필 사진이 저장됩니다.

• Cloud Firestore에 회원 가입 정보가 저장됩니다.

• 두 계정에 로그인합니다.
• 하나의 창은 크롬 시크릿모드를 사용합니다.

• 채팅 기능을 확인합니다.

• Storage에 첨부 파일 및 사진이 저장됩니다.

• Cloud Firestore에 채팅 정보가 저장됩니다.