오늘은 간단하게 명령어 중심으로 window 10 개발환경 세팅하는 법을 알아보자. 

#1 nodeJS 및 npm  환경 설정

npm을 이용하여 angular환경을 구축해야 하기 때문에, 먼저 nodeJS를 다운받아야 한다. 

nodeJS는 다음 링크에서 다운로드 받는다. 

https://nodejs.org/ko/download/

각자 OS에 맞게 다운로드 받으면 된다.

다운로드가 완료되었다면, cmd창을 열어서 다음 명령어를 입력해보자. 

$ node -v

$ npm -v

v6.7.0 과 같이 버전 정보가 출력된다면, 정상적으로 다운로드가 이루어진 것이다 .

다음으로 넘어가기 전에, npm 업데이트를 하고 넘어가자. 

cmd창에 다음 명령어를 입력하면 된다. 

$ npm install -g npm@latest   // npm 최신 버전으로 업데이트

#2 Angular 다운로드

#3 Project 생성

브라우저에서 'http://localhost:4200/'에 접속했을 때, 다음과 같은 창이 뜬다면..

여러분은 angular를 이용해 개발할 준비가 완료된 것이다. 

Active X (액티브 X)

2017년 대선을 앞두고 유력 후보들이 ActiveX 폐지를 주장하고 있다. ActiveX가 무엇인지 간단히 알아보자. 

1. 도입

ActiveX는 취약한 웹 보안을 보완하기 위해 MS가 내놓은 플러그인이다. 사용자가 직접 인터넷에서 플러그인을 다운 받아야 한다. 이래서 대한민국 국민들은 인터넷으로 은행업무, 공공업무를 보기위해서는 많게는 5~6개의 플러그인을 다운 받아야 한다. 

99년 정부에서 ActiveX 도입을 결정할 때, 한국리눅스협의회에서는 ActiveX 허용시 보안 생태계가 극도로 나빠질 수 있다고 조언하였지만 정부는 듣지 않았다. 이에 대한민국은 최악의 ActiveX 생태계로 들어가게 된다. 

Internet Explore 11 버전에서 MS는 ActiveX의 취약성을 발견하고 이 기능을 제외 시켰다. 이와 동시에 대한민국 인터넷으로는 은행 업무를 볼 수 없는 초유의 사태가 일어난다. 이에 MS는 이례적으로 한국 Explore 11에만 ActiveX를 허용한다. 

박근혜 정부에서 '천송이 코트' 사건으로 해외에서 ActiveX때문에 한국 제품을 사지 못하자, ActiveX폐지를 지시한다. 이에 '공인인증서제도 폐지'(공인인증서 폐지 와는 다름)는 성공했지만. ActiveX폐지와 함께 .exe파일로 돌아서게 된다. 

2. ActiveX 단점

3. 해결책

http://www.pitchone.co.kr/8131

ionic 시작하기 

0. 준비사항 및 필자 개발 환경

