Back Ground

리덕스에서 사용하는 파일들은 일반적으로 액션 타입, 액션 생성 함수, 리듀서 이렇게 세 종류로 분류하여 관리한다. 리덕스 공식 문서에서도 기초를 다룰 때는 이 방식으로 설명한다. 하지만 파일들을 어떻게 구조화할지 정해진 방식은 없다. 이렇게 파을을 세 종류 나누어 리덕스 관련 코드를 작성하다 보면 액션을 하나 만들때마다 파일 세개를 수정해야 한다.그렇게까지 번거로운 작업은 아니지만, 몇몇 개발자는 귀찮았던 모양이다.이 처럼 '액션 타입, 액션 생성 함수, 리듀서를 모두 한 파일에서 모듈화하여 관리하면 어떨까?' 라는 아이디어로 만든 파일 구조가 바로 Ducks파일 구조이다. 이 파일 구조는 개발자인 erikras(Erik Rasmussen)가 처음으로 제시했는데(https://gtihub.com/erik..

Immutable.js 익히기 Immutable.js는 자바스크립트에서 불변성 데이터를 다룰 수 있도록 도와준다. Immutable.js를 알기전에 객체 불변성을 알아야 한다. 객체 불변성Immutable.js 객체 불변성을 이해하려면 간단한 자바스크립트 코드를 실행해 보아야 한다. 크롬 웹 브라우저에서 개발자 도구를 열고 다음 코드를 입력해보자 1234let a = 7;let b = 7;let object1 = {a: 1, b:2 };let object2 = {a: 1, b:2 };cs 보다시피 a 값과 b값은 같다.둘은 === 연산자로 비교해 보면 당연히 true를 반환할 것이다.하지만 object1과 object2가 가진 값이 같더라도 서로 다른 객체이기 때문에 둘을 비교하면 false를 반환한다 ..

React.PureComponent는 React.Component와 매우 유사하다. 하지만 한 가지 다른 점이 있다면, React의 생명주기 메소드 중 하나인 shouldComponentUpdate를 다루는 방식이 다르다는 것이다. React.PureComponent는 shouldComponentUpdate가 이미 구현되어 있는데, props와 state를 얕은 비교를 통해 비교한 뒤 변경된 것이 있을 때만 리렌더링한다. 즉, React.PureComponent를 사용하면 React애플리케이션 성능을 향상시키는 데 가장 중요한 것 중 하나인 shouldComponentUpdate를 신경쓰지 않아도 된다. 하지만 props나 state가 복잡한 데이터 구조를 포함하고 있다면, props와 state를 비교..

component/BoardList.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130import React, { Component ,Fragment } from 'react'import classNames from 'classnames';import B..

일단 고차 함수가 무엇인가.. 하나 이상의 함수를 인수로 취한다. (예: 절차적 매개변수)함수를 결과로 반환한다. https://ko.wikipedia.org/wiki/%EA%B3%A0%EC%B0%A8_%ED%95%A8%EC%88%98 Redux를 하다보면 connet 사용 하다보면 1import {connect} from 'react-redux';cs 1234const CounterContainer = connect( mapStateToProps, mapDispatchToProps)(Counter);cs 이렇게 하는 부분이 있는데 (Counter는 직접 만든 Class) connect()();즉, 이게 어떻게 구동 된다는 것 인지 이해를 못했는데 node_modules/react-redux/src/co..

리덕스리덕스는 리액트에서 상태를 더 효율적으로 관리하는 데 사용하는 상태관리 라이브러리 App에서 모든 상태의 로직을 관리하고 있기 때문에 App 컴포넌트의 state를 업데이트하면 App컨포넌트가 리랜더링되고,리액트 특성상 하위 컴포넌트도 모두 리렌더링된다. 기존에 사용 하던 방식으론 컴포넌트 개수가 많지 않기 때문에 App에서 상태 관리를 하고,최적화하는 것이 그렇게 어렵지않지만 프로젝트가 좀더 복잡 해지면 어떨까.. [좀 더 복잡한 혀태의 컴포넌트 구조] 참고 : https://velopert.com/1225 리덕스는 쉽게 설명하면 상태 관리의 로직을 컴포넌트 밖에서 처리하는 것.리덕스를 사용하면 스토어(store)라는 객체 내부에 상태를 담게 됩니다. 이를 사용하면 다음 구조로 프로젝트를 관리 할..

RestFul 이란 REST는 Representational State Transfer라는 용어의 약자로서 웹의 장점을 최대한 활용할 수 있는 아키텍처최근의 서버 프로그램은 다양한 브라우저와 안드로이폰, 아이폰과 같은 모바일 디바이스에서도 통신을 할 수 있어야 한다.REST 아키텍처는 Hypermedia API의 기본을 충실히 지키면서 범용성을 보장한다. 예제 )1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162var http = require('http') , express = require('express') , static = require('s..

스타일링 즉 CSS 부분이다. create-react-app을 통해서 프로젝트를 생성했으면 알겠지만기본적으로 css파일을 사용하여 컴포넌트에 import하여 사용할 수있는데 이것은 webpack의 css-loader를 이용하여 일반 CSS를 불러오는 방식이였다. CSS를 작성하다보면 클래스네임이 중복될 가능성이 있는데,이를 방지하려고 앞 코드에서는 각 클레스네임에 컴포넌트 이름을 접두사로 붙여주었다. (예 App-header, App-intro 등) 접두사를 붙이는 방법말고 다음 방식으로도 해결 할 수 있다. 1234.App {...} .App .header{...} .App .logo{...} .App .intro{...} cs Sass를 사용한다면 이런식으로 작성할 수 있다.12345.App { .h..