무작정 실시간 채팅앱 만들어보기 - (1) 구상 및 초기설정

Pluto·2022년 5월 7일
0

미니 프로젝트로 무언가를 만들어보고 싶어서 여러가지를 찾아봤는데 카카오톡,슬랙과 같은 클론코딩 강의가 많이 보였다. 실시간 채팅기능은 구현해본적이 없고 자주 사용하는 카톡이나 문자기능을 직접 구현해 보고 싶어서 무작정 만들어보기로 했다. 내가 사용해보고싶은 모듈들도 다 가져와서 써보는것도 재밌을것같아서 그렇게 진행할 예정이다.

또 내가 백엔드를 직접 다 짤순없기 때문에(백엔드는 지식이 부족해서.. 여유가 되면 공부해야지) 마침 파이어베이스에 내가 사용해본적 없는 realtime database라는것도 있길래 이것을 이용하기로 결정했다!

간단한 구상

일단 바로 들어가면 로그인을 위한 페이지를 띄우고, 로그인 한다면 친구목록과 친구찾기, 친구목록에서 채팅하기 버튼을 누르면 대화가 나오도록 구현해볼것이다.

CRA? without CRA?

여태껏 프로젝트를 할 때는 CRA를 이용하여 간편하게 리액트 프로젝트 초기 구성을 하였는데, 간단히 로그인과 채팅기능만 만들건데 굳이..? 싶기도 하고 가볍게 만들어 보고싶어서 내가 직접 CRA없이 구성해보기로 했다.

https://velog.io/@eamon3481/React-TypeScript-Webpack-Without-CRA 글을 참고하여 환경설정하였다.

엔트리파일 생성

// index.tsx

import React from 'react';
import ReactDOM from 'react-dom'; 
import App from './src/App';

ReactDOM.render( 
  <App/>,
 document.getElementById('root') 
);
// App.tsx

import React from 'react'
import Router from './router';

function App() {
	return (
		<Router />
	)
}

export default App;
// router.tsx

import React from 'react'
import { BrowserRouter } from "react-router-dom";

function Router() {
  	return (
    <BrowserRouter>
		<Main /> 
		<Auth />
    </BrowserRouter>
  );
};
export default Router;

React 18?

열심히 파일생성 후 프로젝트 설정을 하고있었는데, 위와 같은 에러가 떴다.
친절히 알려주는 링크를 따라 들어가보니 리액트 버전이 18로 업데이트되었기 때문에 버전에 맞는 방식을 사용하라는 경고문이었고, 여기에 맞게 App.tsx파일을 바꾸어주었다.

// App.tsx

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './src/App';

const container = document.getElementById('root');
const root = createRoot(container!); // createRoot(container!) if you use TypeScript
root.render(<App />);

firebase 초기화하기

아래 공식문서에서 프로젝트에 추가 및 초기화 하는 방법이 잘 나와있어 따라 진행하였다.
https://firebase.google.com/docs/web/setup

위와같이 초기화 하래서 그대로 따라하였다.

// firebaseConfig.js

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { GithubAuthProvider } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "",
  authDomain: "realtime-chatapp-63234.firebaseapp.com",
  projectId: "realtime-chatapp-63234",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const provider = new GithubAuthProvider();
export const db = getFirestore(app);
export const database = getDatabase(app);

초기화 할 항목들이 많아 한곳에 모아 관리하기 위해 firebaseConfig.js파일을 새로 작성하였고 로그인,Firestore,실시간 Database를 초기화 시키고 각 컴포넌트에서 사용하기위해 함수를 export하였다.

프로젝트 구조

CRA와 달리 config파일들이 많이보인다..ㅎ

pages폴더를 만들어서 로그인하기 전 보여줄 페이지(Auth), 로그인 후 보여줄 페이지(Main)을 나누어 생성했다.
또 공통으로 사용될 component들을 관리하기위해 components폴더도 생성하였다.

이제 환경설정은 마쳤으니, 다음은 깃헙을 이용해 로그인 기능 구현을 해보겠다!

profile
주니어 프론트엔드 개발자입니다.

0개의 댓글