🎉 성과 완성한 부분 파일 업로드하여 데이터베이스에 추가 및 삭제, 트윗삭제시 파일도 연쇄적으로 삭제 ✨ 느낀점 👍 알게 된 점 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..

All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co 👩‍💻 이 프로젝트로 정한 이유 React를 학습하면서 React에 대한 실력을 향상하고자 시작하게 되었다. 🎉 성과 완성한 부분 firebase의 Sign-in method 설정 완료 인증 웹페이지 골격 개발 input태그와 form태그, button태그로 기본 골격을 만들었고, copyright와 현재 년도는 밑의 코드로 작성하였다. © {new Date().getFullYear()} twitter ✨ 느낀점 👍 알게 된 점 코드 단축하기 -1- input 태그에 사용되는 value값을 단축코드로 완성했다. 단축코드를 사용하지 않으면 input의 사용 개수가..