Angular 프로젝트 시작점

2017. 11. 29. 23:06

Angular CLI를 통해 Angular 프로젝트를 생성하는 것까지 진행했습니다.

그럼 이제 Angular 첫 페이지가 어떻게 만들어 지는가에 대해 알아보겠습니다.


자동으로 생성되는 많은 파일들이 있습니다.

그 중 지금 우리가 집중해서 볼 것은 3개의 파일과 1개의 Set입니다.


1. main.ts

2. app.module.ts

3. index.html

4. app.component. files (Set)


1. main.ts

Angular는 스크립트 언어인 JavaScript로 작성이 되지만, Compile되어 사용됩니다.

설정에 따라 JIT(Just-In-Time), 또는 AOT(Ahead-Of-Time) Compiler를 사용할 수 있습니다.

Compiler에 대해서는 자세히 다루지 않구요. (자세히 모르기도 합니다.)

이러한 빌드 작업의 시작점이 main.ts입니다.

마치 C의 main.c, C++의 main.cpp와 같은 느낌이죠?

main.ts는 Application의 진입점으로 사용할 시작 Module을 설정(AppModule)해줍니다.

main.ts

앞으로 수정할 일은 거의 없어보여요.


2. app.module.ts

가장 중요한 파일이라고 볼 수 있는데요.

main.ts에서 시작 Module로 설정한 그 Module입니다.

Angular Application을 어떻게 조립할지 결정하는 파일입니다.

어떤 Component들이 들어가고 어떤 Module들을 참조할지에 대한 정보를 담고 있어요.

app.module.ts


3. index.html

이 파일이 브라우저로 접속했을 때 보이는 화면입니다.

화면에서 봤던 것 만큼 많은 코드가 들어있지 않죠?

사실 <app-root></app-root>라는 자리에 Component가 들어가서 보여지기 때문입니다.

index.html

이 파일 또한 직접 편집할 일은 거의 없습니다.

Angular가 빌드시 필요한 js와 css파일들을 알아서 추가해주기 때문입니다.

필요한 js와 css파일들은 사실 Component에 담겨져 있습니다.


4. app.component.{ ts, html, css, spec.ts }

우리가 만들어 갈 Application의 root(뿌리)가 되는 Component입니다.

Application이 개발되어가면서 많은 Component들이 추가됩니다.

이 Component들을 사용하여 Application을 구성하는 Main Component라고 보시면 됩니다.

app.component.ts


전체 적으로 요약하면 아래와 같은 구조입니다.

전체 소스 구조




'IT Tech > Angular' 카테고리의 다른 글

Angular 새로 Component 만들기  (0) 2017.12.11
Angular Component를 좀 더 들여다보자  (0) 2017.12.08
Angular 훑어보기  (0) 2017.11.23
Angular CLI로 개발 환경 만들기  (0) 2017.11.21
Angular를 시작하며...  (0) 2017.11.17

TechTrip IT Tech/Angular

Angular 훑어보기

2017. 11. 23. 18:30

Angular의 전체 구조에 대해서 아주 살짝만 훑어보고 가겠습니다.

사실은 저도 정확히 알지 못하고 앞으로 익혀갈 예정이지만요.


Angular Overview


위 그림은 Angular의 구조를 아주 단순화한 그림입니다.

크게 보이는 몇 가지 단어들을 정리하고 넘어가도록 하죠.

해보면서 익히는 게 더 좋을듯 합니다.


Angular는 Component들을 이용하여 Web Page를 만들어냅니다.

Component가 가장 중요한 구성요소라고 할 수 있겠죠.

Component는 Template(=html+부가기능)을 이용하여 화면을 그립니다.


여러 개의 Component들, 즉 여러가지 기능들을 하나의 package로 묶은 것이 Module입니다. 

Angular Library또한 하나의 Module이라고 볼 수 있습니다.


Angular는 Typescript Class에 Metadata를 이용하여 Component, Module 등을 구분하죠.

Component간에 공통적인 기능을 수행하는 Service를 만들어 사용할 수 있습니다.

그리고 Template에서는 DOM을 구성하는데 Directive를 활용합니다.

정리하면 아래와 같은 구조로 요약됩니다.


Angular Terms


위 그림은 제가 나름대로 단순화한 관계도 이므로 틀릴 여지가 있습니다.

앞으로 배우면서 잘못된 부분은 수정해나가도록 하지요.


출처: https://angular.io/guide/architecture

'IT Tech > Angular' 카테고리의 다른 글

Angular 새로 Component 만들기  (0) 2017.12.11
Angular Component를 좀 더 들여다보자  (0) 2017.12.08
Angular 프로젝트 시작점  (0) 2017.11.29
Angular CLI로 개발 환경 만들기  (0) 2017.11.21
Angular를 시작하며...  (0) 2017.11.17

TechTrip IT Tech/Angular

Angular CLI로 개발 환경 만들기

2017. 11. 21. 20:27

Angular를 사용해보기 위해서 당연히 개발 환경 세팅을 해야겠죠.


역시나 준비된 프레임워크답게 Command Line Interface(CLI)를 제공하고 있습니다.

물론 요즘에는 Graphical User Interface(GUI)를 선호하는 추세도 있긴 하지만요.

그래도 프로그래머들은 CLI에 편하고 익숙해질 필요가 있습니다.

Linux, Git 등 많은 도구들이 CLI로 동작 하니까요.


네, 잡설이 길었습니다.


Prerequisite: Node.js

Angular를 설치하기 위해서 먼저 설치해야하는 녀석들이 있습니다.

Node.js 와 Node Package Manager(npm) 입니다.

사실 Node.js를 설치하면 npm도 자동으로 따라오니 설치해야하는 녀석이 되겠군요.


Node.js 홈페이지에서 Long Term Support(LTS)버젼 받아서 설치하면 됩니다.

간단한 건 넘어가도록 할게요.


그럼 Node.js가 설치되었다는 가정 하에 Angular 개발 환경을 만들어 보겠습니다.


cmd를 실행하여 Angular 개발 환경을 세팅하고자 하는 위치로 이동합니다.


npm install -g @angular/cli

위 명령어를 통해 angular cli를 설치할 수 있습니다.

npm install은 Node Package Manager가 특정 패키지를 설치하도록 하구요.

여기서 -g 옵션은 global을 의미하여 해당 패키지를 지속적으로 사용할 때 쓰입니다.

-g 옵션을 사용하면 %AppDATA%\npm\node_modules에 패키지가 저장됩니다.

Windows 7을 예로들면 경로는 아래와 같습니다.

C:\Users\John\AppData\Roaming\npm\node_modules\


그럼 이제 개발을 시작하기 위한 환경을 구성해보겠습니다.

예를 들어 applicationName이라는 폴더에서 작업을 한다고 가정해볼게요.

ng new applicationName

위 명령어를 통해 개발을 시작하기 위한 환경 세팅이 완료됩니다.

엄청 간단하죠?


applicationName폴더에 들어갑니다.

cd applicationName


그리고 아래 명령어가 정상적으로 실행되는지를 확인합니다.

ng serve


localhost의 4200포트로 접근하면 아래와 같은 화면이 보입니다.


Angular App 기본 화면


그럼 이제부터 시작입니다!


'IT Tech > Angular' 카테고리의 다른 글

Angular 새로 Component 만들기  (0) 2017.12.11
Angular Component를 좀 더 들여다보자  (0) 2017.12.08
Angular 프로젝트 시작점  (0) 2017.11.29
Angular 훑어보기  (0) 2017.11.23
Angular를 시작하며...  (0) 2017.11.17

TechTrip IT Tech/Angular