Programmazione di Ku0re

Angular 4 Tutorial Quinto) Angular 4 HeroEditor - 2 본문

Programmazione/Angular

Angular 4 Tutorial Quinto) Angular 4 HeroEditor - 2

ku0re kuore 2017. 5. 3. 15:05

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

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

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


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




Angular 4 HeroEditor - 2


이번 포스팅에서는 Hero Editor의 Master / Detail Page를 만들어  보자.


먼저 한 명 밖에 없었던 Hero의 리스트를 더 늘려보자.


이를 위해 /src/app/app.component.ts 파일을 수정한다.



새로운 HEROES라는 Hero 타입의 배열을 만들고 Hero 객체들을 넣었다.


그리고 로직에서는 heroes라는 새로운 객체에 HEROES를 대입하여 사용하도록 하였다.


이젠 화면에서 나타날 수 있도록 일단 /src/app/app.component.html 파일을 수정하자.



app.component의 로직 코드에서 hero라는 객체를 지우고 새로운 배열 객체를 지정하였기에 기존의 {{hero.id}} 와 {{hero.name}}은 삭제하고 새롭게 지정한 heroes의 데이터를 나타내기 위해 *ngFor 라는 지시자를 사용하였다.


*ngFor는 해당 배열을 돌며 각 객체를 따로따로 담아서 변수에 저장하고 해당 템플릿에서 사용할 수 있게 만든다.


*ngFor = "사용할 변수명 of 참조할 배열"로 사용되며 여기서는 로직에서 지정해둔 heroes 배열을 참조하여 hero 변수에 저장되도록 하였다.


그리고 해당 변수를 이용하여 li 내부에서 {{hero.id}}, {{hero.name}}을 사용하여 데이터를 보여주고 있다.


이제 ng serve 명령어로 서버를 켠 뒤 결과를 확인해보자.


해당 배열에 들어있는 영웅들의 목록이 li 태그에 반복적으로 들어와 나타난 것을 알 수 있다.


이제 리스트는 완성되었으나, 이대로 진행하기에는 아무 디자인도 적용되지 않았기에 디자인을 조금 바꿔보자.


app.component.ts의 stylesUrl을 보면 우리의 스타일 시트는 app.component.css 파일을 가르키고 있다.


현재 /src/app/app.component.css 파일은 아무것도 없으니 채워 넣도록 하자.



CSS도 적용했으니 결과를 확인해보자.


아주 깔끔하게 적용되었다.. 와 진짜 깔끔..


이제 리스트는 정리가 되었으니 영웅을 클릭하면 상세 정보가 나오도록 Event를 넣어보자.


이를 위해 먼저 템플릿 파일에 click event를 넣어보자.


/src/app/app.component.html 파일을 수정하자.



li 태그에 (click) = "onSelect(hero)"라는 새로운 문구가 생겼다.


(click)은 흔히 자바스크립트에서 쓰던 click 이벤트를 그대로 가져온 것이고, 내부적으로 해당 컴포넌트의 즉 현재는 app.component.ts 파일에서 정의한 onSelect라는 이벤트를 실행시키며 Param으로 hero 변수를 설정하였다.


여기서 hero 변수는 당연히 heroes에서 가져온 hero 변수이다.



이제 onSelect 메소드를 만들어야 하는데 현재 하고자 하는 목적을 살펴보자.


영웅 목록에서 영웅을 클릭하면 세부 내용으로 해당 영웅의 정보를 보여줘야 한다는 건 현재 선택된 영웅을 사용자가 목록에서 클릭한 영웅으로 바꿔줘야 한다는 것이다.


그러기 위해서 가장 먼저 필요한건 선택된 영웅을 저장할 변수가 있어야 한다.


그런 뒤 onSelect에서 선택된 영웅의 데이터를 클ㄹ릭한 영웅으로 바꿔 주면 끝이다.


/src/app/app.component.ts 파일을 수정하자.



