Bank-End Chronicles

「Memory gets GC’d, but this blog stays committed.」

React - Redux counter

redux에 대해서

redux로 counter만들기 counter.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 //액션 타입 만들기 const SET_DIFF = "counter/SET_DIFF"; const INCREASE ...

Posted by Yan on February 19, 2021

React - Redux

redux에 대해서

connect component를 store에 연결시켜준다. store.dispatch() store.getState() mapStateToProps function mapStateToProps(state, ownProps?) 함수로 쓰인다 state는 Redux store에서 온 것 ownProps는 component로 ...

Posted by Yan on February 18, 2021

Javascript - redux

redux

vanilla javascript와 redux로 todo list만들기 getState store.getState()현재의 state값을 알 수 있다. subscribe store.subscribe()변화하는 state값을 알 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23...

Posted by Yan on February 18, 2021

2월 14~17일 (수)

프로젝트 중간 회고

요즘 한 일 프로젝트를 하면 많이 배우고, 많이 틀리고, 많이 부족함을 느낀다. 처음 로그인, 회원가입 기능을 만드느라 John Ahn의 nodeJS와 React로 보일러 플레이트 만들기 강의를 들으면서 따라해보았다. 강의를 듣기 이전에는 큰 그림이 안 잡혀서 어떤 기능부터 만들어야하는지 몰랐는데, 보면서 reduce...

Posted by Yan on February 17, 2021

React - custom Hooks

hook에 대해서

커스텀 hook 만들기 useInput 유효성을 검증하는 기능이 있는 useInput 이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 import React, { useState } from...

Posted by Yan on February 13, 2021

React - useEffect, useState

useState와 useEffect에 대해서

useState 함수형 컴포넌트에서 상태를 관리해야하는 일이 생기면 useState를 쓴다. useEffect 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate 를 합친 형태 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 자료 velopert

Posted by Yan on February 12, 2021

2월 12일 (금)

api 호출 횟수 1000회를 순식간에 써버리는 방법

렌더링지옥. 영원회귀 1 2 3 4 5 6 7 8 9 10 11 const [data, setData] = useState([]); useEffect(() => { const fetchData = () => { axios.get({ url }).then((response) => { setData(response...

Posted by Yan on February 12, 2021

React - boilerplate

hoc에 대해서

폴더 구조 src _actions : redux를 위한 폴더 _reducer : redux를 위한 폴더 components : page를 넣는 폴더 views Navbar, RegisterPage, LandingPage, ...

Posted by Yan on February 9, 2021

2월 7일 (일) 2월 8일 (월)

프로젝트의 정신없는 기록

오늘 한 일 막상 프로젝트를 시작하니까 기록할 시간도 없다. css에 신경을 너무 많이 쓴건지 시간이 너무 모자르다.

Posted by Yan on February 8, 2021

2월 5일 (금) 2월 6일 (토)

프로젝트 메인 페이지 만들다

오늘 배운 것 모든 요소를 컴포넌트로 만들어서 재활용할 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 export const InfoRow = styled.div` display: grid; grid-auto-columns: minmax(auto, 1fr); align-items: center; grid-template-...

Posted by Yan on February 6, 2021