🎉 성과 완성한 부분 로그인 페이지 CSS파일 초안 완성 ✨ 느낀점 👍 알게 된 점 모듈을 이용하여 CSS파일 적용할때, className 2개 이상 적용시키기 `${...} ${...}` 자바스크립트에서 문자열에 변수 사용할때처럼 사용하면 된다. 특이한점은 ,(콤마)로 구분짓지 않고, 띄어쓰기로 한다는 점이 특이하다. 에러 해결 배포하기 전에는 어느곳에도 에러 메시지가 없었는데, 깃페이지로 배포 후에 콘솔창에 에러메시지가 적혀있었다. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, canc..

🎉 성과 완성한 부분 소셜 로그인시 소셜에서 사용하던 닉네임 불러오기, GitPage로 배포 ✨ 느낀점 👍 알게 된 점 배포 할 경우 색인 추가 배포하기 전에는 상관없었지만, 배포 후에는 내가 생성한 트윗을 불러오기 위해서는 색인이 필요하기때문에 색인을 추가했다. 색인을 추가하지 않을경우에는 내가 만든 웹사이트가 제대로 작동하지 않게된다. 색인추가 방법은 배포 후에 콘솔창을 띄우게되면 색인추가하라는 링크를 클릭하면 해당 홈페이지로 이동하게되는데, 그 때 색인을 추가하면된다. React를 사용한 웹사이트 Git-Page로 배포하기 1. 내가 만든 코드를 깃허브에 올린다. 2. 터미널에서 깃페이지로 올려주는 모듈을 설치한다. npm i gh-pages 3. package.json 파일 제일 밑에 homepa..

🎉 성과 완성한 부분 파일 업로드하여 데이터베이스에 추가 및 삭제, 트윗삭제시 파일도 연쇄적으로 삭제 ✨ 느낀점 👍 알게 된 점 Firebase를 이용하여 Storage에 파일 생성 완료 업로드한 파일 미리보기 const [File, setFile] = useState(''); const onFileChange = event = > { const {file} = event.target; const myfile = file[0]; const reader = new FileReader(); reader.readAsDataURL(myfile); reader.onloadend = (finished) => { const {result} = finished.current.Target; setFile(result) ..

🎉 성과 완성한 부분 데이터베이스를 생성하고, 실시간으로 사용가능한 CRUD 기능을 모두 구현했다. ✨ 느낀점 👍 알게 된 점 Firebase를 이용하여 Cloud Database 생성완료 데이터베이스는 컬렉션, 문서, 필드 총 3가지로 나뉘어져있다. Collection는 폴더, Document는 파일, Field는 내용이며, 폴더안에 파일들이 있고, 파일안에는 내용으로 차있는 것이라고 생각하면 쉽게 이해가 가능하다. Database에 데이터 Create하기(CRUD) //fbase파일 import { getFirestore } from "firebase/firestore"; export const dbService = getFirestore(); //HOME.js파일 import {dbService} ..

🎉 성과 완성한 부분 소셜 로그인 기능 구현 완료 google, github, 회원가입 등 3가지 방법으로 로그인 구현 완료 useNavigate()를 활용하여 로그아웃 시 Home페이지로 리다이렉트 firebase 8 버전 이하는 Redirect를 사용했지만, 9 버전부터는 useNavigate()를 이용한다. ✨ 느낀 점 👍 알게 된 점 로그인 상태 유지하기 로그인을 하면 Home페이지로 가게 코드를 구현했는데 정상 작동하지 않았다. 그 이유는 firebase가 로딩되기 전에 코드가 실행되어서 이다. 따라서 firebase가 전부 로딩된 다음에 코드를 실행시켜주는 코드를 작성해야 한다. firebase에서 지원하는 onAuthStateChaged() 코드를 사용하면 된다. import {onAuthS..