목록2021/03 (38)
hmk run dev
firebase.js에 만들어둔 auth 가져오기 리덕스에서 signupFB 함수 만들기 auth.createUserWithEmailAndPassword()로 가입 시키기 Signup 컴포넌트에서 signupFB를 호출! 가입한 후, display_name 바로 업데이트하기 사용자 정보 업데이트 후에 메인 페이지로 이동하기 const signupFB = (id, pwd, user_name) => { // 파이어베이스 회원가입 함수 // 회원가입 버튼 할때 작동 return function (dispatch, getState, { history }) { auth .createUserWithEmailAndPassword(id, pwd) .then((user) => { console.log(user); //사..
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 화살표 함수는 함수 표현식과 같은 방법으로 사용할 수 있습니다. 아래 예시와 같이 함수를 동적으로 ..
다사다난했던 항해 4주 차가 지나갔다. 주특기 "리액트"를 본격적으로 배우는 커리큘럼이 시작됐고 본격적으로 항해가 시작됐다 사실 이번 주차는 너무너무 괴로웠다 리액트 개념을 아무리 봐도 이해가 되지 않았다. 배경지식을 어느 정도 쌓아놓고 리액트를 조금씩 구현하는 팀원들 사이에서 너무 초라해졌고 같이 정보를 많이 공유하지 못한 미안함과 몇 주 뒤에 있을 프로젝트에서 팀원들에게 짐이 될 것만 같은 걱정에 운영진 분들과 상담을 하기도 했다. 처음엔 "이런 상담을 할바엔 차라리 코드라도 한 줄 더 보자"라는 생각이 지배적 이였는데 생각보다 엄청나게 좋은 말들을 많이 듣게 되고 항해 99를 시작하고 처음으로 누군가가 내상황을 이해해준다는 느낌을 받았다. 단순히 운영진과 크루원의 관계를 넘어서 인간적으로 좋은 말들..
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 리덕스는 ..