Angular5 style guide 간단설명

안녕하세요. 

오늘은 Angular Style Guide에 대해서 간단히 소개해보도록 하겠습니다.

아직 Angular(2이상)는 대규모 서비스에서 사용된 사례가 많지 않기 때문에 Style Guide 또한 다듬어져가는 중입니다.

Angular 진영에서 공식 사이트에 TECHNIQUES 카테고리에 올린 Style Guide를 참고하여 중요한 부분만 간략하게 정리해 보았습니다.

Angular Style Guide

Angular 공식 사이트에 나와 있는 style guide를 바탕으로 angular 구문(syntax), 규칙(conventions)에 대해서 정리합니다.

File structure conventions

• hero.component.ts
• hero.component.html
• hero.component.css

Single responsibility

• 컴포넌트, 서비스, 파이프 각각의 역할에 맞게 single responsibility principle (SRP, 단일책임원칙)을 사용하여 파일을 관리해야 합니다.
• 파일을 각 기능단위로 깔끔하게 관리할 수 있습니다.

1. 하나의 파일을 400줄로 이하로 작성하라.
   - 팀원이 코드를 이해하기 쉽고, 관리하기 쉬워 충돌을 피할 수 있다.
   - 파일 하나의 코드가 길어지면 변수를 공유하면서 생기며 발생할 수 있는 버그를 줄일 수 있다.
   - 지연로드가 가능하여 퍼포먼스가 높아집니다.
   - 핵심은 코드 재사용이 쉽고 실수가 적은 코드를 작성할 수 있다.
   
   
2. 함수는 75줄 이하로 작성하라.
   - 특히 한가지 일을 목적으로 하도록 작성해야 테스트하기 쉽다.
   - 재사용성이 높다.
   - 읽기 쉽다.
   - 유지보수하기 쉽다.
   - 함수를 작게 만들면, 여러가지 기능들과의 종속성을 제거할 수 있고 큰 함수안에서 변수를 공유하여 발생하는
     버그를 피할 수 있습니다.

Naming

naming 규칙은 가독성과 유지보수성에 중요하다. 따라서, 파일의 이름에 대해 규칙을 정하는 것이 좋습니다.

General naming guidelines

• 모든 symbols에 일관된 이름을 사용해야 한다.
• 이름에서 기능을 설명하고 그 유형을 설명하는 패턴을 따라야 한다.

Style 1

1. naming은 내용과 기능을 한눈에 파악할 수 있는 일관된 방법을 제공한다.
2. 팀과의 커뮤니케이션에 도움을 준다. 
3. 일관된 naming rule은 팀원이 이름만 보고 이해가능하기 때문에 효율성이 높아진다.코드를 더 빨리 찾아낼 수 있고 이해가 쉽다.
4. 코드를 더 빨리 찾아낼 수 있고 이해가 쉽다.
5. 폴더와 파일은 의도를 명확하게 전달해야 한다. 예를들어 app/heroes/hero-list.component.ts라면 hero-list.component에는 영웅 목록을 관리하는 구성요소가 포함될 수 있다.

Style 2

1. 설명적인 이름으로 단어를 분리하려면 dash(-)를 사용한다.
2. 설명적 이름과 유형을 분리하려면 dat(.)를 사용한다.
   예를들면, feature.type.ts -> (기능).(유형).(파일 유형)
3. .service, .component, .pipe, .module, .directive 와 같이 유형 이름을 사용한다.
4. 유형 이름은 파일에 있는 내용을 신속하게 파악하는데 도움을 준다.
5. 유형 이름을 사용하면 IDE에서 신속하게 특정 유형 파일을 검색할 수 있다.
6. .srv, svc, .serv 와 같은 축약된 표현은 혼란을 줄 수 있으므로 .service와 같이 사용해야 한다.

Symbols and file names

