목록2021/03 (38)
hmk run dev
firebase.google.com/docs/firestore/manage-data/add-data?authuser=0 Cloud Firestore에 데이터 추가 | Firebase 다음과 같은 몇 가지 방법으로 Cloud Firestore에 데이터를 쓸 수 있습니다. 문서 식별자를 명시적으로 지정하여 컬렉션 내의 문서 데이터를 설정합니다. 컬렉션에 새 문서를 추가합니다. 이 경우 Clo firebase.google.com 더하기 const todo = firestore.collection("todo"); todo.add({ text: "캘리그라피 배우기", completed: false }).then((docRef) => { console.log(docRef); console.log(docRef.id)..
firebase.js import firebase from "firebase/app"; import "firebase/firestore"; const firebaseConfig = { apiKey: "AIzaSyC9rCMVUMT2SwB9TaE0Ww8ehtvD25oJ1J8", authDomain: "sparta-react-15fb3.firebaseapp.com", projectId: "sparta-react-15fb3", storageBucket: "sparta-react-15fb3.appspot.com", messagingSenderId: "971471391477", appId: "1:971471391477:web:29b4fc8ec136393b6d53bc", measurementId: "G-LEE70HB..
import React from "react"; import { useSelector, useDispatch } from "react-redux"; const Detail = (props) => { const schedule_list = useSelector((state) => state.schedule.list); console.log(schedule_list, props); //콘솔로 store 정보들이 잘들어 왔나 확인 return ; }; export default Detail; App.js Schedule.js return ( { props.history.push("/detail/" + index); }} > {list} ); Detail.js import React from "react"; i..
일단 리덕스모듈과 그것을 담아줄 스토어를 만들어야한다 schedule.js //Action 액션의 변수는 전부 대문자 약속~ //모듈명 소문자 액션명 대문자 //우리가 만든기낭 스케줄 띄워주는거 = load/ 스케줄 만드는것 create const LOAD = "schedule/LOAD"; const CREATE = "schedule/CREATE"; const initialState = { list: ["영화관 가기", "매일 책읽기", "수영 배우기"], //맨처음 state 초기값 }; //Action Creator //액션 생성 함수는 액션을 반환해줘야 하는 함수다 //액션 생성 함수는 컴포넌트들에게서 불러와야한다 export //export는 export default와 다르게 import시 중괄..
history 리액트에서 페이지를 이동할 수 있는 이유는 react-router-dom을 이용하여 페이지의 기록을 알 수 있기 때문이다. 아래 샘플 코드의 App.js에서와 같이 Router로 컴포넌트의 Path와 라우팅할 컴포넌트를 정해줄 수 있는데, 해당하는 라우터는 props를 통해 history 객체를 전달받게 된다. history 객체를 콘솔로 찍어보면 아래와 같이 goBack(), goForward() 등 앞/뒤로 이동할 수 있는 메소드 뿐만 아니라 다양한 메소드와 관련 객체들이 존재한다. 이 중 라우팅 변경을 위해 가장 빈번히 사용되는 메소드가 push()인데, history.push('이동하고자 하는 path') 를 통해 원하는 컴포넌트로 이동이 가능하다. >> history 객체를 pro..
1. 파이어 스토어 데이터를 리덕스 스토어에 넣려면 "미들웨어"를 설치해야 함 yarn add redux-thunk로 미들웨어 설치 미들웨어는 뭘까? 리덕스는 데이터를 수정할 때 디스패치라는 것을 사용해 액션을 감시했다. > 액션이 디스패치가 됐다면 리듀서가 처리를 했다. > 액션이 디스패치 처리 > 리듀서에서 처리 파이어 스토어에 데이터 요청 > 파이어 베이스는 데이터를 준다 > 기다려야 함 (여기서 미들웨어 작동) 미들웨어는 리듀서에서 처리하기 전에 사전작업을 할 수 있게 도와주는 중간다리 역할 redux-thunk는 객체 대신 하수를 생성하는 액션 생성 함수를 작성할 수 있게 해 줍니다! >> 액션 생성 하수 액션 크리에이터를 작성할 수 있게 도와준다. >> 왜 필요하지? 리덕스는 기본적으로 액션 ..
더 많은 이벤트리스너를 알고 싶다면 구글링 >> eventlistener mdn 검색 리액트 event는 Ref 먼저 잡아주는 것 필수! 1. App 이라는 div에 ref 먼저 잡아주자 this.div = React.createRef(); 2. 그리고 적용 3. 함수만들기 hoverEvent = (e) => { //이벤트를 e 파라미터로 줘서 그것을 타겟으로 뭔가를 잡아와야함 console.log(e); console.log(e.target); e.target.style.background = "#eee"; //e로 타겟을 잡아주고 스타일> 백그라운드 hover효과 }; 4. 컴포넌트디드 마운트에서 등록 componentDidMount() { this.div.current.addEventListener..
클라이언트가 입력한 값을 받아올 수 있는 인풋박스 만들기 > 클래스형 컴포넌트라면 constructor안에 this.text = React.createRef(); Ref변수 만들기 > 인풋 박스안에 ref 달아주기 > Ref 값(인풋의 value값) 가져와서 state 업데이트 해주기 여기선 함수를 만들어 주는게 좋다(참고로 constructor 밖에선 const 필요) > setState + 스프레드문법으로 state 안의 배열에 새로운 배열을 추가 함으로써 버킷리스트 추가 가능 스프레드 문법 > [...배열이름, 추가하고 싶은 배열이나 요소] 이렇게 써주면 배열값을 하나하나 나열하고 거기에 요소를 더 해줄주어 새로운 배열을 만들 수 있다 class App extends React.Component {..
useState()를 사용한다! 함수형 컴포넌트를 하나 만든다 >> export App.js에서 import 근데 개인적으로 왜 배열을 for문 같이 돌려주냐를 생각해봤다 const nemo_count = Array.from({ length: count }, (v, i) => i); 이렇게 카운트의 숫자를 배열길이로 가진 배열을 하나 만들고 아래 처럼 맵을 사용해서 for 반복문 처럼 돌린다// 즉 유기적으로 count 스테이트 값을 이용해 반응형? 으로 만들기 위함 이라고 생각한다 {nemo_count.map((q, idx) => { // for문이랑 비슷 [0,1,2]인 배열을 num이란 요소로 돌려버리고 idx는 순서값을 나타나게함 idx가 3이니까 대충 3번 돌려준단 말 같다 return ( 뷰만..
스테이트를 관리한다는 것은 한마디로 스테이트를 생성 업데이트 삭제하는 과정이라고 볼 수 있다 컴포넌트가 데이터를 어떻게 관리할까? state는 단방향 데이터 관리이다. 자식이 부모에게 영향을 못끼친다! 라이프 사이클에서 리렌더링 업데이트가 되는 경우 1. state 업데이트 2. props 업데이트 3. 부모 컴퍼넌트 재렌더링 4. 강제 업데이트 클래스형 state 관리 클래스형에서 state를 쓸릴 있으면 this.state.(스테이트 요소) 를 앞에다 항상 붙여줘야하며 스테이트를 이용해 배열을 만들어서 변수로 지정해주고 그것을 map으로 돌려서 리턴 값을 네모로 주면 스테이트값을 이용해서 네모 더하기 빼기를 구현 할 수 있다 import React from "react"; class App exten..