리액트 기초

Firebase/Firestore 설정하기

Firebase? Firebase는 서버리스 서비스 중에 하나이다. Baas 중에 하나라고 표현할 수 있다. Baas는 는 Backend as a Service의 약자이다. → 우리가 흔히 백엔드 하면 떠올리는 것들을 빌려오는 것이다. Firebase는 realtime-database인 firestore와 Hosting(서버 없이 웹 서비스를 배포할 수 있도록 도와주는 서비스)을 제공하는데 이 둘을 사용해보자. 또한, 데이터 베이스, 소셜 서비스 연동(소셜 로그인 등), 파일 시스템 등을 API 형태로 제공해준다! 여기를 클릭해서 Firebase 사이트를 구경해보자! Firebase 설정하기 여기를 클릭해서 firebase 홈페이지에 접속 후 시작하기 버튼을 클릭한다. 프로젝트 만들기 클릭. 프로젝트의 ..

history.push VS window.location.href

공통점 url이 변경되어 다른 페이지로 이동한다. 차이점 HTTP 요청 history.push ❌ window.location.href ⭕ 새로고침 history.push ❌ window.location.href ⭕ Application 상태 유지(리액트 state 등) history.push ⭕ window.location.href ❌ 사용법 history.push('/'); window.location.href = '/'; url 변경, 페이지 이동시에 새로고침이 필요한 경우는 window.location.href를 사용하자!

리덕스 사용법

Redux? https://duckgugong.tistory.com/192 리덕스 리덕스란? 리덕스는 아주 흔히 사용하는 상태관리 라이브러리이다. 전역 상태관리를 편히 할 수 있도록 도와준다. 리덕스는 데이터를 한 군데 몰아넣고, 여기저기에서 꺼내볼 수 있게 도와준다. duckgugong.tistory.com 덕스(ducks) 구조 보통 리덕스를 사용할 때는, 모양새대로 action, actionCreator, reducer를 분리해서 작성한다. 예를 들어 액션은 액션끼리, 액션생성함수는 액션생성함수끼리, 리듀서는 리듀서끼리 작성한다. 하지만, 덕스 구조는 모양새로 묶는 대신 기능으로 묶어서 작성한다. 예를 들어 같은 기능을 가진 action, actionCreator, reducer을 한 파일에 넣는 ..

리덕스

리덕스란? 리덕스는 아주 흔히 사용하는 상태관리 라이브러리이다. 전역 상태관리를 편히 할 수 있도록 도와준다. 리덕스는 데이터를 한 군데 몰아넣고, 여기저기에서 꺼내볼 수 있게 도와준다. 리덕스 용어 1. State 리덕스에서는 저장하고 있는 상태값(데이터)를 state라고 부른다. 딕셔너리 형태({key]: value})형태로 보관한다. 2. Action 상태에 변화가 필요할 때(= 가지고 있는 데이터를 변경할 때) 발생하는 것. 액션은 객체이다. type은 우리가 정하는 임의의 문자열이다. 이름이라고 볼 수 있다. 액션 객체는 type 필드를 필수적으로 가지고 있어야 하고, 그 외의 값들은 개발자 마음대로 넣어줄 수 있다. {type: '[액션 이름]', [key]: [value]} 모듈 내에서는 아..