[DEV] App Dev ∕ Web Front/Framework ∕ Angular 검색 결과
31 개의 검색 결과가 있습니다.
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

Angular Akita 기본 구조

https://github.com/fullstackio/awesome-fullstack-tutorials/blob/master/angular/managing-state-in-akita/Managing%20State%20in%20Angular%20using%20Akita.md 참조

2020. 10. 30. 17:10
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

상태관리가 굳이 필요할까?

@ 상태란?응용 프로그램 상태는 응용 프로그램의 전체 메모리입니다. 간단히 말해서 애플리케이션 상태는 API 호출, 사용자 입력, 프리젠 테이션 UI 상태, 애플리케이션 환경 설정 등으로 수신 된 데이터로 구성됩니다. 애플리케이션 상태의 단순하고 구체적인 예는 CRM 애플리케이션에서 유지 보수되는 고객 목록 Angular 응용 프로그램은 일반적으로 많은 구성 요소로 구성됩니다. 이러한 각 구성 요소는 자체 상태를 가지며 다른 구성 요소의 상태를 인식하지 못합니다.부모 - 자식 구성 요소 간의 정보를 공유하기 위해, 우리는 사용 @Input하고 @Output장식. 그러나 이 방법은 응용 프로그램이 아래와 같이 몇 가지 구성 요소로 구성된 경우에만 실용적부품 개수가 증가 할 때, 단독 통해 구성 요소간에 정..

2020. 10. 22. 10:34
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

NestJs+TypeOrm B+ 앱 만들기

1. 설치 : nestjs, typeorm db드라이버(mssql, mysql... 등) npm install @nestjs/typeorm typeorm mssql mysql... npm install ts-node -g //옵션 2. ormconfig.json 파일 생성 : typeorm 설정, 데이터 베이스 연결 정보를 정의 https://github.com/typeorm/typeorm/blob/master/docs/connection-options.md#cordova-connection-options { "type": "mssql", "host": "localhost", "port": 1433, "username": "admin", "password": "admin", "database": "Adm..

2020. 10. 12. 14:28
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

기초 Tip 기록

1. /src/tsconfig.jsontsconfig. json 내에서 compileroption > paths 항목 내에 아래와 같이 적용할 경우, 각 ts 파일에서, 상대 경로를 사용할 수 있다. ././ 형태의 파일간 상대경로가 아니라 @app/_helper 와 같이 절대경로처럼 사용가능 ..."compilerOptions": { "baseUrl": "./", "paths": { "@app/*": ["src/app/*"], "@environments/*": ["src/environments/*"], "@app/interface/*": ["src/app/interface/*"] },... 2. /src/styles.tsstyles.scss or styles.less 상에서, styles sheet를 ..

2020. 9. 21. 17:55
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

Service에 대하여

Service는 싱글톤 객체이다. 독립적인 상태와 메소드를 가질 수 있다. 대체로 API 통신 부분을 분리할 때 사용한다. Service는 @Injectable를 통해 정의된다. Service는 세 가지 역할을 수행하고 있다. API 통신, 상태관리, 헬퍼 이렇게 세 가지의 역할을 수행한다. 각각 폴더 위치를 다르지만 네이밍을 변경했다. 각 역할의 Suffix를 이렇게 변경된다. - API 통신: API- 상태관리: Store- 헬퍼: Helper기존 Service 컨벤션과 비교하면 이렇다. - API 통신: ConfigService => ConfigApi- 상태관리: DashboardService => DashboardStore- 헬퍼: DateService => DateHelper네이밍을 변경함으로써..

2020. 9. 4. 14:48
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

[예제로 배우는 Angular] 재사용가능한 Component - avatar image

# 개요circle 형태의 background-url을 가지고 있는 div Component를 반복적으로 사용한다고 하자. 사실 변하는 값은 한 두가지(value url 또는 color, size) 등이고, 나머지 틀은 다 똑같다. 그런데, 사용되는 곳마다, 클래스를 다같이 선언해주어야 하고, 불편하고, 수정이 어려워진다는 단점이 존재한다. 그래서, angular는 재사용가능한 component를 지정하여, 변하는 속성만 Input으로 받고, 나머지는 감추어서 표현이 가능하다. # 참고- ngClass 속성은 동적 Class명 리스트를 지정할 수 있다. (ex) ['기본속성','사용자정의 속성']- ngStyle 속성은 동적 style을 지정할 수 있다.- onChanges LifeCycle 함수는 아래..

2020. 9. 1. 17:01