code를 헤엄치는 인어공쭈

* NgRx - Angular에서 반응형 애플리케이션을 구축하기 위한 프레임워크 로컬 상태관리에 용이함. Angular 라우터와 통합. 다양한 형태의 데이터, Entity 수집관리. State Store - Redux에서 영감을 받은 Angular 앱을 위한 RxJS 기반 글로벌 상태 관리. Effects - @ngrx/store에 대한 Model. Router Store - Angular 라우터를 @ngrx/store에 연결하기 위한 Bindings. Entity - record collections을 관리하기 위한 어댑터. ComponentStore - 로컬/컴포넌트 상태를 관리하기 위한 독립 실행형 라이브러리. Store 에 대해서 자세히 궁금하다면? Angular - ngrx in State (1..

router-store - Router를 Store 와 연결 import { StoreRouterConnectingModule, routerReducer } from '@ngrx/router-store'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, StoreModule.forRoot({ router: routerReducer, }), RouterModule.forRoot([ // routes ]), // Connects RouterModule with StoreModule, uses MinimalRouterStateSerializer by default StoreRouterConnectingMo..

주요 개념 효과는 구성 요소에서 부작용을 분리하여 상태를 선택하고 작업을 발송 RxJS를 기반으로 구현되어 있으며, Observable을 반환한다 Effects는 Store 에서 발송된 모든 작업 의 ​​observable을 수신 서비스 동기식 또는 비동기식 작업을 수행하고 새 작업을 반환 import { Injectable } from '@angular/core'; import { Actions, createEffect, ofType } from '@ngrx/effects'; import { EMPTY } from 'rxjs'; import { map, exhaustMap, catchError } from 'rxjs/operators'; import { MoviesService } from './mov..

* why use Store? 사용하는 이유? - 상태관리를 제공 언제 사용해야될까? 사용자 상호작용이 많고 여러 데이터 소스를 공유할때 외부 저장소에서 유지될때 다른소스의 작업에 영향을 받을때 단점? - 코드가 짧거나 빠른 방법은 아니다. 또한 많은 파일을 사용하게 된다. Type Safety - 아키텍처 전제에 타입스크립트를 사용해서 엄격한 형식으로 안전성이 높고 패턴 사용으로 더 높은 품질의 코드가 생성된다. Immutability and Performance - 변경할수 없는 단일 데이터 구조를 기반으로 구축되어 비교적 간단한 작업 가능 Encapsulation - 외부 리소스 사용으로 인한 부작용에서 격리시킬수 있다. Serializability - 직렬화 가능성을 제공하고 이..

캐싱 전략은 웹 서비스 환경에서 시스템 성능 향상을 기대할 수 있는 중요한 기술이다. 일반적으로 캐시(cache)는 메모리(RAM)를 사용하기 때문에 데이터베이스 보다 훨씬 빠르게 데이터를 응답할 수 있어 이용자에게 빠르게 서비스를 제공할 수 있다. 따라서 어느 종류의 데이터를 캐시에 저장할지, 얼만큼 데이터를 캐시에 저장할지, 얼마동안 오래된 데이터를 캐시에서 제거하는지에 대한 '지침 전략' 을 숙지할 필요가 있다. 크게 캐시 읽기 전략(Read Cache Strategy) / 캐시 쓰기 전략(Write Cache Strategy) 가 있다 캐시 읽기 전략 (Read Cache Strategy) 1. Look Aside 패턴 데이터를 찾을때 우선 캐시에 저장된 데이터가 있는지 우선적으로 확인하는 전략...

개발하는 프로그램의 크기가 커지면 기능들을 분리해야 된다. 이때 분리된 파일 각각을 모듈이라고 한다. 모듈화는 파일을 작은 조각으로 나누어 다루기 쉽도록 하는 과정이다. 프로그램 코드를 기능별로 나눠서 독립된 파일에 저장하는 방식을 모듈화 프로그래밍이라고 한다. - export 지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있다. - import 지시자를 사용하면 외부 모듈의 기능을 가져올 수 있다. * 모듈과 컴포넌트의 차이점 - 코드에서 재사용성을 높이기 위해서 컴포넌트화를 많이 시킨다. - 의미는 비슷하지만 둘의 차이점이 존재하는데 모듈은 구조의 최소단위고 컴포넌트는 런타임에 독립적으로 실행되는 단위이다.

Webpack이란 ? Webpack = 모듈 번들링이라고 한다. html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 한다. 쉽게 말하면, 필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어 주는 것을 Webpack 이라고 한다. Webpack을 사용하게되면 웹에서 사용하는 다양한 파일들을 모듈별로 다룰 수 있게된다. Bundle이란 ? 서로 참조관계에 있는 파일들을 모아서 하나의 파일로 묶는것을 Bundle 이라고한다. Webpack이 이렇게 Bundle을 시켜줌으로써, Webpack은 모듈 번들러라고도 불린다. Bundle이 중요한 이유 1. 모든 모듈을 로드하기 위해 검색하는 시간이 단축 2. 사용하지 않는 코드를 제거 3. ..

Deview 는 미래에 향한 개발자들의 시선이 담긴 국내 최대 규모의 개발자 컨퍼런스이다. 국내외 개발자들이 모여 최고의 기술과 경험, 노하우를 나누며 함께 성장을 이어간다. 그 중 쿠팡 '박찬진' 님의 'SSR환경에서의 Micro-Frontend 구현과 퍼포먼스 향상을 위한 캐시전략' 대해서 살펴보겠다. 1. Monolithic Frontend 의 한계 - Monolithic은 하나로 짜여져 있는 스타일, 따라서 덩치가 커감에 따라 배포시간이 길어짐 => 트러블 슈팅 매우빈번, 모든 배포 대응, 전체 시스템 이해 필요 2. MFE - 왜 도입이 필요했을까? => 서비스 랜딩 페이지, 여러개의 위젯으로 구성, 외부팀으로 부터 신규 개발 요청, - 컨테이너 중심으로 각파트를 통합 => Mono-repo, ..

두 문자열 s와 skip, 그리고 자연수 index가 주어질 때, 다음 규칙에 따라 문자열을 만들려 합니다. 암호의 규칙은 다음과 같습니다. 문자열 s의 각 알파벳을 index만큼 뒤의 알파벳으로 바꿔줍니다. index만큼의 뒤의 알파벳이 z를 넘어갈 경우 다시 a로 돌아갑니다. skip에 있는 알파벳은 제외하고 건너뜁니다. 예를 들어 s = "aukks", skip = "wbqd", index = 5일 때, a에서 5만큼 뒤에 있는 알파벳은 f지만 [b, c, d, e, f]에서 'b'와 'd'는 skip에 포함되므로 세지 않습니다. 따라서 'b', 'd'를 제외하고 'a'에서 5만큼 뒤에 있는 알파벳은 [c, e, f, g, h] 순서에 의해 'h'가 됩니다. 나머지 "ukks" 또한 위 규칙대로 바..

*개요 - 하도 ChatGPT가 난리 법석이여서 코테를 얼마나 잘푸는지 확인해보고 싶었다. - 코테가 어려워서 다양한 풀이 방법을 보고 싶었다. - 코테 싫어!!!! 코니는 영어 단어가 적힌 카드 뭉치 두 개를 선물로 받았습니다. 코니는 다음과 같은 규칙으로 카드에 적힌 단어들을 사용해 원하는 순서의 단어 배열을 만들 수 있는지 알고 싶습니다. 원하는 카드 뭉치에서 카드를 순서대로 한 장씩 사용합니다. 한 번 사용한 카드는 다시 사용할 수 없습니다. 카드를 사용하지 않고 다음 카드로 넘어갈 수 없습니다. 기존에 주어진 카드 뭉치의 단어 순서는 바꿀 수 없습니다. 예를 들어 첫 번째 카드 뭉치에 순서대로 ["i", "drink", "water"], 두 번째 카드 뭉치에 순서대로 ["want", "to"]가..