BaeBox

RxJS : Observable 시퀀스를 사용하여 비동기 및 이벤트 기반 프로그램을 작성하기 위한 라이브러리. 공식 문서曰, Reactive X는 Observer 패턴, Iterator 패턴, 함수지향 프로그래밍을 컬렉션과 결합하여 이벤트 시퀀스를 이상적으로 관리하는 방법을 제공한다고 한다. * 컬렉션 : Object 모음 Rx가 비동기 이벤트를 처리하는 핵심 개념 Observable : 미래에 얻게 될 value/event를 가질 컬렉션. Promise? Observable : Observable 이 전달한 값을 Listen 하는 callback의 컬렉션. Promise의 then? Subscription : Observable 의 실행을 나타내며, 주로 실행 취소에 유용. Operators : map..

컴포넌트 : 화면의 일부를 조작하는 구성 요소. 컴포넌트 메타데이터 : 클래스를 컴포넌트로 등록하는 메타데이터 selector : 컴포넌트 인스턴스가 DOM 트리의 어떤 자리에 위치할지 CSS 셀렉터로 지정. templateUrl : 컴포넌트 HTML 템플릿을 외부 파일에 정의할 때, 이 템플릿 파일의 위치를 지정. styleUrls : css 를 외부 파일에 정의할 때 , css 파일의 위치를 지정. providers: 컴포넌트가 생성될 때 의존성으로 주입되는 서비스의 프로바이더를 지정. 위의 예시 이미지에는 없음 provider는 module 에서도 선언 가능하며 module에서 선언했다면 그 범위는 모듈 내로, component 에서 지정했다면 해당 컴포넌트가 생성될 때마다 서비스 인스턴스도 새로이..

NgModule : NgModule은 애플리케이션 도메인이나 작업 흐름, 기능이 연관된 Angular 구성요소들을 묶어놓은 단위. JavaScript Module 과는 다르며, 상호 보완적인 관계이다. 해당 NgModule 에서 선언(declaration)된 객체는 외부로 노출(export) 하지 않는 이상, 그 모듈에 종속적이다. NgModule 메타데이터 declarations : 해당 NgModule에 포함될 component, directive, pipe 를 선언. exports : 기본적으로는 종속적인 모듈의 구성 요소를 다른 NgModule이나 컴포넌트 템플릿으로 재사용할 수 있도록 외부로 공개. imports : 다른 모듈에서 공개한 클래스를 지금 정의하는 NgModule에 가져올 때 사용...

Angular 는 기본적으로 NgModule 과 Component 로 구성되어 있다. https://angular.kr/guide/architecture 공식 문서에서는 서비스, 의존성 주입(DI), 라우팅 등에 대해서도 설명하고 있는데, 이는 NgModule과 Component 등을 유연하게 이용하기 위해 필요한 기능들이다. 고로, 핵심은 핵심은 NgModule 과 Component 이다. Angular 프레임워크에 내장되어 제공되는 NgModule의 형태는 제각각이지만, 단순히 그래 보이는 것일지도 모르지만 사용자가 정의하여 사용하는 NgModule은 대동소이하여 특수한 경우를 제외하면 아래와 같은 형태를 띈다. 아래 링크의 공식 문서에서 조금 더 자세한 내용을 볼 수 있다. 라우팅, 서비스, 의존성..

결론부터 얘기하자면, AOT 와 IVY 를 함께 사용하는 것이 좋다. JIT 와 AOT는 위와 같은 특징을 가지며, AOT는 JIT 에 비해 여러 장점을 가진다. 렌더링 시간 단축 프레임워크의 크기(용량) 감소 템플릿 에러 사전 검증 보안성 향상 JIT vs AOT AOT 승. IVY : Angular의 차세대 컴파일 파이프라인이자 렌더링 파이프라인을 의미하는 코드명. 내용을 조금 과하게 축약할 예정이니, 관심이 있다면 아래 링크의 글을 읽거나 따로 검색을 해보시는걸 추천드린다. React에서 채택한 가상돔(Virtual DOM) 에 대응해서 Angular는 증가형돔(Incremental DOM) 을 채택하였다. 증가형돔은 모든 컴포넌트를 명령(instrucdtion)으로 컴파일하기 때문에, 변경사항이 ..

Angular 는 프로젝트 생성을 간단히 하기 위한 툴을 제공한다. @angular/cli 라는 것인데, yarn 이나 npm 으로 받을 수 있으며, 아래 명령어로 프로젝트 생성이 가능하다. ng new [프로젝트명] 여러 옵션이 있으니, 아래 링크에서 확인할 수 있다. 또, angular 에는 현재 정식으로 제공하는 버전 외에도 rc(release candidate) 버전이 존재한다. 현재 2020년 01월 기준으로 8.2.14 을 서비스하지만, angular 팀 측도 메이저 버전 업을 준비하기 위해 9.x.x 버전을 만들기는 할 거 아닌가? 원한다면 그걸 사용해 볼 수 있다. 버그 많은건 감수해야함. 아래 명령어를 사용하면 된다. ng update @angular/cli @angular/core --..

Angular: 프론트엔드 프레임워크의 한 종류이다. Java 진영의 Spring 프레임워크처럼 프론트엔드 측의 프레임워크 중의 하나로, 소위 React 와 Vue를 위시해 프론트엔드 3대장이라고 불리운다. 리액트와 유사하게 flux 패턴에서 영감을 받아 NgRx라는 리액트의 Redux 와 유사한 데이터 처리 방식을 가지기도 한다. 단, 권장/선택사항이므로 반드시 이를 차용할 필요는 없다. 그렇지만 rxjs 는 기본으로 깔려있다. https://angular.kr/ Angular 가이드 Angular 가이드 angular.kr https://ngrx.io/ NgRx Docs ngrx.io

최선 : 여러 번 내지는 잘못 import, export 되어 있는 선언을 정리해 주는 것이고, 차선 : "showCircularDependencies": false 를 설정해 주는 방식으로도 해결 가능하다. 사실 차선이라기보단, 임시방편이다. angular.json의 projects[프로젝트명].architect.build.options 하위 경로이다. https://charlie-choi.tistory.com/112 WARNING in Circular dependency detected Angular를 사용하다가 갑자기 다음과 같은 Circular dependenct detected 경고문이 나왔다. Dependenct import와 export를 잘못 사용해서 나오는 경고문이다. 제일 좋은 방법은 ..

https://webisfree.com/2018-03-29/nginx-413-request-entity-too-large-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C-%EC%82%AC%EC%9D%B4%EC%A6%88 nginx 413 Request Entity Too Large 에러 해결하기, 파일 업로드 사이즈 클라이언트의 브라우저에서 파일 업로드를 수행할 경우 파일 용량 제한에 에러가 발생할 수 있습니다. nginx의 허용사이즈를 설정하는 방법은 어떻게할까요? webisfree.com

private key의 권한이 너무 많이 open 되어 있어서 그렇다. 이게 무슨 소리냐면 권한(permission) level 을 조금 더 낮게 조정해 주면 된다. 600 이하는 잘 되는듯. chmod 600 [file_name]