johnny.m(김민형) / 카카오커머스 3년간 카카오커머스에서 Angular v2부터 사용하며 겪었던 경험들을 토대로 프레임웍의 특징과 장단점, 그리고 서비스를 안정적으로 운영하기 위한 Best Practice를 공유합니다.

15. @Component({
template: `
<form [formGroup]="form">
<input type="text"
formControlName="name" />
</form>`})
class ProductComponent {
form = new FormGroup({
name: new FormControl(
'',
Validators.required
),
});
}
console.log(form.value);
/*
{
name: " "
}
*/

16. @Component({
template: `
<form [formGroup]="form">
<input type="text"
formControlName="name" />
</form>`})
class ProductComponent {
form = new FormGroup({
name: new FormControl(
'',
Validators.required
),
});
}
console.log(form.value);
/*
{
name: " "
}
*/

17. @Component({
template: `
<form [formGroup]="form">
<input type="text"
formControlName="name" />
</form>`})
class ProductComponent {
form = new FormGroup({
name: new FormControl(
'',
Validators.required
),
});
}
if (form.valid) {
this.http.post(
'/api/product',
form.value
).subscribe(res => {
alert(' !');
});
}

18. @Component({
template: `
<form [formGroup]="form">
<input type="text" formControlName="name" />
<div formGroupName="discount">
<input type="text" formControlName="price" />
<input type="text" formControlName="period" />
</div>
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl('', Validators.required),
discount: new FormGroup({
price: new FormControl(''),
period: new FormControl(''),
})
});
}

19. @Component({
template: `
<form [formGroup]="form">
<input type="text" formControlName="name" />
<div formGroupName="discount">
<input type="text" formControlName="price" />
<input type="text" formControlName="period" />
</div>
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl('', Validators.required),
discount: new FormGroup({
price: new FormControl(''),
period: new FormControl(''),
})
});
}

20. @Component({
template: `
<form [formGroup]="form">
<input type="text"
formControlName="name" />
<app-discount
formControlName="discount" />
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(''),
discount: new FormControl(),
});
}
@Component({
selector: 'app-discount',
template: `
<form [formGroup]="discount">
<!-- ... -->
</div> `})
class DiscountComponent {
discount = new FormGroup({
price: new FormControl(''),
period: new FormControl(''),
});
}

21. @Component({
template: `
<form [formGroup]="form">
<input type="text"
formControlName="name" />
<app-discount
formControlName="discount" />
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(''),
discount: new FormControl(),
});
}
@Component({
selector: 'app-discount',
template: `
<form [formGroup]="discount">
<!-- ... -->
</div> `})
class DiscountComponent {
discount = new FormGroup({
price: new FormControl(''),
period: new FormControl(''),
});
}

22. @Component({
template: `
<form [formGroup]="form">
<input type="text"
formControlName="name" />
<app-discount
formControlName="discount" />
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(''),
discount: new FormControl(),
});
}
@Component({
selector: 'app-discount',
template: `
<form [formGroup]="discount">
<!-- ... -->
</div> `})
class DiscountComponent {
discount = new FormGroup({
price: new FormControl(''),
period: new FormControl(''),
});
}

23. @Component({
template: `
<form [formGroup]="form">
<input type="text"
formControlName="name" />
<app-discount
formControlName="discount" />
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(''),
discount: new FormControl(),
});
}
@Component({
selector: 'app-discount',
template: `
<form [formGroup]="discount">
<!-- ... -->
</div> `})
class DiscountComponent {
discount = new FormGroup({
price: new FormControl(''),
period: new FormControl(''),
});
}

26. @Component({
template: `
<form [formGroup]="form">
<input type="text" formControlName="name" />
<span *ngIf="form.get('name')?.errors?.required">
</span>
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(
'',
Validators.required
),
});
}

27. @Component({
template: `
<form [formGroup]="form">
<input type="text" formControlName="name" />
<span *ngIf="form.get('name')?.errors?.required">
</span>
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(
'',
Validators.required
),
});
}

