news logo

간편한 AngularJS를 소개합니다.

 

1. AngularJS는 어떻게 탄생하였나?

2009년에 구글 직원인 Misko hevery와 Adam abrons가 공동 개발하였으며 시초는 온라인 JSON Storage Service를 지원하는 소프트웨어로 개발됐습니다. 이후 MIT 라이선스를 보유하였으며, Open Source 라이브러리로 채택되었으며 2013년 9월 기준 1.0.8 버전으로 정식 출시되었다.

 

2. AngularJS 사용법

- AngularJS를 사용하겠다는 의미로 “ng-app” 지시어를 추가합니다.

- HTML 태그에 ng-model과 {{}} 안의 이름을 일치 시켜 양방향 데이터 바인딩 구성을 합니다.

<input type="text" ng-model="name"> <-> <p>{{name}}</p>

 

3. AngularJS 기본 개념

- Scope는 모델 변경을 감지하고 표현하기 위한 책임을 갖습니다.

- 모델은 화면 템플릿에 합쳐지는 데이터를

가지고 있는 일반 자바스크립트 객체입니다. (데이터)

- 템플릿 스트링과 모델을 합쳐서 HTML을 만들고 DOM으로 해석되어 Browser에 표현됩니다.

- Controller 역할은 모델을 생성하고 콜백 메서드를 가지고 View로 퍼블리싱을 담당합니다.

- 지시어는 HTML 을 확장하여 주고 행위를 일으키는 주체입니다.

<AngularJS Dataflow>

4. AngularJS 선택해야 하는 이유

 

1) 작성해야 하는 자바스크립트 코드 양을 줄일 수 있습니다. jQuery를 이용해 개발할 때보다 많게는 절반 이하로 줄어듭니다.

화면의 데이터와 모델의 데이터 사이에서 양방향 데이터 바인딩을 제공하므로 뷰 데이터와 모델 데이터를 서로 동기화하는 코드를 작성할 필요가 없습니다.

<AngularJS Code>

<jQuery Code - html>

<jQurey Code - script>

2) AngularJS의 데이터 모델은 단순 자바스크립트 객체입니다. 여러 자바 스크립트 MVC 프레임워크에서는 모델을 제공하기 우해 프레임워크의 기본 모델 클래스를 상속하여 모델 클래스를 작성하지만 AngularJS에서는 별도의 모델 클래스가 없으며 그저 단순한 자바스크립트 객체에 불과합니다.. 놀라운 점은 단순한 자바스크립트 객체인 모델의 데이터와 뷰 데이터가 양방향 데이터 바인딩이 된다는 것입니다. 즉, 모델 데이터가 바뀌면 뷰 데이터도 같이 변경되고 반대의 경우도 같습니다.

<대부분의 경우>

<AngularJS를 쓸 경우>

3) 재사용할 수 있는 UI 컴포넌트를 만들 수 있습니다. 웹 애플리케이션의 복잡도가 증가하면서 지도, 그래프 등과 같이 HTML에서 기본으로 제공하지 않는 UI 컴포넌트가 필요해졌습니다. AngularJS는 이러한 UI 컴포넌트를 <map>, <graph>와 같이 HTML 태그로 만들 수 있게 해주며 이러한 태그를 자바스크립트 함수 호출이 아닌 HTML 태그 이름이나 태스 속정을 이용해 사용할 수 있게 해줍니다. 이렇게 되면 UI 컴포넌트는 UI 컴포넌트 개발자가, 비즈니스 로직은 로직 개발자가 개발하여 개발 역할에 따라 여러 개발자가 동시에 개발할 수 있으며 서로의 역할을 명확하게 분리할 수 있습니다.

4) 의존관계 주입(Dependency Injection)을 이용해 웹 애플리케이션 자바스크립트 개발을 할 수 있습니다. 서비스 프로바이더를 이용해 특정 서비스 컴포넌트를 구현하고 해당 컴포넌트가 사용하는 다른 서비스 컴포넌트를 직접 참조하는 것이 아니라 의존관계 주입을 이용해 사용하게 합니다. 이렇게 의존 관계 주입을 이용해 개발하면 단위 테스트를 할 수 있고 관심사가 분리된 재사용할 수 있는 컴포넌트를 개발할 수 있으므로 더는 엉킨 실타래 같은 자바스크립트 코드를 작성하지 않을 수 있습니다.

 

5) HTML&CSS 개발자와 자바스크립트 개발자가 서로 사이좋게 지낼 수 있게 해줍니다. jQuery를 이용해 웹 애플리케이션을 개발하다 보면 자바스크립트 코드가 HTML의 구조를 잘 알고 있어야 합니다. 그래서 HTML 코드를 수정하면 자바스크립트 코드가 동작하지 않는 경우가 많이 있습니다. 그러다 보니 자바 크립트 개발자와 HTML&CSS 개발자 사이의 협업에 어려움이 있었습니다. 하지만 AngularJS는 HTML을 이용해 뷰 코드를 작성하고 자바스크립트에서는 비즈니스 로직 코드만을 작성하게 하여 뷰 코드와 로직 코드를

명확하게 분리했습니다. 즉, 자바스크립트가 HTML 구조를 알아야 할 필요가 없어졌습니다.

 

5. 마치며

