워크스페이스와 프로젝트 파일 구조

Angular 애플리케이션은 워크스페이스 안에서 개발합니다. 워크스페이스에는 하나 이상의 프로젝트에 필요한 파일이 들어 있습니다. 프로젝트는 애플리케이션이나 공유 가능한 라이브러리를 구성하는 파일 모음입니다.

Angular CLI의 ng new 명령어로 워크스페이스를 생성합니다.

ng new my-project

이 명령어를 실행하면 CLI가 필요한 Angular npm 패키지와 기타 의존성을 새 워크스페이스에 설치하고, 루트 수준에 my-project 라는 애플리케이션을 만듭니다.

기본적으로 ng new는 워크스페이스 루트 수준에 초기 애플리케이션 골격을 생성합니다. 이 골격은 바로 실행할 수 있고 쉽게 수정할 수 있는 간단한 환영 애플리케이션입니다. 루트 수준 애플리케이션의 이름은 워크스페이스와 같으며, 소스 파일은 워크스페이스의 src/ 하위 폴더에 있습니다.

이 기본 동작은 각 애플리케이션이 별도의 워크스페이스에 있는 일반적인 "멀티레포" 개발 방식에 적합합니다. 초급 및 중급 사용자에게는 ng new로 애플리케이션마다 별도의 워크스페이스를 생성하는 것을 권장합니다.

Angular는 여러 프로젝트를 포함하는 워크스페이스도 지원합니다. 이러한 개발 환경은 공유 가능한 라이브러리를 개발하는 고급 사용자와, 모든 Angular 프로젝트에 단일 저장소와 전역 설정을 사용하는 "모노레포" 개발 방식을 채택한 기업에 적합합니다.

모노레포 워크스페이스를 설정하려면 루트 애플리케이션 생성을 건너뛰어야 합니다. 아래의 다중 프로젝트 워크스페이스 설정하기를 참고하세요.

워크스페이스 설정 파일

워크스페이스 안의 모든 프로젝트는 설정을 공유합니다. 워크스페이스의 최상위 수준에는 워크스페이스 전체의 설정 파일, 루트 수준 애플리케이션의 설정 파일, 루트 수준 애플리케이션의 소스와 테스트 파일을 담는 하위 폴더가 있습니다.

애플리케이션 프로젝트 파일

기본적으로 CLI 명령어 ng new my-app은 "my-app"이라는 워크스페이스 폴더를 만들고, 워크스페이스 최상위 수준의 src/ 폴더에 새 애플리케이션 골격을 생성합니다. 새로 생성한 애플리케이션에는 루트 컴포넌트와 템플릿의 소스 파일이 포함됩니다.

워크스페이스 파일 구조가 준비되면 명령줄에서 ng generate 명령어를 사용해 애플리케이션에 기능과 데이터를 추가할 수 있습니다. 이 초기 루트 수준 애플리케이션은 CLI 명령어의 기본 앱 입니다(추가 앱을 생성한 뒤 기본값을 변경하지 않은 경우).

애플리케이션이 하나인 워크스페이스에서는 워크스페이스의 src 하위 폴더에 루트 애플리케이션의 소스 파일(애플리케이션 로직, 데이터, 정적 리소스)이 들어 있습니다. 다중 프로젝트 워크스페이스에서는 projects 폴더의 추가 프로젝트마다 같은 구조의 project-name/src/ 하위 폴더가 있습니다.

애플리케이션 소스 파일

src/ 최상위 수준의 파일은 애플리케이션 실행을 지원합니다. 하위 폴더에는 애플리케이션 소스와 애플리케이션별 설정이 들어 있습니다.

src 폴더 안의 app 폴더에는 프로젝트의 로직과 데이터가 들어 있습니다. Angular 컴포넌트, 템플릿, 스타일을 이곳에 저장합니다.

애플리케이션 설정 파일

루트 애플리케이션의 애플리케이션별 설정 파일은 워크스페이스 루트 수준에 있습니다. 다중 프로젝트 워크스페이스에서 프로젝트별 설정 파일은 projects/project-name/ 아래의 프로젝트 루트에 있습니다.

프로젝트별 TypeScript 설정 파일은 워크스페이스 전체의 tsconfig.json을 상속합니다.

다중 프로젝트

다중 프로젝트 워크스페이스는 여러 Angular 프로젝트에 단일 저장소와 전역 설정을 사용하는 조직("모노레포" 모델)에 적합합니다. 다중 프로젝트 워크스페이스는 라이브러리 개발도 지원합니다.

다중 프로젝트 워크스페이스 설정하기

워크스페이스에 여러 프로젝트를 둘 계획이라면 워크스페이스를 생성할 때 초기 애플리케이션 생성을 건너뛰고 워크스페이스에 고유한 이름을 지정할 수 있습니다. 다음 명령어는 워크스페이스 전체의 설정 파일을 모두 생성하지만 루트 수준 애플리케이션은 생성하지 않습니다.

ng new my-workspace --no-create-application

그런 다음 워크스페이스 안에서 고유한 이름으로 애플리케이션과 라이브러리를 생성할 수 있습니다.

cd my-workspace
ng generate application my-app
ng generate library my-lib

다중 프로젝트 파일 구조

명시적으로 처음 생성한 애플리케이션은 워크스페이스의 다른 모든 프로젝트와 함께 projects 폴더에 들어갑니다. 새로 생성한 라이브러리도 projects 아래에 추가됩니다. 이 방식으로 프로젝트를 생성하면 워크스페이스의 파일 구조가 워크스페이스 설정 파일인 angular.json의 구조와 완전히 일치합니다.

my-workspace/
├── … (워크스페이스 전체 설정 파일)
└── projects/ (애플리케이션과 라이브러리)
├── my-app/ (명시적으로 생성한 애플리케이션)
│ └── … (애플리케이션별 코드와 설정)
└── my-lib/ (생성한 라이브러리)
└── … (라이브러리별 코드와 설정)

라이브러리 프로젝트 파일

CLI로 라이브러리를 생성하면(ng generate library my-lib와 같은 명령어 사용), 생성된 파일은 워크스페이스의 projects/ 폴더에 들어갑니다. 직접 라이브러리를 만드는 방법은 라이브러리 만들기를 참고하세요.

라이브러리는 애플리케이션과 달리 별도의 package.json 설정 파일을 갖습니다.

projects/ 아래의 my-lib 폴더에는 라이브러리 코드가 들어 있습니다.