Do It! 클론 코딩 트위터 (2)

비밀키 숨기는 방법 

->  .env 파일을 만들고, 그 파일에 비밀키 변수를 등록한 다음

비밀키가 필요한 다른 파일에서 비밀키 변수를 불러 참조하게 만들면 됌. 

'비밀키 변수' = 환경변수 

.env 파일만 깃허브에 업로드하지 않으면 비밀키 노출 막을 수 있음.

<.env 파일로 환경 변수 설정하기>

.env 파일( root 폴더에 새로 만듬 )에 환경 변수를 정의하려면 변수 맨 앞에 REACT_APP_을 붙여야함. 

<.env 파일 숨기기>

.gitignore 파일 : 해당 파일에 있는 파일들은 git commit 시 올라가지 않음. 

<firebaseConfig.js에 환경 변수 적용하기>

process.env.REACT_APP_API_KEY : " .env 파일을 읽어 파일 안에 있는 변숫값을 불러오라"

=> process.env.REACT_APP_API_KEY는 누이터를 빌드하는 시점에 .env 파일의 apiKEY값, 

즉 진짜 비밀키로 대체됨. 

이런 방식으로 코드에 비밀키를 노출하지 않으면서도 실제로는 비밀키 적용. 

 

‼️03-2 라우터 준비하기 

리액트에서 프로젝트 구조 구성은 라우터를 적용하기 위해 함. 

라우터는 주소 표시줄에 my.site.com/a나 my.site.com/b와 같은 주소를 입력했을 떄 어떤 컴포넌트를 보여줄지 결정하는 역할을 함. 

라우터가 제대로 동작하기 위해 ) 라우터가 이해할 수 있도록 파일과 폴더를 구성함. 

 

<누이터의 뼈대 만들기>

페이지는 routes 폴더에, 페이지를 이루는 구성 요소들은 componenets 폴더에 나눠 저장. 

 

< react-router-dom 설치하고 라우터 설정하기 >

react-router-dom을 설치하고 Router.js 파일을 components 폴더에 만들기 

 

‼️03-3 라우터 적용하기 

라우터 : "어떤 컴포넌트"를 '렌더링' 할지 결정하는 역할 

컴포넌트 = 화면을 표현하기 위한 조각 

 

<상태 사용을 위한 hooks>

리액트는 두 가지 형태로 컴포넌트 사용가능.

두 컴포넌트는 컴포넌트에서 변경할 수 있는 변수(= 상태를 관리하는 방식)가 서로 다름. 

함수 컴포넌트는 상태관리를 위해 Hooks를 사용함. 

 

<훅스를 위한 useState 함수의 역할>

hooks를 사용하려면 useState함수를 쓰면됌.

ex) useState함수로 로그인 여부를 판단하기 위한 상태를 만들기 

이 상태를 이용해서 true, false에 따라 특정 컴포넌트를 보여줌. 

[isLoggedIn, setIsLoggedIn] = useState(false) 와 같이 useState 함수를 사용해서 

        상태와     상태 관리 함수를 짝으로 만들어 주면 됌. 

-> isLoggedIn 의 값은 setLoggedIn 함수만 사용해서 변경할 수 있게됌. 

 

<useState 함수 사용하기>

const [isLoggedIn, setIsLoggedIn] = useState(false);

-> isLoggedIn은 단순히 변수가 아니라 setIsLoggedIn으로 관리하는 상태로 취급할 수 있게됌. 

초깃값은 useState(false) -> false 이고, 

setIsLoggedIn은 변수가 아니라 isLoggedIn을 변경할 때 사용하는 함수임. 

 

<삼항 연산자와 상태로 적절한 컴포넌트 반환하기>

 

삼항 연산자와 isLoggedIn을 조합해서 상태의 true, false에 따라 적절한 컴포넌트를 렌더링함. 

isLoggedIn 값은 setIsLoggedIn 함수로 바꾸. 

exact path = "/" props 전달 : 누이터에 처음 접속했을 때 Home 또는 Auth 컴포넌트를 보여줄 수 있음. 

=> 루트 페이지 ( root page )

props는 컴포넌트에 특정값을 전달할 때 사용.

 

🚩하지만, 리액트 6버전 이상에서는 "Switch"를 지원하지 않아서 오류가 뜸.

 

<Switch> 대신 <Route>를 사용하여 코드 수정.  

 

useState(false) 시 Auth 컴포넌트 실행 

useState(true) 시 Home컴포넌트 실행 

-> 라우터가 정상으로 적용됌.