Puppy's paw

// App version 1 (current version)

var onError = function (error) {
    console.log("An error occurred. " + error);
};

var onInstallSuccess = function () {
    console.log("Installation succeeded.");
};

var onPackageDownloaded = function (localPackage) {
    // Install regular updates after someone navigates away from the app for more than 2 minutes
    // Install mandatory updates after someone restarts the app
    localPackage.install(onInstallSuccess, onError, { installMode: InstallMode.ON_NEXT_RESUME, minimumBackgroundDuration: 120, mandatoryInstallMode: InstallMode.ON_NEXT_RESTART });
};

var onUpdateCheck = function (remotePackage) {
    if (!remotePackage) {
        console.log("The application is up to date.");
    } else {
        // The hash of each previously reverted package is stored for later use. 
        // This way, we avoid going into an infinite bad update/revert loop.
        if (!remotePackage.failedInstall) {
            console.log("A CodePush update is available. Package hash: " + remotePackage.packageHash);
            remotePackage.download(onPackageDownloaded, onError);
        } else {
            console.log("The available update was attempted before and failed.");
        }
    }
};

window.codePush.checkForUpdate(onUpdateCheck, onError);

//------------------------------------------------

// App version 2 (updated version)

var app = {
    onDeviceReady: function () {
        // Calling this function is required during the first application run after an update.
        // If not called, the application will be reverted to the previous version.
        window.codePush.notifyApplicationReady();
        // ...
    }
}

react-router-dom의

Route는 unmount되는 즉시 dom에서 컴포넌트를 즉시 삭제한다

그래서 새로운 페이지의 등장 애니매이션은 쉽지만

기존의 페이지는 즉시 사라지기 때문에 애니매이션 효과가 반감된다.

React는 공식적으로 react-transition-group을 이용해서 해결하라고 한다.

<Route render={({location}) => (

<TransitionGroup>

  <CSSTransition key={location.key} classNames="page" timeout={300}>

    <Switch>

      <Route/>

      <Route/>

    </Switch>

  </CSSTransition>

</TransitionGroup>

)} />

와 같이 route이동에서 애니매이션을 쓸 수 있다.

주의할 점은 hashrouter를 쓸 경우 location.key가 없기 때문에 location.pathname 같은 걸로 대체해야 한다.

또한 location.pathname을 쓸 경우 다음과 같은 문제가 있다.

https://github.com/reactjs/react-transition-group/issues/136

참조

https://reacttraining.com/react-router/web/example/animated-transitions

정말 잘 표현한 다이어그램

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

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

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

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

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

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

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

https://lodash.com/

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

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

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

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

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

바로 생각 나는 것은?

페이징 나눌 때 편하겠네

_.compact(array)

잘못된 데이타를 걸러낼 때

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

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

_.concat(array, [values])

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

table cell word-wrap 문제

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

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

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

엉뚱한 거라서 해맸다.

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

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

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

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

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

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

tsconfig.json에

추가

<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