[1人 프로젝트] 트위터 클론코딩 4회차
2022. 1. 24. 14:18
프로 젝트/트위터
🎉 성과 완성한 부분 파일 업로드하여 데이터베이스에 추가 및 삭제, 트윗삭제시 파일도 연쇄적으로 삭제 ✨ 느낀점 👍 알게 된 점 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) ..
[교육] 스파르타코딩클럽 웹개발 종합반 회고 (完)
2022. 1. 23. 00:53
교육/스파르타 코딩클럽
🤔 지원 동기 파이썬을 공부하다가 더 이상 웹 공부를 늦추면 안되겠다는 생각을 해서 지원하게되었다. 아직 진로를 정하지 않은 상태에서 풀스택을 가르쳐준다는 점이 좋았다. 또, K-Digital로 무료로 수강할 수있다는 점과 장소와 시간에 구애받지 않는 온라인 녹화강의라는 점이 좋았다. 뿐만아니라 수료증도 받을 수 있다고 해서 지원하게되었다. 🔋 선발 과정 내일배움카드 발급과 내일배움카드의 크레딧 1원 이상 보유해야 지원이 가능하다. 🎉 합격 합격 후 자비부담금으로 41,000을 지불해야한다. 자비부담금은 진도율이 80%이상이면 환급조건이 충족되며, 환급은 수강기간이 끝난 다음달부터 신청가능하다. ✨ 느낀점 🏫 기억에 남는 교육 과정 강의기간 : 21. 12. 20 ~ 22. 1. 23 실습: 랜덤 고양이..
[1人 프로젝트] 트위터 클론코딩 3회차
2022. 1. 22. 23:59
프로 젝트/트위터
🎉 성과 완성한 부분 데이터베이스를 생성하고, 실시간으로 사용가능한 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} ..
[1人 프로젝트] 트위터 클론코딩 2회차
2022. 1. 20. 23:53
프로 젝트/트위터
🎉 성과 완성한 부분 소셜 로그인 기능 구현 완료 google, github, 회원가입 등 3가지 방법으로 로그인 구현 완료 useNavigate()를 활용하여 로그아웃 시 Home페이지로 리다이렉트 firebase 8 버전 이하는 Redirect를 사용했지만, 9 버전부터는 useNavigate()를 이용한다. ✨ 느낀 점 👍 알게 된 점 로그인 상태 유지하기 로그인을 하면 Home페이지로 가게 코드를 구현했는데 정상 작동하지 않았다. 그 이유는 firebase가 로딩되기 전에 코드가 실행되어서 이다. 따라서 firebase가 전부 로딩된 다음에 코드를 실행시켜주는 코드를 작성해야 한다. firebase에서 지원하는 onAuthStateChaged() 코드를 사용하면 된다. import {onAuthS..
[공부] 노마드 코더 React hooks 4회차(useConfirm, usePreventLeave)
2022. 1. 20. 20:17
공부/프론트엔드
✨ 느낀 점 👍 알게 된 점 window.confirm코드를 이용해 웹페이지 확인창 띄우기 위의 코드는 다른 곳에 함수를 작성하고 함수를 호출하는 형식으로 작성했는데, 바로 함수를 작성해도 상관없다. 바로 함수를 작성하는 방법은 아래와 같다. const Fn = () => { if(window.confirm('메시지')) { () => {...}// 확인을 누를경우 실행할 함수 } else{ () => {...}// 취소를 누를경우 실행할 함수 }} 탭 닫기 전 확인창 띄우기 protect버튼에는 onClick으로 enablePrevent함수를 호출하도록 한다. enablePrevent함수는 이벤트 함수로 탭을 닫기 전(beforeunload)에 listener함수를 실행한다. listener함수는 ev..