Angular Coding style Guide

https://angular.kr/guide/styleguide

Angular 코드를 작성 할시에 아래와 같은 가이드 기준에 맞추어서 작성 해보도록 합니다. 모든 코딩 스타일을 맞출수는 없지만, 아래를 지향 합니다.

 

파일 명명 규칙 : hero.component.ts / html/ css / spec 같은 명칭으로 표현을 합니다. 

 

한 파일에 서비스와 컴포넌트와 같은 Angular 구성요소 하나만 정의 합니다.

400줄 이하의 코드를 작성하는것을 권장합니다.

 

> 유지보슈와 팀단위 개발시 코드 충돌을 방지 하기 위해서입니다.

>한파일에 컴포넌트 하나만 지정하면, 라우터의 지연로딩할 때 활용 할수 있습니다.

>코드의 재사용성을 쉽게하기 위해서 입니다.

>각 코드는 역할에 맞게 개별 파일로 작성하는것이 좋습니다.

 

함수는 간단하게

75줄 이하 작성을 권장 합니다

간단할 수록 재사용하기 편리 합니다.

함수의 기능이 작을수록 코드가 읽기 쉽습니다

유지보수하기 편합니다.

버그가 발생할 가능성도 작아집니다. 기능이 복장한 함수는 변수를 공유하거나, 불필요한 클로저를 만들고 다른코드와 커플링 될 가능성이 크기 때문에 버그가 발생할 가능성도 커집니다.

 

명명규칙 가독성, 유지보수성

심볼의이름. 기능.타입.ts와 같은 형식으로 작성하는것을 권장

기능.compnent.ts 형식 , 컴포넌트의 기능을 표현하도록 파일의 이름을 작성하십시오.

타입에 사용하는 단어는 축약하지 않는 것이 좋습니다. 

 

심볼과 파일 이름

클래스 이름은 대문자 케이스

심볼의 이름과 파일의 이름이 연관되도록 하십시오

 

서비스 이름

일관성을 유지하여, service 라는 접미사를 붙입니다.

loggerService, Creditservice 등

 

부트스트랩

부트스트랩이나 플랫폼과 관련된 로직은 main.ts 파일에 작성 하십시오.

 

컴포넌트의 셀렉터

하이픈(-)으로 구분되는 소문를 사용합니다. 예를 들어 admin-user

접두사는 해당 컴포넌트의 기능이나 앱의 특성을 표현할수 있도록 지정하십시오

컴포넌트의 Element의 selector는 다른 앱의 컴포넌트의 selecter, Native HTML과 충돌되지 않도록 지정되어 야합니다.

 

커스텀 디렉티브의 접두사

Directive의 selector에는 접두사를 사용하세요. 

디렉티브 셀럭터는 네이티브 HTML 엘리먼트나 네이티브 어트리뷰와 겹치지 않은 소문자 캐멀 케이스를 사용하세요

왜? Directive와 Native Html이 충돌하지 않기 위해서, 이름만 보고 구분하기 쉽게 할 수 있어야 합니다.

 

파이프 이름

 

애플리케이션 구조와 NgModule

애플리케이션의 모든 소스는 src폴더에 둡니다. 이중 특정 기능은 따로 모아 별개의 폴더에 둘수 있습니다. 이때 ngModule도 같이 생성 합니다. 

 

LIFT 규칙을 따르세요

• Locate :  개발자가 찾기 쉬운 곳에
• Identify : 이 파일이 무엇인지 확인 가능 하게
• Flattest : 최대한 단순한 폴더 구조
• T : 반복된 부분 Try to be DRY, DRY : Don't repeat yourself

애플리케이션 구조를 모듈단위로 일관성있게 확장을 할 수 있기 때문에 개발자가 원하는 코드를 빠르게 찾을 수 있습니다.

하위 폴더가 7개 이상이 되면 폴더를 하위폴더로 구성하는것을 권장 합니다

 

기능별로 폴더를 만드는 구성

 

지연로딩 모듈의 폴더

애플리케이션 모듈은 지연로딩하거나 흐름상 필요 할 때 로드 할수 있습니다. 이 모듈이 제외되면 초기 실행 속도가 빨라집니다.

지연로딩용 폴더는 라우팅컴포넌트, 컴포넌트의 자식 컴포넌트, 관련된 리소스가 위치 하게 됩니다.

 

템플릿과 스타일은 개별 파일로 분리

템플릿과 스타일을 지정하는 코드가 3줄 이상이 되면, 개별파일로 분리하세요

./ 상대 주소로 시작하는 상대주소로 참조 하세요

인라인 텟플릿이나 인라인 스타일에 적용되는 코드 하이라이팅 기능과 자동완성 기능이 충분치 않습니다.

 

입출력프로퍼티 지정하기

입출력 프로퍼티는 @Directive나 @Component 메타데이터의 input,output이 아닌, @ 데코레이터로 지정하세요

입출력 데코레이터를 사용하면 클래스 프로퍼티 중 어떤 것이 입력 , 출력인지 쉽게 구분이 가능합니다.

메타데이터는 짧을수록 가독성이 좋아집니다

 

pirvate 다음 Public 순서로 진행

 

HostLinstenr 와 HostBinding @  VS Host Meta data

@Directvie나 @Component 데코레이터의 Host 프로퍼티를 활용할수 있는 로직은 @HostListener와 @HostBinding으로 사용하는 것을 권장 합니다.

 

서비스는 싱글턴이어야 합니다

서비스는 같은 인젝터를 사용해서 싱글턴으로 사용합니다. 서비스는 데이터와 함수를 공유하는 방식으로 사용해야 합니다.

서비스는 여러컴포넌트에 사용되는 기능을 한 곳에 모여두기 위해서 만드는 것입니다

서비스는 인-메모리 데이터를 공유하는 방식으로 사용하는 것입니다.

 

서비스는 하나의 목적에 맞는 기능만 구현 합니다

 

@서비스는 @Injectable 데코레이터를 사용해서 애플리케이션 최상위 injector로 등록 합니다.

최상위의 인젝터에 서비스 프로바이더를 등록하면, 이 서비스의 인스턴스는 모든 클래스에 공유되며, 서비스의 스테이트나 메소드를 함께 활용할수 있습니다.

 

@Injectable() 클래스 데코레이터를 사용합니다.

서비스에도 의존성으로 주입하는 개체가 있을수 있습니다. 이 때 Angular 의존성 주입 메커니즘에 따라 올바른 의존성 객체를 주입하려면, 서비스 생성자에 의존성 객체의 타입을 명시 해야 합니다.