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

1. render 크래시 테스트 하는 데 vs code에서 렌더링이 안됐다고 자꾸 뜸

vs-jset 라는 확장프로그램을 사용하는데 여기와 관련된 이슈

사용안함 했다가 다시 사용함으로 하고 이것 저것하다가

우연히 됨. 뭔가 설정이 서로 달라서 그런 듯

정확한 원인을 모름

"jest.pathToJest": "node_modules/.bin/jest --debug"

vscode 설정에서 이부분을 수정해서 된건지 잘 모르겠음 어째든 이거 추가 이후 어쩌다가 됨(처음에는 안됐음)


+ vs-jest는 새로운 라이브러리를 사용할 때마다 리로드 시켜줘야 함( vs-code리로드가 아니라 애드온을 껐다가 다시 로드 시켜줘야 함)


2. snapshot 테스트 문제


expect(tree).toMatchSnapshot();

이부분에서 missing snapshot 에러가 발생

터미널에는 jest 문제가 아니라 cli 문제라고 추정함 defaultSnapshot이 없다고 함


yarn test --watch를 뛰워놓고

u키로 update했더니 snapshot이 만들어짐

뭔가 석연치가 않다. 첫 테스트에는 snapshot이 당연히 없을 텐데 저런 식으로 밖에 처리를 할 수 없는 건가?

'뻘짓 정리' 카테고리의 다른 글

react jset  (0) 2018.06.17
react dispatch에서 reducer로 넘어가지 않을 때  (0) 2018.05.23
typescript node_modules 추가  (0) 2018.04.17


아이텀 설정을 열고 KEYS 탭 클릭

left option 을 +Esc 로

+ 키 눌러서 shortcut에 단축키 추가



b는 back이란 뜻

반대로 -> 는 f 로 설정해 주면 된다.


그러면 iterm 편리한 커서 이동을 즐기길!

position 속성이 없으면 그림자가 보이지 않는다.

아마 그림자를 앱솔루트로 붙여서 그런 것 같다.


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

event listener가 받는 첫번째 인자 e 는 javascript의 event object를 가르킨다.

이는 브라우저 마다 조금씩 다른데

react는 이를 SyntheticEvent라 부른다.

리액트를 안쓰더라도 자바스크립트 객체기때문에 알두면 좋다.

다 몰라도 preventDefault() 는 많이 써봤을 것이다.


boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type




이미 완성되어있는 업무를 할 경우

DB컬럼들이 정해져 있어서 자료구조가 변경될 일이 거의 없다.

하지만 새로운 업무로 프로젝트를 하는 경우

DB는 정해져 있지 않다.

DB를 먼저 정하고 한다해도 개발하면서 새롭게 추가되는 요소는 계속 생긴다.

이럴 경우 DB를 짜놓고 바뀔 때 마다 DB를 업고 관련코드 다 고치고 그런다면 시간이 너무 오래 걸린다.

자연스럽게 애자일하게 개발하다보면

자료 구조가 바뀌는 일이 많은데

클라이언트에서 자료구조의 변형이 클 경우 변화에 유연하게 대처하는게 힘들다.


[

  {

    productId, : 1,

    productName, : '마우스'

  }

]

이런식으로 만들어서 처리하는 것과

[

 product : { id: 1, name: '마우스}

]


이런식으로 처리하는 것은 알고리즘이 달라지기 마련이다.

size 같이 name이 안붙는 컬럼도 있고 id가 없는 컬럼들도 있고 제각각이다.

공통으로 한번에 처리하는게 어렵다고 느낄 수도 있겠지만

같은 입력폼의 내용들은 파일 같이 특이한 경우가 아닌 단순 텍스트 값이라면 공통으로 처리가 가능해야 한다고 생각한다.

또 그렇게 자료 구조를 만들어야 변화에 빨리 대처할 수 있다고 생각한다.

하지만 아직까지 좋은 자료구조를 만들어내는데는 실력이 모자른 것 같다.

이런 부분에서 고민이 많아질 줄 몰랐는데 아직 경험이 부족한가 보다.

'고민거리' 카테고리의 다른 글

자료구조가 변형을 따라가기 힘들다.  (0) 2018.05.28

다 잘 보냈는데

dispatch 실행하는 함수는 실행되는데

return dispatch => 구문이 실행이 안된다

다르 dispatch는 잘 실행이 된다.


connect로 넘겨준 함수를 실행해야 하는데 그냥 함수 자체를 실행시켜 버렸다.

그것도 모르고 한참 해맸다 ㅜㅜ

아 정말 바보 같다.


'뻘짓 정리' 카테고리의 다른 글

react jset  (0) 2018.06.17
react dispatch에서 reducer로 넘어가지 않을 때  (0) 2018.05.23
typescript node_modules 추가  (0) 2018.04.17

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

엉뚱한 거라서 해맸다.

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

+ Recent posts

티스토리 툴바