Angular
-
새로운 Angular engine, Ivy Compiler 에 대하여 알아봅시다.Angular 2019. 11. 4. 15:58
현재 Angular v8.2.11 에는 Ivy Preview 버전이 탑재 되어 있습니다. 원래 계획으로는 v8 에 적용 될 예정이었지만 자동 마이그레이션에서 버그가 생각보다 많이 나온 것 같네요. Angular v9 도 10월 초에 공개될 예정이었지만, 계속 늦어지고 있는 걸 보니... (11월 말 공개예정) 사실 Ivy Compiler 자체의 문제보다 Angular 는 이전부터 전버전에 관하여 손쉽게 마이그레이션을 할 수 있도록 update 명령을 제공하는데, 이 부분에서 생각보다 많은 시간이 소요되는 것 같습니다. Angular js 에서 Angular v2 ++ 버전으로 이동하면서 많은 비난과 욕을 먹었다보니, 마이그레이션에 집착하는 것 같습니다? 본론으로 들어가서 Angualr Ivy Compil..
-
Angular Http Interceptor 사용하기Angular 2019. 7. 26. 18:04
이번 주제는 Angular 에서 전역으로 Api 요청을 컨트롤 하는 Http Intercepror 사용입니다. 주로 AuthToken을 사용한 Api 요청이나 전역적으로 Http 에러를 처리할 때 자주 쓰입니다. Angular v8.1.2 먼저 새 프로젝트를 만들고 서비스를 만들어야겠죠. // * src/services/example.service import { Injectable } from "@angular/core"; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }..
-
Angular 2 ~ 4 개발 스타일 가이드Angular 2017. 10. 17. 17:53
굉장히 오랜만에 글을 올립니다.원래라면 이전 angular tutorial 을 마무리 지으려 했지만, 그 간 angular4 도 나오고 시간이 많이 지났네요.결정적인건 노트북을 새로 사면서 설명을 적어두었던 코드들이 사라지는 바람에 그냥 패스 하겠습니다(?). 그 대신에 새로운 프로젝트로 연습 해보려 합니다.아마 이번 프로젝트로 angular 의 기본 스킬과 구글의 Material Design , 그리고 angular 에서 가장 중요한 부분 중 하나인Rxjs 의 사용법에 대해 상세하고 쉽게 설명하려 합니다. 그전에 저 역시 회사에서 angular 를 이용한 프로젝트를 하고 있지만, 많은 분들이 놓치는 부분이 있어서 그에 대해 구글이 직접 제시한 angular style guide 를 정리 해 봅니다. 해..
-
Angular 4 업데이트 변경점 정리Angular 2017. 3. 26. 22:03
Angular 4 가 업데이트 되었습니다. 이 소식을 처음 접한 분들은 뭐? 2 나온지 얼마 되었다고 벌써 4야 ? 3는 어디갔어? 또 새로 배워야 하나? 라는 걱정을 하실수도 있는데 전혀 아닙니다. Angular 2 부터는 버전 관리 방식이 바뀌어서 쉽게 기존 버전방식처럼 생각하면 2.0 에서 2.1 로 바뀌었다고 보면 됩니다. angular 1 (지금은 AngularJS 죠 ) 에서 2 로 변할때의 초 슈퍼 울트라 대규모 업데이트가 아니란 거죠. 걱정말고 계속 쓰면 됩니다. 그럼 간단하게 Angular 4 의 변경점을 살펴봅시다. What's New 이번 Angular 4 에서 중점적으로 두는 목표는 Angular 를 좀 더 작고 빠르게 만드는 것에 중점을 두었습니다. 아직 모든 것이 완료 되지 않았..
-
9장) Angular 2 -HeroEditor- (5-2)Angular 2017. 2. 4. 01:20
오랜만에 글을 씁니다. 그동안 이것저것 준비하고 바빠서 이제야 시간이 생겼네요 ㅠ 늦은만큼 이제부터 점점 속도를 내서 쓰겠습니다. 혹시나 기다리신 분이 있으셨다면 죄송합니다 ㅜ 저번 시간에 이어서 Routing 부분을 마무리 짓겠습니다. 8장에서 dashboard 를 추가하고 메인화면에서 dashboard 와 Heroes 목록을 이동하는 링크를 추가 하였습니다. 이번엔 여기서 HeroesDetail 컴포넌트를 분리하려 합니다. Dashboard 에서 영웅을 클릭해서 영웅상세화면 으로 가고 싶을땐 어떻게 해야 할까요? 영웅목록 컴포넌트의 영웅 데이터를 가지고와서 비교해야 할까요? 그럼 URL은 어떻게 구성되야 할까요? 추가로 현재 HeroesDetail 컴포넌트는 Heroes 목록 컴포넌트 밑에 붙어 있습..
-
8장) Angular 2 -HeroEditor- (5-1)Angular 2017. 1. 14. 22:21
이제 Hero Editor 도 얼마 남지 않았습니다. 오늘은 Router 에 대하여 알아봅니다. router 는 내용이 많아서 부득이하게 2개로 나눴습니다. Hero Editor 에 새로운 기능을 추가 하려 합니다. 대시보드를 만들어 영웅들의 순위를 나타내고, 해당 영웅을 클릭하면 상세보기로 이동 하도록 하려 합니다.그러기 위해서 Angular Router 를 추가해서 대시보드와 영웅목록 , 상세정보를 Router 를 이용하여 이동하도록 만들겁니다. 오늘의 계획은 이렇습니다. - AppComponent 는 이제 Root Component 의 기능을 확고히 하며, 해당 컴포넌트는 Router에 맞춰서 나타나는 컴포넌트를 보여주는 컴포넌트가 될 것 입니다.- AppComponent 의 Heroes 를 별도의..
-
7장) Angular 2 -HeroEditor- (4)Angular 2017. 1. 12. 14:27
자 오늘은 Services 편 입니다. 서비스는 우리의 web application 에서 필요한 프로세스 중 자주 쓰는 기능을 하나로 묶어서 여러 컴포넌트에서 동시에 공유해서 사용하는 것 입니다. 현재 Hero editor 에서 영웅 데이터에 접근하는 코드들은 따로 서비스로 묶어서 사용하면 컴포넌트의 독립성을 지키고, 좀 더 뷰에 집중할 수 있도록 만들 수 있습니다. 구글에서는 현재 Hero editor 가 더욱 확장되기를 원하고 있습니다. 그들은 여러페이지에서 다양한 방법으로 영웅을 보여주고 싶어 하며, 최고 영웅의 랭킹이 나타나는 화면 , 그리고 영웅의 세부정보를 보고 편집하는 별도의 화면을 원합니다. 이 화면들은 전부 Hero 데이터에 접근 할 필요가 있습니다. 그리하여 영웅데이터에 접근하는 서비스..
-
6장) Angular 2 -HeroEditor- (3)Angular 2017. 1. 10. 21:48
이어서 Hero Editor 를 계속 만들어 봅시다. 오늘은 Multiple Component 파트 입니다. 현재까지의 작업은 컴포넌트 하나에 모든 로직이 들어 가 있습니다. 이러다 나중애 앱이 커지게 되면 관리하기 정말 힘들겠죠? 그래서 이제 각각 컴포넌트로 나누는 작업이 필요합니다. 현재 만들어진 부분에서 먼저 Hero detail 부분을 떼어내서 컴포넌트로 만들어 봅시다./src/app/ 폴더내부에 hero-detail 폴더를 만들고 그 안에 hero-detail.component.ts 파일과 hero.detail.component.html 파일을만듭시다. 그전에 잠깐 !! 설마 일일이 손으로 폴더 만들고, 파일만들고 하는 건 아니겠죠? 지금 우리가 쓰고 있는게 뭘까요 바로바로 angular-cli..