angular2
-
9장) Angular 2 -HeroEditor- (5-2)Angular 2017. 2. 4. 01:20
오랜만에 글을 씁니다. 그동안 이것저것 준비하고 바빠서 이제야 시간이 생겼네요 ㅠ 늦은만큼 이제부터 점점 속도를 내서 쓰겠습니다. 혹시나 기다리신 분이 있으셨다면 죄송합니다 ㅜ 저번 시간에 이어서 Routing 부분을 마무리 짓겠습니다. 8장에서 dashboard 를 추가하고 메인화면에서 dashboard 와 Heroes 목록을 이동하는 링크를 추가 하였습니다. 이번엔 여기서 HeroesDetail 컴포넌트를 분리하려 합니다. Dashboard 에서 영웅을 클릭해서 영웅상세화면 으로 가고 싶을땐 어떻게 해야 할까요? 영웅목록 컴포넌트의 영웅 데이터를 가지고와서 비교해야 할까요? 그럼 URL은 어떻게 구성되야 할까요? 추가로 현재 HeroesDetail 컴포넌트는 Heroes 목록 컴포넌트 밑에 붙어 있습..
-
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 를 도입하여 개발하기 시작합니다. 처음 ..