selectedHero라는 Hero 타입의 변수를 만들었고 여기에는 현재 선택된 영웅의 데이터가 들어간다.


onSelect 메소드는 파라미터로 Hero 타입의 hero를 받아서 selectedHero의 데이터를 hero로 변경한다.


이제 이벤트를 지정해줬으니 선택한 영웅 목록을 보여주기 위한 디테일 화면을 만들기 위해 /src/app/app.component.html 파일을 수정하자.



디테일 화면에서는 로직에서 정의한 selectedHero의 name, id를 보여주고 양 방향 데이터 바인딩을 사용하여 영웅의 이름을 바로 수정할 수 있도록 만들었다.


그럼 결과를 확인해보자.



문제가 발생했다.. 이래서 중간 중간 계속 확인하면서 코딩하는 습관이 중요한 것 같다.


무슨 일인지 콘솔 창을 열어 확인해보자.



에러 내용을 보니 name 속성을 읽을 수 없다, name 속성은 지정되지 않았다 등등 에러 메시지를 확인할 수 있다.


에러 내용을 보니 selectedHero.name에 문제가 생긴 것 같다.


이는 현재 로직에서 selectedHero에는 초기 데이터를 지정해 주지 않았기 때문에 당연히 읽을 수 없다는 에러가 나타날 수 밖에 없다.


이는 selectedHero에 강제로 더미 데이터를 넣어두면 해결된다.


하지만 Angular에서는 좀 더 센스있게 해결할 수 있다.


바로 *nglf를 사용하면 된다.


*ngIf는 말그대로 참인지 거짓인지, 데이터가 있는지 없는지로 해당 부분을 표시하지 않도록 만들어 버린다.


일단 한번 사용해보자.


/scr/app/app.component.html 파일의 li 태그로 가서 *ngIf를 넣어주면 된다.



div 태그를 만들어 detail에 관련된 부분을 감싸주고 *ngIf 지시자를 사용하였으며 대상은 selectedHero를 지정해 주었다.


이제부터 Angular는 해당 데이터가 없을 때는 detail 부분을 DOM 밖으로 보내고, selectedHero의 데이터가 생기면 해당 부분을 DOM으로 가져와서 표시해 준다.


한번 확인해보자.



이제 해당 영웅의 목록도 잘나오고, 영웅의 이름도 제대로 수정되는 걸 볼 수 있다.


 Angular 튜토리얼은 영웅을 선택했을 때 선택한 영웅은 목록에서 표시가 되었으면 한다.


이를 위해서 어떻게 해야 할까?


영웅 목록에서 선택한 영웅에게만 배경색을 바꾸는 새로운 css를 적용하는 데, 이를 위해 현재 선택한 영웅의 class를 추가하도록 하자.


그러기 위해 템플릿 파일인 /src/app/app.component.html의 코드를 수정하자.



li 태그에 [class.selected]="hero === selectedHero"라는 코드가 추가되었다.


어떤식으로 작동되는 걸까?


[]는 단 방향 데이터 바인딩으로 angular에서는 속성 값을 조작할 때 쓰이게 된다.


여기서 class.selected는 class="selected"를 추가한다는 뜻이 된다.


코드를 그대로 풀어보면 li 태그의 class="selected"라는 속성을 추가하는 데 여기서 hero 객체가 selectedHero와 같은 것만 추가하고, 나머지는 제거한다 하는 뜻이 된다.


여기서 selected는 이미 css 파일에서 정의를 해뒀기에 해당 데이터는 selected의 css를 적용 받게 된다.


이제 결과를 확인해보자.


css가 잘 적용된 것을 볼 수 있다.


그리고 요소 검사로 확인해보니



class="selected"가 추가된 것도 확인할 수 있다.




ps> 보면서 이해는 되지만 익숙해지려면 아직 더 해봐야 할 것 같다. 쉽지않구나..ㅠㅠ

0 Comments
댓글쓰기 폼
Prev 1 2 3 4 5 6 7 8 9 10 11 Next