DO IT! 클론 코딩 twitter4 Do it! 클론 코딩 트위터 (4) 4-6 내비게이션 추가하고 로그아웃 처리하기 -> 사이트를 이리저리 옮길 수 있게 하기 위한 내비게이션 default 는 Home 으로 연결됌. My profile을 누르면 profile로 연결됌. signOut함수가 실행되면 IndexDB에 있는 정보를 알아서 비우고, 로그아웃까지 처리해줌. 로그아웃을 했음에도 주소 표시줄은 여전히 /profile임. ⬇️ 고쳐보자 ! isLoggedIn 상태를 보고 두 Route로 분기 로그아웃 처리가 끝난 상태면 isLoggedIn은 false. But false로 분기가 되더라도 exact path "/"는 정확하게 주소가 "/"인 경우에만 해당함. ( 버튼을 누른 다음의 주소는 "profile"이므로 .. 2024. 2. 18. Do it! 클론 코딩 트위터 (3) 4장 회원가입, 로그인, 소셜 로그인 기능 만들기 - 누이와 파이어베이스 로그인 시스템을 연동 4-1 파이어베이스 로그인 준비하기 footer 엘리먼트 : 보통 사이트 아래에 있는 요소 App 컴포넌트에서 isLoggedIn를 AppRouter에 넘기고, AppRouter는 이를 받아 사용하도록함. = 깔끔한 경로를 사용하기 위한 방법 //jsconfig.json 현재는 ../routes/Home 과 같이 상대 경로를 사용중임 -> 가독성이 좋지않다. jsconfig.json 파일 = 리액트에 사용할 자바스크립트를 위한 설정 파일 -> 절대 경로를 설정한다. .../components/Router ------> components/Router 등과 같이 절대경로로 모두 수정해준다. ‼️절대 경로의 한계 .. 2024. 2. 6. Do It! 클론 코딩 트위터 (2) 비밀키 숨기는 방법 -> .env 파일을 만들고, 그 파일에 비밀키 변수를 등록한 다음 비밀키가 필요한 다른 파일에서 비밀키 변수를 불러 참조하게 만들면 됌. '비밀키 변수' = 환경변수 .env 파일만 깃허브에 업로드하지 않으면 비밀키 노출 막을 수 있음. .env 파일( root 폴더에 새로 만듬 )에 환경 변수를 정의하려면 변수 맨 앞에 REACT_APP_을 붙여야함. .gitignore 파일 : 해당 파일에 있는 파일들은 git commit 시 올라가지 않음. process.env.REACT_APP_API_KEY : " .env 파일을 읽어 파일 안에 있는 변숫값을 불러오라" => process.env.REACT_APP_API_KEY는 누이터를 빌드하는 시점에 .env 파일의 apiKEY값, 즉 .. 2024. 2. 6. Do it! 클론 코딩 트위터(1) visual studio를 이용해서 react앱을 실행하고자 한다. 우선 github와 연결하고자 하는데 push하는 부분에서 계속 오류가 났다. $git remote -v를 쳐보면 현재 설정된 원격 저장소 주소를 확인할 수 있다. http://github.com/parkgyul/nwitter.git으로 되어 있어야할 원격 저장소 주소가 다른걸로 등록되어 있었다. 그래서 url을 새로 연결하고자 할 때에는 $git remote set-url orign http://github.com/parkgyul/nwitter.git 을 사용하여 새로운 URL을 연결시켜준다. $git remote -v를 쳐보면 현재 연결된 원격저장소의 url을 나타내준다. $git add . -> 변경사항을 스테이징 영역에 올리는 것.. 2024. 2. 6. 이전 1 다음
