2016년 9월 28일 수요일

ionic에서 crosswalk 사용하기.

사실 ionic crosswalk 을 사용하는 방법은 간단하다.
$ionic browser add crosswalk
한 이후 build만 하면 android에 crosswalk이 생긴다.
오늘날씨의 경우 Android SDK 14 부터 지원하는데, 위와 같이 설치하면 crosswalk 2.0이 설치되고, build 에러가 발생한다.
16년 9월 27일 현재 version과 상관없이 빌드시에 에러나는 것으로 보인다.
해결방법은 최신버전을 사용하지 않고, Android SDK 14를 지원하는 1.x를 사용하면 문제없이 빌드되고, 동작한다.
$ionic plugin add cordova-plugin-crosswalk-webview@1.8.0;
오늘날씨 에서는 Android 14부터 18까지 crosswalk를 사용하고, 19부터는 내장된 webview를 사용한다.
첫번째로 그 이상의 버전에서는 browser별 layout이 크게 차이나지 않아, 약간의 html과 css조정으로 맞출 수 있다.
두번째로 crosswalk와 inapppurchase plugin이랑 맞지 않는지, crosswalk을 사용하면 inapppurchase plugin이 제대로 동작하지 않기 때문에 crosswalk 사용을 최소화했다.
물론 용량 문제도 crosswalk를 최소로 사용하게 한 요인중에 하나이다.


2015년 5월 31일 일요일

git commit 합치기

pull request시에 하나의 commit message를 전달하기 위한 목적으로 여러 번 commit한 것을 합쳐서 하나의 commit를 만들려면 rebase를 사용하면 된다.

아래 3개의 commit을 하나로 묶어서 push할 예정이다.

스크린샷 2015-05-31 16.03.46

rebase -i 옵션을 사용하여 아래와 같이 주면 HEAD부터 3개의 commit를 합친다.

$ git rebase -i HEAD~3

