kevin의 ing 이야기

이어서 Angular.io 프로젝트 구성에 대해 살펴보겠습니다.

Angular.io의 quickstart 가이드에 따르면 src 폴더는 angular 컴포넌트 및 스타일, 이미지 등 app에서 사용할 요소를 정의하며, 그 외의 폴더는 app의 빌드, 테스트, 배포, 문서화 등의 설정을 정의한다고 합니다. 우리는 src 폴더에서 열심히 폭풍 코딩을 하고 이후에 프로젝트 루트 폴더의 각 설정파일을 이용해 각종 셋팅을 한다고 보시면 되겠습니다.

angular 프로젝트의 기본 구성을 봤으니 이제 소스 파일 구성을 보겠습니다.

» 프로젝트의 src 폴더의 파일 구성을 보시면 자바스크립트 파일 대신 평소에는 못 보던 파일 확장자가 보이실 겁니다.

바로 .ts 라는 확장자인데요. typescript 소스파일입니다.

angular.io 는 바로 이 typescript를 기반으로 하고 있으므로 우리는 이걸 또 공부해야 하는군요........................할 게 점점 늘어나네 으아아아아

typescript 파일은 컴파일되면서 javascript 파일로 변환되어 Node.js 위에서 실행된다고 합니다.

즉, ng 명령으로 실행되는 angular-cli 모듈은 typescript 컴파일 -> Node.js 에서 프로젝트 실행 과정을 한번에 처리할 수 있도록 하는거네요.

typescript 문법은 인프런 같은 동영상 강의 사이트에서 배울 수 있으므로 여기서 따로 설명하지는 않겠습니다.

우리 목적은 Angular.io 를 이해하는게 우선이니까요.

그럼 다음에는 Angular 프로그래밍을 시작하겠습니다~

Angular CLI 1편은 프로젝트 영역 생성 및 실행 방법에 대한 표스트였습니다.

이어서 2편은 CLI환경에서 프로젝트 안에 여러 컴포넌트를 구성하는 방법을 정리합니다.

1편의 셋팅을 그대로 이어서 하겠습니다.

프로젝트 안에서 컴포넌트를 구성할때 사용하는 명령어는 ng generate <type> <name>

또는 ng g <type> <name> 입니다. 같은 명령어인데 타이핑만 다를 뿐이라 저를 포함한 대부분이 후자를 입력하시겠네요.

Angular 안에서 적용가능한 컴포넌트 타입은 Component, Directive, Pipe, Service, Class, Guard, Interface, Enum, Module 이 있습니다.

실행해서 결과를 보겠습니다.

우선 모듈을 하나 만들고 그 안에 컴포넌트를 두개 만들었으며,

하나의 컴포넌트에는 interface, enum, directive, class를 만들고, 다른 하나에는 service, pipe, guard를 만들었습니다.

이런 방식은 제가 즉석에서 만든거라 실제 서비스할때 이런식으로 하면 당연히 큰일나겠죠;;

주는 component 또는 module에 class/enum/directive/interface를 혼합하고

service/pipe는 module/component 외의 영역에 생성하는 게 맞을거 같네요.

이 부분은 저도 경력이 그렇게 풍부하지 않기 때문에 뭐라고 말씀을 못드리겠네요.

일단 저 명령을 쓰면 저런식으로 파일이 생성되는구나 정도로만 생각하시면 될거 같습니다.

그 외의 Angular CLI 관련 정보는 https://github.com/angular/angular-cli 를 참고하시기 바랍니다~