여씨의 개발이야기

📢 왜 이러는 걸까요? 친구와 같이 제작중인 React App에서 router로 연결한 특정 페이지들이 지속적으로 404에러를 뱉는다. 이상하게 localhost로 테스트해보면 잘 나오는 페이지인데, firebase로 배포하면 해당 에러가 나타났다. 💾 레퍼런스 다행히도 우리와 같은 현상을 겪는 이를 stackoverflow에서 발견할 수 있었다. https://stackoverflow.com/questions/48826489/react-production-router-404-after-deep-refresh-firebase React production router 404 after deep refresh firebase i have this routes in my index.js

토이 프로젝트에서 firestore를 사용하다 당황스러운 일이 발생했다. 바로 firestore의 document 하위 collection을 가져오는 함수인 listCollections()가 제공되지 않는다는 것이다. 이리저리 머리를 굴려보며 get을 해와도 잘 가져오지 못 하는데 생각보다 간단한 방법으로 가져올 수 있었다. 예를 들어 위와 같은 구조의 DB가 있다고 하자. 그럼 보통 제일 상위 컬렉션인 greetings를 가져올 때에는 아래와 같이 query(collection(database, "컬렉션이름"))...... doc.data()로 데이터를 가져올 수 있다. const database = getFirestore(firebase); //정보가 올바르면 아래 파이어스토어 접근 const q =..

NoSQL은 이번에 친구와 토이프로젝트를 진행하면서 firestore를 통해 처음 접하게 되었다. NoSQL에 대해 검색해보니 MongoDB 등이 있으며 구조가 완전히 같지는 않지만 대체적으로 firestore처럼 json 형식을 띄고 있는 듯 하다. 이 글에서는 firestore의 DB 구조에 대해 알아보겠다. 1. RDBMS vs NoSQL RDBMS MongoDB or firestore Database Database Table Collection Tuple/Row Document Column Key/Field Table Join Embedded Documents PK PK(_id) Database Server & Client mysqld mongod mysql mongo 1-1. NoSQL의 구조..

사전 작업 1. firebase project 페이지에서 api 관련 키를 전부 복사한다. 2. 콘솔에 npm i --save firebase를 입력해 firebase 설치 ( 최신 버전으로는 node.js가 14ver 이상 설치되어 있어야 함) npm i --save firebase 3. react 프로젝트 내의 src에 firebase.js를 추가해 아래와 같이 입력한다. import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore'; const firebaseConfig = { apiKey: process.env.REACT_APP_FIREBASE_APIKEY, aut..

1. Firebase의 정의 파이어베이스는 구글에서 제공하는 Paas 형식 클라우드 서비스로, 웹 개발 / 모바일 개발에 직접적으로 도움이 되는 기능을 제공하는 백엔드 플랫폼이다. 파이어베이스에서는 데이터베이스, 인증, 스토리지 등 많은 것들을 제공한다.파이어베이스의 백엔드 서비스를 이용하면 개발자들이 프로그램 개발을 하는데 다양한 기능들을 사용할 수 있어 큰 도움이 된다. 또한 앱 배포 및 관리 기능도 제공하기 때문에 개발자 입장에서는 중요한 개발 단계 중 한 단계에 소모되는 시간을 크게 줄일 수 있다. AWS나 별도의 IDC. 또는 cafe24등을 이용해 웹서비스를 구축하는 것보다 더 쉽고 비용 없이 웹 서비스를 구축 하는 방법이라고 볼 수 있다. 이러한 만능 툴은 당연히 많은 장점이 있다. 하지만 ..