Angular
-
5장) Angular 2 -HeroEditor- (2)Angular 2017. 1. 8. 14:41
이번장에서는 Hero Editor 의 Master / Detail Page를 만들어 봅니다. 먼저 한명밖에 없었던 Hero 의 리스트를 더 늘려봅시다. 이를 위해 /src/app/app.component.ts 파일을 수정합니다. import { Component } from '@angular/core'; export class Hero { id : number; name : string; } const HEROES: Hero[] = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' }, { id: 13, name: 'Bombasto' }, { id: 14, name: 'Celeritas' }, { id: 15, name: 'Magneta' }, { id:..
-
4장) Angular 2 -HeroEditor- (1)Angular 2017. 1. 5. 17:21
본격적으로 The Hero Editor 를 만듭시다.먼저 간단하게 메인페이지에 새로운 글을 삽입해봅시다. /src/app/app.component.html 파일을 수정합니다. {{title}} {{hero}} 그리고 Title 과 Hero 의 표시 문자를 변경하기 위해 /src/app/app.component.ts 파일을 열어서 title 과 hero 변수를 만들고 값을 넣어줍시다. import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { t..
-
3장) Angular 2 프로젝트 폴더구조 살펴보기Angular 2017. 1. 3. 20:18
이번 장에서는 간단하게 프로젝트의 폴더구조와 이놈들이 뭘 하는 놈인지 알아보겠습니다. 먼저 만들어진 폴더 구조를 살펴봅시다. 프레임워크 답게 뭔가 폴더와 파일들이 많습니다. 차례대로 살펴봅시다. e2e 는 end to end 테스트를 위한 설정파일이 들어있는 폴더 입니다. 프로젝트를 테스트 하기 위한 방법으로 단위테스트 와 통합테스트 가 있는데 단위테스트는 말그래도 내가 작성한 코드가 정상적으로 돌아가는지 단위적으로 테스트 하는 것 이고 통합테스트는 프로젝트에서 작성한 프로세스 대로 제대로 돌아가는지 테스트 하는 것 입니다. 예를 들면 로그인 -> 게시물작성 -> 로그아웃 이런식으로 일련의 행동을 자동화하여 테스트 하는 방법으로 e2e 폴더는 통합테스트 관련 설정파일이 있는 폴더 입니다. 그 다음 nod..
-
2장) Angular 2 작동방식 살펴보기Angular 2017. 1. 2. 17:12
1장에 이어 이제 Angular-cli 로 설치된 프로젝트의 구조를 살펴보기로 합시다. 그전에 Angular 2 가 어떤식으로 동작하는지 간단하게 정말 간단하고 알기쉽게 알아보고 갑시다.기본적으로 Angular 는 모바일 환경의 SPA ( Single Page Application ) 를 타겟으로 만들어진 프레임워크 입니다. 그럼 일반적인 Web 이랑 SPA 는 무엇이 다른가? 만약 일반적인 Web service 에서 사용자가 다른 메뉴를 보기 위해 링크를 클릭했다고 가정하면 간단하게 이런 구조로 동작합니다. 사용자가 클라이언트 , 즉 HTML 화면에서 해당 링크를 클릭하면 클라이언트 측에서는 서버로 해당 데이터를 달라고 요청하게 됩니다. 서버는 '어이쿠 그놈이 어디있더라 여기있네' 하며 데이터를 꺼내서..
-
1장) Angular 2 개발을 위한 환경설정Angular 2017. 1. 1. 19:35
본격적으로 Angular 2 (아직은 4버전이 나오지 않았고, 일단은 Angular.js 1 과 헷갈릴 위험이 있기에 일단은 Angular2 로 적겠습니다.) 를 이용한 개발에 앞서 환경설정을 해봅시다. 뭐가 필요할까요? 일단 개발을 위한 기본적인 편집기가 필요하겠죠? 그럼 어떤 걸 사용할까요. 이 부분은 뭘 사용해도 됩니다. 다만 Angular2 는 Typescript 를 사용하고, 이 Typescript 는 MS 에서 만들었고 그럼 ! IDE 의 최강자인 VisualStudio 를 사용하면 되느냐? 됩니다. 다만 VisualStudio 는 너무 무겁습니다. 제가 추천하는 놈은 Vscode 또는 Atom 입니다. Vscode 는 MS에서 만든 새로운 IDE 로서 Typescript 를 공식 지원 할 뿐..
-
Angular 2 , React , Js 를 이용한 Native appAngular 2016. 11. 16. 17:44
원래 계획대로 Angular 1 을 이용한 MeanStack 에 이어서 이번엔 Angular 2 로 MeanStack 을 만들려 합니다. 1 에 비해서 Component (React ?) 중심으로 다시 돌아온 2의 장점을 살펴보면 뭐니뭐니 해도 React 에게 무참히 패배했던 퍼포먼스와 스피드가 비약적으로 발전한 것 입니다. 출처 : https://auth0.com/blog/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/(출처에 가면 좀 더 처참한 결과를 볼 수 있습니다. ) 그렇기에 가능하다면 Angular 2 로 갈아타야 하는데 , 우리의 구글은 Angular 2 에 TypeScript 를 도입하여 개발하기 시작합니다. 처음 ..