새 컴포넌트를 추가 해야 할 때
현재 환경 : mac m1 / Ionic5 / angular(TypeScript) /src/app 하위에 heroes 컴포넌트에 대한 폴더가 생성되고 하위에 총 4개 파일
- <컴포넌트명>.component.ts 컴포넌트 파일 컴포넌트명>
- <컴포넌트명>.component.html 템플릿 파일 컴포넌트명>
- <컴포넌트명>.component.css CSS 스타일 파일 컴포넌트명>
- <컴포넌트명>.component.spec.ts 테스트 파일이 생성된다. 컴포넌트명>
Ionic Component 생성
컴포넌트는 아래 명령어로 생성할 수 있습니다.
줄여서 ng g c 컴포넌트이름
으로도 생성이 가능합니다.
ng generate component 컴포넌트명
1) CREATE : html, css, ts, spec,ts 파일 생성
- html, css 파일 그리고 ts(typeScript)까지는 알겠는데 spec.ts 라는 파일도 생성되었습니다.
- spec.ts는 컴포넌트 유닛 테스트를 위한 스펙 파일이라고 하며, 없어도 된다고 합니다.
2) UPDATE : src/app/app.module.ts 파일이 업데이트
새로 생성한 컴포넌트를 앱에서 사용하기 위해 등록하는 동작입니다.
import
한 컴포넌트를 declarations
에 추가하는 내용으로 제가 생성한 컴포넌트(ItemDetail)에 맞게
7번,12번 라인이 추가되었습니다.
추가로 커맨드를 사용해 컴포넌트를 생성하지 않고 임의로 복붙하여 만드는 경우 역시 app.module.ts에 동일한 내용을 추가해 주어야 사용이 가능합니다.
참고