리액트 기초

Firestore & Redux - redux-thunk

미리 해야할 일 1. Redux와 React 프로젝트 연결 우선 아래 깃허브에서 Redux 모듈을 연결한 React 프로젝트를 설치하자. https://github.com/ejzl521/React_Redux-Router GitHub - ejzl521/React_Redux-Router: 리액트 Redux&Router 템플릿 리액트 Redux&Router 템플릿. Contribute to ejzl521/React_Redux-Router development by creating an account on GitHub. github.com 혹은 아래 코드를 붙여넣기하고 필요한 라이브러리를 설치하자 redux/module/bucket.js 리덕스 모듈 // Action const LOAD = 'bucket/LOA..

이벤트 사용시 주의사항!

엘리먼트에 직접 이벤트를 넣을 때 주의사항! 만약 이벤트가 발생했을 때 실행되는 함수에 ()를 붙이면 무한루프에 빠진다. ()는 함수를 호출하기 때문에 ()를 붙이면 요소가 렌더링됨과 동시에 함수 호출이 일어나서 무한으로 렌더링이 일어난다. onClick={add_count()} 아래처럼 ()를 떼어서 함수를 참조하거나 onClick={add_count} 단순히 이벤트가 발생했을 때 실행되는 함수를 선언해서 해결할 수 있다. onClick={()=>{add_count()}}

React & Firebase 데이터 추가/수정/삭제

React & Firebase 연동 데이터를 추가, 삭제하기 전에 아래를 참고해서 Firebase와 Firestore를 연동하자. https://duckgugong.tistory.com/206 Firebase/Firestore 설정하기 Firebase? Firebase는 서버리스 서비스 중에 하나이다. Baas 중에 하나라고 표현할 수 있다. Baas는 는 Backend as a Service의 약자이다. → 우리가 흔히 백엔드 하면 떠올리는 것들을 빌려오는 것이다. Firebase duckgugong.tistory.com Firestore 데이터 수정하기 (set/add/update/delete) 여기를 클릭해서 공식문서를 확인해보자! 아래처럼 데이터를 넣어놨다고 가정하자. 문서 추가하기 (set) s..

React & Firebase 연동하기/데이터 가져오기

Firebase / Firestore 설정 https://duckgugong.tistory.com/206 Firebase/Firestore 설정하기 Firebase? Firebase는 서버리스 서비스 중에 하나이다. Baas 중에 하나라고 표현할 수 있다. Baas는 는 Backend as a Service의 약자이다. → 우리가 흔히 백엔드 하면 떠올리는 것들을 빌려오는 것이다. Firebase duckgugong.tistory.com 위 링크에 들어가서 Firebase / Firestore를 설정한 후에 Firestore에 원하는 데이터를 추가하자. 나는 Firebase 프로젝트의 이름을 duckgugong-react, collection의 이름을 bucket, document의 이름을 bucket_..