Programmazione di Ku0re

Angular 4 Tutorial Quarto) Angular 4 HeroEditor - 1 본문

Programmazione/Angular

Angular 4 Tutorial Quarto) Angular 4 HeroEditor - 1

ku0re kuore 2017. 5. 3. 02:32

이 글은 단순히 Alexband님의 블로그 포스팅 중 Angular 2 강의를 보고 Angular를 공부하면서 내용을 정리한 글입니다.

강의가 필요하시면 Alexband님의 블로그를 보시고 제 포스팅은 참고만 하세요! :)


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



출처: http://ku0re.tistory.com/ [Programmazione di Ku0re]

이 글은 단순히 Alexband님의 블로그 포스팅 중 Angular 2 강의를 보고 Angular를 공부하면서 내용을 정리한 글입니다.

강의가 필요하시면 Alexband님의 블로그를 보시고 제 포스팅은 참고만 하세요! :)


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



출처: http://ku0re.tistory.com/ [Programmazione di Ku0re]

이 글은 단순히 Alexband님의 블로그 포스팅 중 Angular 2 강의를 보고 Angular를 공부하면서 내용을 정리한 글입니다.

강의가 필요하시면 Alexband님의 블로그를 보시고 제 포스팅은 참고만 하세요! :)


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



출처: http://ku0re.tistory.com/ [Programmazione di Ku0re]

이 글은 단순히 Alexband님의 블로그 포스팅 중 Angular 2 강의를 보고 Angular를 공부하면서 내용을 정리한 글입니다.

강의가 필요하시면 Alexband님의 블로그를 보시고 제 포스팅은 참고만 하세요! :)


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



출처: http://ku0re.tistory.com/ [Programmazione di Ku0re]

이 글은 단순히 Alexband님의 블로그 포스팅 중 Angular 2 강의를 보고 Angular를 공부하면서 내용을 정리한 글입니다.

강의가 필요하시면 Alexband님의 블로그를 보시고 제 포스팅은 참고만 하세요! :)


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



출처: http://ku0re.tistory.com/ [Programmazione di Ku0re]

이 글은 단순히 Alexband님의 블로그 포스팅 중 Angular 2 강의를 보고 Angular를 공부하면서 내용을 정리한 글입니다.

강의가 필요하시면 Alexband님의 블로그를 보시고 제 포스팅은 참고만 하세요! :)


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



출처: http://ku0re.tistory.com/ [Programmazione di Ku0re]

이 글은 단순히 Alexband님의 블로그 포스팅 중 Angular 2 강의를 보고 Angular를 공부하면서 내용을 정리한 글입니다.

강의가 필요하시면 Alexband님의 블로그를 보시고 제 포스팅은 참고만 하세요! :)


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



출처: http://ku0re.tistory.com/ [Programmazione di Ku0re]

이 글은 단순히 Alexband님의 블로그 포스팅 중 Angular 2 강의를 보고 Angular를 공부하면서 내용을 정리한 글입니다.

강의가 필요하시면 Alexband님의 블로그를 보시고 제 포스팅은 참고만 하세요! :)


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



출처: http://ku0re.tistory.com/ [Programmazione di Ku0re]

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

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

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


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




Angular 4 HeroEditor - 1

이제 본격적으로 Angular 4를 다뤄본다.


The Hero Editor를 만들어 보자.


먼저 간단하게 메인 페이지에 새로운 글을 삽입해보자.


/src/app/app.component.html 파일을 수정한다.



그리고 Title과 Hero의 표시 문자를 변경하기 위해 /src/ap/app.component.ts 파일을 열어서 title과 hero 변수를 만들고 값을 넣어준다.



이제 제대로 바인딩 되었는지 ng-server 명령어로 서버를 가동시키고 화면을 확인해보자.



{{title}}과 {{hero}}에 제대로 바인딩이 되는 것을 확인할 수 있다.


*여기서 이중 괄호({{ }})는 단 방향 데이터 바인딩을 실행한다.


이제 영웅을 체계적으로 관리하기 위해 영웅들을 나타내는 Model을 하나 만들어 보자.


/src/app/app.component.ts 파일에 Hero Model Class인 Hero를 추가한다.



원래는 모델은 전용 파일을 만들어 관리해야 한다.


여기서 id : number , name : string은 Typescript의 기능 중 하나로 *변수이름 : Type 으로 지정하여 해당 변수의 Type을 지정하는 형식이다.


기존 Java나 C#을 사용하던 사람들에게는 익숙한 방식이지만 타입을 따로 지정하지 않던 Javascript의 느슨한 방식에서 Type을 지정해주는 것으로 더욱 견고한 코드를 짤 수 있게 되었다.


그리고 Class도 기존 Java, C#의 Class와 같은 기능으로 extends로 상속이 가능하고 interface class, abstract class도 사용 가능하다.



