💖 노마드 트위터 클론 코딩을 듣는 사람에 한하여
Firebase V9 업데이트 되면서. 이슈가 생김.
이에 코드의 큰 변경 없이 버전 9.0 을 사용하기 위해서. Firebase 의 'compat' 호환 버전 사용을 권장.
또한 React Router Dom 이 버전 6 으로 업데이트됨.
따라서 수강하는 동안 버전 6으로 업그레이드 하지 말고. 버전 5 유지를 권장.
Firebase 설치시 npm i firebase을 하지말고. npm i firebase@9.6.1 이와 같이 입력.
React Router Dom 설치시 npm i react-router-dom을 하지말고. npm i react-router-dom@5.3.0 이와 같이 입력.
Firebase을 import 할 때. 아래와 같이 입력.
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/storage";
1. React + Firebase Setup
1-1. npx create-react-app 명령어를 입력하여 react app 생성
1-2. github에 new repositories 생성
README file 없이 생성 후 생성된 repository의 url을 복사
생성된 react app의 터미널에 "git remote add origin 복사한 url" 입력하여 origin이라는 이름으로 원격저장소 등록
( ex. git remote add origin https://github.com/dnjfht/twitter_clone_project.git )
1-3. Firebase에서 project 생성
생성한 nwitter project에 앱을 생성해줌(web 형태로 만들 것이므로 web을 선택하여 진행)
터미널을 이용하여 npm i firebase@9.6.1를 설치해준 후,
src 폴더 내에 firebase.js를 만들어 Firebase SDK에 있는 firebaseConfig 부분을 복사해서 붙여넣기
Firebase 최신 버전에 맞게 작성
import * as firebase from "firebase/app"; => import { initializeApp } from "firebase/app";
export default firebase.initialzeApp(firebaseConfig); => const app = initialzeApp(firebaseConfig);
index.js 파일에도 import firebase from "firebase/compat/app" 추가하여 import 해줌
2. .env 파일을 생성하여 환경변수 담아주기
.env 파일을 생성하는 이유는 firebase.js 파일 안에 있는 값의 보안을 위함임.
키값 그대로가 아닌 다른 값으로 치환시키기 위하여 존재하며,
github와 같은 공용 웹사이트에 코드를 올릴 때 개인정보 보호겸 사용됨.
key가 다른 사람들에게 공개되면 사람들이 나의 DB를 호출하거나 문서를 생성 및 삭제할 수 있음.
React는 create-react-app을 사용한 경우에 환경 변수를 사용해야 한다면
REACT_APP으로 시작해야 하고 그 뒤로 이름을 붙여줘야 함(이렇게 하지 않으면 동작하지 않음)
creat-react-app은 REACT_APP으로 시작하는 환경변수를 찾도록 자동으로 설정되어 있기 때문.
firebase.js 파일도 거기에 맞게 수정을 해줌.(process.env.REACT_APP_이름)
다 정리해준 후에 .gitignore 파일에 .env를 추가해줌.
이 .gitignore 파일로 인해서 .env 파일은 git으로부터 ignore 되고 있음. (git의 버전 관리 대상에 포함되지 X)
이 react 파일을 github에 올리게 되면 사람들의 눈에는 firebase.js 코드만 보일 것이기 때문에(키에 관련하여)
다른 사람들은 나의 key와 URL을 볼 수 없음.(보안에 좋음)
but, 이것만으로 key들이 노출되는 것을 완전히 막을 수 있는 것은 아님.
왜냐하면 Firebase를 사용하고자 하면 Firebase가 client로부터 요청을 받아야 하기 때문.
결국 사용자가 웹사이트에 들어가서 내가 만든 react를 내려받아야 함.
즉, 어떤 식으로든 key가 코드로 올라가 있을 수밖에 없다는 뜻.
create-react-app으로 build를 하고 react 코드를 받고 javascript로 변환을 하고 하는 과정에서
react가 환경변수를 실제 값들로 바꾸기 때문.
그래서 사람들로 하여금 완벽하게 key를 숨길 수 있는 것은 아님.
지금까지 한 환경변수 작업은 오로지 Github에 key가 올라가는 것을 방지하기 위하여 하는 것.
3. Router Setup
Firebase를 사용하기 전에 react의 구조부터 잡아줘야 함.
src 폴더 내부에 components와 pages, shared라는 폴더를 추가해줌.
shared 내부에 Router.js를 담아줌.
pages 내부에 Auth, EditProfile, Home, Profile 등 필요한 페이지를 추가해줌.
이제 터미널에 npm i react-router-dom@5.3.0 명령어를 적어 router를 설치해줌.
아, 그런데 최신버전에 맞춰 사용해보기 위하여 router를 최신버전으로 업그레이드 시킴.
(명령어 npm i react-router-dom@6.8)
지금부터 Router.js 파일 안에 router 관련 내용을 입력해보도록 하겠음.
- router를 적용시킬 때는 react-router-dom에 내장되어 있는 BrowerRouter라는 component를 이용해 감싸주면 됨.
- Router v6 이상부터는 Switch가 아닌 Routes를 사용하게 되었음.
- Route tag 내에 component를 넣는 방식에서 Route element attr에 component를 넣는 방식으로 변경.
App.js에 Router.js를 import해서 router를 완성시켜줌.
이렇게 하면 router가 정상적으로 작동하는 것을 볼 수 있음.
이제 Router.js의 내용을 조금 바꿔줄 거임.
사용자가 로그인이 되어 있다면 main에 home page가 보이도록 하고,
사용자가 로그인이 되어 있지 않다면 main에 Auth page가 보이도록 함.
여기서 useState를 활용해줌.
const [ isLoggedIn, setIsLoggedIn ] = useState(false);
isLoggedIn의 값이 현재 false이기 때문에 일단 Auth Page가 main에 보일 거임.
'(심층)리액트' 카테고리의 다른 글
트위터 클론코딩(with firebase) - 04 (0) | 2023.02.07 |
---|---|
트위터 클론코딩(with firebase) - 03 (0) | 2023.02.03 |
트위터 클론코딩(with firebase) - 01 (6) | 2023.02.01 |
React Hooks - 03 / useState를 활용한 useTabs (0) | 2023.02.01 |
React Hooks - 02 / useState를 활용한 useInput (0) | 2023.01.31 |
github : https://github.com/dnjfht
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!