티스토리 뷰

 지난 포스팅에 이어 Angular-cli 로 생성된 파일 및 폴더에 대한 설명을 다루도록 함. 첫 프로젝트를 생성하고, 보다 디테일한 개발환경을 만들거나 외부 라이브러리 적용등을 하기 위해 반드시 필요한 과정이므로 Angular를 공부하면서 얻은 내용을 공유합니다. 혹시 글을 읽으시는 도중 자신이 알고 있는 내용과 다르게 서술되어 있거나, 보다 더 자세한 내용이 궁금하시면 댓글을 통해 언제든지 의견 주시기 바랍니다.

ng 명령어를 통해 생성되는 파일의 종류가 매우 많고 웹팩, babel, karma 등등의 개념을 모두 알고 있어야 100% 이해가 되는 내용이고, 저 또한 모든 사항을 알고 있지 않기 때문에 제가 사용하거나 중요하다고 생각되는 내용 위주로 기술하였습니다.


1. 생성되는 폴더 및 파일 리스트


angular-test 앱을 생성하면 아래와 같은 폴더/파일 구조를 확인할 수 있습니다. 아래 요소들 중에서 중요한 요소만 골라 정리하였습니다.

  • node_modules
npm 으로 설치되는 패키지가 설치되는 폴더.

  • src
개발자가 실제 소스코드를 추가하는 폴더 ng build 명령어 수행시 사용되는 원본 소스 파일.

  • .angular-cli.json
angular 의 전반적인 설정이 이곳에 들어가며, js 및 css import, ng 명령어 사용시 생성되는 파일 이름 설정 등 을 할 수 있습니다.


2. src/


src 폴더는 실제 개발자가 작성하는 코드의 root 폴더가 되는 곳입니다. 이곳에서 만들어진 코드를 npm start 명령어를 통해 실제 테스트 할 수 있고 명령어가 실행되는 동안 코드가 변경되면 자동으로 새로고침되기 때문에 매번 브라우저를 수동으로 새로고침할 필요 없이 간편하게 개발이 가능합니다.

  • main.ts
앱 최초 실행시 처음으로 동작되는 모듈입니다. CLI 로 생성된 프로젝트의 경우 app 폴더에 있는 app.module 이 실행되도록 설정되어 있으며 environment 클래스를 가져와 production 모드가 true 일 경우에는 enableProdMode 를 활성화 하도록 되어 있는데.. 저도 아직 enableProdMode 가 활성화 될 경우에 어떤 큰 차이가 있는지는 잘 모르겠네요. 이 파일의 경우 실제 개발시에는 크게 건드릴 일이 없지만, 메인 컴포넌트를 불러오는 부분이 이 곳에 있다는 사실을 아는게 중요합니다.

- import { ModuleName or ClassName } from 'Path' : (es2016 syntax) export 된 모듈 또는 클래스를 가져옵니다.


  • index.html
친숙한 형태의 index.html 파일입니다. 이 파일에 필요한 meta 태그 등을 작성하세요.
그리고 처음 프로젝트 생성시 <app-root></app-root> 를 확인할 수 있는데, angularjs 의 ng-app="appname" 과 비슷한 역할을 합니다. 자세한 내용은 component 폴더 관련해 이야기할 때 자세히 다루도록 하겠습니다.

  • /environments
앱의 환경설정을 입력하는 파일이 존재하며, 개발용(~.ts)/출시용(~.prod.ts) 두가지가 존재합니다. API 에 사용되는 BASE_URL 이나 기타 개발용과 출시용의 환경설정값이 다른 경우 이 두 파일을 이용하면 됩니다. 값을 입력하고 사용하는 방법이나 빌드시 ~.prod.ts 파일을 사용해 빌드하는 방법은 다음 포스팅에서 다루도록 하겠습니다.

  • /assets
앱에 사용되는 이미지와 같은 파일들을 보관하는 폴더.

  • /app
메인 컴포넌트가 이곳에 자동으로 생성되어 있습니다. Angular는 모든 엘리먼트의 기준이 컴포넌트이므로, 필요시마다 새로 컴포넌트를 생성해 사용하고, 컴포넌트 안에 여러개의 컴포넌트를 사용할 수도 있습니다.

