Angular2 | Angular 설정 | Angular 응용 프로그램 구성


생성된 Angular 응용 프로그램 중에는 다수의 파일이나 폴더가 많이 들어 있다. 이것은 Angular CLI가 기본적으로 npm을 이용하여 패키지를 설치하고 있기에, Node.js 관련 패키지가 다수 포함되어 있는 것이다.

응용 프로그램에서 파일들은 대부분이 JSON 파일이다. 이 파일들은 각종 도구의 설정 정보를 기술한 것이으로, 직접 편집하는 일은 별로 없을 것이다. 폴더들에 대한 기본적인 역할은 아래와 같다.

  • .git 폴더 : Git 관련 파일이 들어 있다.
  • node_modules 폴더 : 노드 관련 모듈 관련 파일이 들어 있다.
  • e2e 폴더 –end-to-end 테스트 관련 파일이다.
  • src 폴더 - Web 페이지 관련 파일이 들어 있다.

■ src 폴더 내용

응용 프로그램에서 표시하는 Web 페이지 파일은 src 폴더에 정리되어 있다. 이 부분이 실질적으로 Angular 응용 프로그램의 중심 부분이라고 할 수 있다. 이 src 폴더에는 다음과 같은 파일이 준비되어 있다.

  • app 폴더 : Angular 구성 요소들 들어 있다.
  • favicon.ico : 아이콘 파일이다.
  • index.html : 이 파일은 디폴트로 표시되는 Web 페이지이다.
  • main.ts : 시작할 시에 실행되는 스크립트이다.
  • tsconfig.json : TypeScript의 설정 파일이다.
  • typings.d.ts : Typings는 TypeScript 정의 관리자의 설정 파일이다.

여기서 ts 확장자의 파일이 보일 것이다. 이는 TypeScript 스크립트 파일이다. Angular는 JavaScript뿐만 아니라 TypeScript도 사용할 수 있다. Angular CLI에서 생성된 프로젝트는 기본적으로 TypeScript를 사용하게 되어 있다.

■ app 폴더 및 컴포넌트

src 폴더 안에는 “app 폴더가 있다. 이것이 Angular의 중심 부분이다.

이것은 Angular의 컴포넌트에 관한 파일들이 있다. 이 컴포넌트라는 것을 만드는 것이 Angular의 기본이다.

컴포넌트란, 화면 표시 및 내부 처리 등을 패키지하여 어디서나 사용할 수 있도록 한 것이다. 이것은 HTML 파일, 스크립트 파일, 스타일 시트 파일 등의 조합으로 구성된다. 이 컴포넌트는 HTML의 사용자 정의 태그를 사용하여 HTML에 작성하여 사용할 수 있다.

예를 들어, “my-component"라는 컴포넌트를 만들면, HTML에 <my-component>라는 태그를 쓰는 것만으로 컴포넌트에 의해 표시 및 동작 등을 하게 된다는 것이다.

기본적으로 다음과 같은 파일이 폴더에 포함되어 있다.

  • index.ts : 컴포넌트 관련하여 기본적으로 로드되는 스크립트이다. 컴포넌트 전반에서 로드되는 라이브러리 등을 여기에 작성되어 있다.
  • environment.ts :개발중이거나 정식 배포 등의 상황에 따른 처리을 기술한 것이다.
  • app.component.html : 샘플 구성 요소의 HTML 템플릿이다.
  • app.component.ts : 샘플 구성 요소의 처리를 포함하는 스크립트이다.
  • app.component.css : 샘플 구성 요소에서 사용하는 스타일 시트이다.
  • app.component.spec.ts : 샘플 컴포넌트의 테스트 스크립트이다.

index.ts과 environment.ts는 컴포넌트 전체에 관한 것으로, 우선은 편집할 수 없다. 여기에서 염두에 두고 싶은 샘플에 포함되어있는 구성 요소 파일이다. “app.component"라는 파일이 3개 준비되어 있는데,이 3가지가 세트로 되어 컴포넌트를 구축하고 있다. (app.component.spec.ts는 테스트 용이므로 컴포넌트 본체에는 포함되지 않는다고 생각해도 된다)

컨포넌트는 이 같이 HTML, 스크립트, 스타일시트에 같은 이름의 파일을 작성하여 만든다. 이 파일들을 만든 것이 컴포넌트를 만든다는 것이며, Angular 프로그래밍의 가장 기본이되는 것이다.

&nbps;

우선, 프로젝트 전체의 구성이 대체로 알게 되었고, 다음에서 컴포넌트 작성에 대해 설명하겠다.