https://adazzle.github.io/react-data-grid/#/examples/filterable-sortable-grid


심플하고 커스터마이징이 쉬운 것 같아서 선택했다.


소팅이나 필터링 알고리즘은 직접 구현하게 되있다.

하지만 react-data-grid-addons에 구현 되있는 것들이 있다.

그런데 문제는 사용법 설명이 없다. 그냥 예제 보고 분석해야한다.

이쪽은 커스터마이징이 쉬워 보이지 않는다. 그냥 직접 구현하는게 나을 지도


'FrontEnd > react' 카테고리의 다른 글

react-data-grid  (0) 2018.06.23
react-data-grid 정리#1 table cell word-wrap 문제  (0) 2018.05.29
react autofocus  (0) 2018.04.26
component, route, children  (0) 2018.04.17
react typescript로 시작하기  (0) 2018.04.16
표현 컴포넌트와 컨테이너 컴포넌트  (0) 2018.04.15

https://lodash.com/


javascript sugar 정도로 이해하면 될 것 같다.


스쳐지나가면서 봤던 코드들은 이거 때문에 꼭 외부 라이브러리를 써야 하나 그정도 였다.


그래도 잘 활용하면 가독성을 높여줄 수 있고 정말 필요한 것들이 뭐가 있는지 살펴 봐야 겠다.


_.chunk(array, [size=1])


배열을 size단위로 쪼개 준다.

바로 생각 나는 것은?

페이징 나눌 때 편하겠네


_.compact(array)


잘못된 데이타를 걸러낼 때

.filtering( elm => elm ) 이거랑 같은데 굳이 써야 할까낭?

거기다 0을 출력해 주고 싶을 때 수정하기도 힘들다.


_.concat(array, [values])


애매하다. 그래도 뭐 다양한 형식을 합칠 경우 편할 듯

'FrontEnd' 카테고리의 다른 글

lodash  (0) 2018.06.05
html unselectable  (0) 2018.05.13

table cell word-wrap 문제

컴포넌트로 컨트롤 하는 방법은 없다.

css로 찾아서 해결해야 한다.


.react-grid-Cell__value div {
word-break: keep-all;
white-space: pre-line;
}



'FrontEnd > react' 카테고리의 다른 글

react-data-grid  (0) 2018.06.23
react-data-grid 정리#1 table cell word-wrap 문제  (0) 2018.05.29
react autofocus  (0) 2018.04.26
component, route, children  (0) 2018.04.17
react typescript로 시작하기  (0) 2018.04.16
표현 컴포넌트와 컨테이너 컴포넌트  (0) 2018.04.15

돔이 포커싱 되는 걸 방지하는 태그인 줄 알았는데

엉뚱한 거라서 해맸다.

html unselectable 속성은 텍스트 드래그를 막아 준다.

하지만 익스플로어와 오페라 브라우저에서만 작동한다.

파폭이나 크롬 같은 브라우저는 css 속성으로 해결한다.

마우스 드래그 이벤트 인데 css속성으로 가야 하는 건지는 의문이다.


<style> .unselectable { -moz-user-select:none; -webkit-user-select:none; } </style>

css는 이런식으로 적용하면 된다.


'FrontEnd' 카테고리의 다른 글

lodash  (0) 2018.06.05
html unselectable  (0) 2018.05.13

tsconfig.json에


"skipLibCheck": true,


추가

'FrontEnd > babel&webpack&eslint' 카테고리의 다른 글

error TS2300: Duplicate identifier  (0) 2018.04.29
please use config.optimization.minimize instead  (0) 2018.04.19
eslint] ES7 적용  (0) 2018.04.15
eslint] but never used 처리  (0) 2018.04.15
webpack css-loader  (0) 2018.04.14
react 설정  (0) 2018.04.14

<input autofocus type='text' />

하니 에러가 발생한다.

autoFocus로 대소문자 구분을 한다.

다른 방법으로는

ref={input=>input.focus()}


관련링크

https://stackoverflow.com/questions/28889826/react-set-focus-on-input-after-render

http://www.jackcallister.com/2014/11/25/autofocus-in-react-js.html


'FrontEnd > react' 카테고리의 다른 글

react-data-grid  (0) 2018.06.23
react-data-grid 정리#1 table cell word-wrap 문제  (0) 2018.05.29
react autofocus  (0) 2018.04.26
component, route, children  (0) 2018.04.17
react typescript로 시작하기  (0) 2018.04.16
표현 컴포넌트와 컨테이너 컴포넌트  (0) 2018.04.15

webpack4에서 uglifyjsPlugin이 따로 빠져나가서 쓰는 방법이 바꼈다

config 모듈에

optimization 프로퍼티를 설정하면 된다.


const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      // we specify a custom UglifyJsPlugin here to get source maps in production
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          compress: false,
          ecma: 6,
          mangle: true
        },
        sourceMap: true
      })
    ]
  }
};


'FrontEnd > babel&webpack&eslint' 카테고리의 다른 글

error TS2300: Duplicate identifier  (0) 2018.04.29
please use config.optimization.minimize instead  (0) 2018.04.19
eslint] ES7 적용  (0) 2018.04.15
eslint] but never used 처리  (0) 2018.04.15
webpack css-loader  (0) 2018.04.14
react 설정  (0) 2018.04.14

nodeJs 구조 관련 링크


https://blog.risingstack.com/node-hero-node-js-project-structure-tutorial/

'FrontEnd > nodeJS' 카테고리의 다른 글

nodeJs 구조  (0) 2018.04.18
npm --save --save-dev  (0) 2018.04.14

<Route render>

render React Element

<Route component>

render React Component

<Route children>

패스 매칭에 상관없이 무조건 표현


render는 인라인 렌더링이 가능하다는데 tslint에는 인라인 렌더링 하지 말라고 나온다.


'FrontEnd > react' 카테고리의 다른 글

react-data-grid  (0) 2018.06.23
react-data-grid 정리#1 table cell word-wrap 문제  (0) 2018.05.29
react autofocus  (0) 2018.04.26
component, route, children  (0) 2018.04.17
react typescript로 시작하기  (0) 2018.04.16
표현 컴포넌트와 컨테이너 컴포넌트  (0) 2018.04.15

create-react-app typescript-react-tutorial --scripts-version=react-scripts-ts

'FrontEnd > react' 카테고리의 다른 글

react-data-grid  (0) 2018.06.23
react-data-grid 정리#1 table cell word-wrap 문제  (0) 2018.05.29
react autofocus  (0) 2018.04.26
component, route, children  (0) 2018.04.17
react typescript로 시작하기  (0) 2018.04.16
표현 컴포넌트와 컨테이너 컴포넌트  (0) 2018.04.15

+ Recent posts

티스토리 툴바