1. Visual Studio Code (https://code.visualstudio.com)  
2. AngularJS 및 Typescirpt 그리고 Web 표준에 대한 간단한 사전 지식이 필요하다. 

1. nodeJS 다운 받기 

2. ionic 및 Cordova 설치

3. ionic 프로젝트 시작

오늘은 웹 기술 중 '데이터'를 위한 기술에 대해 알아보겠다. 

XML (eXtensible Markup Language)

• 단순성: XML은 다른 코드셋이 아닌 일반 텍스트로 되어 있어 판독이 가능하며, HW/SW에 의존하지 않으므로 단순해질수 있는 특징이 있다.
• 표준성: W3C가 주도하므로 스펙의 표준화를 이룰 수 있다. 
• 구조성: Data에 구조를 부여한다. XML은 data를 설명하는 의미가 담긴 태그를 제공할 뿐 아니라 특정 구조를 저장한다. 
• 확장성: 사용자 임의로 무한한 태그 확장을 할 수 있으며, 상황에 따라 적절한 태그의 부여가 가능하다. 
• Character Set: 모든 XML프로세서는 16bit Unicode를 지원하므로 한글과 같은 2byte 문자권의 데이터도 처리 가능하다. 

참고

http://blog.daum.net/_blog/BlogTypeView.do?blogid=0FDfM&articleno=11281814

http://marcof.tistory.com/45

JSON (JavaScript Object Notation)

1. Ajax로 서버와 통신하며 손쉽게 데이터를 주고 받을 수 있다.  
2. Name, Value 형태의 쌍으로 구성된다.
{ name: 'John'}
값들의 순서화된 리스트로 나타난다.
var employees = [ {"firstName": "John", "lastName":"Doe"}, {"firstName": "Anna", "lastName":"Smith"} ];

Ajax (Asynchronous JavaScript and XML)

참고

생활코딩 (https://opentutorials.org/course/1375/6843)

오늘은 웹키워드 중 네트워크와 관련된 부분에 대해 설명하겠다. 

URI (Uniform Resource Identifier)

URI는 인터넷에 있는 자원을 나타내는 유일한 주소이다. URI의 존재는 인터넷에 요구되는 기본조건으로서 인터넷 프로토콜에 항상 붙어다닌다. URI는 인터넷 상에 존재하는 html, gif, jpeg 등의 파일을 찾고 가져오는 일과 관련되어있다. 

URI는 선호도에 따라 URL(Uniform Resource Locator) 또는 URN(Universal Resource Name)의 둘 중 하나의 형태로 쓸 수 있다. 쉽게 설명하면 아래 그림과 같다. 

URL (Uniform Resource Locator)

URL은 제일 앞에 자원에 접근할 수 있는 http, telnet, ftp와 같은 프로토콜 이름을 적는다. 그 이후에는 구분자(:) 및 이외의 정보들을 적는데, 여러분이 흔히 아는 인터넨 주소를 떠올리면 된다. (ex. http://52.84.38.323)

참고

http://imovator.tistory.com/entry/%ED%8E%8C-URI-URL%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

HTTP (HyperText Transfer Protocol)

HTTP는 Server/Client 모델이다. 클라이언트는 서버에 URI를 사용하여 요청(Request)하고, 서버는 그 요청에 대해 반응(Response)한다. 즉, HTTP프로토콜을 사용하여 URI에 속한 URL 주소로 서버에 요청하면, 해당 서버에서는 요청에 응답하여 웹페이지를 띄워준다. 

HTTP는 Connectionless 한 프로토콜이기에, 요청/반응 이후에 접속을 끝는다. 이에, 서버와 계속해서 통신이 필요한 경우에는 Ajax와 같은 특수한 방법을 사용한다. 마찬가지로 Stateless 한 프로토콜이기에 상태 저장이 필요하면 쿠키나 세션 방식을 사용한다. 

다음은 HTTP에서 사용하는 Request Method들이다. 

HEAD, GET, POST, PUT, DELETE, TRACE, OPTIONS. CONNECT

참고

http://dalkomit.com/134

SSL (Secure Socket Layer)

참고

https://wiki.kldp.org/HOWTO/html/SSL-Certificates-HOWTO/x70.html

잡스에 의해 아이폰이 세상에 공개된 이후, 스마트폰은 전세계로 퍼져나갔다. IT 생태계도 기존 PC에서 모바일로 급격히 이동되었다. 이에, 모바일 애플리케이션에 대한 사람들의 요구가 증가하였다. 

현재 모바일 시장은 Android와 iOS가 양분하고 있다. 하지만 대기업 혹은 대형 포털회사를 제외한 곳에서 2개의 언어로 애플리케이션을 개발하기란 쉽지 않다. 이를 보완하고자 등장한 것이 하이브리드 앱이다. 

하이브리드앱이란? 

- 하이브리드앱의 장점

• 네이티브API와 브라우저 API를 이용한 다양한 개발이 가능
• 웹 기술을 사용해 앱을 개발 가능 (UI를 통합하여 단일 코드로 개발 가능)
• 한번의 개발로 다수의 플랫폼에 대응 가능 

• 네이티브 기능에 접근하기 위해 결국 네이티브 지식이 필요
• 웹뷰에서 앱을 실행하는 경우이기에 앱의 성능이 곧 브라우저의 성능
• UI프레임워크 도구를 사용하지 않는다면 개발자가 UI를 제작해야 함

Ionic (아이오닉)

• Cordova(Phonegap) 환겨을 제공한다. 
• Cordova(Phonegap) 플러그인을 사용할 수 있다. 
• AngularJS 기반으로 SPA(Single Page Application)를 MVC나 MVVM 패턴으로 개발할 수 있다. 
• 네이티브에 가까운 UI 컴포넌트들을 제공한다. 
• HTML5 애플리케이션을 빠른 시간 안에 개발할 수 있다. 

Ionic 공식 블로그에서는 다음과 같이 소개하고 있다. Where does the Ionic framework fit in Ionic"의 궁극적인 목표는 HTML5를 이용해 네이티브 앱을 더 쉽게 개발하기 위한 것이라고 소개하고 있다. 

Ionic은 nodeJS를 사용하여 자체적인 command를 가지고 있다. AngularJS를 사용하여 UI 또한 구성할 수 있다. 앱스토어 및 플레이스토어에 쉽게 등록할 수 있도록 설정을 할 수 있다. 마지막으로 위에 장점에도 설명하였듯이 자체적인 UI 컴포넌트를 가지고 있어 쉽게 애플리케이션을 구성할 수 있다. 아래 사진은 Ionic 자체 컴퍼넌트를 사용한 예제이다. 

(출처: http://blog.saltfactory.net/ionic/create-hybrid-app-using-ionic.html)

최근 Ionic 팀에서는 Ionic2를 배포하엿다. (Ionic팀의 Ionic2 소개) 기존 Ionic에서는 AngularJS를 사용하였지만 Ionic2에서는 시대의 흐름에 맞추어 AngularJS2를 사용하였다. 그러면서 자연스럽게 AngularJS 버전이 바뀌면 JavaScript에서 TypeScript로 옮겨간 것 처럼, Ionic또한 TypeSript를 사용하고 있다. 

Ionic에 대한 자세한 정보를 알아보기 위해서는 'Ionic 공식 홈페이지' 및 'Ionic 포럼'을 확인해보면 좋다. 현재 Ionic에 대한 정보는 Stackoverflow보다 Ionic 포럼을 활용해야만 더 자세히 알 수 있을 것이다. 

참고

http://blog.saltfactory.net/ionic/create-hybrid-app-using-ionic.html

http://mobicon.tistory.com/488

MEAN Stack 이란? 

MongoDB

Express

• 웹 서버로의 요청
• 요청에 대한 웹 서버의 응답
• 웹 애플리케이션 구성하기 위한 체계화된 디렉토리 구조

AngularJS

AngularJS는 HTML과 HTML에 삽입되어 나타나는 데이터를 함께 묶어서 표현해 주기 위해 사용된다. 웹페이지의 데이터 값에 변화가 생길 때, AngularJS는 변화를 곧바로 적용하여 업데이트를 가능하게 해준다. 이러한 방식을 Two-way Binding이라 부른다. (새로고침을 하지 않아도 웹창이 업데이트 되는 것)\

최근에는 Google Angular 팀에서 AngularJS 2를 내놓았다. 이는 AngularJS 1을 migration하지 않는 완전 새로운 프레임 워크를 내놓았기에 개발자들 사이에서 많은 의견이 오고갔다. 가장 큰 특징은 기존에 있던 Controller 기능은 사라지고, 웹을 Component화 시켰다. 기능을 모두 Component화 시켜 레고블록과 같이 조립시키기 위한 것이다. 

이를 위해 AngularJS1의 주요 기능인 Contorller, $cope, modeule, jqlite같은 요소들이 삭제되고, AtScript가 추가되었다. 

NodeJS

NodeJS는 서버를 구축하기 위해 사용되는 프레임워크이다. 웹 서버와 웹 서버에서 구동되는 애플리케이션 구축을 도와준다. NodeJs는 HTTP 서버 라이브러리를 포함하고 있는데, 이는 웹 서버를 실행시키기 위한 Apache 같은 서버 프로그램이 필요하지 않다는 것이다. 이에 Apache와 같은 서버 운용정책에 종속 적이지 않고, 다양하게 개발하는 것이 가능하다. 정책이 없는 만큼 복잡하기에 위에 적은 Express가 존재한다. 

NodeJS의 특징 중의 하나는 단일 쓰레드 환경을 도입한 것이다. 이에 동시접속자가 많아도 느려지지 않게 서비스를 구성할 수 있다. 이를 위한 것은 앞선 키워드 중 'Non-blocking I/O'와 'Event Loop'를 참고 바란다. 

참고

http://dog-paw.tistory.com/entry/MEAN-%EC%8A%A4%ED%83%9D-%EA%B5%AC%EC%84%B1-%EC%9A%94%EC%86%8C-MongoDB-Express-AngularJS-Nodejs

지난 포스팅에서 MVC를 비롯한 여러 디자인 패턴에 대해 알아보는 시간을 가졌다. 디자인 패턴을 비롯하여 웹서비스를 구현하기 위해서는 많은 여러가지 기술들이 접목되어야한다. 이러한 기술들을 無에서부터 쌓아나가기에는 시간과 돈이 많이 들 것이다. 이를 보완하여 無가 아닌 有에서 시작하기 위해 도와주는 것이 Framework이다. 

Framework

라이브러리 '자주 쓰일 만한 기능들을 모아 놓은 클래스들의 모음집'로 정의할 수 있다. 하지만  Framework는 라이브러리에 기능은 물론, '자주 쓰일 만한 기능들을 모아 놓고, 개발자가 나름대로 기능을 확장, 설계 변형 하면서 사용해나갈 수 있는 모음집'으로 정의할 수 있겠다. 

즉, 쉽게 말하여 라이브러리지만 개발자가 주어진대로 사용하는 것이 아니라 입맛에 맞춰 확장, 설계, 변형 할 수 있는 집합체를 말할 수 있다. 그래서 Framework는 코딩을 하는데 있어 뼈대 및 골조라고 할 수 있다. 

- Framework의 장점

• 동일한 결과를 얻기 위한 코딩 속도 보다 빠르고 간편하게 작성 가능
  
• 개발자의 수준을 평준화 시키게 된다. (= 일정 수준의 성능이 나온다.)
• 다른 사람이 작성한 코드라도 쉽게 패턴을 익히고 유지 보수에 편리하다. 

참고

http://blog.naver.com/PostView.nhn?blogId=superb_lr&logNo=220560754376&categoryNo=70&parentCategoryNo=-1&viewDate=¤tPage=&postListTopCurrentPage=&isAfterWrite=true

- Framework7

Framework7은 무료 오픈 소스이며 HTML로 iOS 및 Android 하이브리드앱을 만드는 Framework이다. 

- Spring Framework

웹 서비스의 규모가 점점 커지며 엔터프라이즈급 개발을 해야할 일이 많이 생겼다. 이를 해결하기 위해 등장한 Spring Framework는 자바 애플리케이션 개발을 위한 포괄적인 기능을 제공하는 자바 플랫폼이다. Spring은 당신이 애플리케이션에 집중할 수 있도록 포괄적인 infrastructure를 둔다. MVC 모델을 기본적으로 제공한다. 

중, 고등학교 미술 시간 그림을 그릴 때 우리는 '구도'에 대해 배웠고, 이를 활용하여 그림을 그렸던 기억이있다. 컴퓨터 프로그램을 만들 때도 '구도', 전문용어로 '디자인 패턴'이 중요하다. 디자인 패턴은 건축으로 치면 공법에 해당하는 것으로 소프트웨어의 개발 방법을 공식화 한 것이다. 소수의 뛰어난 엔지니어가 해결한 문제를 다수의 엔지니어들이 처리할 수 있도록 한 규칙이면서, 구현자들 간의 커뮤니케이션의 효율성을 높이는 기법이다.  (위키피디아 참고)

웹 서비스를 디자인하는데 자주 사용되는 여러 디자인 패턴들이 있다. 자주 사용되는 만큼 검증된 내용들이고, 웹 서비스를 효율적으로 운영하는 것을 도와준다. 오늘은 그 디자인 패턴들에 대해 알아보고자 한다. (Model과 View를 어떻게 연결 지으냐에 따라 각 패턴이 나뉘게 된다.)

MVC (Model View Controller)

View는 웹 서비스 사용자들에게 직접적으로 보여지는 부분을 다루는 요소이다. 클라이언트가 브라우저 상에서 볼 수 있는 부분들, 즉 외관을 구성하는 요소들을 아우른다. 키워드 첫 부분에 설명한 웹 페이지 표현 요소들인 HTML, CSS, JavaScript 등의 파일들이 이에 속한다. 

- Controller (컨트롤러)

Controller는 Model과 View 중간에서 둘 간의 상호작용을 중재하는 요소이다. 쉽게 말하면 Model이 관리하는 DB에 저장된 데이터들을, 웹 브라우저 즉, View 창에 띄워주는 역할을 한다. 

즉, Controller는 클라이언트의 URL 요청을 받아(입력을 담당한다) 웹페에지를 보여주고자 하는데, 그 과정에서 필요한 데이터를 얻기 위해 Model에게 데이터를 요청하고, Model이 DBMS를 조작하여 해당 데이터를 찾아와 Controller로 전달해주면, Controller는 이 데이터를 해당 웹페이지의 View에 반영한 뒤 클라이언트 측으로 제공하는 것이다. 

(출처: http://coding-dragon.tistory.com/4)

위 그림과 같이 모든 입력은 Controller가 받아서 처리한다. 입력이 들어오면 Controller는 입력에 해당하는 Model을 업데이트하고, Model을 표현해 줄 View를 선택한다. 하나의 Controller는 여러개의 View를 가질 수 있으며, Controller는 여러개의 View를 선택하여 Model을 표형할 수 있다. 반대로 View는 Controller에서 어떤 동작이 일어나는지 알수 없다. 

이때 Controller는 View를 선택할 뿐 직접 업데이트 하지 않기 떄문에, 주로 다음과 같은 방법을 통해 View를 업데이트 한다. 

• View가 Model을 직접 사용하여 업데이트

• Model에서 View에게 Notify해 주는 방법

• View에서 Polling하여 Model의 변화를 받아오는 방법

참고

- 코드라이언 (http://www.codelion.net)

- http://coding-dragon.tistory.com/4

- http://blog.javarouka.me/2013/06/understanding-mvc-mvp-and-mvvm.html

MVP (Model View Presenter)

참고 및 인용

http://coding-dragon.tistory.com/4

MVVM (Model View ViewModel)

MVP에서 Presenter와 View가 의존 관계에 있었다면, MVVM에서 View와 ViewModel은 독립적인 관계를 형성한다. MVP와 마찬가지고 View는 Client로부터 입력을 받고, ViewModel은 Presentation logic을 처리하여 View에 데이터를 전달하는 역할을 한다. 

각각의 View는 자신이 사용할 ViewModel을 선택하며, ViewModel은 Model을 베이스로 Presentation Logic에 따라 서로 다르게 구현된다. 따라서 View에 어떤 ViewModel을 연결하느냐에 따라 로직 처리가 달라지고, 각 로직 처링 따라 Model이 변경되면 해당하는 ViewModel을 사용하는 View가 자동으로 업데이트된다. 

결론

• 재사용 및 유지/보수에 용이하다. 
• HTML을 직접 다룰 수 있어 반응형 웹과 모바일 디바이스 지원 측면에서 좋은 전략을 세울 수 있다. 
• 분업에 용이하다. 
• URL 라우팅이 유용하고, 어떻게 구성하고 해석할지 쉽게 정할 수 있다. 
• 시스템에 다른 부분을 변경하지 않으면서 UI를 쉽게 변경할 수 있다. 
• 현재 사용하는 DB를 다른 환경으로 옮길지라도 룰에는 영향이 없다. 
• 각 요소가 서로 독립적이다.