Puppy's paw

준비물

file 읽어와서 미리 보기 뿌려주는 과정이 비동기였는데 생각을 못해서 하루종일 해맸던 과정이다.

setTimeout이 없으면 onUploadFile이 실행되기전에 expect가 먼저 실행되서 spy.calledOncer가 false로 나온다.

onUploadFileLatency는 0 을 줘도 쾌적한 환경에서는 잘 된다. 

method 설명

sinon.spy(fn?: Function)

argument는 없어도 되고 입력 받은 함수를 새로운 프록시로 감싼다.

spy.restore() 는 오리지날 함수로 복구해주는 함수다.

shallow는 얕은 렌더링 이라고 생각하면 된다.

자식 component는 렌더링 하지 않는다. html들은 관련 없다.

자식 component를 렌더링 하고 싶다면

Wrapper.dive()를 사용하면 된다.

자식 dom은 find(selector)를 사용해 찾을 수 있다. css selector형식을 사용한다.

dom이벤트 발생은 simulate로 발생 시킬 수 있다. 이벤트 이름은 javascript native와 같고 change같은 경우 두번째 인자로 값을 전달 할 수 있다.

event타입의 객체이다. e.target.value같은 걸로 많이 사용해봤을 것이다. 같은 구조이다.

expect는 chai를 이용했고 spy객체에 calledOnce는 한번 호출 됐는지 기록되는 변수다.

(spy변수 참조: http://sinonjs.org/releases/v6.1.3/spies/ )

마지막으로 done()은 비동기함수 검사가 끝나다는 신호다.

비동기로 실행되는 assertion은 done()이 실행되지 않으면 결과 반영을 하지 않는다.

"Types_have_separate_declarations_of_a_private_property_0_2442": "형식에 별도의 전용 속성 '{0}' 선언이 있습니다.",

private 속성이 있으면 상속이 안된다

이미지 리사이징해서 새 파일을 만드는 일을 해야한다.

친절한 예제를 보고 따라 했더니 됐다

그런데 서버 키고 처음만 성공하고 두번째 부터는 에러가 발생한다.

javascript의 특성과 nodeJs의 자원들에 대한 이해도가 떨어져서 고생했다.

JAVA에서는 resource open, closable한 객체가 비교적 명확하고

클래스 안의 메소드에서 작업이 거의 이루어지다보니 이런 일이 별로 없는데

javascript에서는 이를 함수 사용법만 봐서는 알기가 어렵다.

sharp객체도 open&closable한 객체 였다.

전역에 한개 지정해 놓고 request마다 이걸 계속 쓰려고 하니 당연히 에러가 날 수 밖에 ㅜㅜ

통찰력이 부족하다~~

mac에서 6000 port를 서버에 연결했더니

브라우저에서 접속이 안된다.

https://www.speedguide.net/port.php?port=6000

보면 port 6000 default로 쓰는 프로세서들 정보가 나와있다.

실제 사용하는 프로세서는 없고

curl로는 잘 되는 걸 보니 브라우저에서 막고 있다.

trojan은 window공격 용이라고 하는데 맥도 영향을 받을 수 있으니 막아 논 것 같다.

풀 수 있는 방법이 있지만 그냥 나두는게 안전한 듯 하다.

If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase

react-data-grid 에서 formatter에 <button> 태그를 생으로 넣으면  attirbute에서 native html속성을 쓸 수가 없다.

lowcase라고 하지만 lowcase로 넣어봤자 어차피 없는 속성이다.

formatter에 html에 대신 리액트 컴포넌트를 사용하면 된다.

import * as update from 'react-addons-update'

타입스크립트 형식 안맞췄을 때 나는 에러

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

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

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

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

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

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

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

이런 에러나서 한참 해멨는데

react-router가 아니라 react-router-dom 이다.

아우 왜 사람 헷갈리게 비슷한게 많은지 ㅜㅜ

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

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

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

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

정확한 원인을 모름

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

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

2. snapshot 테스트 문제

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

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

yarn test --watch를 뛰워놓고

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

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

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

left option 을 +Esc 로

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

b는 back이란 뜻

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

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