Angular 프로젝트 구조

1. Angular 프로젝트 구조의 모범 사례
2. 확장성이 뛰어난 프로젝트 폴더를 정의하는 방법
3. 결론

정리하는 것은 프로그래머의 핵심 가치 중 하나라고 해도 과언이 아닙니다. 깨끗하고 간결한 코드를 작성하는 것 외에도 잘 구성된 구성 요소 폴더로 프로젝트를 만드는 습관을 기르는 것이 좋습니다.

Angular 프로젝트 구조의 모범 사례

Angular 프로젝트에 우수한 폴더 구조를 유지하는 것이 좋은 이유는 무엇입니까?

1. 정리된 폴더 구조를 유지하면 정리된 상태를 유지하는 것의 가치를 아는 숙련된 코더로 묘사됩니다.
2. 좋은 구조는 특히 코드를 공유하거나 프로젝트를 구축할 때 읽고 유지하기 쉽습니다. 각 사람이 작업하려는 파일을 쉽게 찾을 수 있습니다.
3. 애플리케이션의 버그를 쉽게 감지하고 수정할 수 있습니다.
4. 조직화된 프로젝트 폴더는 대규모 애플리케이션을 구축할 때 이상적입니다. 이 시나리오에서는 호스트 파일, 구성 요소 및 서비스를 생성하므로 잘 구성된 프로젝트 구조를 유지하는 것이 매우 중요합니다. 그리고 정리되지 않은 폴더 더미에서 특정 파일을 찾으려고 하면 지옥과도 같을 수 있고 좌절할 수도 있습니다.

일반적으로 Angular CLI에서 제공하는 기본 폴더 트리는 간단한 응용 프로그램에 충분해야 하지만 대규모 응용 프로그램을 빌드할 때 확장 가능한 파일 구조를 어떻게 생성합니까?

확장성이 뛰어난 프로젝트 폴더를 정의하는 방법

1. 기능별로 폴더 및 하위 폴더 구성

   우리가 만드는 응용 프로그램에는 다른 기능을 수행하는 다른 구성 요소가 있습니다. 각 구성 요소의 기능에 따라 폴더를 만들도록 노력해야 합니다.

   예를 들어 서비스를 애플리케이션에 주입하는 경우 서비스 폴더를 만들어야 합니다. 사용자를 로그인하게 만드는 앱이 있는 경우 사용자 로그인을 처리하는 로그인 폴더를 만들어야 합니다.

   로그인 폴더와 직접 관련된 다른 구성 요소를 만들어야 하는 경우 로그인 폴더 내에 하위 폴더를 만드는 것이 좋습니다.

2. 파일 및 폴더 이름 지정

   어떤 상황에서든 파일을 찾을 때는 먼저 해당 파일 이름과 밀접하게 관련된 폴더 이름을 찾습니다.

   음악 파일을 찾는다면 음악 폴더를 먼저 살펴보고 싶을 것입니다. 이와 동일한 시나리오가 파일 및 구성 요소의 이름을 지정하는 방법에 적용됩니다.

   폴더 안에 구성 요소를 만들 때 하이픈 스타일을 사용하여 파일 이름을 지정할 수 있습니다. 예를 들어 할 일 목록 폴더 안에 파일을 만들 때 파일 이름을 edit-todo.component.ts로 지정할 수 있습니다.

   이렇게 하면 버그를 수정하려는 경우 파일을 쉽게 재배치할 수 있습니다. 또한 공동 작업자가 코드를 쉽게 살펴볼 수 있습니다.

3. 플랫 폴더 구조 설계

   밀접하게 관련된 구성 요소에 대한 하위 폴더를 만드는 것은 훌륭한 방법이지만 가능한 한 하위 폴더를 적게 유지해야 합니다.

   하위 폴더가 9개 하위 폴더를 초과하지 않도록 가능한 한 많은 노력을 기울여야 합니다. 이보다 높은 숫자는 구성 요소를 결합하는 동안 빠르게 지치게 합니다.

4. 부트스트래핑

   확장성이 뛰어난 프로젝트 폴더를 얻기 위해 고려해야 할 또 다른 사항은 부트스트래핑 로직을 프로젝트 애플리케이션의 main.ts 파일에 배치하는 것입니다.

   파일 내부에 애플리케이션 로직을 배치하지 마십시오. 오류 처리는 부트스트랩 논리에 배치할 수도 있습니다.

결론

이상적으로는 Angular 프로젝트에 효과적인 폴더 구조를 설정하는 보편적인 접근 방식은 없지만 위의 단계를 채택할 수 있습니다.