명령을 주면 편집창에서 수정할 수 있게 되는데, 아래와 같이 log가 나오는 순서의 반대인 커밋한 순서대로 나온다. 여기서 2,3번을 pick에서 squash로 변경하면 합치겠다는 의미이다.(그냥 편집창이므로, pick을 지우고, squash로 다시 써주면 된다.

squash로 변경한 후에 저장하고 나오게 되면, commit message를 수정할 수 있는 창이 나온다.

주석으로 되어 있는 부분을 제외하고 합쳐진다고 보면 된다. 적절히 메세지를 수정하고 저장하고 나오면, 아래와 같이 성공메세지가 나온다.

다시 push를 해보면 commit이 하나만 나와 있고, commit message도 합쳐진 것을 확인할 수 있다.

스크린샷 2015-05-31 16.34.12

주의 : 이미 upstream에 올라간 것을 묶으면 난리(?)난다. rebase는 무조건 local(작업하고 있는 저장소)에 대한  commit에 한해서만 사용해야 한다.

참고
http://ift.tt/1DyxAAS
http://ift.tt/1GlF8tu




from WordPress http://ift.tt/1FmeBIl

2015년 5월 24일 일요일

github pull request 취소하고 수정하여 다시 pull request하기.

pull request 보낸 code가 기각되어 수정하여 다시 pull reqest하고자 한다.

스크린샷 2015-05-24 12.05.56

위와 같이 automatically merge가 안되므로 close하고 다시 수정하고 pull request합니다.

스크린샷 2015-05-24 12.05.25

close하면 branch를 지울 것인가 물어봅니다.

스크린샷 2015-05-24 12.05.41

위에서 지우게 되면 local에서 214_category_tag_sync에서 rebase해서 적용하면 됩니다.

우선 충돌한 pull request의 branch를 불러 온다.

rebase를 하면 아래와 같이 conflict가 발생하고, 수정한 이후에는 ‘git rebase –continue’ 하라고 되어 있다.

git status를 보면 두개의 파일이 conflicting(Unmerged paths) 인 것을 확인할 수 있다.

참고
http://ift.tt/1RdHZIe




from WordPress http://ift.tt/1LrP04a

2015년 5월 23일 토요일

github에서 pull requst 잘하기.

SVN을 오랫동안 써온 그것도 회사에서 약간 이상하게 써온 나로써는 git과 github에 적응하는데는 많은 시간과 어려움이 있었다.

최근에 계속 고민하게 된것은 두가지인데,

pull request 전에 upstream에 새로운 commit이 올라오면 그것을 merge해서 보내야 하는데 이때 내 만든 commit과 merge한 commit이 두개 올라가는 짜증(?) 나는 상황이 생긴다.

또 한가지는 내가 보낸 pull request가 아직 upstream에 merge되기 전에 pull request를 보내면, 이미 보낸 pull request에 붙어 버리는 문제가 생긴다.

이런 한 것에 대하여 왜(why)를 설명하기 보다는 어떤 방식으로 작업하면 이런 문제가 발생하지 않는가(how)에 대해서 설명하고자 한다.

1. contribute 하고자 하는 repository를 Fork 해온다.

스크린샷 2015-05-23 오전 7.48.57

2. local pc에 개발환경 셋업하기.

local pc에 clone 한다.

remote에 upstream 추가하기

3. issue(일감)에 따라 branch하기

앞에 이야기 한 두번째 문제인 pull request가 붙어버리는 문제가 발생하지 않게 하기 위해서는 내가 처리할 이슈(즉 pull request할 부분)을 branch로 분리해서 작업하고 commit(local에 적용)/pull(origin에 적용)/pull request(upstream에 적용요청) 하는 것이다.

사실 일하다 보면 그렇게 미리 지정해서 하기가 잘 안된다. 쉽게 생각했던 issue가 풀리지 않아서 하다가 다른거 하는 경우가 허다하다. 그래서 내 경우에는 master에서 이것저것 만지다가 commit전에 stash로 수정사항 저장하고 new branch를 생성하고 거기서 stash pop하여 commit한다.  여기서는 branch하고 수정하는 걸로 설명한다.

branch를 새로 생성하고 checkout 하기.

issue 수정하기

issue는 wrapMediaTag를 warpMediaTag로 잘 못 쓴 것을 고치는 것이다.

git diff 를 활용하여 아래와 같이 수정상태를 확인 할 수 있다.

4. commit 하고 pull, rebase, push하기

사실 upstream에 변경이 있기 전에 빠르게 commit/pull/pull request를 던지면 제일 좋지만 맘대로 되지 않는다. ㅡ.ㅡ;

rebase 고민 없이 하는 방법이 이슈 수정 및 테스트가 끝났다면 commit하지 말고, stash로 묶어두고 merge후에 stash pop해서 수정한 사항을 재반영하고 빠르게 test 및 commit/pull/pull request를 하는 것이 좋다.

그러나 항상 그럴 수는 없기에 여기서는 commit하고, rebase하고 pull, pull request하는 것으로 설명하겠다.
git에서는 staged 상태라는 개념이 있는데 여기서는 설명하지 않는다. 그냥 -a 옵션으로 커밋!

commit하기

rebase하기

앞에 commit한 log와 비교하면, 새로 갱신된 내용이 내가 새로 commit한 log 전으로 들어오고, 내가 commit한 hash값이 변경된 것을 확인할수 있다.  주의사항은 내가 local에 commit한 것이 다른 곳으로 전달되지 않았을 경우에만 rebase해야 한다.

push하기

5. pull request 하기

이제 github에 들어가면 보면 pull reqest하라는 내용이 나오고, 깔끔한 1 commit을 볼 수 있다.

스크린샷 2015-05-23 오전 9.34.51

깔끔한 1 commit

스크린샷 2015-05-23 오전 9.36.25

끝~

참고
http://ift.tt/1LmNtMN
http://ift.tt/1caBfeh
http://ift.tt/1JIm1uF




from WordPress http://ift.tt/1AkCfZa

JavaScript/Node.js Array(배열) 만큼 비동기함수 호출하여 값받기

tistory의 경우 다수의 blog를 생성할 수 있다. 그리고 각 blog마다 category를 만들 수 있다.

#214 issue에서는 blogList를 가지고 오면서 같이 각 blog의 category를 가지고 오고 싶었다.

그렇게 하려면 비동기함수(callback function)을 여러번(즉 blog수만큼) 호출하고, 모두가 값을 받아왔을 때 다음 단계로 넘어가는 것이 필요하다.

이번에 사용한 것이 npm async였다.

async example을 보면 async.parallel 의 first parameter에 callback function array를 넣고, second parameter에 들어온 결과를 처리할 함수를 넣으면 된다.

문제의 부분은 어떻게 내가 만든 함수로 function array를 만들 것인가 인데, 아래의 예제처럼 기존에 사용하던 모든 그대로 function(callback){}; 으로 싸서 Tasks array에 넣어버리면 된다.

full code는 아래의 링크를 참조해주세요~

BlogSync/routes/tistory.js

참고
http://ift.tt/1IUa4RR
http://ift.tt/1bR87EC




from WordPress http://ift.tt/1HzXYvw

JavaScript 문자열에서 동일한 단어 모두 바꾸기.

kakao story의 경우 줄 바꿈을 newline으로 하고 있는데, 그 글을 그대로 blogger나 tistory에 posting하면 줄바꿈이 동작하지 않는다.

그래서 한번에 newline(\n)을 break tag(<br>)으로 변경해야 하는데 이런 경우에는 RegExp와 replace를 사용하면 가능하다.

참고
http://ift.tt/1JI0hPx




from WordPress http://ift.tt/1JI0hPF

2015년 5월 20일 수요일

JointJS를 활용하여 Provider관계 그리기.

BlogSync

http://ift.tt/1FvpkDD

blog post를 다른 blog와 SNS에 posting해주는 서비스임

스크린샷 2015-05-17 18.24.28

목표

blog의 post가 어디로 갈 수 있는지 설정해주는 기능.
diagram을 사용한 직관적인 UI를 제공하자.
http://ift.tt/1Fvpif5

스크린샷 2015-05-17 18.24.09

몇가지 검토하에 JointJS로 만들게 되었음.

  • go.js
  • HighCharts
    • General drawing 예제로 ux는 비슷하게 지원은 가능하나 interactive를 지원하지 않는 것으로 보여 사용하지 않음
    • http://ift.tt/1w2Qk6f
  • JointJS

JointJS is a modern HTML 5 JavaScript library for visualization and interaction with diagrams and graphs. It can be used to create either static diagrams or, and more importantly, fully interactive diagramming tools and application builders.

코드 설명

graph와 paper를 생성시킴.

centerX,centerY를 중심으로 거리 200에 있는 circle 갯수만큼 간격을 가지고 위치시킴.

동작화면

provider 만큼 object그리기

스크린샷 2015-05-20 21.24.41

provider 하나 선택한 화면

스크린샷 2015-05-20 21.25.05

Line을 클릭할 수 있으며 누를때 마다 방향이 바뀌는데, post가 어느 방향으로 갈지 설정할 수 있게 된다.

스크린샷 2015-05-20 21.25.16

 

하면서 만난 문제

[Polygons 방식의 show/hide 처리 문제]

  • joint.js에서 최상위 element로 아래와 같이 div가 필요함
<div id="paper"></div>

  • 위의 div에 ng-show와 같은 angular.js의 directive를 사용해서 처리하면 타이밍 문제로 동작하지 않음
  • 해결 방법
    • $(‘#paper’).show(); / $(‘#paper’).hide(); 을 사용하면 정상 동작함
    • jquery를 사용하게 되는 문제가 있음(joint.js가 jquery를 사용함)

개선해야 할 부분

jquery 부분을 제거

angular.js를 쓰면서 jquery를 쓰지 않는 방향으로 진행하였으나, joint.js가 jquery기반으로 되어 있어서 추후에 빼는 방법을 모색할 필요가 있다.




from WordPress http://ift.tt/1FvplaL