2013년 12월 31일 화요일

꾸준히, 자유롭게, 즐겁게 : 한국 오픈 소스 개발자들 이야기

이전 블로그에서 이전 함 (원본 글 2013/12/31 작성)

 
꾸준히, 자유롭게, 즐겁게 : 한국 오픈 소스 개발자들 이야기
송우일 저 | 인사이트(insight) | 2013년 10월



인터넷으로 도서 구매 중 저렴해서 사게 되었다.
책 내용도 모른채 그냥 IT 서적에서 가격순으로 나오는 책 중 좀 깔끔한 것으로 구매하다보니 선택이 된 책

책 사이즈가 A5 사이즈?정도로 작고 페이지도 300 페이지가 되지 않는다.
게다가 내용은 6명의 오픈소스 개발자들의 인터뷰 내용이라 대화체로 부담없이 맘 먹으면 2-3시간에 모두 읽을 수 있겠다.

인터뷰의 내용으로는 오픈소스에 관심을 가지게 된 동기, 오픈소스 커뮤니티에 참가하게 된 과정, 오픈소스를 하면서 얻게된 것들과 변화된 상황 그리고 개발자를 위한 조언들이다.
내용을 정리하면 여러가지 항목들이 나오겠지만 책의 챕터에서 대충은 느낄 수 있는 것 같다.

목차
1. 허태준 - 가장 의미 있고 즐거운 개발
2. 김정균 - 자신을 발전시키는 소중한 공부
3. 이희승 - 도전과 점진적 개선, 그리고 변화에 열린 마음
4. 류창우 - 그냥 부담 없이 취미로
5. 허준회 - 더 나은 세상을 위한 소통
6. 최준호 - 프로그래밍의 깊은 세계로 들어가는 길

책을 읽으면서 인상 깊었거나 느끼게 된것들은 1. 무엇을 하든지 일정 시간의 몰입이 필요하다. (10000시간 법칙 처럼), 2. 관심에서 그치지 않고 죽이 되든 밥이 되든 해봐야 얻는게 있다. 3. 잉여로운 삶의 필요. 4. 어릴때의 주변 환경의 중요함. 들이다.

그리고 책에 동의 하는 내용들로는

여유를 가지는 것이 중요한 것 같다. 잉여로움으로 부터 발생되거나 진보된 것들이 많은데 대다수 우리나라 IT 개발자들은 삶의 무게에 눌려 있는 것 같다.

또한 결혼 후에는 시간의 여유가 없어지는 것은 당연해서 자신이 시간을 만들어 내서 잉여로움을 즐기는 것이 중요하고 되도록이면 결혼 전, 20대, 30대 초반에 몰입을 하는 것이 필요하다는 생각임. 

후반부 최준호님께서 강조한 사용하는 solution들의 내부를 들여다 보고 어떻게 만들어 졌는지 어떻게 돌아가는지를 아는게 중요하다는 의견에 동의 한다. Network application 단 개발 중인데 사실 하부 protocol stack들이 어떻게 동작하는지를 이해하고 있느냐 없느냐에 따라서 개발 결과물의 디자인이나 성능이 결정된다고 봐도 될것 같다. 공부해야겠음... ㅜㅜ

다음은 독서 중 확인한 TODO list 들이다.

(done) - 피터 노빅 [Teach Yourself Programming in 10 Years] 찾아서 보기

- DevOps 찾아서 정리 하기

