* [끄적끄적]은 '일기' 혹은 '아주 사적인 나의 생각'을 풀어놓은 공간이기에. 공유하고 싶은 포스트만 부분적으로 공개합니다. 

[1]

presence of God를 느껴야겠다. 

내 삶 속에 주님을 느끼지 못하니, 죄에도 무감각해지고, 옳고 그름도 내 기준에서 한다. 

주님이 내 삶과 지금 이 곳에 임재하고 계심을 느끼자. 

[2]

일할 때는 그렇게 효율성을 추구하면서. 

왜 공부할 때는 비효율적으로 할까?

핸드폰, 컴퓨터... 

공부도 일할 때 처럼.. 

[3]

졸업이 다가온다.

사람들과 헤어짐에 오는 아쉬움.

불확실한 미래에 대한 두려움. 

사람들과는 아쉽지 않게 작별인사하고, 

불확실한 미래에 대해서는 주님 안에서 이겨내도록. 

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

[대화의 신_래리킹]

오랜만에 서점에 가서 책을 샀다. 자치회를 준비하면서 말, 대화에 대한 나의 부족한 부분이 드러나서일까? 대화를 할 때 내 머릿 속에서 완전히 정리가 안되서 내뱉는 느낌들이었다. 

래리킹이 말하는 대화의 법칙은 간단했다. (사실 여러가지 법칙이 있을 수 있지만 내 머릿 속에 남는건 많지 않다.) 솔직해져라 그리고 많이 알아라 . 대화에는 솔직할 필요가 있다. 당신이 잘 모르는 일이라면 혹은 대화에 자신이 없다면 미리 서두에 그에 대해 말해라. 대화는 쌍방 관계이지 내가 일방적으로 말하는 것이 아니다. 솔직해져야 상대방도 감안하여 듣는다. 그리고 내 자신을 들어내야 상대방도 마음을 연다. 그리고 아는 만큼 말할 수 있다. 회의 뿐만 아니라 일반적인 대화에서도 내 머릿 속에 든 것이 있어야 말을 잘 할 수 있다. 

대화의 시작은 질문에서 부터이다. '당신은?'이라고 되묻는 것을 잊지 말아라. 앞으로 공식적인 회의에서는 좀더 적어가야할 필요가 있을 것 같다. 모든 전문이 아니더라도. 내가 생각의 흐름을 따라갈 수 있을 정도의 키워드 정도는 있어야. 말을 좀더 자연스럽게 할 수 있지 않을까. 

대화의 신 국내도서 저자 : 래리 킹(Larry King) / 강서일역 출판 : 위즈덤하우스 2015.01.27 상세보기

[삼성처럼 회의하라_김영한, 김영안]

대화에 대한 부담감 때문인지, '대화의 신'에 이어 이 책을 고르게 되었다. 약 2주간 자치회 합숙을 하면서 여러 회의를 하였다. 항상 회의를 하면서 느낌점은 '비효율적'이라는 점이다. 회의를 통해 결론이 나오지 않고, 좋은 해결책이 제시되지 않은 것은 아니지만. 그 과정 중 다른길로 계속 세고, 잡담이 오가는 것이 너무 비효율적이라는 느낌을 지울 수 없었다. 

그렇다면 삼성은 어떻게 회의하는가. 일단 회의 의제 즉 목적이 정확히 제시되어야한다. 이것은 회의시간에 제시되어하는 것이 아니라 미리 공지가 되어 참석자들이 준비된 상태에서 회의를 들어올 수 있게 하여야한다.

회의록, 회의 시간이 끝났다고 모든게 끝난 것이 아니다. 희의간 나온 안건등을 간략하게 정리하여 참석자들에게 나누어 주어, 결정된 사항이 실제 실행될 수 있도록 하여야 한다. 불필요한 회의는 지양되어야한다. 항상 회의를 하기 전에 3가지를 확인해보아햐한다. 

• 꼭 필요한 회의인가?
• 실무자(담당자)가 스스로 결정할 수 있는 일은 아닌가?
• 회의말고 더 좋은 수단은 없는가? 

삼성처럼 회의하라 국내도서 저자 : 김영안,김영한 출판 : 청년정신(더불어책) 2004.08.06 상세보기

잡스에 의해 아이폰이 세상에 공개된 이후, 스마트폰은 전세계로 퍼져나갔다. 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를 다른 환경으로 옮길지라도 룰에는 영향이 없다. 
• 각 요소가 서로 독립적이다.