트위터 클론 코딩 #0 Introduction ~ #1 Set up

노마드 코더 트위터 클론 코딩

노마드 코더의 트위터 클론 코딩 강의를 듣고 정리한 강의노트입니다.

---

0.0 Welcome! / 환영합니다!

강의에서 구현할 Firebase를 이용하여 가능한 기능

• 이메일, 비밀번호을 이용한 인증
• 회원가입
• 로그인
• 구글 소셜 로그인
• 깃헙 소셜 로그인
• 실시간 처리
• 트윗 보내기
• 파일 업로드
• 프로필 수정
• 트윗 수정하기
• 트윗 삭제하기

심지어 모든 기능을 백엔드 코드 작성없이 할 수 있다. 사이트를 만드는 데 가장 많이 드는 시간이 CSS 작업일 정도 ㅎㅎ

0.1 Requirements / 요구사항

해당 강의를 듣기 전에 들어야 할 강의

• 코코아톡 클론 코딩 - HTML, CSS, Github
• ReactJS로 영화 웹 서비스 만들기 - ReactJS Fundamantals
• 초보를 위한 React JS - React Router, React Hooks, TypeScript
• 실전형 리액트 Hooks 10개 - React Hooks

해당 강의에서 배우게 될 것

• React 컴포넌트를 만들고, 상태를 관리하는 새로운 방법 with React Hooks

0.2 What is Firebase / Firebase란?

Firebase란?

Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼

• https://firebase.google.com
• 웹사이트를 통해 제공해주는 백엔드 서비스
• 경쟁 서비스는 AWS의 Amplify
• Amplify에서 GraphQL API등 Firebase에는 없는 새로운 기능들을 제공해주지만, Firebase의 서비스가 오래되었기 때문에 관련 커뮤니티가 크고 질문/답변, 튜토리얼 등이 많기 때문에 Firebase를 사용하는 것을 추천한다.

Firebase의 초기 모델

• 데이터베이스로 시작했고, 이후에 구글에 인수되고 기능이 확장됨

Firebase의 기능

Build better apps / 더 나은 앱 만들기

코드를 작성하지 않고도 애플리케이션을 더 좋게 만들 수 있는 기능을 만들 수 있음

• Cloude FireStore - 데이터베이스로는 SQL같은 데이터베이스 관련 코드 없이 데이터베이스를 사용하게 해준다.
• Firebase ML - 머신러닝을 통한 작업을 할 수 있게 해준다.
• Cloud Functions - AWS lambda와 비슷한 Serverless function
• Cloud Storage - AWS S3와 비슷한 파일 업로드 저장소, 강의에서는 사진을 업로드하는 데에 사용할 예정
• Hosting(호스팅) - Asset을 배포나 React 애플리케이션 배포에 사용
• Authentication(인증) - 가장 중요한 기능으로 이미 구현된 인증을 통해서 애플리케이션에 10분도 안돼서 인증을 구현할 수 있음
• Realtime Database - Firebase의 원조 데이터베이스인 Realtime Database
• Analytics

Improve app quality / 앱 퀄리티 높이기

구글의 전문분야인 Analytics를 통해 앱의 퀄리티를 높일 수 있음

• Performance Monitoring - 앱의 성능을 측정
• Test Lab - 각종 기기별로 앱을 테스트

Grow your business / 사업 성장시키기

비즈니스 영역으로 확장된 형태의 Analytics

• Google Analytics - 우리가 아는 그 "구글 애널리틱스"
• Cloud Messaging - 푸쉬 알림을 사용하고자 하는 경우 사용

0.3 When To Use Firebase / 언제 Firebase를 써야할까?

언제 Firebase를 써야할까?

• 내가 생각하고 있는 아이디어를 빠르게 구현해 보고싶을 때 사용한다.

언제 Firebase를 쓰면 안될까?

• 실제 프로젝트, 실제 프로젝트의 경우 규모가 커지게 되면 Firebase에 종속되지 않고, 기존에 구현된 Firebase의 기능을 구현하는 것이 어렵다.

0.4 Pricing in Firebase / Firebase의 요금제

