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

[Angular] 코딩 스타일 가이드

개요 이 페이지는 Angular 프로젝트에서 가독성을 높이기 위해 권고하는 코딩 스타일 가이드에 대한 학습 자료를 정리하였습니다. Angular 팀에서 제안하는 코딩 스타일 가이드 공식 사이트에서 크게 기억에 남는 부분만 발췌한 것으로, 더 자세한 내용은 아래 출처 페이지를 참고하시기 바랍니다. 단일 책임 원칙 모든 컴포넌트와 서비스, 심볼은 단일 책임 원칙(single responsibility principle, SRP)을 준수하며 작성하세요. 그러면 애플리케이션이 좀 더 깔끔해지고 유지보수하기도 편하며, 테스트하기도 편해집니다. 한 파일에는 400줄 이하의 코드만 작성하는 것을 권장합니다. 하나의 컴포넌트에서 모두 정의하지 말고, .component / .model / .service 등으로 나누어..

2022. 12. 14. 21:46
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

[Angular] 개발 참고자료 목록

개요 이 페이지는 Angular 프로젝트로 앱/웹을 구현하면서, 검색하여 참고한 사이트 및 정보를 정리해놓았습니다. 참고자료 목록 Angular 일반 Angular Pipe 구현 시, 비동기 함수를 사용하는 방법 import { ChangeDetectorRef, Pipe, PipeTransform } from "@angular/core"; import { SettingService } from "src/app/services/setting/setting.service"; import { SETTING_KEY } from "src/app/models/enums/setting.enum"; import DateTimeUtils from "src/app/utils/datetime.util"; @Pipe({ na..

2022. 10. 23. 21:00
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

[Angular] 새로고침 시 404 페이지 뜨는 경우

# 해당 현상 원인앵귤러에(2.0 이상)서는 페이지를 한번에 전부 로드하고 사용자에게 보여주는 방식이므로 새로고침을 누를경우 해당 동작중인 서버로 url을 호출하기 때문이다. 즉, 가상의 주소를 매핑해놨는데....새로고침 하면 실제 주소로 이동하기 때문이다. # 일반적인 router 설정import { RouterModule,Routes} from '@angular/router'; //라우터...const router : Routes = [ //통상적인 라우팅 객체 모습 {path : '' , component : 컴포넌트1}, {path: '**',redirectTo: ''} , {path : 'user' , component : 컴포넌트2}....]...@NgModule({ imports: [ Rou..

2020. 11. 17. 09:42
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

[Tip] Angular build 후, local에서 간단하게 웹서버 실행하는 방법

# 개요 angular application을 간단하게, 노트북 상에서 배포하기 위해, angular 배포에 대해 학습하던 중, 제일 간단해 보이는 방법이 있어 정리한다. 회사 pc 상에서는 동일한망 안에서는 ip가 고유할 것이므로, 동일망을 사용하고 있다면 PC와 PC간에 ip주소로 접근이 가능할 것이다. 그러나 개인 pc에서 해당 방법을 사용할 경우, 공유기 ip만 외부로 공개되기 때문에, 공유기 설정 중에 Ip고정, 포트 포워딩을 통해 공유기 주소의 특정 포트로 요청이 들어왔을 경우, 공유기내 특정 ip의 특정 포트의 요청으로 바꾸어주는 작업이 필요하다. # Angular Project Build 하기 — Create Production Build (run below command for creat..

2020. 11. 16. 15:09
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

Angular User Register Standard form

# 출처https://jasonwatmore.com/post/2018/11/07/angular-7-reactive-forms-validation-example

2020. 11. 11. 16:09
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

ExpressionChangedAfterItHasBeenCheckedError 에러에 대하여

# ExpressionChangedAfterItHasBeenCheckedError 란? - 자식 component에서 부모 component의 값을 바꾸는 경우- product mode에서는 굳이 에러를 던지진 않지만 developer 모드에서는 에러가 발생- 값 자체는 변경을 해주지만 왜 오류를 발생시킴- Angular에서 안정적인 UI를 제공하기 위한 설계 중 하나 @Component({ selector: 'app-parent', template: ` {{name}} `})export class ParentComponent { name = 'This is Parent'; message = 'A message for Child'; - 컴포넌트와 해당 컴포넌트를 포함하는 컴포넌트가 존재하고, messag..

2020. 11. 11. 10:24