28. @Component({
template: `
<form [formGroup]="form">
<input type="text" formControlName="name" />
<span *ngIf="form.get('name')?.errors?.required">
</span>
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(
'',
Validators.required
),
});
}
function required(ctrl) {
if (!ctrl.value) {
return {required: true};
}
return null;
}

29. @Component({
template: `
<form [formGroup]="form">
<input type="text" formControlName="name" />
<span *ngIf="form.get('name')?.errors?.required">
</span>
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(
'',
Validators.required
),
});
}
function required(ctrl) {
if (!ctrl.value) {
return {required: true};
}
return null;
}

30. @Component({
template: `
<form [formGroup]="form">
<input type="text" formControlName="name" />
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(
'',
ctrl => '' === ctrl.value ? {required: true} : null,
),
},
form => isEmpty(form.value) ? {error: true} : null
);
}

31. @Component({
template: `
<form [formGroup]="form">
<input type="text" formControlName="name" />
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(
'',
ctrl => '' === ctrl.value ? {required: true} : null,
),
},
form => isEmpty(form.value) ? {error: true} : null
);
}

32. @Component({
template: `
<form [formGroup]="form">
<input type="text" formControlName="name" />
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(
'',
ctrl => '' === ctrl.value ? {required: true} : null,
),
},
form => isEmpty(form.value) ? {error: true} : null
);
}

34. // POST: /product/8022881030
// Response 400
{
error_code: -10003,
validations: {
"name": [" "],
"discountA.period":
[" 0
"]
}
}
<form [formGroup]="form">
<input type="text"
formControlName="name" />
<input type="text"
formControlName="price" />
<div formGroupName="discountA">
<input type="text"
formControlName="period" />
</div>
</form>

35. // POST: /product/8022881030
// Response 400
{
error_code: -10003,
validations: {
"name": [" "],
"discountA.period":
[" 0
"]
}
}
<form [formGroup]="form">
<input type="text"
formControlName="name" />
<input type="text"
formControlName="price" />
<div formGroupName="discountA">
<input type="text"
formControlName="period" />
</div>
</form>

36. // POST: /product/8022881030
// Response 400
{
error_code: -10003,
validations: {
"name": [" "],
"discountA.period":
[" 0
"]
}
}
<form [formGroup]="form">
<input type="text"
formControlName="name" />
<input type="text"
formControlName="price" />
<div formGroupName="discountA">
<input type="text"
formControlName="period" />
</div>
</form>
<app-error> </app-error>

37. // POST: /product/8022881030
// Response 400
{
error_code: -10003,
validations: {
"name": [" "],
"discountA.period":
[" 0
"]
}
}
<form [formGroup]="form">
<input type="text"
formControlName="name" />
<input type="text"
formControlName="price" />
<div formGroupName="discountA">
<input type="text"
formControlName="period" />
</div>
</form>
<app-error> </app-error>

38. // POST: /product/8022881030
// Response 400
{
error_code: -10003,
validations: {
"name": [" "],
"discountA.period":
[" 0
"]
}
}
<form [formGroup]="form">
<input type="text"
formControlName="name" />
<input type="text"
formControlName="price" />
<div formGroupName="discountA">
<input type="text"
formControlName="period" />
</div>
</form>
<app-error> </app-error>
<app-error> ...</app-error>

39. <div *ngIf="name.invalid && (name.dirty || name.touched)"
class="alert alert-danger">
<div *ngIf="name.errors.required">
.
</div>
<div *ngIf="name.errors.minlength">
4 .
</div>
<div *ngIf="name.errors.forbiddenName">
.
</div>
</div>
<input id="name" class="form-control" formControlName="name" />

40. <input id="name" class="form-control" formControlName="name" />

41. import { Component } from "@angular/core";
import { FormGroup, FormControl, Validators } from "@angular/forms";
@Component({
selector: "my-app",
template: `
<form [formGroup]="form">
<input formControlName="name" />
</form>
<pre><code>{{form.value | json}}</code></pre>
`
})
export class AppComponent {
form = new FormGroup({
name: new FormControl("", Validators.required)
});
}

42. import { Component } from "@angular/core";
import { FormGroup, FormControl, Validators } from "@angular/forms";
@Component({
selector: "my-app",
template: `
<form [formGroup]="form">
<input formControlName="name" />
</form>
<pre><code>{{form.value | json}}</code></pre>
`
})
export class AppComponent {
form = new FormGroup({
name: new FormControl("", Validators.required)
});
}

53. @Component({
selector: 'app-product-list',
template: `
<div>
click count: {{count}}
<button type="button" (click)="onClick()">click</button>
</div>
`
})
export class ProductListComponent {
count = 0;
onClick() {
this.count += 1;
}
}

54. @Component({
selector: 'app-product-list',
template: `
<div>
click count: {{count}}
<button type="button" (click)="onClick()">click</button>
</div>
`
})
export class ProductListComponent {
count = 0;
onClick() {
this.count += 1;
}
}

57. const origin = window.setTimeout;
window.setTimeout = function(...args) {
origin(...args);
ngZone.runChangeDetection();
}
// window.clearTimeout
// ...

61. @NgModule({
imports: [
RouterModule.forRoot([
{
path: '/product',
loadChildren: () =>
import('./product/product.module')
.then(mod => mod.ProductModule)
},
{
path: '/delivery',
loadChildren: () =>
import('./delivery/delivery.module')
.then(mod => mod.DeliveryModule)
}
])
]
})
class EntryModule {}

62. @NgModule({
imports: [
RouterModule.forRoot([
{
path: '/product',
loadChildren: () =>
import('./product/product.module')
.then(mod => mod.ProductModule)
},
{
path: '/delivery',
loadChildren: () =>
import('./delivery/delivery.module')
.then(mod => mod.DeliveryModule)
}
], {preloadingStrategy: PreloadAllModules})
]
})
class EntryModule {}

63. @NgModule({
imports: [
RouterModule.forRoot([
{
path: '/product',
loadChildren: () =>
import('./product/product.module')
.then(mod => mod.ProductModule)
},
{
path: '/delivery',
loadChildren: () =>
import('./delivery/delivery.module')
.then(mod => mod.DeliveryModule)
}
], {preloadingStrategy: PreloadAllModules})
]
})
class EntryModule {}

68. @NgModule({
providers: [{
provide: HTTP_INTERCEPTORS,
useClass: ApiPrefixInterceptorService,
multi: true,
},
{
provide: HTTP_INTERCEPTORS,
useClass: HttpErrorHandlerInterceptor,
multi: true,
},
{
provide: HTTP_INTERCEPTORS,
useClass: DistinctRequest,
multi: true,
}]
})
export class AppModule {}

70. router.events
.pipe(
filter(e => e instanceof NavigationEnd)
)
.subscribe(e => {
console.log(e); // NavigationEnd ('/product')
});

71. router.events
.pipe(
filter(e => e instanceof NavigationEnd),
pairwise()
)
.subscribe(e => {
console.log(e); // NavigationEnd ('/product')
});

72. router.events
.pipe(
filter(e => e instanceof NavigationEnd),
pairwise()
)
.subscribe(e => {
console.log(e); // NavigationEnd ('/product')
});

73. const subscription = activatedRoute.queryParams.pipe(
switchMap(queryParams => httpClient.get('/api/product', queryParams)
).subscribe();

84. curl -F 'data=@path/to/local/a.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/b.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/c.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/d.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/e.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/f.js' UPLOAD_ADDRESS
# ...

85. curl -F 'data=@path/to/local/a.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/b.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/c.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/d.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/e.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/f.js' UPLOAD_ADDRESS
# ...
import {uploadFilesToKakaoCDN} from '@commerce-ui/deploy-toolkit'
(async () => {
const cdnUrl = await uploadFilesToKakaoCDN({
path: 'dist/'
});
})();