(done) - coursera(https://www.coursera.org) 에서 과정 수강하기

- 잉여 시간 만들어 활용하기 (어렵겠지만..)

(doing) - C++11 정리하기


이건 검색하다 보니 찾게 된 PT. 추천

당신의 인생에 오픈소스를 더하라 - OSCON 발표자 뒷담화
by Sungju Jin, Manager at KT / Apache Software Foundation on Oct 14, 2013

Git branching model, 코드 릴리즈를 위한 Git branch 관리 방법

이전 블로그에서 이전 함 (원본 글 2013/12/31 작성)

Git 으로 코드를 개발, 관리 하면서 
코드 릴리즈는 단순히 regression 테스트 후 tagging하고 release하는 방법을 많이 사용했었음.
프로젝트가 어느정도 규모가 될 경우에 뭔가 효율 적인 git branch 관리 방법이 필요하겠구나 생각했었는데, 어찌어찌 하다 보다 보니 아래와 같은 article이 있어 링크함.

A successful Git branching model by Vincent Driessen

이전에 관리했던 프로젝트는 소규모의 프로젝트 였던 관계로 단순히 develop, master만 유지하였음에도 불구하고 branch간 merge가 생각보다 쉽지가 않았음.

위 article에서는 아래와 같은 branching model을 추천하고 있고 다소 규모가 있는 프로젝트를 위한 것으로 생각되나 몇몇 부분은 일반적으로 필요한 내용임.


보통 사용하는 develop, master branch 외 hotfixes, feature, release branch들을 두어 관리하는 방법으로 보이고 가장 공감하는 부분은 --no-ff merge와 hotfix branch 부분이다.


--no-ff merge 관련해서는 이전에는 여러 개발자들이 private branch에서 개발을 하던 내역을 모두 develop branch에 넣게 되었는데 불필요한 commit의 history로 인해 develop branch 관리가 어려웠었다. 되도록이면 개발자에게 private branch에서 feature가 개발이 어느정도 완료 되거나 bug 수정이 완료된 상태를 develop로 merge하는 것이 권장하는 것이 좋겠다는 생각을 함.


hotfix branch 관련해서는 stable version을 release 해도 버그는 언제나 발견이 되고 급하게 수정을 하는 경우가 있었는데 그냥 다시 develop에서 수정해서 해당 내역을 master에서 cherry pick을 했었다. 이런 경우 develop branch와 master branch간의 코드 불일치로 소스코드 반영 및 테스트에서 소소한 불편함이 있었다. 별도로 master branch(release branch도 되지 않을까?)기반의 hotfix branch를 사용하면 괜찮을 것으로 생각함.

Git GUI client 추천 : 일반적으로 msysgit을 사용하겠지만 난 좀 직관적으로 보이지 않더라...
유로지만 개인 개발자에게는 공짜이고 초보자에겐 간단한 look and feel !!!

2013년 12월 20일 금요일

jQuery Ajax 관련 간단 정리, same-origin policy, JSONP, CORS

이전 블로그에서 이전 함 (원본 글 2013/12/20 작성)

[Ajax, Asynchronous JavaScript and XML]

 : client-server간 asynchronous web application을 만들기 위한 방법으로 웹페이지의 조작, 변동 없이 background에서 asynchronous하게 server로 부터 data를 받아 오는 것.
 : 일반적으로 data 수신을 위해서는 지속적인 polling을 사용 함.

By Gengns-Genesis - Own work, CC BY-SA 4.0,
https://commons.wikimedia.org/w/index.php?curid=41186925

[Same-origin policy, 동일 도메인 참조 정책?]

JavaScript 같이 browser-side programming 언어에서는 보안상의 이유로 스크립트가 실행되는 페이지와 다른 도메인(protocol[http,https], Host[x.x.x.x], port[:y] 가 모두 같아야 함.)의 페이지를 참조할 수 없게 하는 정책

: 도메인 비교 예시
 To illustrate, the following table gives an overview of typical outcomes for checks against the URL"http://www.example.com/dir/page.html".
Compared URL
Outcome
Reason
httpː//www.example.com/dir/page2.html
Success
Same protocol and host
httpː//www.example.com/dir2/other.html
Success
Same protocol and host
httpː//username:password@www.example.com/dir2/other.html
Success
Same protocol and host
httpː//www.example.com:81/dir/other.html
Failure
Same protocol and host but different port
Failure
Different protocol
http://en.example.com/dir/other.html
Failure
Different host
http://example.com/dir/other.html
Failure
Different host (exact match required)
http://v2.www.example.com/dir/other.html
Failure
Different host (exact match required)
httpː//www.example.com:80/dir/other.html
Don't use
Port explicit. Depends on implementation in browser.

이를 해결하는 방법으로는 여러 방법들(document.domain property, Cross-Origin Resource Sharing, Cross-document messaging, JSONP)이 있다고 함. 그외에는 서버의 도움을 빌려 Proxy를 만들고 Proxy를 사용하여 타 도메인의 페이지들을 참조하는 방법도 있음.

자세한것은 위 링크를..

[JSONP, JSON-P, JSON with Padding]

간단히 말하면 JSONP는 client단에서는 서버의 JSONP 주소를 script로 추가하고 서버에서는 처리를 한 뒤 client에서 지정된 callback을 결과값과 함께 호출해주는 방법.

client단에서는 아래와 같이 JSONP 주소로 script를 추가하고
<script type="application/javascript" src="http://server2.example.com/Users/1234?jsonp=parseResponse"> </script>
서버단에서는 처리를 마친 뒤 client단에서 지정한 callback(=parseResponse)을 결과값과 호출 하여 전달함.
parseResponse({"Name": "Foo", "Id": 1234, "Rank": 7});

jQuery를 사용하여 twitter의 글들을 가져오는 예제 

 <html>
<head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script> $(document).ready(function(){ $.ajax({ url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10', dataType: 'jsonp', success: function(dataWeGotViaJsonp){ var text = ''; var len = dataWeGotViaJsonp.length; for(var i=0;i<len;i++){ twitterEntry = dataWeGotViaJsonp[i]; text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>' } $('#twitterFeed').html(text); } }); }) </script> </head> <body> <div id = 'twitterFeed'></div> </body> </html>

JSONP 관련 jQuery ajax method의 property
- dataType : 'jsonp' 지정
- jsonp : 일반적으로 client에서 지정한 'callback' argument (http:host:port/jsonp_uri?callback=jquery function)를 서버에서는 호출할 function으로 지정한다. 하지만 arguemnt명이 callback이 아니라면 jsonp 속성으로 지정하면 변경됨. 
- jsonpCallback : jsonp 결과값이 전달될 function을 지정할 수 있음. 기본적으로는 jquery에서 알아서 지정한다.