1. 클래스 이름은 대문자로 사용한다.
2. 클래스 이름을 파일 이름과 일치해야 한다.
3. 클래스명 뒤에 유형의 이름을 붙여서 사용한다. (export class AppComponent { })
4. 파일명 뒤에 유형의 이름을 붙여서 사용한다. (app.component.ts)
5. 일관된 규칙을 적용하여 여러 유형의 파일들을 관리하고 식별하고 참조할 수 있다.

Service names

• Service 클래스에 접미사를 사용하여 나타낸다.
• DataService 또는 HeroService 와 같이 사용한다.

Component selectors

@component({

selector: 'admin-users'

})

Pipe names

@pipe ({ name: 'initCaps' })

export class  InitCapsPipe implements PipeTransform { }

file name: init-caps.pipe.ts

Unit test file name

• test 파일에는 .spec이라는 접미사를 붙여서 나타낸다.
• logger.service.spec.ts
• hero-list.component.spec.ts

Coding conventions (coding, naming, white spce etc..)

• class에 upper camel case로 나타냄으로써, 클래스를 인스터스화 하고 인스턴스를 생성할 수 있음을 나타낸다.
• (upper camel case의 경우 constructable 가능한 자산으로 약속하는 것과 같다.)

export class ExceptionService { constructor() { } }

Const variable

1. 생명주기 동안 (프로그램이 실행되고 종료되는 동안) 변경되지 않는 변수의 경우 const variable로 선언한다.
2. 코드 가독성이 좋아진다. 코드를 읽는 사람이 변수를 보고 한눈에 변하지 않는 변수임을 알아볼 수 있다.
3. typescript에서는 const 변수는 한번 초기화 된 후, 변경을 막아준다. (에러발생)
4. 기존에는 UPPER_SNAKE_CASE를 사용했다면 angular에서는 lower camel case를 사용하여 표현한다.

export const mockHeroes = ['Sam', 'Jill']; // prefer export const heroesUrl = 'api/heroes'; // prefer export const VILLAINS_URL = 'api/villains'; // tolerate

Interfaces

1. I prefix를 사용하지 않는다.
2. 인터페이스 대신 클래스를 사용하길 권고합니다. 클래스로 처리가 가능하며 코드도 줄어든다.

import { Injectable } from '@angular/core'; import { Hero } from './hero.model'; @Injectable() export class HeroCollectorService { hero: Hero; constructor() { } }

Properties and method

1. 프로퍼티나 메소드 앞에 _를 사용하지 않는다.
2. javascript에는 private, public의 개념이 모호하기 때문에 별도로 private, public을 붙여주지 않는다.
3. typescript를 사용하면 private과 public의 개념이 명확히 구분되어지기 때문에 상관없다.

1. import { Injectable } from '@angular/core';
2.  
3. @Injectable()
4. export class ToastService {
5. message: string;
6.  
7. private toastCount: number;
8.  
9. hide() {
10. this.toastCount--;
11. this.log();
12. }
13.  
14. show() {
15. this.toastCount++;
16. this.log();
17. }
18.  
19. private log() {
20. console.log(this.message);
21. }
22. }

Import line spacing

1. third part imports와 application imports를 빈줄로 구분하여 나타낸다.
2. 하나의 import에 여러개가 추가되어 있다면, 알파뱃 순으로 정렬한다.

import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import { Hero } from './hero.model'; import { ExceptionService, SpinnerService, ToastService } from '../../core';

Application structure and NgModules

• Lift
  - 확장성과 이식성이 좋아야합니다.
• Locate
  - 직관적이고 간단하고 빠르게 구성해야 합니다.
• Identify
  - 파일명에서 즉시 어떤 파일인지 알 수 있어야 합니다. 더 긴 파일의 이름은 짧지만 애매한 파일보다 효율적입니다.
• Flat
  - 가능한 플랫한 폴더구조여야 합니다. 폴더가 7개 이상의 구조로 만들어지면 하위폴더 생성을 고려해야 합니다.

Overall structural guidelines

1. 코드는 src 디렉터리에 모두 들어간다.
2. 관심사별(페이지별) 파일을 그룹핑한다.

참조

• https://angular.io/guide/styleguide#style-guide

모두 즐거운 코딩하세요~