그럼 다음으로 넘어가서 이제 Hero라는 Class를 이용해 기존 영웅을 나타내보자.


/scr/app/app.component.ts 파일을 열어 첫 번째 히어로를 등록하자.



여기서 주의할 점


한 컴포넌트에서 여러 Class를 넣을 때 @Component 바로 아래에 있는 Class가 주요 로직 Class가 되어야 한다.


따라서 위에 있는 Hero Class가 @Component 밑으로 오면 안된다.


아래의 코드처럼 말이다.



Hero Class가 @Component 다음으로 오게 되면 해당 Component는 AppComponent Class가 아닌 Hero Class를 인식하게 되기 때문에 주의해야 한다.


*보통은 한 Component 당 1개의 로직 Class만 두기 때문에 이런 문제가 있을 일은 거의 없다.



다시 본론으로 돌아와서 기존 단순한 텍스트 였던 hero 변수를 새로운 객체로 만들었다.


hero : Hero는 hero의 Type은 Hero Class를 따른다 라는 것이고, 내부 객체의 속성 역시 Hero Class와 같은 속성을 지닌다.


자, 여기서 Typescript의 장점이 하나 나온다.


현재 Hero Class의 name 속성의 Type은 String으로 지정해 두었다.


그런데 hero 변수에서 만약 name의 값을 number로 넣게 되면 어떻게 될까?


다른 언어에서는 당연한 듯이 에러가 발생한다.


하지만 Javascript에서는 Type을 지정하지 않아도 되었기 때문에 그렇지 않았다.


이것을 보완해주는 것이 Typescript의 기능이다.


다음 그림을 보면 VScode에서 해당 Type이 잘못되었다고 알려주는 것을 알 수 있다.



여기서 id, name 외의 다른 속성을 넣어도 당연히 잘못되었다고 나온다.


현재 hero 변수의 Type은 Hero 이기 때문에 이 역시 IDE에서 체크해준다.



이제 해당 변수를 Template에 바인딩 해보자.


/src/app/app.component.html 파일을 열어서 아래와 같이 수정해준다.



기존 hero 변수에서 hero.name으로 변경되었다.


당연히 hero 변수가 이젠 Hero Type의 객체로 변했기 때문에 해당 객체의 name 속성을 가져오는 것이란 것을 알 수 있다.



이제 해당 영웅의 이름 뿐만 아니라 ID 역시 같이 보고 싶다.


/scr/app/app.component.html 파일을 변경해 주자.



이제 화면을 확인해 보면 더욱 Detail 하게 영웅의 정보를 알 수 있다.




이제 보여주는 것은 어느 정도 됐으니 영웅의 정보를 수정하기 위한 작업을 해보자.


위 name 부분에서 영웅의 이름을 나타내는 부분이 label이 아닌 TextInput으로 바꿔서 이름을 변경해보자.


먼저 View 부분을 수정하기 위해 /src/app/app.component.html 파일을 수정하자.



Label 부분을 Input으로 변경했다.


결과를 확인해 보면 텍스트 입력 창이 생기고 해당 부분에 영웅의 이름이 들어가 있는 걸 확인할 수 있다.


하지만 아직은 단 방향 데이터 바인딩 상태이기 때문에 텍스트 입력 창의 내용을 변경해도 h2 안에 있는 영웅의 이름이 변경되지 않는다.


따라서 양 방향 데이터 바인딩이 필요하다.



Angular의 양 방향 데이터 바인딩을 사용하여 영웅의 이름을 동시에 바꿔보자.


양 방향 데이터 바인딩을 사용하기 위해서는 먼저 Angular의 기본 제공 모듈 중 Forms 모듈을 사용해야 한다.


모듈을 불러오기 위해 /src/app/app.module.ts 파일에서 모듈을 import 시켜줘야 하지만 Angular-cli는 Forms 모듈을 기본으로 import 시켜준다.



FormsModule을 Import하고 @NgModule의 Imports 속성에 FormsModule이 이미 등록되어있는 것을 확인할 수 있다.



그럼 이제 양 방향 데이터 바인딩을 사용해 보자.


사용법은 간단하다. [(ngModel)] = "변수명"으로 사용하면 된다.


/src/app/app.component.html 파일에 들어가서 변경해 주자.



value = {{hero.name}}에서 [(ngModel)} = "hero.name"으로 변경 되었다.


*변수명에서 {{ }}는 제거되어야 한다.(이중 중괄호는 단 방향 방식이기 때문)


이제 양 방향 데이터 바인딩 설정이 끝났으니 직접 확인해 보자.


텍스트 입력 창의 내용을 바꿔보면 h2 안의 hero.name도 같이 바뀌는 것을 확인할 수 있다.




ps> 아직은 크게 모르겠지만 뭔가 몇 개 적지 않고 애플리케이션 하나가 뚝딱 만들어진 느낌?

0 Comments
댓글쓰기 폼