Why not?

오랜만에 작성하는 것 같지만, 그게 사실입니다. firebase의 firestore를 사용하여 database를 연결하였다. database를 생성해주고, 기존 fbase.js 파일을 수정하였다. 신기한 점은 이 cloud firestore의 database가 NoSQL database라는 것이다. SQL database만 다뤄봤는데 NoSQL은 새로 다뤄봐서 차이점을 비교하면서 공부해봐야겠다. firestore database는 Collection과 Document가 있다. Collection은 기존 폴더와 기능이 유사하다. Document는 Collection 내부에 있는 것이다. Collection을 생성하면 Document를 채우라고 뜬다. 따라서 Collection은 Documents의 그룹이라..

https://studywithzpqmdh.tistory.com/95 Day 17 - ReactJS로 TodoList 만들기 #4 2023/01/11 투두 리스트 작업 화면이다. 2022/12/29에 작업한 화면과 비교해보면... 정말 많이 발전하였다. https://studywithzpqmdh.tistory.com/94 Day 16 - ReactJS로 TodoList 만들기 #3 기존의 나의 TodoList는 아래와 같 studywithzpqmdh.tistory.com 구현 한 것 1. localstorage 추가 2. padding 추가 3. 하트 이모티콘 수정 4. 추가, 삭제 버튼 수정 먼저 localstorage는 useEffect를 사용하여 구현하였다. 처음 렌더링될 때 localstorage..

2023/01/11 투두 리스트 작업 화면이다. 2022/12/29에 작업한 화면과 비교해보면... 정말 많이 발전하였다. https://studywithzpqmdh.tistory.com/94 Day 16 - ReactJS로 TodoList 만들기 #3 기존의 나의 TodoList는 아래와 같다 https://studywithzpqmdh.tistory.com/87 Day 9 - ReactJS로 TodoList 만들기 #2 https://studywithzpqmdh.tistory.com/86 Day 8 - ReactJS로 TodoList 만들기 #1 ToDo 만들기 프로젝트를 하려고 했는데 studywithzpqmdh.tistory.com 2023/01/09에 게시한 포스팅과 비교해보면 가장 큰 차이점은 ..

기존의 나의 TodoList는 아래와 같다 https://studywithzpqmdh.tistory.com/87 Day 9 - ReactJS로 TodoList 만들기 #2 https://studywithzpqmdh.tistory.com/86 Day 8 - ReactJS로 TodoList 만들기 #1 ToDo 만들기 프로젝트를 하려고 했는데, 마침 강의에서도 간단한 todo project를 만들길래 따라 만들고 그것을 발전시키는 방향으로 공부 studywithzpqmdh.tistory.com 몇 가지 문제점을 해결하였지만 아직 많이 부족하다. 그동안 몇가지를 수정하였는데 그에 대한 기록을 하려고 한다. 먼저 배경 색을 바꾸었다. 그리고 내용이 들어가는 컨테이너도 만들었다. "추가", "삭제"의 디자인이 없..

https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth?hl=ko#createuserwithemailandpassword Auth | JavaScript SDK | Firebase JavaScript API reference Reference for Auth firebase.google.com firebase로 auth 과정을 진행하기 위해, 새로운 아이디를 생성하는 과정을 진행하였다. 기존 Auth.js에 코드를 추가하여 계정을 추가하였다. console에는 이렇게 찍히며! 생성된 유저의 정보가 뜬다. 이 과정을 지나면 로그인이 된 것이다. setPersistence는 사용자들을 어떻게 기억할 것인지 선택할 수 있도록 해준다. 'loca..

Router.js에 있는 state를 지운다. 왜냐하면 Router가 하나의 용도로만 쓰여야 하기 때문이다. 따라서 Router.js에 있는 state를 App.js로 옮긴다. https://firebase.google.com/docs/reference/js/v8/firebase.auth auth | JavaScript SDK | Firebase JavaScript API reference Reference for auth firebase.google.com firebase 공식 문서를 읽으며 프로젝트를 진행해보자. 기존 firebase.js 파일을 fbase.js로 파일명을 변경한다. 왜냐하면 같은 걸 반복해서 import 하는 것을 피하기 위함이다. https://create-react-app.dev..

Firebase가 좋지만 실제 프로젝트에서는 사용하지 않을 것임. 왜냐하면 1. firebase의 인증을 사용한다는 것은 실제 인증 서버로의 접근은 하지 않는다는 것. 2. firebase의 firestore을 사용한다는 것은 내 서버에는 db가 존재하지 않고 구글의 db라는 것. => 구글로부터 빌려서 사용하는 것이기 때문에 개발자만의 것은 없음. 따라서 아이디어를 테스트하기 위한 용도거나 처음 공부할 때 사용한다. 강의와의 버전을 맞추기 위해 firebase와 react-router-dom을 설치할 때 아래의 명령어로 설치하는 것을 추천한다. npm i firebase@9.6.1 npm i react-router-dom@5.3.0 위와 같이 firebase 프로젝트를 생성해준다. firebase 프로..

https://nomadcoders.co/nwitter/ All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co 중급 과정으로 Gogo~!! 트위터 클론 코딩 강좌에서는 firebase를 이용하여 실시간으로 업데이트되는 트위터 앱을 만든다. firebase는 처음에는 데이터베이스였다. 하지만 구글로 인수되고 규모가 확장되었다. 사용자들은 firebase로 조금 더 괜찮은 app을 만들 수 있다. 이는 cloud firestore 사용하고 firebase ML도 가능(오 대박)하다. cloud storage를 통해 사진도 함께 트윗할 수 있도록 한다. 그리고 authentication 과정이 엄청 엄청 쉬워서 fire..