[JSONP의 단점]
하지만 GET 방법만을 지원하고 보안상 이슈로 인해 CORS (Cross-Origin Resource Sharing, http://www.w3.org/TR/cors/http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) 방법을 추천하는 분위기 같음.

JSONP의 단점 및 대안을 소개한 JSONP 사이트의 본문
 The problem

Thus far, JSON-P has essentially just been a loose definition by convention, when in reality the browser accepts any abitrary JavaScript in the response. This means that authors who rely on JSON-P for cross-domain Ajax are in fact opening themselves up to potentially just as much mayhem as was attempted to be avoided by implementing the same-origin policy in the first place. For instance, a malicious web service could return a function call for the JSON-P portion, but slip in another set of JavaScript logic that hacks the page into sending back private user's data, etc.

JSON-P is, for that reason, seen by many as an unsafe and hacky approach to cross-domain Ajax, and for good reason. Authors must be diligent to only make such calls to remote web services that they either control or implicitly trust, so as not to subject their users to harm.

Alternatives

There are many alternatives to JSON-P, but each of them has their own drawbacks or challenges. These techniques will not be covered in detail here, except for one: CORS (aka, "Cross-Origin Resource Sharing") -- the most recent addition to browser JavaScript for making cross-domain Ajax calls. Put simply, CORS is an extension to the standard XMLHttpRequest (aka, "XHR") object, which allows the browser to make calls across domains (despite the same-origin restriction). But it does so by first "preflighting" a request to the target server to ask it for permission.

[CORS]
브라우저 별 CORS 지원 여부 : http://caniuse.com/cors

앞서 말한 cross-domain request를 허용하게 하기 위한 표준적인 방법으로 다른 same-origin policy를 회피하기 위한 방법들 보다 다소 안전하다라고 소개하고 있음.

flow 는 다음과 같고 Javascript에서 XMLHttpRequest에 대해서 아래 옵션을 제공해 주면 
xhr.withCredentials = "true";
xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");

jQuery에서는
$.support.cors = true;

Browser에서는 Origin, Access-Control-Request-Headers header들과 함께 다른 도메인으로 request를 보내서 preflight 절차를 지나 response를 전달 받게 됨.


근데 난 mobile web app을 개발하기 위해서 localhost상에서 개발중인데 서버에서 localhost origin은 허용을 하지 않는 것 같고 계속 Chrome에서는 "Access-Control-Request-Headers" 헤더가 입력되어 전달되지 않는 것으로 보인다. 결국 서버 사이드에서 동작하는 JavaScript 상에서만 가능한건가?
나중에 Hybrid framework 상에서도 확인을 해봐야 겠음.

암튼 다음 링크들은 CORS 관련 링크들

 : http://www.html5rocks.com/en/tutorials/cors/
  => 전반적인 설명이 잘 되어 있음.
  => MDN documentation은 언제나 잘 되어 있음.
  => Server side, Client side에서 처리해야할 것들에 대해서 정리
  => 초반부에서 JSONP와 CORS의 제약에 대해서 설명해주고 있음.


[jQuery Ajax methods]

뭐 설명이 필요없고 링크의 API reference를 참고하시라.
 jQuery.ajax()
 : Perform an asynchronous HTTP (Ajax) request.

jQuery.ajaxPrefilter()
 : Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax().

jQuery.ajaxSetup()
 : Set default values for future Ajax requests. Its use is not recommended.

jQuery.ajaxTransport()
 : Creates an object that handles the actual transmission of Ajax data.

jQuery.get()
 : Load data from the server using a HTTP GET request.

jQuery.getJSON()
 : Load JSON-encoded data from the server using a GET HTTP request.

jQuery.getScript()
 : Load a JavaScript file from the server using a GET HTTP request, then execute it.

jQuery.param()
 : Create a serialized representation of an array or object, suitable for use in a URL query string or Ajax request.

jQuery.post()
 : Load data from the server using a HTTP POST request.


[jQuery.ajax Examples]
Example: Save some data to the server and notify the user once it's complete.
1
2
3
4
5
6
7
8
$.ajax({
type: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});

Example: Retrieve the latest version of an HTML page.

1
2
3
4
5
6
7
$.ajax({
url: "test.html",
cache: false
})
.done(function( html ) {
$( "#results" ).append( html );
});

Example: Send an xml document as data to the server. By setting the processData option to false, the automatic conversion of data to strings is prevented.

1
2
3
4
5
6
7
8
var xmlDocument = [create xml document];
var xmlRequest = $.ajax({
url: "page.php",
processData: false,
data: xmlDocument
});
xmlRequest.done( handleResponse );

Example: Send an id as data to the server, save some data to the server, and notify the user once it's complete. If the request fails, alert the user.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var menuId = $( "ul.nav" ).first().attr( "id" );
var request = $.ajax({
url: "script.php",
type: "POST",
data: { id : menuId },
dataType: "html"
});
request.done(function( msg ) {
$( "#log" ).html( msg );
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});

Example: Load and execute a JavaScript file.

1
2
3
4
5
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});