반응형 전체 글338 [Firebase] 파이어스토어 realtime update 처리하기 https://firebase.google.com/docs/firestore/query-data/listen#web-version-9 Cloud Firestore로 실시간 업데이트 가져오기 | Firebase 2022년 10월 18일에 오프라인과 온라인으로 진행될 Firebase Summit에 참여하세요. Firebase로 앱을 빠르게 개발하고 안심하고 앱을 출시하며 손쉽게 확장하는 방법을 알아보세요. 지금 등록하기 의견 보 firebase.google.com 파이어스토어에 데이터가 업데이트 되었다고 하자. 당신이 이 업데이트된 내용을 실시간으로 처리하고 싶다면? 결론부터 말하자면 onSnapshot() 메소드를 이용하면 된다. 리액트에서는 아래처럼 사용한다. import { doc, onSnapshot.. 2022. 9. 23. 브라우저 콘솔기록 지우는 방법 clear() 을 입력하면 지워진다 2022. 9. 23. [Firebase] React에 파이어베이스 데이터베이스 사용하기 https://firebase.google.com/docs/firestore/quickstart#web-version-9 Cloud Firestore 시작하기 | Firebase 2022년 10월 18일에 오프라인과 온라인으로 진행될 Firebase Summit에 참여하세요. Firebase로 앱을 빠르게 개발하고 안심하고 앱을 출시하며 손쉽게 확장하는 방법을 알아보세요. 지금 등록하기 의견 보 firebase.google.com 0. 사용하기 앞서 파이어베이스는 두가지 서비스가 있다. Firestore realtime database 이게 한글로 설명된건 참으로 애매하게 설명해 놨는데 간단히 정리하자면 둘다 똑같이 데이터베이스인데 Firestore가 더 최신버전이고 성능도 좋다 라고 영어문서에 적혀있음.. 2022. 9. 22. Cannot find file does not match the corresponding name on disk 리액트를 하다가 파일 임포트를 할 때 absolute path 설정을 해주면 가끔 저런 에러가 뜬다. 분명 파일 위치를 제대로 정해줬는데 왜 못찾는다고 난리일 까... 원인을 알아보니 망할 vscode의 자동완성 때문이였다. 나는 위에처럼 Root라는 컴포넌트를 임포트하고 싶었는데 vscode가 자동으로 위와같이 경로를 만들어 주었다. 허나 확인해보니 실제 경로는 아래처럼 되어있다. 무엇이 문제인지 진짜 한참 고민하다가 겨우 알았다... 실제 경로는 'routes/root' 가 아니라 'routes/Root' 라는 것을... vscode는 소문자로 찾아서 임포트 해주었지만 실제로는 대문자를 적어줘야 했던 거다 맨날 android studio같은 갓IDE만 쓰다가 vscode 쓰니깐 화병나 미춰버리긋네.... 2022. 9. 21. useHref() may be used only in the context of a <Router> component. 문제원인 리액트 라우터를 사용할 때 컴포넌트를 바깥쪽에서 사용하여 생긴 문제이다. 라우터 바깥에 있으니 Link가 가리키는 곳이 어딘지 몰라 에러가 나는 것이다. 해결방법 를 라우터 안쪽으로 옮겨주면 해결된다 2022. 9. 19. Objects are not valid as a react child 해결법 문제 원인 자바스크립트 Object를 리액트 컴포넌트처럼 사용하려 했을 때 생기는 문제이다 function myComponent() { const jsObject = { abc: 1, edf : 2}; return ( {jsObject} // jsObject는 리액트 컴포넌트가 아니므로 에러! ); } 해결방법 리액트 컴포넌트가 아닌 jsObject가 마치 리액트 컴포넌트처럼 사용된 부분이 있는지 확인한다 2022. 9. 19. React Router v6.4 튜토리얼 배우기 https://reactrouter.com/en/main/start/tutorial Tutorial Tutorial Welcome to the tutorial! We'll be building a small, but feature-rich app that let's you keep track of your contacts. We expect it to take between 30-60m if you're following along. 👉 Every time you see this it means you need to do something in t reactrouter.com All images and contents from above link 양이 조금 방대해서, 순서나 내용에 오류가 조금 있을 수 .. 2022. 9. 16. Fragment 사용법 Fragment란? 프래그먼트는 컴포넌트가 여러개의 엘리먼트를 하나로묶어, 하나의 엘리먼트처럼 리턴해주록 하는 기능이다. 컴포넌트는 하나의 엘리먼트를 리턴해야 한다. 물론 그 엘리먼트 안에 여러 자식 엘리먼트들이 있을 수 있다. 그러나 특정한 상황에서 여러개의 엘리먼트를 리턴해주어야 하는 경우가 있다. 아래 예시를 보자 class Table extends React.Component { render() { return ( ); } } 위 예시에서 안에 Columns는 여러개의 를 리턴해야 한다 허나 컴포넌트는 하나의 엘리먼트만 리턴해야 함으로 이를 로 아래처럼 감쌌다고 하자 class Columns extends React.Component { render() { return ( Hello World ).. 2022. 9. 15. 리액트 커스텀 환경변수 사용하기 https://create-react-app.dev/docs/adding-custom-environment-variables/ Adding Custom Environment Variables | Create React App Note: this feature is available with react-scripts@0.2.3 and higher. create-react-app.dev 1. 개요 Create Recat App에서는 커스텀 환경변수를 추가하여 마치 local variable 처럼 접근하여 사용이 가능하다. 리액트에서는 기본적으로 NODE_ENV라는 환경변수가 정의되어 있으며 커스텀으로 사용하는 환경변수는 REACT_APP_ 으로 시작한다. 2. 환경변수를 정의하는법 환경변수를 정의하는 방법은.. 2022. 9. 14. 이전 1 ··· 13 14 15 16 17 18 19 ··· 38 다음 반응형
