리액트 만드는법
npx create-react-app nwitter
깃허브와 내 리액트 연동하는법
git remote add origin https://github.com/linehyang/nwitter.git
깃허브 커밋 취소(되돌리기)
git reset --hard 8eb028d
github에 환경변수를 업로드 하고 싶지 않은 경우
- .env파일과 .gitignore파일을 준비
- .gitignore파일에 .env를 텍스트로 기재 이렇게하면 깃허브에 올리게 되림
- 깃허브 업로드된 파일을 보면 환경변수가 업로드 되지 않는것을 알 수 있음.
create-react-app을 사용하고 환경변수를 사용해야 한다면
.env파일에 아래와 같이 써주어야 함 이게 규칙임.(REACTAPP으로 시작하는 환경변수를 찾도록 자동 설정되어져 있음. 우리 페이스북 형님들이 그렇게 설정함.)
1. REACT_APP 으로 시작
2. 그다음 를 하나 더 붙이고 그 뒤에 이름을 붙여야 함.
3. 그뒤에 =를 붙인다음 값을 넣어주면됨.
ex) REACT_APP_key
REACT_APP_API_KEY=AIzaSyDGk,
REACT_APP_AUTH_DOMAIN=nwitter,
REACT_APP_PROJECT_ID=nwitter,
REACT_APP_STORAGE_BUCKET=nwitter.
REACT_APP_MESSAGIN_ID=122,
REACT_APP_PP_ID=1:12실제 사용시에는
process.env.REACT_APP_API_KEY <-- 이런식으로 사용하면 해당 값이 들어감/
이렇게 하는 이유는 깃허브에 해당 환경변수를 공유하지 않기 위함이며 완벽한 보안은 아님,
실제 사용하게 되는경우에는 .env에 있는 실제값을 사용해야 firebase에 접속이 가능하기 때문에, 사용자들에게는 보일 수 있음. 그래서 추가적으로 보안적인 요소를 추가해야됨.
router 만드는법
router를 사용하기 위해서는 npm 으로 아래의 내용을 install해야함.
npm i react-router-dom (i는 install의 약자)
그 이후 실제 라우팅하려는 컴포터넌트에 아래의 내용들을 import해야한다.
import { HashRouter as Router, Redirect, Route, Switch } from "react-router-dom";
그 이후 아래 내용으로 기재하면 된다.
Router안에는 분기점인 Switch가 있어야하며 스위치안에는 그것을 패스로 나눠주는 Route가 있어야됨. Route안에는 우리가 보여줄 컴포넌트가 들어가면됨.
개념
1.Router or BrowserRouter
페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할을 해주며 Router가 상위에 작성되어 있어야만 Route컴포넌트를 사용할 수 있음.
- Swtich
경로를 매칭해주는 역항를 하는 컴포넌트이며, Route를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링 시켜주는 역할, 스위치를 사용하지 않으면 매칭되는 모든 요소를 렌더링함.
- Route
path속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정함, Link컴포넌트가 정해주는 URL경로와 일치하는 경우에만 작동.
- Link
경로를 연결해주는 역할을 하는 컴포넌트이며 페이지 전환을 통해 페이지를 새로 불러오지 않고 어플리케이션을 그대로 유지하여 페이지의 주소만 변경해줌.
아래에 보면 아무런 태그없이 <>만 적혀있는것이 있는데 이러한것을 Fragment라고하며
사용하는 이유는 많은 요소들을 렌더하고 싶을때 사용. 렌더하고 싶지만 이것듯을 일일히 div및 span안에 넣기 싫을때 사용한다.(부모요소가 없을때.)
<Router>
<Switch>
{isLoggedIn ?
<>
<Route exact path="/">
<Home />
</Route>
<Route exact path="/profile">
<Profile />
</Route>
</>
:
<Route exact path="/">
<Auth />
</Route>}
</Switch>
</Router>)