1. Angular
앵귤러는 웹 브라우저에서 동작하는 클라이언트 코드입니다.
DB 연동, 다른 서버와 직접 연동은 직접 할 수 없습니다.
따라서 이 부분은 서버 개발자가 수행하거나 혹은 Angular 개발자가 직접 서버 부분까지 개발해야 합니다.
앵귤러는 타입 스크립트 기반으로 구성되어있습니다.
타입 스크립트는 자바스크립트와 거의 동일하지만 데이터의 type이 있단 차이가 있습니다.
3D Angular
Angular는 3D로 구성되어 있습니다 :)
여기서 말하는 3D란 Data-binding, Directive, Dependency Injection을 의미합니다.
1. Data-binding
Angular로 작성된 애플리케이션을 실행하면 컴파일러가 템플릿을 컴파일하여 일정 변형 과정을 거친 후
DOM으로 렌더링 하여 View 형태로 만들어 냅니다.
Angular에서는 directive를 통해 DOM에 접근해야 합니다. DOM을 인위적으로 조작해서는 안됩니다.
데이터바인딩은 Component 와 View 사이에 연결고리를 맺는 것입니다.
Angular에서는 데이터 프름에 따라 단방향, 양방향 바인딩을 사용합니다.
단방향 바인딩
1) 삽입식 바인딩
{{userName}}
이중 중괄호 사이에 컴포넌트, 함수를 넣으면 결과가 View 에 반영됩니다.
2) 프로퍼티 바인딩
<img [src]="myurl">
DOM의 속성에 표현식을 바인딩하는 것으로 위 예에서는 img 태그의 src 속성에 컴포넌트의 myurl 변수의 값을 바인딩 하고 있습니다.
3) 이벤트 바인딩
<button (click)="findUser('tom')"></button>
View에서 이벤트가 발생할 때 처리할 컴포넌트 로직을 바인딩하는 것으로 위 예에서는 button 클릭 이벤트 발생시 'tom'을 인자로 findUser함수를 실행합니다.
양방향 바인딩
View, Component 의 변화가 둘 중 한곳에서 일어나면 다른 한곳에서 데이터가 바인딩 되는 것입니다.
Angular에서는 ngModel 디렉티브를 사용하여 손쉽게 적용할 수 있습니다.
2. Directive
앞서 Angular는 directive를 통해 DOM에 접근해야 한다고 하였습니다.
Directive란 HTML Compiler에 의해 해석된 특정 행위의 기능을 가진 DOM element입니다.
HTML Compiler는 HTML의 DOM을 탐색하며 Directive이름과 같은 DOM element를 찾습니다.
HTML Compile 과정은 compile 단계, link 단계로 구성됩니다.
compile 단계는 HTML의 DOM element를 탐색하며 directive를 찾습니다.
link 단계는 directive와 HTML이 동적인 VIEW를 생성할 수 있도록 리스너를 등록하여 설정합니다.
즉, scope와 DOM element 간에 2-way data binding을 위한 $watch를 설정합니다.
위의 HTML Compile 과정을 거쳐 HTML에서 directive를 사용할 수 있습니다.
실행 관련 명령은 아래와 같습니다.
ng serve : 서버 실행
ng build : dist 디렉터리가 생성되며 index.html 파일이 만들어집니다.
2. Angular Github page 올리기
1. ng build --prod --base-href "https://[git page 주소]/[repo 명]"
2. ngh --dir dist/[앱명]
위와 같은 과정을 끝내면 https://[git page 주소]/[repo 명]에 접속하여 배포된 코드를 볼 수 있습니다.
3. Module & Component
Module : 앵귤러에서 모듈이란 각종 설정 및 관련 내용을 기술하는 파일입니다
Component : 모듈이 만든 환경에서 동작하여 실제 화면 구성하고 이벤트를 수행하는 파일입니다.
자바스크립트에선 html 파일에 script 태그를 선언하여 함수, 파일 등을 이용해 이벤트 처리를 했습니다.
앵귤러에선 모듈에서 각종 기능에 관련된 규칙, 라이브러리 및 정보 등을 관리합니다.
컴포넌트는 html 파일에서의 이벤트에 대한 내용 및 데이터 처리를 수행합니다.
즉, html 내의 script에 작성하는 함수, 객체 등을 앵귤러에서 분리해 둔 것이 모듈과 컴포넌트입니다.
1) Component
위 사진을 보시면 @Component를 보실 수 있는데, 이와 같이 class 파일에 @Component라는 데코레이터를 붙인 파일을 컴포넌트라고 합니다. 이때 @Component를 컴포넌트 데코레이터라고 합니다.
데코레이터는 예약어의 일종으로 특수 기능으로 사용되고 있습니다.
@Component 내의 templateUrl에 지정된 html 파일을 찾아 수정해주면 웹 화면이 변경 된 것을 볼 수 있습니다.
이렇게 Component는 실제 화면 구성과 관련된 역할을 수행합니다.
컴포넌트를 만들 때 export 명령어에 유의해야 합니다.
export
- 해당 클래스를 외부에서 사용할 수 있도록 해주며 이 명령이가 없으면 외부에서 사용이 불가합니다.
컴포넌트 내부의 설정 값을 살펴보겠습니다.
selector
- 컴포넌트의 고유 이름입니다.
selector 는 위 사진과 같이 html 파일에서 tag 처럼 사용해야 동작되게 됩니다.
templateUrl
- 해당 컴포넌트에서 사용할 html 파일의 위치를 의미합니다.
styleUrls
- 해당 컴포넌트에서 사용 할 css 파일의 위치입니다.
이외에도 animation, template 등의 기능이 존재합니다.
templateUrl 에서 지정한 파일을 열어보겠습니다.
이 파일에 보면 {{title}} 이라고 되어 있습니다.
이 값은 컴포넌트에서 사용한 변수명으로 protected, public 데이터를 표현할 수 있습니다.
title 값이 변하게 되면 html 파일에서 알아서 변한 값을 스스로 적용해주는데, 이를 "양방향 데이터 바인딩"이라 합니다.
2) Module
만약 여러개의 컴포넌트를 사용해야할 경우 컴포넌트 관리 및 접근 역할을 수행하는 module을 사용합니다.
만들어진 컴포넌트는 declarations 에 선언해주어야합니다.
'Angular' 카테고리의 다른 글
| Component & Module (0) | 2020.10.04 |
|---|---|
| Angular js (0) | 2020.08.25 |
