Programmazione di Ku0re

Angular 4 Tutorial Ottavo) Angular 4 HeroEditor - 5-1 본문

Programmazione/Angular

Angular 4 Tutorial Ottavo) Angular 4 HeroEditor - 5-1

ku0re kuore 2017. 5. 4. 02:29

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

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

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


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




Angular 4 HeroEditor - 5-1


이제 Hero Editor도 얼마 남지 않았다.


이번 포스팅에서는 Router에 대하여 알아보자.


Router는 내용이 많아 부득이하게 2개로 나눴다.



Hero Editor에 새로운 기능을 추가하려고 한다.


대시보드를 만들어 영웅들의 순위를 나타내고, 해당 영웅을 클릭하면 상세보기로 이동하도록 하려고 한다.


그러기 위해서 Angular Router를 추가해서 대시보드와 영웅 목록, 상세정보를 Router를 이용하여 이동하도록 만들어보자.



오늘의 계획은 아래와 같다.


    • AppComponent는 이제 Root Component의 기능을 확고히 하며, 해당 컴포넌트는 Router에 맞춰서 나타나는 컴포넌트를 보여주는 컴포넌트가 될 것이다.

    • AppComponent의 Heroes를 별도의 컴포넌트로 분리한다.
    • 라우팅을 추가한다.
    • 대쉬보드 컴포넌트를 추가한다.
    • 대쉬보드 컴포넌트를 라우터에 추가한다.

자 먼저 현재 AppComponent 영웅의 목록을 바로 나타낸다.


대쉬보드를 추가하고 영웅 목록과 대쉬보드를 이동할 수 있도록 만들려면 일단 AppComponent는 탐색 처리만 해야 한다.


AppComponent의 Heroes 즉, 영웅 목록을 보여주는 코드를 HeroesComponent를 만들어 옮기자.


먼저 heroes 컴포넌트를 만들기 위해 cmd 또는 Terminal에서 프로젝트 디렉터리에 위치하여 ng g component heroes 명령어를 사용하여 컴포넌트를 만들자.



만들어 졌다면 현재 AppComponent 내부의 코드를 모두 복사하여 HeroesComponent로 옮기고 selector, template, style, class의 이름을 변경한다.

(angular-cli 명령어로 만들어졌기 때문에 자동으로 ngModule에 heroesComponent가 추가된다.)



app/heroes/heroes.component.ts



바뀐 부분은 import 부분의 Hero와 HeroService를 불러오는 경로가 바뀌었다.


현재 폴더가 app/heroes로 변했기 때문에 ../ 으로 변경되었다.


selector와 templateUrl, styleUrls 그리고 class의 이름이 변경되었다.


그리고 app.component.html, app.component.css 내용도 복사해서 heroes.component.html, heroes.component.css로 옮기자.(html이랑 css는 그대로 옮기기만 하면 된다.)



자 이제 영웅 목록을 보여주는 컴포넌트는 따로 떼어놓았다.


이제 AppComponent를 변경할 차례다.



app/app.component.ts




app/app.component.html



app.component를 새롭게 정의했다.


app.component.html 파일은 타이틀과 새롭게 만든 heroesComponent의 selector를 지정하고 있다.


자 일단 실행시켜보면 이전과 달라진 건 없다.


다만 영웅 목록을 새로운 컴포넌트로 분리 시켰다.


이제 라우터를 추가 시켜야 한다.


가장 먼저 할 일은 index.html 파일에 <base href="/">를 head 태그 안에 추가 하는 거다.


헌데 angular-cli가 이미 추가해 두었다. 다시 말하지만 angualr-cli 겁나 편하다.



하지만 여기서 base href는 뭐고 값을 왜 "/"로 주었는가?


angular-router는 페이지 탐색을 위해 pushState를 사용한다.


이 pushState는 html5에서 지원되는 history 객체의 새로운 함수다.


SPA에서 화면 전환 없이 URL을 변경하고 데이터를 주고 받는데 사용한다.


그리고 base href는 URL 변경 시 "/"를 앞에 붙여주게 된다.


