Programmazione di Ku0re

Angular 4 Tutorial Terzo) Angular 4 프로젝트 디렉터리 구조 살펴보기 본문

Programmazione/Angular

Angular 4 Tutorial Terzo) Angular 4 프로젝트 디렉터리 구조 살펴보기

ku0re kuore 2017. 5. 2. 23:41

이 글은 단순히 Angular 공식사이트의 Tutorial을 정리해 놓은

Alexband님의 블로그 포스팅을 보고  Angular를 공부하면서 내용을 정리한 글입니다.

공부하실 분은 Angular 공식사이트의 Tutorial을 보시고 제 포스팅은 참고만 하세요! :)


*Angular 4는 Angular 2와 문법적으로 큰 차이는 없다고 합니다.




Angular 4 프로젝트 디렉터리 구조 살펴보기


Angular 프로젝트의 디렉터리 구조를 살펴보기 전에 먼저 CLI를 이용한 컴포넌트 생성 방법에 대해 다뤄보자.


Angular CLI를 이용한 컴포넌트 생성


Angular 프로젝트를 생성은 이전 포스팅에서 봤듯이 Console 또는 Terminal 창에서 프로젝트를 생성할 디렉터리로 이동한 후 ng new ProjectName 커맨드를 입력하면 생성할 수 있다.


프로젝트 생성은 이것만 알면 Angular CLI가 다 알아서 해준다.


그럼 컴포넌트에 대해서 알아보자.


이전 포스팅에서 Angular는 컴포넌트라는 개념이 가장 중요하다고 했다.


그럼 CLI를 이용하여 그 컴포넌트를 생성하는 방법에 대해 먼저 알고 넘어가자.


Console 또는 Terminal에서 명령어를 사용해도 되지만 vscode나 webstorm 같은 경우 IDE 내부에서 터미널 창을 띄워 사용할 수 있다.


