[개발 일기] 트위터 클론 코딩 #1 by 니꼬쌤

안녕하세요 건브로입니다.

 

원래 동영상 강의는 나중에 보고 제가 페이지를 만들어보려고 했어요.

근데, 아이디, 비밀번호 인증에 미숙하기도 하고,

아직까지는 라우팅과 화면 렌더링 밖에 할 줄 몰라서 니꼬쌤의 강의를 찾아봤습니다.

보니까 트위터 클론 코딩에서 기본적으로 CRUD도 포함되어있고, 아이디 비밀번호 인증에 관한 것도 있네요!

심지어 포트폴리오 만들 때 백엔드가 필요한데 그걸 대신해주는 파이어베이스까지!

 

이 강의를 보면서 부족한 부분을 계속 채워나가고 저만의 방식들을 찾아봐야겠어요.

 

---

현재 #0 INTRODUCTION, #1 SETUP 이렇게까지 들었다.

1. #0 INTRODUCTION

주로 파이어베이스를 왜 쓰는지 나온다.

니꼬쌤은 웹앱을 상용화하기 전에 미리 한 번 빠르게 써보고 사용자 측면에서

부족한 부분을 느낄 수 있도록 사용할 수도 있다고 했다.

 

나는 포트폴리오 용도로 써도 무관할 것 같다는 생각이 들었다.

대신, 이렇게 좋은 기능이 있는 만큼 막무가내 사용하면 돈이 들 수 있다는 것을 알아야 한다.

 

2. #1 SETUP(CRA 사용했다고 가정)

파이어베이스를 사용하는 법과 vscode로 환경변수 설정하는 부분이 나온다.

그리고 마지막은 router 설정하는 게 나온다.

 

1) 파이어베이스에서 웹앱을 먼저 추가한다.

2) 앱 닉네임을 맞추고 나서 Firebase SDK를 추가해야 한다.

SDK란?

소프트웨어 개발 키트(영어: Software Development Kit, SDK)는 일반적으로 소프트웨어 기술자가 사용하여 특정한 소프트웨어 꾸러미, 소프트웨어 프레임워크, 하드웨어 플랫폼, 컴퓨터 시스템, 게임기, 운영 체제 등을 위한 응용 프로그램 등을 만들 수 있게 해주는 개발 도구의 집합이다.
출처: 위키백과 , 소프트웨어 개발 키트, ko.wikipedia.org/wiki/%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4_%EA%B0%9C%EB%B0%9C_%ED%82%A4%ED%8A%B8

3) src폴더 안에 firebase.js 생성하고, "npm install firebase"로 설치하고 불러오기.

import firebase from "firebase/app"

const firebaseConfig = {
  apiKey: process.env.React_APP_API_KEY,
  authDomain: process.env.React_APP_AUTH_DOMAIN,
  databaseURL:process.env.React_APP_DATABASE_URL,
  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
};
  export default firebase.initializeApp(firebaseConfig);

 

4) root폴더(제일 밖) 안에 .env 파일 만들고, .gitignore안에 .env 적기

 

//.env
React_APP_API_KEY=~~

React_APP_AUTH_DOMAIN=~~

React_APP_DATABASE_URL=~~

React_APP_PROJECT_ID=~~

React_APP_STORAGE_BUCKET=~~

React_APP_MESSAGIN_ID=~~

React_APP_APP_ID=~~

왜 .env파일 만들어서 firebase.js에서 부르는 걸까?

니꼬쌤 말로는 보안상 이유도 있지만, 깃허브에 올라가지 않게 하려고 따로 묶어둔 것이라고 한다.

근데 보안은 잘 안된다고 한다. 왜냐하면 나중에 빌드하게 되면 어쩔 수 없이 firebase.js에 적은

코드들이 .env에 적힌 코드들로 바뀐다고 한다. 

 

5) components 폴더 안에 Router.js를 만들어서 App.js에서 Router.js를 컴포넌트로 불러서 사용한다.

난 App.js에서 항상 router를 사용해서 렌더링 하게 끔했는데, 이 방식도 괜찮은 것 같다. 

이전과 달라진 건 없는 것 같지만..?