한장현입니다.

안녕하세요. 한장현입니다. 새해를 맞이하여 큰 마음을 먹고 Angular QuickStart를 번역하고 있었는데, 포스팅을 자주 하지 못하고 있어서 신경이 조금 쓰이네요 ㅎㅎ; 포스팅이 늦어지는 이유는... 좋은 기회를 만나서 Angular 책을 쓰고 있습니다. 저는 JS 풀스택을 공부하고 있으며 특히 Angular에 집중하고 있습니다 ㅎ올린 글들을 봐도 Angular에 대한 내용이 많네요.블로그를 찾는 분들에게 좀 더 좋은 정보를 전달하기에는 책을 통하는 것이 더 효율적이라고 생각해서 일단은 블로그보다 책의 우선순위를 높여서 작업을 하고 있습니다.지금 번역하고 있는 책의 내용이 꽤 괜찮아서 작업 과정도 재미있는데, 글을 쓰는 실력이 미흡해서 시간이 좀 걸리고 있네요 ㅎ 개인적인 계획으로는 반 정도 작업..

- 이 문서는 작성중입니다. 내용이 생각보다 많이 긴 관계로.... 차근차근 번역하는 중입니다. Angular 어플리케이션을 구성하는 기본 요소 Angluar는 HTML 클라이언트 어플리케이션을 구성하는 프레임워크이며, JavaScript를 직접 사용하거나 TypeScript와 같이 JavaScript로 컴파일되는 언어를 사용할 수 있다. Angular 프레임워크는 수많은 라이브러리들로 이루어지는데, 이 중 일부는 코어 모듈이고 일부는 옵션 모듈이다. Angular 어플리케이션을 구성하기 위해서는, Angular 스타일의 마크업을 사용하여 템플릿을 만들거나, 이 템플릿을 관리하는 컴포넌트 클래스를 작성하기도 하고, 서비스에 어플리케이션 공통 로직을 작성할 수 있고, 컴포넌트와 서비스들을 묶어서 모듈로 구..

Angular를 처음 접하는 사람을 위해 문서를 활용하는 방법을 제시한다. 모든 사람들은 배우는 방식이 다르다. 가이드 문서 각 페이지에서는 주제에 맞는 내용만을 다루고 있기 떄문에, Angular를 배우기 위해 가이드 문서를 처음부터 끝까지 쭉 읽어봐야만 하는 것은 아니다. Angular를 처음 접하는 사람들에게는 이런 방식이 적합할 것 같다.1. 로컬 개발 환경을 구성한다.2. "영웅들의 모험" 튜토리얼을 해본다. "영웅들의 모험" 튜토리얼에서는 개발환경 구성부터 전문적인 어플리케이션을 완성하기 위해 필요한 내용들을 차근차근 소개한다. 이 튜토리얼에서는 합리적인 프로젝트 구조나 데이터 바인딩, 서비스, 의존성 주입, 내비게이션, 원격 데이터 접근 등에 대한 내용을 다룬다.3. 앞으로 진행할 큰 그림을..

Angular QuickStart 기본 예제를 빠르고 쉽게 로컬 환경에 설치하기 로컬 개발 환경 설정 QuickStart 라이브 코딩 페이지는 Angular를 체험해 볼 수 있는 곳이며, 실제 어플리케이션을 개발할 수 있는 곳은 아니다. Angular 어플리케이션을 개발하기 위해서는 각 PC에 개발환경을 구성해야 하는데, 어떻게 하면 당신이 Angular를 쉽게 배울 수 있을 지 우리가 고민하고 있는 문제다. GitHub으로 관리되고 있는 QuickStart seed 프로젝트를 기반으로 새 프로젝트에 대한 환경 설정을 빠르고 쉽게 할 수 있다. QuickStart seed 라이브 코딩 페이지는 QuickStart에 app.module.ts와 main.ts 어플리케이션 파일을 추가한 것이고(자세한 설명은 ..

QuickStart 문서를 어떻게 읽고 이용할 것인가 이 페이지에서는 Angular 문서를 대략적으로 살펴본다. Angular가 처음이라면, Angular 학습 페이지를 먼저 방문하는 것이 좋다. 주제이 문서는 몇 개의 주제 섹션으로 나눠볼 수 있고, 섹션의 종류는 아래와 같다.(역주 : Angular guide 페이지 왼쪽 메뉴에 대한 설명입니다.) QuickStart아무 것도 설치하지 않은 상태에서 Angular를 접해볼 수 있다. 온라인 코드 에디터로 "Hello World"를 표시하거나 라이브 코딩을 시작해볼 수 있다. GuideAngular를 로컬 환경에 설치하거나 데이터를 표시하고 사용자 입력을 처리하는 방법, 어플리케이션 서비스를 컴포넌트에 주입하는 방법, 간단한 폼을 구성하는 방법에 대해 ..

Angular 기본 훑어보기 Angular 어플리케이션은 컴포넌트들로 이루어진다. 각 컴포넌트는 HTML 템플릿과 화면의 일부를 제어하는 컴포넌트 클래스로 구성된다. 간단한 문자열을 출력하는 컴포넌트는 아래와 같다.- app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `Hello {{name}}` }) export class AppComponent { name = 'Angular'; } 아무 것도 설치하지 않은 상태에서 Plunker를 사용해서 QuickStart 예제를 실행해 볼 수 있다. 로컬 환경에서는 실제 Angular 어플리케이션을 실행하려면 QuickSt..

