Day 2 - 설치 및 준비 2

 

비주얼 스튜디오 프로젝트 폴더 설정

리액트 설정(create-react-app)

깃허브에 초기 프로젝트 업로드

파이어 베이스 설정

---

 

 

1.vs 프로젝트 폴더 열기 및 터미널 확인

 

 

---

2.CRA 로 리액트 프로젝트 생성

npx create-react-app nwitter

설치는 3~5분 소요

터미널에 해당 명령어 입력 후 설치중.

 

설치 완료 후 아래와 같이 설치되었는지 확인.

 

폴더 열기 - nwitter 선택  - 여기서 작업 진행 예정

 

---

3.github 저장소와  nwitter 폴더 연결

터미널

git remote add origin https://github.com/깃헙아이디/nwitter

명령어 입력했는데 아무 반응이 없어 다시 입력했더니 이미 존재한다 알려줌.

error: remote origin already exists.

 

---

4.기초 파일 수정

1)README.md 

# Nwitter

Twitter (mini) clone with react and Firebase

 

2)package.json

3)src/index.js

 

3)src/App.js

 

---

5.불필요한 파일 삭제

선택한 6개의 파일 삭제

 

---

6.깃허브에 파일 업로드

터미널

git add .

git commit -m '1.0 Initializtion'

git push origin master

 

업로드가 된 것을 확인

 

 

---

 

7.파이어베이스 설정

1)프로젝트 만들기 - nwitter 

 

2)nwitter 관리화면에서 앱추가 선택

 

-앱 별명 nwitter

-firebase sdk 추가

책에는 npm  태그 방식 하나만 있는데 240906 현재  script 방식도 있음.

책을 참고하는거라 npm 방식 선택

소스 중간의 firebaseConfig 복사

 

3)vs터미널에 하단 명령어 입력

루트 폴더에서 실행해야 한다. 

E:\clonecoding\projects\nwitter> npm install firebase 

 

4)2에서 복사한 config값을 붙여넣는다..

책에서는 변수가 var 타입인데 현재 const다.

ES6문법을 위해 저자는 var 에서 const로 변경했다는데 시대의 흐름(?)때문인지 firebase에서도 변수타입을 바꾼듯.

src에 firebase.js파일을 새로 생성 후 여기에 붙여넣기 하면 된다.

 

리액트에서 모듈은 import로 불러 올 수 있다.

import firebase from "firebase/app"; => firbase/app에 포함된 모든 모듈을 firebase 객체에 부여

firebase.initializeApp(firebaseConfig); => firebase객체에서 initializeApp 함수 사용

 

import firebase from "firebase/app";

const firebaseConfig = {
  ..생략..
};

export default firebase.initializeApp(firebaseConfig);

 

 

 5)src/index.js 수정

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import firebase from './firebase';
console.log(firebase);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root"),
);

 

6)파일 저장 후 터미널 실행

PS E:\clonecoding\projects\nwitter> npm run start

> nwitter@0.1.0 start
> react-scripts start

 

7)오류 발생

 

해결법

-App.js에서 불필요한 코드삭제

// import logo from './logo.svg';

// import './App.css';

 

-firebase.js에서 코드 수정

https://gallery-k.tistory.com/259

[React] firebase 오류 - .js 파일에 firebase import 가 안됨

 

책 그대로 따라했더니 파이어베이스 버전이 달라 발생한 문제였다.

package-lock.json 파일에서 본인의 firebase 버전을 확인한다.

내가 사용하는 파베는 10.13.1

책에서 사용하는 버전은 8버전 이하라 오류가 발생한 것이다.

즉, 가운데 compat을 추가 하여 import해야 오류없이 실행된다.

import firebase from 'firebase/app'; //8버전 이하
import firebase from 'firebase/compat/app'; //9버전 이상

 

실행하면 app.js div 태그안의 내용이 출력된다.