목록React (38)
hmk run dev
Grid.js import React from "react"; import styled from "styled-components"; const Grid = (props) => { const { is_flex, width, margin, padding, bg, children } = props; const styles = { is_flex: is_flex, width: width, margin: margin, bg: bg, padding: padding, // 앞은 스타일명 뒤는 props로 받는 padding 값 }; return ( {/* 위에서 props로 넘겨받은 값들은 styles로 오고 styles값은 아래의 스타일컴포넌트 안의 props형태로 정보를 전달해줘 이 컴포넌트 모양이 결정된다 */..
파이어 스토어 데이터를 짤라서 가져와야한다 정렬은 시간 데이터 내림차순! const getPostFB = () => { return function (dispatch, getState, { history }) { const postDB = firestore.collection("post"); let query = postDB.orderBy("insert_dt", "desc").limit(2); //콜랙션에서 내림차순으로 데이터 가져오기 query.get().then((docs) => { let post_list = []; docs.forEach((doc) => { // 잘 가져왔나 확인하기! :) // 앗! DB에서 가져온 것하고 우리가 Post 컴포넌트에서 쓰는 데이터 모양새가 다르네요! // cons..
sum이라는 함수는 a와 b를 인자로 받으며 a + b를 리턴해준다 let sum = (a, b) => a + b; /* 위 화살표 함수는 아래 함수의 축약 버전입니다. let sum = function(a, b) { return a + b; }; */ alert( sum(1, 2) ); // 3 인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있습니다. 괄호를 생략하면 코드 길이를 더 줄일 수 있습니다. 예시: let double = n => n * 2; // let double = function(n) { return n * 2 }과 거의 동일합니다. alert( double(3) ); // 6 화살표 함수는 함수 표현식과 같은 방법으로 사용할 수 있습니다. 아래 예시와 같이 함수를 동적으로 ..
yarn add redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0 yarn add immer redux-actions import { createAction, handleActions } from "redux-actions"; //액션과 리듀서를 편하게 만들어주는 모듈 import { produce } from "immer"; import { setCookie, getCookie, deleteCookie } from "../../shared/Cookie"; //액션 const LOG_IN = "LOG_IN"; const LOG_OUT = "LOG_OUT"; const GET_USER = "GET_US..
객체는 함수로 만들어지며 자바스크립트의 모든객체는 프로토타입을 가지고 있다 자바스크립트의 모든 객체는 자신의 부모 객체와 연결되어 있어요. 좀 더 정확히는 부모 객체의 원형하고요!(부모 객체의 프로토타입) 마치 객체 지향에서의 상속 개념처럼 부모 객체의 프로퍼티나 메소드를 상속받아 쓸 수 있고요. (실제로는 상속보다 위임에 가깝다고 하지만, 통상적으로 상속한다고 표현해요.) 이런 부모 객체를 프로토타입 객체, 혹은 그냥 프로토타입이라고 부릅니다. 그리고 부모 객체를 참조하는 걸 두고 프로토타입 링크라고 해요. // animal이라는 객체를 하나 만들었습니다! let animal = { leg: 4, legCount() { console.log(this.leg); // this는 animal을 의미합니다...
함수 > 어떤 코드를 묶어 놓은것! 자바스크립트에선 함수도 하나의 객체로 취급하기도 한다 fuction useBall(cat) { console.log(cat, "공으로 노는 중"); } fuction playWithCat(cat, action){ action(cat) // 이것은 사실은 useBall(cat) >> useBall("peal") } playWithCat("peal", useBall) >> 고양이 이름과 액션을 파라미터로 >> peal 공으로 노는중 여기서 useBall을 콜백 함수라고 부른다 함수를 인수로 전달한다 원시형 (let,var,const) 객체형은 키와 벨류로 이뤄져 있으며 원시형과 달리 다양한 데이터를 담을 수 있다 var 는 가급적이면 사용하지 않는 것을 추천!.. let ..
자바스크립트 문법 돌아보기 var, let - 한번 선언해도 아래에서 재할당 가능 var는 선언과 초기화가 동시에 되서 밑쪽에써도 인식이 가능바스크립트 문법 돌아보기 var, let - 한번 선언해도 아래에서 재할당 가능 var는 선언과 초기화가 동시에 되서 밑쪽에써도 인식이 가능 const - 재할당 불가능 var과 let, const의 차이점 중 하나는 변수가 선언되기 전에 호출하면 ReferenceError가 난다는 점이에요! Q. 왜 에러가 날까? 호이스팅이 안 된 걸까? A. 호이스팅(=선언 끌어 올리기)은 됩니다! 다만, 선언한 후, 초기화 단계에서 메모리에 공간을 확보하는데, 선언을 호이스팅해도 초기화 전까지 메모리에 공간이 없죠! 그래서 변수를 참조할 수 없기 때문입니다. 이걸 TDZ라고 ..
컴포넌트 > 리덕스 > 파이어 베이스 리덕스 데이터를 파이어 스토어에 있는 데이터를 가져오고 사용해보자!.. 일단 아래 모듈 설치해주자! yarn add redux-thunk 리덕스는 디스패치가 액션을 감시하고 디스패치가 됐다면 리듀서가 실행됐다 액션 > 디스패치 > 리덕스 청크 미들웨어 > 리듀서 처리 액션생성함수는 액션을 반환하고 이것은 객체 이 객체 대신에 리덕스청크는 함수를 반환해준다 >> 객체 대신에 함수를 생성하는 액션생성함수 액션크리에이터를 작성할 수 있게 도와준다 어떤 액션이 발생하기 전에 조건을 줄 수 있음컴포넌트 > 리덕스 > 파이어 베이스 리덕스 데이터를 파이어 스토어에 있는 데이터를 가져오고 사용해보자!.. 일단 아래 모듈 설치해주자! yarn add redux-thunk 리덕스는 ..
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..