Nextron, firebase를 사용해서 구현한 데스크탑 채팅 애플리케이션 입니다. firebase 특성상 실시간으로 데이터변화를 감지할 수 있는 기능을 제공하고, NoSQL 형식 으로 대량의 분산된 데이터를 저장하고 조회하는 데 특화돼 있어서 채팅 애플리케이션을 제작하는데 적합합니다.

• 전체 구조
• 주요 기능
• 기술 스택
• 구현 내용
• 회고
• 실행 방법

• recoil을 사용하여 전역상태 관리를 하였습니다.
• component 폴더에는 각각 페이지에 해당하는 컴포넌트들이 위치해 있고, 하나의 컴포넌트 폴더 내부에는 다음과 같은 파일들이 있습니다.
  • [component].tsx : 컴포넌트에 ui부분을 담당합니다.
  • [componentContainer].tsx : 컴포넌트에 비즈니스 로직을 담당하고, [component].tsx에 데이터를 연결합니다.
  • [component.styles].ts : 컴포넌트에 해당하는 style을 정의해놓은 파일입니다.

• 회원가입
• 로그인
• 유저목록
• 1:1 채팅
• 그룹채팅

         

• firebase Authentication을 이용해서 구현 하였습니다.
• 이메일 형식, 비밀번호 6자리 유효성 검사를 진행 하였습니다.

  

• 실시간으로 1:1채팅을 진행할 수 있습니다.

• 실시간으로 그룹 채팅을 진행할 수 있습니다.

• 유저를 초대해서 그룹 채팅방을 생성할 수 있습니다.

• Chatty를 이용중인 유저를 조회할 수 있고, 현재 진행중인 1:1 채팅, 그룹 채팅 리스트를 확인할 수 있습니다.

     

• 웹으로만 프로젝트를 진행해 왔어서 Electron을 사용한 데스크탑 앱을 처음 진행한 프로젝트였는데 오로지 데스크탑 앱을 띄운거 이외에는 다룬 기술들이 없는 것 같습니다. Electron이 가지고 있는 기능들을 더욱 공부할 필요가 있어보입니다.
• firebase를 이용하여 서버를 따로 구축할 필요가 없어서 빠른시간안에 프로젝트를 완성할 수 있었습니다. 특히 로그인 인증을 위해 복잡한 로직을 구성해야 하지만 firebase에서 이러한 기능들도 제공하고 있어서 firebase에 장점이 크게 와닿았습니다.

1. 프로젝트를 클론합니다.

git clone https://github.com/dngur9801/chat-app.git

2. 클론한 프로젝트 내부로 이동합니다.

cd chat-app

3. 패키지들을 설치 합니다.

npm install

4. 파이어베이스 관련 api키 설정을 위해 renderer 폴더 하위에 .env파일 생성 후 아래와 같이 입력해 줍니다.(미입력시 에러가 발생 합니다.)

# firebase SDK
NEXT_PUBLIC_FIREBASE_API_KEY=""
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=""
NEXT_PUBLIC_FIREBASE_DATABASE_URL=""
NEXT_PUBLIC_FIREBASE_PROJECT_ID=""
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=""
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="",
NEXT_PUBLIC_FIREBASE_APP_ID="",
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=""

5. 애플리케이션을 실행 합니다.

npm run dev

• https://velog.io/@dngur9801/firebase-Error-adding-document-FirebaseError-7-PERMISSIONDENIED-Missing-or-insufficient-permissions.-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0
• https://velog.io/@dngur9801/Nextron-F12%EB%A5%BC-%EB%88%8C%EB%9F%AC%EC%84%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%8F%84%EA%B5%AC-%ED%99%9C%EC%84%B1%ED%99%94-%ED%95%98%EA%B8%B0