이제 슬슬 혼자서도 토이 프로젝트를 해볼 수 있도록 태세를 갖춰야 할 것 같다. 직접 프로젝트를 해보는 것 만큼 나의 실력을 제대로 올릴 수 있는 루트는 없을 것 같다. (그만큼 피땀눈물과 함께 하겠지만 ㅋㅋㅋ 공짜 점심은 없다 ^^) 백엔드 없이 호스팅하고 로그인 구현도 하는 등 언제든 내가 하고 싶을 때 프로젝트를 진행할 수 있으려면, 나의 현 상황에서는 firebase를 배우는 게 최선의 선택일 듯하다. firebase 기본적인 기능들을 익히려면 평일에 코드스테이츠 진행 중인 것을 고려하여 최소 2~3주는 걸릴 것 같다. 그래도 투자 시간 대비 향후 나의 프로젝트 효율을 극대화할 수 있다는 장점 + 서버에 대한 이해도 향상 측면에서 최선의 선택이라는 생각이 들어 과감히 firebase를 배우기로 마음 먹었다. 천리길도 한 걸음부터!

1. CRA(Create-React-App) 만들기

CRA 하나 만들어놓고 시작! 나는 project 디렉토리 안에 learn_firebase라는 앱을 만들어놨다.

npx create-react-app learn_firebase --template typescript

2. 프로젝트 추가

firebase 공식 웹사이트
https://firebase.google.com/?hl=ko

최고의 앱 만들기~~ 신뢰받는 firebase~~
시작하기 클릭!

프로젝트를 추가하자! 나는 learn-firebase라는 프로젝트를 추가했다.

3. 호스팅 시작

좌측에 빌드 → 호스팅 → 시작하기 클릭!

자 이제 시작이야 내 꿈을- 내꿈을 위한 여행
흥얼거리며 시작!

1. Firebase CLI 설치

npm install -g firebase-tools

2. 프로젝트 초기화

여기서부터는 이 영상을 많이 참고했다. 아주 헬프풀 비디오였습니다 선생님 땡큐쏘머취.
https://www.youtube.com/watch?v=98TXDLZLyNs&t=701s

터미널로 가자.
처음에 만든 CRA 위치에서 터미널에 입력!

firebase login
firebase init

나는 firebase login을 이전에 해본 적이 있으므로(사실 이미 deploy까지 다 끝마친 상태에서 블로그에 제대로 포스팅하려고 처음부터 다시 복습 겸 시도해보는 즁 ㅎㅎㅎ) firebase login 하면 already logged in 이라고 뜬다.
만약 login이 처음이라면

allow firebase to collect CLI usage and error reporting information
// y 입력
firebase wants to access your googe account
// allow 클릭

하고 터미널로 돌아오자. 터미널에 로그인 성공했다고 뜨면 계속 진행하자.

npm run build

→ build folder가 생겨난다.

자 이제 본격적으로 선택의 연속의 시간.

터미널에서

Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

선택하고 엔터. (space bar 누르면 초록점이 생기고 선택이 가능한 상태가 된다.)

맨 처음에 CRA 만들고 시작했기 때문에

use an existing project

선택 후 엔터.

그 다음으로

select a default Firebase project for this directory

선택 후 엔터

그 다음으로

What do you want to use as your public directory? build

질문에 bulid 입력 후 엔터

그 다음으로

Configure as a single-page app (rewrite all urls to /index.html)? (y/N) 

y 입력

그 다음으로

 Set up automatic builds and deploys with GitHub? (y/N) 

N 입력

그 다음으로

File build/index.html already exists. Overwrite? (y/N) 

N 입력

✔ Firebase initialization complete!
아래 명령어 입력하면

firebase deploy

두구두구두구두구두구두구두구구

✔ Deploy complete!

3. 수정사항 생기면 deploy하여 반영하기

터미널 아래에 Project Console과 Hosting URL이 뜬다.
Hosting URL 링크를 클릭해보자. (맥북이라면 cmd + 클릭)

와 !!! 나의 app이 떴다!!
지금까지는 주소창에 localhost라고만 써있었는데 이제 localhost라는 단어가 보이지 않는군!!
(설레는 마음) 글자를 수정하면 반영이 될까?? App.tsx로 가서

      <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>

CRA만들면 기본적으로 있는 이 코드를

      <p>
          수정이 잘 되나요?
        </p>

로 바꿔보았다.

localhost:3000의 모습

오케이 localhost:3000에는 반영이 잘 되었군.

호스팅한 웹의 모습

음? 너는 왜 수정사항을 반영하지 않고 가만히 있는거니?
아래 명령어를 입력해야 수정사항이 반영된다.

npm run build
firebase deploy

터미널에 입력한 다음 새로고침하면

호스팅된 앱에도 수정사항이 성공적으로 반영되었다!!

yayy~~~ 이제 나도 혼자서 내 앱 호스팅할 줄 안다!! localhost에 갇히지 않아도 된다구!! 신나서 땐스떈스

역시 듣던대로 firebase로 호스팅하는 것은 많이 어렵지 않았다!
다음 시간에는 firebase로 google login 구현했던 과정을 포스팅하겠다. (이번 포스팅과는 사뭇 달리 내면의 광기와 지독함이 올라오는 과정을 담아낸 포스팅이 될 것임을 예고하는 바임)

참고: https://www.youtube.com/watch?v=98TXDLZLyNs&t=701s