/ STUDY

트위터 클론 코딩 (1) - FireBase란?

목차

나는 창업을 하고 싶었지 프로그래밍을 배우고 싶지는 않았다. 하지만 당신이 가진 리소스가 충분하지 않다면 시간을 좀만 투자해서 당장 서비스를 런칭할 수 있는 방법 중 FireBase는 최고의 선택이라고 생각한다.

FireBase란?

FireBase는 백엔드 프로그램이라고 말할 수 있다. 그렇기 때문에 백엔드에 대한 큰 공부 없이 로그인 기능, 데이터베이스, 저장공간을 사용할 수 있다.

하지만 이렇게 쉽게 사용할 수 있기 때문에 앞서 내가 서비스를 런칭해서 사용자의 피드백을 듣는 정도로 사용할 수 있는 것이다. 이후에 서비스를 계속해서 유지하는데 있어서 직접 서버를 운영해야하는 것은 틀림없다. 말그대로 아이디어를 테스트하는 정도로 사용해야한다는 것이다.

FireBase 사용하는 방법

수업을 듣거나 이 블로그를 보는 경우, 다음의 과정을 통해 기본 세팅을 해주면 된다.

React Application 세팅하기

  1. npx create-react-app "폴더 명"
  2. index.js / App.js빼고 정리하기

FireBase 연결하기

  1. FireBase 페이지 접속하기
  2. npm install --save firebase
  3. fbase.js 파일 생성하고 아래 코드 입력하기 (index.js 파일 있는 위치)
import firebase from "firebase/app";
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
};
firebase.initializeApp(firebaseConfig);

Router Setup

이 과정은 전체적인 서비스의 뼈대를 구축하는 과정이라고 생각하면 된다. 기획을 하는 입장이라면 스토리보드 같은 것이다. 다른 비유를 하자면 코딩이 구슬 꿰기 과정라면 Router Setup은 구슬과 실을 소분하는 과정이다.

트위터 클론코딩에 있어 크게 4가지 페이지를 구축할 예정이다.

Auth

회원가입과 로그인을 위한 페이지.

Home

기본 랜딩페이지

Profile

개인 페이지.

Router에 대해 잘 모른다면 React로 웹 앱 만들기를 먼저 공부하고 진행해야한다.