• Firebase는 완전 무료가 아니다.
• 적은 요청의 경우 무료로 사용 가능하지만 일정 사용량이 넘어가면 요금이 부과된다.

---

1.0 React + Firebase Setup / React와 Firebase로 준비하기

CRA(Create React App)으로 React 프로젝트 만들기

npx create-react-app nwitter
...
code nwitter
git remote add origin {my nwitter github repo url}

• npx
• CRA(Create React App)
• 내 nwitter Github 저장소
• 노마드코더 nwitter Github 저장소

Firebase 프로젝트 생성하기

Firebase 홈페이지

• Firebase 공식 홈페이지에서 "콘솔로 이동" 클릭
• "nwitter"라는 이름으로 프로젝트 생성(기존에 애널리틱스 계정이 있다면 연동)
• "nwitter"라는 이름으로 웹 앱 생성

웹 프로젝트에서 Firebase JavaScript SDK를 참조하는 방법

1. CDN - script 태그로 CDN에서 불러오는 방법
2. npm package - package.json에 Firebase 관련 패키지를 설치해서 사용
3. Bower package

2번 방법으로 Firebase를 사용할 예정 다음을 이용하여 firebase를 npm으로 설치

npm install --save firebase

또는

yarn add firebase

Firebase 설정

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGIN_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID,
}

// Initialize Firebase
export default initializeApp(firebaseConfig);

1.1 Securing the Keys / 키 값 보호하기

프로젝트 최상단 폴더에 .env 파일을 만들어서 firebaseConfig에 들어가는 설정값들을 환경변수로 관리하도록 수정

REACT_APP_API_KEY={REACT_APP_API_KEY}
REACT_APP_AUTH_DOMAIN={REACT_APP_AUTH_DOMAIN}
REACT_APP_PROJECT_ID={REACT_APP_PROJECT_ID}
REACT_APP_STORAGE_BUCKET={REACT_APP_STORAGE_BUCKET}
REACT_APP_MESSAGIN_ID={REACT_APP_MESSAGIN_ID}
REACT_APP_APP_ID={REACT_APP_APP_ID}
REACT_APP_MEASUREMENT_ID={REACT_APP_MEASUREMENT_ID}

CRA로 만들어진 프로젝트의 경우 특별한 설정없이 .env파일에 prefix로 REACT_APP만 붙이면 프로젝트 내에서 process.env.REACT_APP_API_KEY 이런 식으로 참조할 수 있다.

추가로 이렇게 설정된 키 값이 담긴 .env 파일은 Github에 올리지 않기 위해 .gitignore파일에 .env 파일을 추가한다.

.env파일을 만들어서 키 값을 보호하는 이유

.env 파일을 만들어서 코드를 짠다해도 브라우저 상에서 어떤 키 값이 쓰였는지는 확인할 수 있기 때문에 이 과정이 "보안"을 위한 과정은 아니다. 다만, 해당 키값이 Github에 올라가는 건 너무 퍼블릭하게 키를 보여주는 것이 되기 때문에 이렇게 Github 상에서 숨기는 과정을 거친다.

위에 이야기한 것처럼 브라우저 상에서 어떤 키 값이 쓰였는 지 확인이 가능하기 때문에, 너무 키를 감추는 것에 몰두할 필요는 없다. 오히려 특정 도메인에서만 해당 키를 사용할 수 있게 하는 등 보안적인 부분에 시간을 쓰는게 좋을 것이다.

1.2 Router Setup / 라우터 설정하기

npm install --save react-router-dom

또는

yarn add react-router-dom

React Hooks를 이용해서 로그인 여부를 확인하고, react-router-dom의 기능을 이용하여 그에 따른 페이지를 보여주는 방식으로 구현

import React, { useState } from 'react'
import { HashRouter as Router, Route, Switch } from 'react-router-dom'
import Auth from '../routes/Auth'
import Home from '../routes/Home'

const AppRouter = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  return (
    <Router>
      <Switch>
        {isLoggedIn ? (
          <>
            <Route exact path="/">
              <Home />
            </Route>
          </>
        ) : (
          <>
            <Route exact path="/">
              <Auth />{' '}
            </Route>
          </>
        )}
      </Switch>
    </Router>
  )
}

export default AppRouter