NgRx(state management with actions & reducers) = RxJs(Observables) + Redux redux에서 영향을 받아 reactive한 어플리케이션을 만들 수 있도록 하는 프레임워크 즉, Redux의 상태관리 패턴을 앵귤러에도 적용시키고 동시에 RxJs를 사용하여 state의 Observable을 쉽게 가공할 수 있다. 컴포넌트에서 입력받은 값을 api통신을 거쳐 어떻게 뷰에 반영이 되는지 위의 다이아그램을 부분적으로 살펴보며 알아보자. 1. ACTION - 어플리케이션 내에 발생되는 이벤트들을 기재해놓은 곳 - 사용자 인터렉션, 네트워크 요청을 통한 외부 상호작용, API와의 통신 등 모두 action에 적혀 있음 - 따라서 어플리케이션 내에서 어떤 이벤트들이..

Angular에서 eslint를 사용하다가 분명 npm install를 했음에도 불구하고, .eslintrc.json에 plugin으로 지정한 module을 읽지 못했다. (에러 메세지 : Cannot find module 'eslint-plugin-html') 그럴 때는 지우고 다시 설치!! 1. node_modules 지우기 2. package-lock.json 지우기 (in terminal : rm -rf ~~~) 3. npm install

MAC 에서 local git으로 Webstorm 상에서 프로젝트를 개발하던 중 Github에 코드를 올리기 위해 깃허브 연동을 하려고 했는데.. 아이디 & 비밀번호를 제대로 쳐도 아래와 같은 에러 메시지와 함께 연동이 안됐다ㅠㅠ 'invalid authentication data 404 Not found' stackoverflow.com/questions/52095022/intellij-cannot-log-in-to-github Settings -> Developer settings -> Personal access tokens 2. Github 연동 Webstorm -> Preferences -> GitHub -> login 앞서 만든 토큰으로 로그인을 했다. 3. 진행 중인 프로젝트 Github에 ..

BehaviorSubject와 ReplaySubject의 차이점을 예제를 통해 알아보려고 한다. Official Documentation - BehaviorSubject A variant of Subject that requires an initial value and emits its current value whenever it is subscribed to. initial 값을 지정해야 하고, 구독이 됐을 때 현재의 값을 emit 하는 Subject. - ReplaySubject A variant of Subject that “replays” or emits old values to new subscribers. It buffers a set number of values and will emit ..

levelup.gitconnected.com/rxjs-operator-tips-startwith-d67109c8883e RxJS Operator Tips — startWith Creating awesome by combining startWith and EventEmitter levelup.gitconnected.com 해당 글은 Wandering Developer님의 'RxJS Operator Tips - startWith'를 번역한 글입니다. startWith와 EventEmitter를 조합하여 멋진 것을 만들어보자. RxJS documentation에 따르면, startWith : source observable에서 값들을 emit 하기 전에 당신이 정해둔 특정 값들을 먼저 emit 한다. The ..

SVG 파일을 사용할 때 stoke(외곽선)의 두께를 고정해야 하는 경우가 있다. 예를 들면 지도에서 2px값의 외곽선을 그려넣은 도로가 있는데 사용자가 지도를 zoom 했을 경우, 외곽선도 같이 확대되어 두께가 달라지면 곤란하다. 그림판 같이 도형을 넣고 색상을 바꿀 수 있는 프로그램을 개발하고 있었는데, 외곽선 두께에 대한 이슈가 발생했다. 왼쪽의 도형의 세로 길이를 늘리면 오른쪽 도형과 같이 외곽선의 두께가 일정하지 않게 된다. 이럴때는 'vector-effect'의 속성을 'non-scaling-stroke'으로 변경해주면 된다. 안에 있는 에 style="stroke-width: 5px; vector-effect: non-scaling-stroke;" 스타일 속성을 넣어주었다. 그 결과, 가로로..