일단 한번 Router를 적용시켜 보자.


먼저 Router 경로를 지정해 주기 위해 app.module.ts 파일에 Router를 추가해 준다.



app/app.module.ts



Router Module을 import 시키고 RouterModule을 imports에 추가 시켰다.


여기서 forRoot는 경로 탐색을 Root 경로 중심으로 탐색한다는 뜻이다.


path는 url 경로 이름이고 component는 나타낼 컴포넌트다.


현재 HeroesComponent를 지정해 주었다.


이젠 브라우저 주소에 /heroes를 입력하미녀 HeroesComponent를 나타내야 한다.


하지만 어디서 나타내야 할까??


우리는 아직 어디서 나타낼지 정해주지 않았다.



그래서 appComponent에 해당 주소로 가는 a 태그와 해당 경로의 컴포넌트를 보여주는 <router-outlet> 태그를 추가할 것이다.



app/app.component.html



여기서 router-link 태그는 탐색할 라우터 경로를 지정하는 것이다.


<router-outlet> 라우터에서 지정된 컴포넌트를 보여주는 역할을 한다.


이제 저장하고 ng-serve 명령어로 실행한 뒤 확인해 보자.


첫 메인 화면에서는 타이틀과 Heroes 태그만 보이고 해당 태그를 클릭하면 영웅 목록 화면이 나타난다.


그리고 URL 주소 뒤에 /heroes가 붙어있는 것을 볼 수 있다.


거기다 화면 전환이 없었지만 뒤로가기가 작동하는 것 역시 볼 수 있다.


Router에 첫 번째 경로를 만들었다.


이제 여기서 대쉬보드 컴포넌트를 추가할 거다.


먼저 dashboard 컴포넌트를 만들기 위해 cmd 또는 Terminal에서 프로젝트 디렉터리에 위치하여 ng g component dashboard 명령어를 실행하여 컴포넌트를 만들자.



그리고 dashboard.component.html 파일에 <h3>My DashBoard</h3>를 추가한다.



이제 라우터에 연결시켜 보자.



app/app.module.ts



새로운 경로 2개가 추가됐다.


dachboard 경로가 추가되고, 처음 접속 하였을 때 dashboard 화면이 나오게 하기 위해 '' 경로에는 redirectTo로 '/dashboard'를 지정해 주었다.


이제 단순 http://localhost:4200 으로 들어갔을 때는 /dashboard로 자동으로 들어가게 된다.


그리고 app.component.html 파일에 dashboard 링크를 추가하자.



app/app.component.html



dashboard 태그를 추가 시켰고, 여기에 nav 태그로 감쌌다.


nav 태그는 나중에 스타일을 지정할 때 필요하기 때문에 미리 추가 시켰다.


이제 다시 실행하여 제대로 작동하는지 확인해 보자.



링크도 제대로 작동하고 메인 화면이 dashboard로 잘 설정되었다.


이제 dashboard에 4명의 영웅을 표시해보자.


먼저 dashboard.component.html 파일을 수정한다.



app/dashboard/dashboard.component.html



살펴보면 이전에 배웠던 ngFor 지시자를 사용하여 hero의 이름을 표시하고 있다.


이제 dashboardComponent에서 이를 설정해 줘야 한다.


dashboardComponent 코드를 수정하자.



app/dashboard/dashboard.component.ts



Hero와 HeroService를 import하고 heroes 배열에는 4명의 영웅만 나타내도록 slice 함수를 이용하였다.


이제 확인해보자.



4명의 영웅들이 제대로 표시된다.


이번 포스팅에서는 라우트의 설정을 진행했다.


다음 포스팅에서는 해당 히어로의 이름을 클릭하면 HeroDetail 컴포넌트로 이동하도록 설정하고 rxjs에 관련된 설명을 약간 추가하려 한다.




컴포넌트의 기능을 제대로 살리니까 이제 코드가 좀 보기 편해진 느낌이다.


더 해보다보면 더 익숙해지고 늘겠지??

0 Comments
댓글쓰기 폼