code를 헤엄치는 인어공쭈

TypeScript 이란? - 2012년 마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 특징 - 컴파일 언어, 정적 타입 언어 : 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있다. 하지만 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점도 존재. - 자바스크립트 슈퍼셋(Superset) : 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어, 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있다. - 객체 지향 프로그래밍 지원 : 타입스크립트는 ES6(ECMAScript ..

호이스팅(Hoisting)의 개념 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의해야 한다. 재할당이 필요없는 경우, const를 사용해 불필요한 변수의 재사용을 방지하고, 재할당이 필요한 경우 let을 사용하는 것이 좋다. 1) function catName(name) { console.log("제 고양이의 이름은 " + name + "입니다"); } catName("호랑이"); 일반적으로 선언 2) catName("클로이"); 먼저 선언했지만 가능 function catName(nam..

- 구글에서 개발한 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크 - 단일 페이지 애플리케이션 (SPA)을 구축하는 데 매우 적합 - TypeScript와 함께 사용 - 정적 타입 검사 및 코드 예측 등의 이점을 제공 - 현재 앵귤러는 최신 버전인 앵귤러 15까지 출시 - 양방향 / 단방향 데이터 바인딩 둘다 가능 1. 컴포넌트(Component) 컴포넌트는 애플리케이션을 구성하는 기본 단위이다. 컴포넌트는 @Component() 데코레이터가 붙는 TypeScript 클래스, HTML 템플릿, 스타일로 구성된다. 컴포넌트가 템플릿에 사용될 CSS 셀렉터를 지정. 템플릿에서 이 셀렉터에 해당되는 HTML 엘리먼트마다 컴포넌트 인스턴스가 생성. Angular가 컴포넌트 내용으로 렌더링할 HTML 템플릿을 ..

* 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. ..