app.component.html 파일을 열어보면 npm start 실행시 보이는 app works! 메시지 출력부분을 확인할 수 있는데, angularJS 를 사용해 본 분이라면 익숙한 {{title}} 을 사용해 출력되고 있음을 확인할 수 있습니다. 그렇다면 title 은 어디서 오는 것일까요?

바로 같은 폴더에 위치한 app.component.ts 파일을 열면 다음과 같은 코드를 볼 수 있습니다.

이 소스에서 title = 'app works!'; 부분이 바로 그 부분입니다.

위 소스를 해석해 보자면..

Component 모듈을 @angular/core 에서 가져옵니다. 이 @angular.core 는 node_modules 폴더에 들어있고, 따로 ./(현재경로) 를 지정해 주지 않으면 자동으로 node_modules 폴더를 기준으로 설정됩니다. 

이제 Component 모듈을 가져왔으니 @Component 함수를 사용할 수 있고 selector 를 설정해 html 코드 안에서 <app-root></app-root> 를 통해 불러오고, view 부분을 templateUrl 을 통해 지정해줍니다. styleUrls 에서는 css 또는 scss/sass 파일 경로를 설정할 수 있는데, 이 때 그 스타일 파일은 app-root 에서만 적용되게 됩니다.

그리고 export class 를 통해 AppComponent 라는 이름으로 내보내게 되고 { } 안에 이 컴포넌트에서 사용될 변수,함수 등등을 선언해줍니다.

자 여기까지 이해가 되셨다면 이제 app.module.ts 파일을 열어봐야 합니다.

이 파일에서 방금전에 확인해 본 AppComponent 가 import 되어 있고 @NgModule 안에 declarations 되어 있습니다. 어떤 형태의 컴포넌트이던 반드시 declarations 하는 과정이 필요하기 때문에 반드시 추가적으로 컴포넌트 생성시 이 과정을 거쳐야 합니다.

그리고 bootstrap 부분은 app.module.ts 실행시 화면에 표시되는 컴포넌트를 의미합니다.

이제 다시 정리해 보면..

npm start 명령어 실행시 main.ts 가 실행이 되고.

platformBrowserDynamic().bootstrapModule(AppModule);

이 명령어에 나와있는 AppModule이 실행되며 이 AppModule 은 app/app.module.ts 에 선언되어 있고, AppModule 에서 AppComponent 를 실행하라고 되어 있기 때문에 "app works!" 메시지를 확인할 수 있습니다.

이렇게 기본으로 선언된 컴포넌트가 어떻게 실제 브라우저에서 표시되는지 확인하셨다면 앞으로 새로운 컴포넌트를 생성하고 만들 수 있습니다.


3. .angular-cli.json


angular 의 전반적인 환경설정 파일이 저장되어 있고 테스트 앱을 구동하거나, 앱을 빌드하거나, js, css 등을 import 하거나 환경설정 파일의 경로를 지정하는 등 ng 명령어를 실행하는 데 있어 중요한 역할을 하는 파일입니다.

주로 "apps" 안에 항목들을 유심히 살펴보는것이 좋습니다.

  • apps
    • root: 실제 구동되는 app이 저장되는 폴더
    • outDir: npm run build 실행시 생성되는 폴더
    • assets: 이미지, favicon 등의 경로를 설정
    • index: 앱 구동시 시작되는 html 파일
    • main: 앱 구동시 시작되는 ts(js) 파일
    • prefix: ng g component 등의 명령어 실행시 붙는 접두사
    • styles: global css/sass/scss 파일 경로
    • scripts: global js 파일 경로
  • defaults
    • styleExt: ng 명령어로 컴포넌트 생성시, 함께 생성되는 css파일 접미사, scss 등으로 설정하면 scss 으로 생성됩니다.



저작자 표시 비영리 변경 금지
신고

'프로그래밍 > Angular' 카테고리의 다른 글

CLI 로 생성된 폴더 및 파일에 대한 이해.  (0) 2017.06.01
Angular 시작하기  (0) 2017.05.30
댓글
댓글쓰기 폼
Total
3,891
Today
3
Yesterday
12
«   2017/10   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31