채팅 애플리케이션
지금까지 학습한 내용을 바탕으로 채팅 애플리케이션을 만들어보려고 한다.
구현할 기능은 다음과 같다.
- 로그인/회원가입 : 이메일과 비밀번호를 이용한 로그인과 회원가입
- 프로필: 나의 정보 확인 및 변경
- 채널 생성: 채널 생성 기능
- 채널 목록: 생성된 채널들의 목록 조회
- 채널: 실시간으로 메시지를 송수신하는 독립된 공간
프로젝트를 시작하기 위해 프로젝트를 생성하고 필요한 폴더들을 생성해주었다.
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);
앱 아이콘, 로딩 화면
로딩 화면을 만들기 위해 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
이어서 로그인/회원가입 구현에 대해 다음 글에서 작성해보겠다.
'공부 > ReactNative' 카테고리의 다른 글
[ReactNative] 채팅 애플리케이션(Firebase) 3 | 처음 배우는 리액트네이티브 9장 (0) | 2025.02.05 |
---|---|
[ReactNative] 채팅 애플리케이션(Firebase) 2 | 처음 배우는 리액트네이티브 9장 (0) | 2025.02.04 |
[ReactNative] FlatList, 무한 스크롤 | 처음 배우는 리액트네이티브 8장 (0) | 2025.01.29 |
[ReactNative] Navigation | 처음 배우는 리액트네이티브 8장 (0) | 2025.01.28 |
[ReactNative] 전역 상태 관리, Context API, useContext | 처음 배우는 리액트네이티브 7장 (0) | 2025.01.23 |