웹개발/PRJ

이번 프로젝트에서 내가 담당한 기능은 firebase를 이용해 도서리뷰 데이터를 추가하고 읽어들이는 부분이다. 여러번 구현해봤던 로직이라 이번에도 어렵지 않게 구현할 수 있었다. 간단한 흐름만 정리하도록 하겠다. 1. Firebase를 세팅한다. import { initializeApp } from 'firebase/app'; import { getFirestore } from 'firebase/firestore'; const firebaseConfig = { apiKey: process.env.REACT_APP_FB_API_KEY, authDomain: process.env.REACT_APP_FB_AUTH_DOMAIN, projectId: process.env.REACT_APP_FB_PROJECT_ID..

프로젝트 소개 프로젝트 명 : Bookie 소개 한 줄 정리 : 도서 리뷰 사이트 내용 : 읽은 도서의 감상을 공유할 수 있는 사이트입니다. 필수 구현 사항 로그인, 회원 가입 Authentication 에서 제공하는 api를 이용하여 아래 회원 가입, 로그인을 구현해보세요. 아이디(이메일), 패스워드 소셜 로그인 (구글, 깃헙) CRUD Firestore 에서 제공하는 api를 이용하여 CRUD 데이터베이스 핸들링을 구현해보세요. CUD(등록, 수정, 삭제)가 일어날 때 마다 R(조회)해서 자연스럽게 화면 변경을 해보세요. 마이 페이지 내 게시물 보기 프로필 수정 기능 배포하기 Vercel 이라는 호스팅플랫폼을 이용해 배포합니다. 배포에 적용될 브랜치는 main 또는 master 브랜치로 적용합니다. ..

목표 firebase를 이용한 투두리스트 CRUD 기능 구현하기 구현 1. firebase 사이트에서 cloud storage를 생성한 후 firebase.js 파일을 만들어서 아래와 같이 작성합니다. // Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; import { getFirestore } from "firebase/firestore"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase...

기획 - 오늘 할 일을 기록하고, 체크하고, 저장할 수 있는 to-do-list 어플리케이션 만들기 - 대강 급하게 만들어 본 UI는 아래와 같음 -실제로 사용할 수 있는 걸 만들고 싶어서 weekly로 볼 수 있게 작성했으며, firebase를 이용해서 데이터를 클라우드에 저장하고 불러오고자 한다. 기술스택 javascript react firebase 구현 1. 만들고자 하는 폴더에 들어가서 npx create-react-app to-do-list 를 작성한다! 2. App js에 WeeklyCalander 컴포넌트와 와 TodoList 컴포넌트를 만든다. import "./App.css"; import TodoList from "components/ToDoList"; import WeeklyCala..