vscode에서는 Ctrl + `를 누르면 터미널 창이 나오고, webstorm에서는 Alt + F12를 누르면 터미널 창이 나온다.


그럼 컴포넌트를 먼저 한번 만들어보자.


컴포넌트 생성의 가장 기본적인 커맨드는 다음과 같다.


ng generate component ComponentName


위 커맨드를 입력하면 ComponentName.component의 이름을 가진 css, html, spec.ts, ts 파일이 만들어지고 사용할 수 있도록 app.module.ts 파일에 등록된다.


하지만 만약 잘못 만든다면 컴포넌트를 지웠다 재생성하는 등 귀찮아 질 수 있다.


이때 먼저 이 명령어를 실행했을 때 어떤 파일들이 생성되는지 확인해볼 수 있는 명령어가 있다.


위 커맨드에 --dry-run 옵션을 붙히면 된다.



확인이 됐다면 --dry-run을 지우면 최종적으로 명령어가 실행된다.


위의 명령어가 좀 길고 귀찮다.. 이때는 이렇게 줄일 수 있다.


ng g c ComponentName -d


여기서 g는 generate, c는 component, -d는 --dry-run의 줄임말로 볼 수 있다.



이제 기본적인 컴포넌트 생성 방법은 알았다.


하지만 상황에 따라 css, html, spec.ts, ts가 모두 필요하진 않을 수도 있다.


이때 사용하는 옵션이 있는데 그 명령어들은 각각 아래와 같다.

  • --spec false = spec.ts 파일을 제외하고 컴포넌트를 생성하는 옵션
  • --inline-template = html 파일을 제외하고 컴포넌트를 생성하는 옵션(-it로 줄일 수 있음)
  • --inline-style = css 파일을 제외하고 컴포넌트를 생성하는 옵션(-is로 줄일 수 있음)

물론 ts 파일은 Angular의 컴포넌트에서 반드시 필요하기 때문에 제외할 수 없다.


하지만 위의 옵션을 사용해 제외된 html과 css는 ts 파일 내부에서 작성이 가능하기 때문에 굳이 파일로 뺄 필요가 없을 경우에 사용한다.



Angular 프로젝트 디렉터리 구조


이제 본격적으로 프로젝트 디렉터리의 구조에 대해 알아보자.


먼저 프로젝트 디렉터리의 구조는 다음과 같다.



프레임워크 답게 뭔가 디렉터리와 파일들이 많다.


차례대로 살펴보자.



e2e 디렉터리는 end to end 테스트를 위한 설정 파일이 들어있는 디렉터리이다.


프로젝트를 테스트 하기 위한 방법으로 단계 별 기준에 따라 단위 테스트(Unit Test)통합 테스트(Integration Test) 등이 있는데 단위 테스트는 말 그대로 내가 작성한 코드가 정상적으로 돌아가는지 분리된 기능 단위 별로 테스트 하는 것이고, 통합 테스트는 프로젝트에서 작성한 각각의 컴포넌트가 서로 로직에 따라 제대로 돌아가는지 테스트 하는 것이다.


예를 들어 로그인 -> 게시물 작성 -> 로그아웃 과 같이 일련의 행동을 자동화 하여 테스트하는 방법으로 e2e 폴더는 통합 테스트 관련 설정 파일이 있는 디렉터리이다.



그 다음 node_modules 디렉터리는 현재 프로젝트를 실행하고 구성하기 위한 모듈이 들어있는 디렉터리이다.


그 다음 src 디렉터리에는 app, assets, environments 디렉터리가 있다.


src 디렉터리는 angular 4에서 실질적으로 사용할 파일들이 들어 있는 디렉터리로서 app 디렉터리에는 app.component가 하나 기본적으로 만들어져 있다.


이 컴포넌트는 현재 프로젝트에서 가장 먼저 만나는 컴포넌트로서 root 컴포넌트의 역할을 한다.


assets 디렉터리는 보통 정적 파일들, 예를 들어 이미지나 고정적으로 사용될 파일들을 저장하는 디렉터리이고, 마지막으로 environments 디렉터리는 해당 프로젝트를 빌드할 시 제품용과 개발용 빌드에 관한 옵션을 설정하는 파일이 들어있다.



src 디렉터리의 중요 파일들을 살펴보자.


index.html은 가장 최상위 html 파일이며, 이 곳으로 컴포넌트들이 나타나고, 조립되게 된다.


여기서 파일을 살펴보면 다음과 같다.



body 태그 안에 <app-root>라는 태그가 있다.


이 부분이 컴포넌트의 selector를 가져와서 보여주는 부분이다.


다시 /src/app 디렉터리 안의 app.component.ts 파일을 살펴보자.



component 메소드를 보면 selector를 'app-root'로 정의하고 있다.


즉, 'app-root'를 component의 선택자로 사용하겠다 라는 의미이다.(html의 selector)


index.html에서 이 선택자를 태그로 사용하는 것이다.



먼저 angular의 설정 파일 중 app 디렉터리의 app.module.ts 파일을 살펴보자.



NgModule은 공통으로 사용 할 Component, Module, Service를 등록하는 설정 파일이다.


현재 코드의 상단을 보면 AppComponent를 불러왔고, declarations에는 AppComponent가 등록되어 있다.


그리고 imports는 Angular 에서 사용할 주요 모듈들이 등록되어 있고, providers에는 공통을 사용할 Service를 등록하는 곳이다.


마지막으로 bootstrap은 최상위 컴포넌트, 즉 프로젝트를 실행 했을 때 가장 먼저 실행할 컴포넌트를 등록한다.


현재는 AppComponent가 등록되어 있다.


마지막에는 AppModule이라는 이름으로 export 시켜서 외부에서 해당 파일을 참조할 수 있도록 한다.



이제 src 디렉터리의 main.ts 파일을 살펴보자.



여기서 살펴 볼 곳은 상단에서 app.module.ts에서 export한 AppModule을 import 시키고 platformBrowserDynamic을 등록시킨다.


platformBrowserDynamic은 간단히 말하면 브라우저에서 Angular를 사용하기 위해 Angular의 이런 기능을 사용할 것이라고 알려주는 것이라고 생각하면 된다.


Angular에는 platformBrowser와 platformBrowserDynamic, 이 두 종류가 있는 데 둘의 가장 큰 차이점은 컴파일 방식으로 AOT(Ahead-of-Time)와 JIT(Just-In-Time)로 나뉜다.



AOT(Ahead-of-Time) 컴파일은 코드를 실행하기 전에 컴파일한다.


AOT 컴파일에서는 JIT 컴파일러가 중요한 성능 경로에 미치는 예측 불가능한 시간적 영향을 피할 수 있다.


단, AOT 컴파일된 코드는 해석해서 따로 파일로 저장하기 때문에 용량을 많이 먹게 된다.


실행 시점에 미리 번역한 파일을 실행하므로 빠르게 실행이 가능하다.



JIT(Just-In-Time) 컴파일은 코드를 실행할 때 컴파일한다.


JIT 컴파일에서 미리 차지하지 않기 때문에 중요한 실시간 작업을 제시간에 수행한다.


해석한 정보를 메모리에 올려야하기 때문에 실행이 느리고 메모리를 많이 먹는다.



즉, JIT는 실행 디바이스에서 매번 번역해야 하므로 느리고, AOT는 미리 번역해서 저장해 두기 때문에 빠르다.



계속 이어서 살펴보면 그 외 polyfills.ts 파일은 브라우저에서 ES6 문법을 사용하기 위한 모듈들을 모아 놓은 파일이며, tsconfig.json은 Typescript 컴파일 옵션을 정의하는 파일이다.



그리고 최상위 디렉터리에 있는 Karma.conf.js 파일은 jasmine을 이용한 단위 테스트를 위한 설정 파일이고 package.json은 해당 프로젝트를 위한 모듈 관리 파일이다.




다음 포스팅부터 본격적으로 Angular를 이용해 간단한 웹 애플리케이션을 만들어보겠다.



그 전에 맛보기로 한번 angular 파일을 수정하여 실행해보자.


/src/app 디렉터리에 app.component.ts 파일이 있다.


거기서 title = 'app works!' 부분을 아무 문자로 바꿔보자.


그리고 커맨드 창에서 ng serve를 실행해서 접속해보면 문자가 바뀌는 것을 확인할 수 있다.


해당 title이 어디로 들어가는지 보고 싶다면 app.component.ts 파일에서 templateUrl로 지정된 app.component.html 파일을 확인해 보자.


아주 심플한 코드가 들어있어 딱 봐도 title이 어디로 바인딩 되는지 알 수 있을 것이다.




ps> 이해되지 않더라도 사용하다 보면 익혀진다 하니 걱정할 필요는 없다고 한다. 뭐든 익숙해질 때까지 반복 학습하는게 중요한 것 같다.

0 Comments
댓글쓰기 폼