Ting 이네 Software 이야기

 ngrx/store 6.0.1 / Angular 6.x

 ngrx/store 를 처음 써 보는 중에 만나 이슈인데... 어찌보면 당연하긴 하겠지만... 뭔가 magic을 기대하기도 했는데.. 어쨌든...

createSelector(<state>, <action>) 이렇게 될때,  <state> 는 하위의 변화를 detecting하지는 못하는 걸로 보인다. 즉.

state: {
    inner: {
        a: true
    }
}

의 경우

createSelect(state => state.inner, inner => inner.a)

이렇게 해 놓고, dispatch를 통해서, state.inner.a = false 로 하면
selector의 Observer가 fire되지 않는다. 즉, inner.a 는 바뀌었으나, state.inner는 바뀐게 아니라는...

이때 states reference 자체가 reducer에서 바뀌는 경우.. 즉

return state;

가 아니라

return {...state}

가 되면 state의 reference다 바뀌므로 Observer가 fire된다.

Environment: Angular 6.x, Angular Material 6.x

Tooltip애 show 된 이후, Tooltip value에 undefined가 들어가게 되면, 이후 tooltip이 비활성화 되는 것으로 material tooltip component가 처리하는 것으로 보인다.
따라서,
    - html -
    [matTooltip]="myTooltip"

이렇게 한 경우,
tooltip이 'show'된 이후, myTooltip값이
    'a' => 'b' => 'c'
이 순서로 바뀌면, 'c'가 tooltip으로 잘 보이는데,
    'undefined' => 'b'
순서로 replace하면, 'b'가 보이지 않는다. 첫번째 undefined로 인해서, tooltip이 disable되어 버리는 것 같다.

이 경우, mouse를 leave했다가, 다시 enter해서 tooltip이 다시 'show'될 경우, 'b'가 보인다.
즉, 현재 show session에서는 update되지 않고, 다음 'show' session에 보인다.
이것은
    'a' => undefined => 'c'
순서로로 변경할 경우도 마찬가지다 - 당시 show session에서는 'c'가 보이지 않는다.

환경:

NodeJS: 8.X

typescript: 2.8.X

jest: 22.X.X

ts-jest: 22.X.X

NodeJS + Typescript를 이용해서 backend를 구성할때, 특정 module을 여러 module에서 공유하고 싶을때가 있다.

이때, 공통 모듈을 package.json 을 가지는 하나의 독립모듈로 구성하고, 이를 dependency에 넣는 것도 좋지만(npm module을 사용하는 일반적인 방법), 그냥 단순하게 module directory를 공용으로 사용하고 싶은 경우도 많다.

예를 들면.

moduleA/

|- package.json

|- src/

|- common (*1)

|- ...

moduleB/

|- package.json

|- src/

|- common (*2)

|- ...

에서 (*1)과 (*2)에서 동일한 코드를 사용하고자 한다고 가정해 보자. 매번 똑같은 파일을 유지하는 것은 문제의 여지가 많으므로, 아래와 같은 구조를 만들고 싶을 것이다.

moduleA/

|- package.json

|- tsconfig.json

|- src/

|- commonA --> (*3) // Symbolic link to (*3)

|- ...

moduleB/

|- package.json

|- tsconfig.json

|- src/

|- commonA --> (*3) // Symbolic link to (*3)

|- ...

shared/

|- commonA/ (*3)

|- ...

그리고, moduleA와 moduleB의 tsconfig.json에는 symbolic link를 쫓아갈 수 있도록 

"compilerOptions": {

...

"preserveSymblinks:" true

...

}

로 설정한다.

자... 이제 모든 것이 문제없이 동작하는 것처럼 보인다.

그런데.. Jest를 수행시키면, 바로 문제가 발생한다.(제대로 Type을 Import하지 못한다!)

그리고, Symbolic link를 제대로 쫓아가지 못하는 것처럼 보인다.

Jest관련 각종 정보를 찾아보면, 일단은, 이 부분은 Known Issue이고, 지원하지 않기로 결정한 것으로 보인다.

(어딘가 본 기억이 있는데, 정확한 link는 잊어 먹었다는... 뭐 이후 또 바뀔수도 있으니....)

그래서, workaround를 고민해 보면, 아래와 같이 그냥 shared module에 ts-jest를 설치해 주면 문제가 해결되는 것 같다.

shared/

|- package.json // only 'ts-jest' exists at 'devDependencies'

|- commonA

|- ...

이렇게 해 두고, shared에서 npm install 을 통해서 ts-jest 를 node_modules 안쪽에 설치하고 나면, moduleA와 moduleB의 jest가 문제없이 동작하는 것을 볼 수 있다.

더 좋은 방법이 있는지는, 그리고 왜 이렇게 하면 동작하는지는 좀 더 살펴봐야할 부분이긴하나... 굳이 살펴봐야하나... 싶기도 하다... ^_^