Angular style guide

sw·2024년 2월 20일
0
post-thumbnail

1. 단일 책임

1.1 한가지의 역할

1.1-1. service, component, file에 한 가지만 정의하기 - 한 파일에 코드 라인 400자 제한

2. 명명규칙

2.1 일반적인 명명 가이드라인

2.1-1. 파일명의 패턴은 feature.type.ts로 하기

2.2 파일 이름을 .과 -로 구분하기

2.2-2. 분리된 글자에는 -를 사용하기
2.2-3. type(component, service 등)을 분리할 때는 .을 사용하기
2.2-4. feature 부분을 작성할 때는 일관된 단어를 사용하기
2.2-5. type 부분을 작성할 때는 service, component, pipe, module과 같은 단어를 사용하기(sr, srv 등을 사용하지 않기)

2.3 Symbol(Class) and file names

2.3-1. 일관된 이름을 사용하기
2.3-2. 클래스 명으로는 Upper Camel Case를 사용하기
2.3-4. Symbol의 접미사로 Component, Directive, Pipe 등을 사용하기
2.3-5. file의 접미사로 .component.ts, .directive.ts, .module.ts 등을 사용하기

2.4 Service names

2.4-1. 일관된 이름을 사용하기
2.4-2. class 명으로 Service 접미사를 사용하기(프로젝트 내부에서 합의한 경우 Service를 제거할 수 있음)

2.5 Component selectors

2.5-1. component의 selector의 이름을 정할 때, dashed-case 방법을 사용하기(ex. hero-button.component.ts)

2.6 Pipe selectors

2.6-1. pipe class 이름은 Upper camel case를 이용하고, name은 lower camel case를 이용하기

3. 애플리케이션 구조 and NgModules

3.1 전체적인 프로젝트 구조

3.1-1. 모든 애플리케이션 코드의 파일은 src 폴더 아래에 위치한다

3.2 폴더별 기능 구조

3.2-1. 모든 구분된 기능에 따라 NgModule을 생성한다
3.2-2. 기능 모듈은 해당 모듈의 이름을 가진 폴더에 위치한다.

3.3 공유 기능 모듈

3.3-1. shared 폴더에 SharedModule을 생성한다.
3.3-2. 다른 기능 모듈에서 재사용되는 components, directives, pipes 들은 shared module에 선언한다.
3.3-3. CommonModule, FormsModuleSharedModule에서 import한다.

4. 컴포넌트

4.1 복잡한 구성 요소 로직을 서비스에 위임한다

4.1-1. 컴포넌트는 view를 위한 로직으로만 제한한다. 모든 로직은 서비스에 위임한다.
4.1-2. 컴포넌트는 간단하게하고 재사용될 수 있는 로직은 서비스로 옮긴다.

4.2 output 구성요소에는 접두사를 뺀다

4.2-1. output event에는 접두사 on을 제거한다.
4.2-2. event handler method에도 접두사 on을 제거한다.

4.3 컴포넌트 클래스 안에 presentation 로직을 위치시킨다

4.3-1. template이 아닌 컴포넌트 클래스 안에 presentation 로직을 위치시킨다.

4.4 input은 초기화한다

4.4-1. 부득이하게 초기화를 하지 못할 경우 ?를 붙인다
4.4-2. 꼭 필요한 input 변수인 경우, !는 사용하지 않고 초기화를 한다.

5. 서비스

5.1 서비스는 싱글톤 방식으로 동작한다.

5.1-1. 같은 injector에서는 서비스가 싱글톤 방식으로 동작한다. 데이터와 기능을 공유하는 역할로 사용하면 된다.

5.2 provide

5.2-1. root injector에 서비스를 제공하라. 그러면 모든 곳에서 한개의 서비스 인스턴스를 사용할 수 있다.
5.2-2. 서로 다른 컴포넌트에서 분리된 인스턴스로 서비스를 사용하고 싶으면 각각의 컴포넌트에 제공하면 된다(providers: [{provide: xxxService, useClass: xxxService}] ).

6. 데이터 서비스

6.1 데이터 서비스를 통해서 서버와 통신

6.1-1. 서버와 데이터 통신을 하기 위해 데이터를 재구성한다.

참고: Angular coding style guide

profile
abcde

0개의 댓글