Angular - 개념 및 예제

 

오늘은 앵귤러를 한번 만져보려고 한다.

구글링을 해서 간단하게 개념을 잡아보고 카운터를 만들어보면서, 

데이터 바인딩은 어떻게 하는지, 컴포넌트는 어떻게 생성하고 모듈화 시키는지 그런 것들을 알아보도록 하자.

 

일단 앵귤러는 CLI를 통해서 프로젝트를 관리하는 것을 할 수 있다.

개인적으로 CLI굉장히 맘에 들었다.

그리고 nest를 공부하면서 이 앵귤러랑 유사한 프로젝트 구조를 가지고 있다는 것을 알게 되었다.

 

그래서 앵귤러를 공부하면 nest의 구조까지 알 수 있는 두 마리의 토끼를 잡는 이득이 있다

기존에 nest를 조금 만져봐서 앵귤러의 개념, 생각보다 쉬웠다.

 

ng new my-project

 

이렇게 해서 앵귤러 프로젝트를 생성할 수 있고,

생성된 프로젝트에 

ng serve

 

를 하게되면 4200 포트에 프로젝트가 빌드되는 것을 확인할 수 있다.

 

다양한 CLI를 지원하는데 그 중에서 컴포넌트를 생성하기 위해,

ng generate component [component name]

 

이렇게 하게 되면, app폴더 내에 자동으로 컴포넌트들을 생성해주게 된다.

 

app.module.ts를 보게되면, 모듈화 시켜서 main.ts에 푸시하는 것을 확인할 수 있다.

app.module.ts

여기서 declarations에 집중해야 하는데, 만든 컴포넌트를 배열에 모아서 모듈화 시키는 것을 확인할 수 있다.

@NgModule이라는 데코레이터를 사용해서 AppModule이라는 컴포넌트를 모듈화 시켜준것을 볼 수 있다.

 

main.ts

 

main.ts에 모듈화 했던 AppModule이 있는것을 볼 수 있다.

main.ts는 앵귤러 프로젝트를 빌드했을때 가장 먼저 실행되는 파일이다.

 

이제 어느정도 흐름을 알았으니, 컴포넌트의 구조를 한번 파 해쳐 보자.

 

ng g c header

 

위 명령어는 header컴포넌트를 생성해준다.

ng generate component [component name]

 

의 요약 버전이라고 보면 된다. (더 자세한 사항은 ng를 치고 명령어 리스트를 확인!)

 

그러면

 

app하위에 header라는 컴포넌트가 생긴 것을 볼 수 있다.

구조는 html , css , js의 구조로 형성되어 있는데,

 

html은 말 그대로 화면에 보일 내용이라고 보면 되고,

css는 html의 스타일링을 위한 파일,

js(ts)는 기능&캡슐화를 위한 파일이라고 보면 된다.

 

그리고 만들어진 컴포넌트는

 

@Component라는 데코레이터로 ts파일에서 캡슐화를 해주고 있다.

캡슐화를 해주게 되면, 나중에 모든 컴포넌트들을 결합했을 때 겹치는 부분 없이 잘 돌아갈 수 있게 해 주는 것이다.

 

@Component의 내용을 좀 더 자세히 살펴보도록 하자.

selector는 나중에 이 컴포넌트를 사용할 때 사용할 이름(별명)이라고 생각하자.

 

<app-header></app-header>

이런 식으로 사용하게 된다.

 

templateUrl은 화면의 보일 일종의 단위?라고 보면 된다. html을 링크하게 되면서, html내용이 보이게 되는 것이다.

프로젝트 링크하는 게 귀찮다면 , template이라는 속성이 있는데, 그 방법은 선호하지는 않는다.

 

styleUrls도 보면 css파일들을 의미하는 것이다.

 

그렇게 삼위일체를 이루어 하나의 컴포넌트를 형성하게 되고, 나중에 그 컴포넌트를 사용할 수 있게 되는 것이다.

이제 데이터 바인딩에 대해서 알아보도록 하자.

 

앵귤러에서 데이터를 표현하는 방법인데, 뷰랑 비슷하다는 느낌을 받았다.

컴포넌트 디렉터리에 ts파일에 클래스 내에 

 

이렇게 구현을 해놓았다.

number는 화면에 보일 데이터,

increase , decrease는 데이터를 조작할 함수들이다.

 

html 파일 내에서

 

이런 식으로 표현하는데, {{}}내에 표현할 데이터를 넣으면 된다. (Vue랑 똑같다)

 

그다음 함수들은 () 안에

 

다양한 이벤트들을 바인딩할 수 있다.

 

그래서 click이라는 이벤트를 부여했고, 그 이벤트가 감지가 되면, increase , decrease를 실행하는 것이다.

 

예쁘지는 않지만, 기능을 구현했다.

클릭하면 데이터가 실시간으로 바뀐다.

 

 

이렇게 간단하게 앵귤러를 알아봤다.

CLI를 써서 프로젝트를 빌드하는 게 굉장히 매력적이었고, 데코레이터도 맘에 들었다.

하지만 아직까지 리액트에 익숙해서 앵귤러는 좀 어색한데, 나중에 프로젝트를 할 때 앵귤러로 해서,

좀 앵귤러랑 친해지고 싶은 느낌이 있다.

 

그리고 사용하면서 느낀 건데, 좀 무겁다(리액트에 비해서)

실제로 무거운지 가벼운지는 모르겠는데 난 무겁다고 느꼈다.

 

그럼 이만 뿅!