안녕하세요. 한장현입니다.Saumya Majumder의 [AMP vs Instant Articles – Which One Should You Use?] 를 번역한 글입니다.구글 AMP와 페이스북 인스턴트 아티클을 비즈니스 관점에서 비교한 내용이며, 기술적인 내용을 깊게 분석하진 않지만 전반적인 내용을 살펴보는 내용입니다.저자의 허락을 얻은 후 작성했습니다. 몇 달 전 구글에서는, 모바일 웹에서 텍스트 컨텐츠를 아주 빠르게 동작시킬 수 있는 AMP(Accelerated Mobile Pages)라는 새로운 문서 표준을 발표했다. 이 표준이 나온 이후로 구글은 이 내용을 널리 전파하기 위해 열심히 노력하고 있다. 실제로 구글의 검색 알고리즘에는 AMP를 사용하지 않은 웹사이트보다 AMP를 사용한 페이지에 약간..

안녕하세요. 한장현입니다.Martin Angelov의 [The Languages, Frameworks and Tools You Should Learn in 2017] 를 번역한 글입니다.If writer does not want this article, please contact me.(han41858@gmail.com) 소프트웨어 개발 업계는 빠른 발전을 계속하고 있다. 2016년에도 우리가 일하는 데에 도움을 주거나, 일하는 방식을 바꿨던 수 많은 언어와 프레임워크, 툴이 나왔다. 이 모든 것을 최신으로 따라가는 것은 어려운 일이기 때문에, 연말 즈음에 내년에는 어떤 것이 중요하고 배울만 한 지 살펴보는 시간을 가져보려고 한다. 트렌드프로그레시브 웹 앱(Progressive Web Apps, PWA)..

안녕하세요. 한장현입니다. 이번에 발표 기회가 생기면서, 이전에 발표했던 Angular 2 대신 다른 주제를 준비해봤습니다. Angular 2는 한 번 다뤘고... 주최측에서 동영상도 마련을 해두었으니 같은 주제를 하면 재미 없을 것 같았어요 ㅎ 그래서 준비한 주제는 Angular 1 + ES6 입니다. 발표 내용을 기반으로 블로그에도 정리해봅니다. SlideShare에 올려둔 것과 같이 보시면 더 좋습니다. 오늘 언급할 라이브러리들 Angular 1 Angular 1의 오늘자 최신 버전은 11월 24일에 발표된 1.6.0-rc-2 safety-insurance 입니다. Angular 2와 함께 SemVer를 따른다고 하지만... 뒤에 설명이 길게 붙는건 여전하네요. 안정 버전은 1.5.9 입니다. An..

Todd Motto의 [Please stop worrying about Angular 3] 의 번역입니다.저작자의 허락을 얻은 후 번역했습니다. Angular 새버전이 나왔나?? 진짜?? Angular 2가 이제 나왔는데 Angular 3?? 왜죠??? 결론부터 말하자면 Angular 3에서 대규모 코드 변화는 없다. 이제 Angular 2의 미래와 Angular 3, Angular 4에 대해 이야기 해보자. Angular 1.x에서 Angular 2로 갔던 이야기 우선, Angular 1.x과 Angular 2는 엄밀히 다른 프레임워크다. 이렇게 생각하고 Angular 1.x에 대해 먼저 이야기 해보자. Angular 1.x의 한계 간단하게 말해서, 구글팀이 Angular 1.x를 맡은 이후, 개발자들..