![[FE] React(리액트)로 간단한 게시판 만들기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FM3uXn%2FbtsGbBylQ4u%2FAAAAAAAAAAAAAAAAAAAAAO3GiDJGUbWtFZI2PjmAoWXvB1GxK80hGoFM-wRP0S5p%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1793458799%26allow_ip%3D%26allow_referer%3D%26signature%3DGkU%252B%252FAP1CU4NeMRXvoj9pBYhp%252Fo%253D)
pagination 기능 -> 한 페이지당 글의 개수 설정할 수 있는 기능 수정, 삭제 //App.jsimport React from "react";import { BrowserRouter as Router, Routes, Route } from "react-router-dom";import Board from "./components/Board";import PostForm from "./components/PostForm";import BoardDetail from "./components/BoardDetail";import PostEditForm from "./components/PostEditForm";function App() { return ( } /> ..
![[FE] Do it! 클론 코딩 트위터 (4)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fb65pJ5%2FbtsEYC0Ab1P%2FAAAAAAAAAAAAAAAAAAAAAPwM2RkLlo8OtmPv6m-wbcYHP8x86n2eqI-XD4r6pdlU%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1793458799%26allow_ip%3D%26allow_referer%3D%26signature%3D%252F5aYk7Ky35ZXBzezQ3w%252Bqg5rV6c%253D)
4-6 내비게이션 추가하고 로그아웃 처리하기 -> 사이트를 이리저리 옮길 수 있게 하기 위한 내비게이션 default 는 Home 으로 연결됌. My profile을 누르면 profile로 연결됌. signOut함수가 실행되면 IndexDB에 있는 정보를 알아서 비우고, 로그아웃까지 처리해줌. 로그아웃을 했음에도 주소 표시줄은 여전히 /profile임.⬇️고쳐보자 ! isLoggedIn 상태를 보고 두 Route로 분기로그아웃 처리가 끝난 상태면 isLoggedIn은 false. But false로 분기가 되더라도 exact path "/"는 정확하게 주소가 "/"인 경우에만 해당함. ( 버튼을 누른 다음의 주소는 "profile"이므로 동작해야하는 Route도 무시됨 따라서 Redirect가 동작..
![[FE] Do it! 클론 코딩 트위터 (3)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FU4bnr%2FbtsExIzgxt1%2FAAAAAAAAAAAAAAAAAAAAAMSyCWk0ZS0gi8a4qEz39hI30IcoJ8vzst7ldvF5mdOc%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1793458799%26allow_ip%3D%26allow_referer%3D%26signature%3DK4eVkj9Lba8bLD7qC4oA8s9r4CA%253D)
4장 회원가입, 로그인, 소셜 로그인 기능 만들기 - 누이와 파이어베이스 로그인 시스템을 연동 4-1 파이어베이스 로그인 준비하기 footer 엘리먼트 : 보통 사이트 아래에 있는 요소 App 컴포넌트에서 isLoggedIn를 AppRouter에 넘기고, AppRouter는 이를 받아 사용하도록함. = 깔끔한 경로를 사용하기 위한 방법 //jsconfig.json현재는 ../routes/Home 과 같이 상대 경로를 사용중임 -> 가독성이 좋지않다. jsconfig.json 파일 = 리액트에 사용할 자바스크립트를 위한 설정 파일 -> 절대 경로를 설정한다. .../components/Router ------> components/Router 등과 같이 절대경로로 모두 수정해준다. ‼️절대 경로..
![[FE] Do It! 클론 코딩 트위터 (2)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FdaYCSb%2FbtsEtjtO6fm%2FAAAAAAAAAAAAAAAAAAAAALkP1SUDv7oMJwD9Y4rrL0lhLa2X1VUr-WdWo3E7t4TM%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1793458799%26allow_ip%3D%26allow_referer%3D%26signature%3Dja1sYidH9ucw7aDTS5h9c6Useho%253D)
비밀키 숨기는 방법 -> .env 파일을 만들고, 그 파일에 비밀키 변수를 등록한 다음비밀키가 필요한 다른 파일에서 비밀키 변수를 불러 참조하게 만들면 됌. '비밀키 변수' = 환경변수 .env 파일만 깃허브에 업로드하지 않으면 비밀키 노출 막을 수 있음..env 파일( root 폴더에 새로 만듬 )에 환경 변수를 정의하려면 변수 맨 앞에 REACT_APP_을 붙여야함. .gitignore 파일 : 해당 파일에 있는 파일들은 git commit 시 올라가지 않음. process.env.REACT_APP_API_KEY : " .env 파일을 읽어 파일 안에 있는 변숫값을 불러오라"=> process.env.REACT_APP_API_KEY는 누이터를 빌드하는 시점에 .env 파일의 apiKEY값, 즉 진짜..