✔ 참고한 책 : Angular Essentials(이웅모 지음)
✔ 예제에 사용한 앵귤러 버전 :
Angular CLI: 12.2.7
Node: 14.17.3
Package Manager: npm 6.14.13
OS: win32 x64
📌프로젝트의 구성 요소
Component
Directive
Service
Router
NgModule
. . .그 외 class, pipe, interface...등등.
Angular는 주로 뷰를 담당하는 컴포넌트를 중심으로 Angular 구성요소를 조합해 애플리케이션을 구축합니다.
디렉티브와 서비스는 애플리케이션의 전역적인 관심사를 분리하고, 컴포넌트는 필요할때 이를 사용합니다. 라우팅은 컴포넌트를 교체하는식으로 뷰를 전환하여 화면의 이동을 구현하고, 모듈은 관련 구성요소를 묶어 하나의 단위를 만드는 역할을 합니다.
프로젝트의 구성 요소는 전부 아래의 명령어로 생성할 수 있습니다.
ng generate 구성요소 구성요소이름먼저 프로젝트에 새로운 컴포넌트(component)를 생성해봅니다.
ng generate component hello-world
//ng g c hello-world로 축약하여 작성해도 됩니다.프로젝트의 구성요소중 하나인 컴포넌트를 만들었고, 만든 컴포넌트의 이름은 hello-world 입니다.
파일명의 암묵적인 변경
ng generate 로 생성된 구성요소들은 CLI에 의해서 지정한 컴포넌트의 이름이 대소문자를 구별해서 정해진 규칙에 따라 파일명을 암묵적으로 변경하고는 합니다. 그래서 이 명령어로 생성하는 구성요소들의 명칭은 -(하이픈)으로 연결하는 케밥 표기법을 사용하는 것이 좋습니다.
📌Angular의 파일구조
ng new hello-app 이 명령어를 실행하면 hello-app이라는 앵귤러 프로젝트가 생성되고, hello-app이라는 애플리케이션 폴더가 하나 생깁니다.
몇 개만 정리해보고 하다가 중요하다 싶은건 더 추가하겠습니다.
📁src
기본적으로 이 폴더안에 코드를 작성하게 됩니다. Angular의 구성요소와 설정파일, 폰트와 이미지 등등으로 이루어져 있으며 애플리케이션에서 꼭 필요한 파일들을 담고 있습니다.
Angular의 구성요소는 src의 app폴더 아래에 위치하게 됩니다.
📁app/app.component{ts,html,spec.ts}
모든 컴포넌트의 부모 컴포넌트가 됩니다. 이후 다룰 내용에서 컴포넌트의 구성을 정리하게 되니 일단은 app폴더 아래에 구성요소가 있고, 기본 component가 있다는 것만 알아둡니다.
📁app/app.module.ts
Angular의 새 구성요소를 만들었을때 이 파일로 가서 구성요소를 등록하는 루트모듈 입니다.(angular는 최소 하나의 모듈을 가지고 있어야 하며, 모듈은 관련있는 구성요소를 묶은것으로 이루어져있는 컴포넌트의 상위 개념입니다.)
📁assets/
폰트나 이미지같은 정적 파일을 모아두는 폴더입니다.
📁index.html
처음 로딩되는 디폴트 페이지. 루트 컴포넌트(app.component.ts)의 selector에 등록된 <app-root>태그에 의해 로드될 때 루트 컴포넌트의 뷰가 로드되어 표시됩니다.
📁main.ts
프로젝트의 진입점. AppModule을 이용하여 애플리케이션을 기동합니다.
Angular는 실행하면 바로 실행되는 것이 아니라 ng serve 명령을 했을때 컴파일을 한번 거쳐 ts파일을 js파일로 변환후, 웹팩이 main.ts 파일을 통해 import 할 것들을 찾아 하나로 묶어줍니다.
📁tsconfig.{app|spec}
TypeScript의 컴파일 옵션을 설정하는 파일입니다.
📁typings.d.ts
TypeScript를 위한 타입 선언 파일입니다.
📁style.css
전역 CSS 파일입니다.
src 폴더 밖의 파일은 테스트나 빌드. 배포를 위한 설정파일입니다.
📁angular.json
Angular CLI를 위한 설정파일입니다.
📁pacakge.json
패키지 매니저가 사용하는 의존 모듈 관리 파일입니다.
폴더가 너무 많습니다!!!!!!!!!😠
그래도 한번 정리하고 나니까 어느정도 눈에 들어오는 것 같아요.
다음에는 Angular의 구성요소를 좀 더 자세히 정리해보겠습니다.
틀린부분이 있다면 알려주시면 감사합니다!