jQuery를 이용한 개발이 지겨워지셨거나 새로운 웹 프레임워크를 고민하고 있으신 분들은 AngularJS를 사용해 보시는 걸 추천합니다. jQuery, Bootstrap 등 여타 웹 프레임워크와 호환성이 매우 좋으며 새로운 마음가짐으로 개발하다 보면 좀 더 즐겁게(?) 개발을 진행할 수 있지 않을까 생각됩니다. 여러분 AngularJS 하세요. 두 번 하세요~(오기택 과장)

 

메일 클라이언트 프로그램 소개

 

메일을 확인하기 위해 주로 구글이나 네이버같은 웹 사이트를 이용하게 됩니다. 이때 접속을 위해 로그인을 하게 되는데 여러 계정의 메일을 사용하거나 업무상 자주 메일을 확인해야 한다면 매번 하는 로그인이 번거로워집니다. 또, 항상 인터넷이 연결되어 있어야한다는 조건도 있습니다. 이를 해소하기위한 방법 중 하나가 메일 클라이언트를 사용하는

 

것입니다. 한 번의 설정으로 여러 계정의 메일을 관리하고 한번 받은 메일은 오프라인에서도 작업할 수 있습니다. 이번호에선 쓸만한데다 무료인 메일 클라이언트 프로그램을 소개합니다.

 

1. Thunderbird

<Thunderbird>

첫 번째는 오픈소스 소프트웨어인 모질라 선더버드(Mozilla Thunderbird)입니다. 윈도우즈에서 아웃룩을 쓰지않으면 대부분 선더버드를 사용할 정도로 사용자도 많은 편입니다. 추가적인 세팅없이 로그인만으로 계정을 연결할수 있으며 탭 추가, 다양한 플러그인 및 테마 설치로 개인의 특성에 맞출 수 있는데 웹 브라우저인 파이어 폭스의 메일 클라이언트 버전이라고 볼 수 있습니다.

 이메일뿐만 아니라 일정 관리가 가능하고 채팅기능도 지원합니다. 다양한 플랫폼에서 실행할 수 있다는 장점도 있습니다.

>> Thunderbird 다운로드 <<

 

2. Zimbra Desktop

<Zimbra Desktop>

두 번째 클라이언트는 짐브라 데스크톱(Zimbra Desktop)입니다. 대부분의 아웃룩의 기능을 제공하며 SNS도 지원합니다. 아웃룩보다 대용량에서의 속도가 빠릅니다. 기본 메일 클라이언트로써의 기능도 뛰어나지만 짐브라(Zimbra)와 함께 사용하면 자체 메일서버를 구축할수 있으며 같은 계정이라면 동일한 UI 제공과 동기화 기능을 쓸 수 있습니다. OS는 Window, MAC, Linux를 지원합니다. 짐브라 데스크톱은 일정과 파일함 기능을

지원하며 일정은 아이폰/아이패드와 동기화시킬수 있으니 MAC 계통 OS 사용자에게 추천합니다.

>> Zimbra Desktop 다운로드 <<

 

3. Inky

<Inky>

세 번째 클라이언트인 Inky는 사용하는 메일 계정이 많은 사용자에게 추천합니다. 처음 사용시 Inky Cloud 계정을 생성하고 그 후 여러 메일계정들을 추가하여 사용하게 되는데 Inky는 여러 계정의 메일을 자동으로 통합된 보관함으로 모아줌으로써 마치 하나의 계정을 사용하는 효과를 줍니다. 또한 처음 생선한 계정이 클라우드 서비스를 지원해 모바일에서 사용하더라도 쉽게 동기화 할 수 있는 장점이 있습니다.

>> Inky 다운로드 <<

4. Claws Mail

<Claws Mail>

마지막 클라이언트인 클로스 메일(Claws Mail)은 추가기능들 없이 단순히 메일업무만을 위한 클라이언트입니다. 다른 클라이언트들과 인터페이스는 비슷하지만 메일 외의 기능을 삭제해 가볍고 빠르게 만들었습니다. 선더버드와 비슷하게 플러그인으로 사용자에게 맞출 수 있으며 필요한 기능들을 더할 수 있습니다. 또 PGP 방식의 암호화를 기본적으로 지원합니다. 단순함과 빠른 것을 선호하신다면 클로스 메일을 추천합니다.

>> Claws Mail 다운로드 <<

 

지금까지 4종의 메일 클라이언트를 소개했는데 이 외에도 여러 클라이언트들이 있으니

자신에게 맞는 클라이언트를 찾아 효율적인 메일 및 일정 관리를 하시길 바랍니다. 수시로 업무 메일 확인하시는 것도 잊지 마세요.

(김근환 주임)

 

 

[강추기사모음] 이 기사 보셨나요?

이 코너에서는 함께 공유하면 좋을만한 기사들을 선정해 보았습니다. 기사 제목을 선택하시면 해당 페이지로 이동합니다. 잘 알려지지 않은 기사중에서 다른 직원들과 나누고 싶은 정보가 있다면 뉴스레터 편집실로 알려 주세요.

 

'앱 개발하라'...오피스365의 플랫폼 변신 (출처:ZDNet Korea/2015.06.21)

 

구글, IoT OS '브릴로'와 통신 레이어 '위브' 공식 발표

(출처:CIO Korea/2015.05.29)

 

전자정부 웹서비스 인증, 국제표준에 맞춰 재정비 (출처:ZDNet Korea/2015.06.21)