공부/ReactNative

[ReactNative] 채팅 애플리케이션(Firebase) 1 | 처음 배우는 리액트네이티브 9장

hyunh404 2025. 2. 3. 17:45
728x90

 

 

채팅 애플리케이션

 

 

지금까지 학습한 내용을 바탕으로 채팅 애플리케이션을 만들어보려고 한다.

구현할 기능은 다음과 같다.

  • 로그인/회원가입 : 이메일과 비밀번호를 이용한 로그인과 회원가입
  • 프로필: 나의 정보 확인 및 변경
  • 채널 생성: 채널 생성 기능
  • 채널 목록: 생성된 채널들의 목록 조회
  • 채널: 실시간으로 메시지를 송수신하는 독립된 공간

 

프로젝트를 시작하기 위해 프로젝트를 생성하고 필요한 폴더들을 생성해주었다.

npx create-expo-app react-native-simple-chat --template blank
  • components: 컴포넌트파일관리
  • contexts: Context API 파일 관리
  • navigations: 내비게이션파일관리
  • screens: 화면 파일 관리
  • utils: 프로젝트에서 이용할 기타 기능 관리

 

 

파이어베이스

 

 

: 인증, 데이터베이스 등의 다양한 기능을 제공하는 개발 플랫폼

: 장점 - 서비스에서 필요한 서버와 데이터베이스를 직접 구축하지 않아도 개발이 가능

 

https://console.firebase.google.com/

 

로그인 - Google 계정

이메일 또는 휴대전화

accounts.google.com

 

 

본격적으로 파이어베이스를 이용하기 위해

파이어베이스 콘솔에서 프로젝트를 생성 후 웹 앱을 생성해주었다.

 

프로젝트 설정 ▷ 일반 ▷ 내 앱 ▷ SDK 설정 및 구성

 

위 경로를 따라 설정에 들어가서 파이어베이스를 사용하기 위한 설정값을 받아와 프로젝트 최상위 폴더에 아래 파일을 생성해 코드를 추가했다.

firebase를 이용하려면 라이브러리 설치가 필요하다.

npm install firebase
 firebase.json
{
    "apiKey": "",
    "authDomain": "",
    "projectId": "",
    "storageBucket": "",
    "messagingSenderId": "",
    "appId": ""
}

 

 

이 코드는 유출되면 안되기 때문에 .gitignore 파일에 추가해 깃에 올라가지 않도록 설정해주었다.

 


 

 

1. 인증

파이어베이스는 다양한 인증 방법을 제공한다.

이번 프로젝트에서는 "이메일/비밀번호" 부분만 활성화하고 진행하도록 하겠다.

인증 설정

 

 

2. 데이터베이스

: 생성되는 채널과 각 채널에서 발생하는 메세지 관리

: Firestore와 Realtime Database 두가지 종류 제공

 

 

데이터베이스로는 Firestore를 사용할 것이다.

데이터베이스를 사용하기 위해서는 생성해주어야 한다.

데이터베이스 생성

 

 

3. 스토리지

: 서버 코드 없이 사용자의 사진, 동영상 등을 저장할 수 있는 기능 제공

 

+ 스토리지는 유료 서비스이기 때문에 설정하지 않고 프로젝트를 진행하려 한다.

 

 


 

 

이제 로컬 프로젝트에서 파이어베이스를 사용하기 위해 utils폴더 안에 firebase.js 파일을 생성하고

설정 코드를 작성해주겠다.

 

💡 
firebase v9+에서는 import * as firebase from 'firebase' 방식이 지원되지 않는다.
v9부터는 모듈 방식으로 가져와야 한다.
import { initializeApp } from 'firebase/app';
import config from '../../firebase.json';

const app = firebase.initializeApp(config);

 

 

728x90

 

 

 

앱 아이콘, 로딩 화면

 

 

로딩 화면을 만들기 위해 AppLoading을 사용할 건데 expo에서는 더이상 제공되지 않고,

AppLoading을 계속 사용하려면 expo-app-loading을 사용하는 방법이 있지만

유지보수가 어렵기 때문에 최신 Expo 버전에서는 더 이상 권장되지 않는다.

 

 

따라서

expo-splash-screen 으로 로딩 화면을 대체해 프로젝트를 진행해보겠다.

npm install expo-splash-screen

 

👇로딩 화면 코드 보기

더보기
import React, { useEffect, useState } from 'react';
import { StatusBar, Image } from 'react-native';
import * as SplashScreen from 'expo-splash-screen';
 import { Asset } from 'expo-asset';
 import * as Font from 'expo-font';
import { ThemeProvider } from 'styled-components/native';
import { theme } from './theme';

// SplashScreen을 비활성화하지 않으면 앱이 계속 로딩 화면에 멈춤
SplashScreen.preventAutoHideAsync();

const cacheImages = images => {
    return images.map(image => {
        if (typeof image === 'string') {
            return Image.prefetch(image);
        } else {
            return Asset.fromModule(image).downloadAsync();
        }
    });
};

const cacheFonts = fonts => {
    return fonts.map(font => Font.loadAsync(font));
};

const App = () => {
    const [isReady, setIsReady] = useState(false);

    useEffect(() => {
        const loadAssets = async () => {
            try {
                const imageAssets = cacheImages([require('../assets/splash.png')]);
                const fontAssets = cacheFonts([]);

                await Promise.all([...imageAssets, ...fontAssets]);
            } catch (error) {
                console.warn(error);
            } finally {
                setIsReady(true);
                await SplashScreen.hideAsync(); // 로딩 완료 후 SplashScreen 숨기기
            }
        };

        loadAssets();
    }, []);

    if (!isReady) {
        return null; // 로딩 중일 때 아무것도 렌더링하지 않음
    }

    return (
        <ThemeProvider theme={theme}>
            <StatusBar barStyle="dark-content" />
        </ThemeProvider>
    );
};

export default App

로딩화면

 

 

 

이어서 로그인/회원가입 구현에 대해 다음 글에서 작성해보겠다.

728x90