모카 사이드바가 js는 잘 찾는데

ts를 전혀 찾지 못할 경우가 있다.

보통 ts-node/require를 이용 할 것이다.

그런데 이게 문제 인걸 찾는 것도 한참 걸렸고

왜 문제인지 찾는 것도 한참 걸렸다.

아무런 에러가 로그가 찍히지 않기 때문이다.


결정적인 건 ts-node버전을 착각하고 있었다.

모카 사이드바는 최신 ts-node버전을 필요로 한다.

이글을 쓰는 지금은 7.0.0이다

npm list ts-node로 확인해 보자


정말 잘 표현한 다이어그램

출처: https://cdn-images-1.medium.com/max/1600/1*stmn8kxXJrX9hbk39hHQJA.png

'FrontEnd' 카테고리의 다른 글

초간단 그림으로 보는 flux architecture  (0) 2018.07.25
lodash  (0) 2018.06.05
html unselectable  (0) 2018.05.13

es6에서 class method를 화살표 함수로 쓰면 enzyme으로 렌더링한 컴포넌트에서 찾을 수 없다.

렌더링한 컴포넌트 클래스 메서드를 사용하고 싶을 경우

const Wrapper = shallow(<MyComponent />);

Wrapper.instance().myMethod() 와 같이 쓰면 되는데

typescript를 사용하고 있다면 린트에서 에러를 발생시킨다.


const instance = Wrapper.instance() as MyComponent;

instance.myMethod();

와 같이 캐스팅해서 쓰면 된다.


준비물


import * as React from 'react';
import { configure, shallow, mount } from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
import * as chai from 'chai';
import { expect, assert } from 'chai';
import * as sinon from 'sinon';


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


describe('ImageInputComponent test', () => {

var stub = sinon.stub();
var callback;
const onUploadFileLatency = 100;

it(`when file change, onUploadFile run (latency time about ${onUploadFileLatency}ms)`, done => {
const onUploadFile = async function (uploadFile: UploadFile) {
}

var spy = sinon.spy(onUploadFile);

const Wrapper = shallow(<ImageInputComponent onUploadFile={spy} />);

const fileInput = Wrapper.find('input[type="file"]');

fileInput.simulate('change', { target: { files: [
new Blob(['aaa'])
]}});
setTimeout( () => {
expect(spy.calledOnce);
done();
spy.restore();
}, onUploadFileLatency);
});
});


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공격 용이라고 하는데 맥도 영향을 받을 수 있으니 막아 논 것 같다.

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

'개발환경 설정' 카테고리의 다른 글

port 6000  (0) 2018.06.28
mac iterm 편리한 커서 이동  (0) 2018.06.13
java.lang.ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet  (0) 2018.01.17
tomcat CORSFilter  (0) 2018.01.08
tomcat https설정하기(SSL/TLS 설정)  (0) 2018.01.03
svn 권한설정  (0) 2017.11.06

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'


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

+ Recent posts

티스토리 툴바