Gil Kim

Android UI Thread와 Custom Thread에서의 UI 처리

Sun, 22 Apr 2018 02:02:38 +0000

봐도봐도 까먹고, 조금 안사용하면 또 까먹게 되는!!
Android에서 UI Thread가 어떻게 도는지, 그리고 직접 작성한 Custom Thread에서 UI 처리는 어떻게 하는지 알아보자.

1. UI 스레드 구성

<구성도>

Thread, Message Queue, Looper, Handler 에 대해서 알아야 한다.

1. Thread
프로세스 내에서 실행되는 세부 작업의 단위 (백그라운드 작업 처리를 해봤다면 모를 수가 없는 거죠??)

2. Message Queue
Message 혹은 Task를 담는 Queue이다. Task는 Runnable 인터페이스를 구현한 오브젝트이다.
그렇다면, 누가 Message(또는 Task)를 Message Queue에 갖다 놓는건가?? 바로 핸들러이다.

3. Handler
핸들러는 두가지 기능이 있다.
첫째: Looper에게서 받은 Message 또는 Task를 일정 시간동안 수행하는 기능
둘째: 외부 스레드로 부터 받은 메시지를 Message Queue에 집어 넣는 기능

4. Looper
Message Queue의 내용을 순차적으로 꺼내서 Handler에게 전달해 준다.

자 이제 이 4가지 요소들이 어떻게 돌고 도는건지 이해를 했는가?

2. Custom Thread에서 UI를 변경하기

우리는 무심코 Thread를 만들고 UI변경 코드를 넣었다가 런타임 에러를 만난적이 있을 것이다.
(컴파일러가 해당 에러를 찾아주지 않아서 초보자가 자주 하는 실수이다.)

android.view.ViewRootImpl$CalledFromWrongThreadException: Only the original thread that created a view hierarchy can touch its views.

왜 에러가 났을까?
에러 메시지를 확인 해보면, Main Thread에서 만 Ui 처리를 할 수 있다고 한다. 왜 그렇게 만들었을까?
스레드가 병렬처리를 한다고 해도, 같은 자원을 동시에 처리하지 않는다는 100% 보장은 없다.

하나의 TextView의 내용을 바꾸는 스레드가 여러개 있다고 해보자. 어떤 스레드가 먼저 시작하고 먼저 끝날지도 모르고, 동시에 내용을 바꿀 수 도 있고, 또는 TextView를 바꾸고 있는 사이에 바꾸라고 처리를 할 수도 있다.

그래서! 각 UI 작업들을 일렬로 대기시키고, 하나씩 실행한다면 모든 문제는 해결된다.
따라서, UI 변경 Task들은 Main Thread의 Message Queue에 순차적으로 쌓이게 된다.

UI를 바꾸고싶으면 줄을 서시오..

그렇다면!! 방법을 알아보도록 하자.

1. UI Handler를 참조하는 방법

var uiHandler = Handler()   // UI Handler (Main Handler)
Thread {
  Thread.sleep(1000) // 스레드 작업 내용이 1초 걸린다고 가정
  uiHandler.post {
    //TODO: UI 변경 작업
  }
}.start()

주의 해야 할점: Handler() 생성을 생성한 Thread 안에 하게 되면 에러가 난다!!
생성한 Thread는 Looper가 없기 때문에 Handler를 생성할 수 없다.
(추후에 HandlerThread에 대해 포스팅 하겠다..)

2. runOnUiThread 메서드 활용

Thread {
  Thread.sleep(1000) // 스레드 작업 내용이 1초 걸린다고 가정
  runOnUiThread {
    //TODO: UI 변경 작업
}
}.start()

runOnUiThread의 Document문서는 다음과 같다.

Runs the specified action on the UI thread. If the current thread is the UI thread, then the action is executed immediately. If the current thread is not the UI thread, the action is posted to the event queue of the UI thread.

현재 스레드가 UI Thread(Main Thread) 라면 바로 실행, 아니라면 EventQueue에 삽입.

3. AsyncTask 클래스 활용

class MyAsyncTask : AsyncTask<Void, Void, String>() {
    override fun doInBackground(vararg params: Void?): String {
        Thread.sleep(1000) // 스레드 작업 내용이 1초 걸린다고 가정
        return "Finish"
    }
    override fun onPostExecute(result: String?) {
        super.onPostExecute(result)
        //TODO: UI 변경 작업
    }
}

AsyncTask는 스레드 내용의 작업과 UI 작업을 하는 구역을 나누어져 있다.
onPostExecute() 함수에 UI 작업 코드를 넣으면 된다.

AsyncTask가 잴 좋아보이지?? 근데 상황봐가면서 써야함.. (ThreadPool Size Limitation)
바로 AsyncTask 생성 갯수에 제한이 있다.
예를들어 페이지 갯수를 알 수 없는 문서의 ThumbNail 이미지 추출 작업으로 각 페이지마다 AsyncTask를 생성한다면 문제가 발생할 수 있다. (왜냐? 페이지 수가 몇백이 넘어갈 수 있자나~)

마치며
뭐, 나름 Thread에 대해서 정리해 봤다.
질문이나 문제제기는 언제든 한영이니.. 사요나라

[출처]
다른 스레드에서 UI 처리하는 방법
Threading With HandlerThread in Android

Javascript에서 Prototype이란?

Sun, 22 Apr 2018 02:02:38 +0000

초급 웹 개발자의 경우는 Javascript에서 변수와 function 정도만 알고 사용하고 있을겁니다. (저도 그러했습니다.)
그런데 라이브러리를 참조하거나, 코드 검색중에 간결한 자바스크립트 문장을 발견하고, 또는 function을 선언하고 변수를 사용하는 것을 발견한 적이 있었을 것입니다.

1. Prototype의 사용 예를 살펴봅시다.

1. 외부 라이브러리를 참조해서 그 코드를 까봤더니 이런 코드도 있다.

  $.fn.backgroundCycle = function(options) {
    .. 코드 ..
  }

2. 자바스크립트 함수를 사용하는데 매개변수 자리에 넣지않는 경우도 있다.

  [1, 2, 3, 4, 5].duplicator ();

2. 자바스크립트는 객체지향이 가능한가?

필자가 주로 사용하는 자바언어는 클래스를 선언하고, 상속을 받는 객체지향 언어입니다.
자바스크립트의 function을 사용을 많이 해왔지만, 클래스를 선언하고 상속을 하는 코드를 본적이 없습니다.
하지만 결론적으로 말하자면 자바스트립트도 객체지향 언어 의 형태로 만들 수 있습니다.

3. 프로토타입이란?

프로토타입은 객체지향 언어에서 사용하는 클래스와 비슷합니다.
메모리를 할당받은 실 객체라고 보시면 됩니다.
자바에서도 최상위 객체가 Object 인것처럼, 자바스크립트에서도 최상위 객체는 Object입니다.

다음의 예제를 통해 더 자세히 알아보겠습니다.

Person이라는 함수를 선언하였습니다. 함수를 선언함과 동시에 Person 프로토타입 객체가 만들어 집니다.
Person의 프로토타입 객체에 eyes와 nose라는 변수를 선언하였습니다.
kim 이라는 Person 객체를 생성하였습니다.
kim의 __proto__ 와 Person의 prototype을 출력해보면 같은 결과가 출력됨을 확인할 수 있습니다.

구조를 살펴보면 다음과 같습니다.

Person function을 선언하면, Person프로토타입을 생성하게 됩니다.
kim도 Person 객체이기 때문에 같은 프로토타입을 가지게 됩니다. (Person 프로토타입을 상속받은 것과 비슷합니다.)
Person프로토타입의 상위 프로토타입 객체는 Object입니다. 따라서 Person 프로토타입의 __proto__ 는 Object 프로토타입을 가리키게 됩니다.

프로토타입은 생성자(constructor)를 꼭 가지고 있습니다.
Person과 Object 프로토타입은 각각 생성자를 가지고 있습니다.

4. 위의 1번에서 언급했던 Prototype의 사용 예를 설명드리겠습니다.

1. jQuery.prototype 에 backgroundCycle이라는 function을 추가 한 것입니다.
그러므로 jQuery 의 내장 함수처럼 backgroundCycle 함수를 사용할 수 있게 됩니다.

$.fn.backgroundCycle = function(options) {
  .. 코드 ..
}

2. Array.prototype 에 duplicator라는 function을 추가 한 것입니다.

Array.prototype.duplicator = function() {
  return this.concat(this);
}

[1, 2, 3, 4, 5].duplicator ();

출력 결과는 [1, 2, 3, 4, 5, 1, 2, 3, 4, 5] 입니다.

[출처]
Object prototype 이해하기
프로토타입 이해하기

Jekyll 블로그에 댓글 구현하기

Tue, 28 Nov 2017 02:02:38 +0000

Jekyll 블로그는 정적 페이지 입니다. 동적 요소인 댓글 구현을 위해 Disqus 서비스를 많이 이용합니다. Disqus 서비스를 블로그에 삽입하는 과정을 설명하려고 합니다.

1. Disqus 회원가입을 먼저 합니다.

Disqus 홈페이지에 회원가입을 하고, [Get Started]를 찾아서 클릭합니다.

2가지 선택사항 중에 [I Want to Install Disqus on my site] 를 눌러 다음 페이지로 이동합니다.

WebSite Name과 Category 를 선택하여 입력합니다. (WebSite Name 예시: user@github.io)

무료로 진행할 경우 [Continue on Basic]을 선택하여 다음으로 이동합니다.

사용하는 플랫폼을 선택합니다. (이 블로그는 Jekyll 플랫폼을 사용하였습니다.)

2. [Jekyll install instructions] 을 따라합니다.

[Jekyll install instructions]를 해석해보면 아래와 같습니다.

<1> YAML Front Matter에 comments:true를 작성합니다.

layout: android-post
title: Getting Started with Android Studio
comments: true
user-defined-variable: This is a text sentence.

<2> Disqus를 로드할 Universal Embeded Code 를 작성합니다.

<원문>
In between a {% if page.comments %} and a {% endif %} tag, copy and paste
the Universal Embed Code in the appropriate template
where you'd like Disqus to load.

<해석>
페이지 코멘트 설정이 되어있으면 (if page.comments),
Disqus를 로드할 **Universal Embeded Code** 를 붙여 넣으면 된다.

Universal Embeded Code란?

Universal Embeded Code 란 사이트에 Disqus를 로드하고 표시하는 JavaScript 코드 입니다.

Universal Embeded Code 예제 ( _includes 폴더에 작성된 disqus.html 입니다. )

 {% if page.comments %} 
<div id="disqus_thread"></div>
<script>

(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://https-tech-knot-github-io.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
 {% endif %}

참고로 이 블로그는 _includes폴더에 disqus.html파일을 따로 만들고, 사용할 post페이지에서 include하여 사용하였습니다.

출처: Universal Embed Code란

Git관리를 이렇게 해요

Tue, 28 Nov 2017 02:02:38 +0000

안녕하세요. 오늘 애기할 주제는 안드로이드 스튜디오에서 Git 연동을 어떻게 시작하면 좋을지에 대해서 설명하고자 합니다.

시작에 앞서..

일단 저희 안드로이드 개발팀은 소규모로 구성되어 있습니다. 2명이서 협업을 한 프로젝트도 있지만, 대부분은 1인 1프로젝트로 진행이 됩니다. 이전에는 Git의 사용용도를 소스 백업정도로 활용해왔습니다. Git의 여러 기능들을 활용하지 않아서 불편했던 점을 개선하고자 Git 사용법을 공부하고 전략을 세우게 되었습니다.

Git-flow를 먼저 알고 가자

Git-flow란 Git 브랜치를 효과적으로 나누고 관리하는 전략을 말합니다. 크게 5가지의 브랜치가 있습니다. 메인 브랜치로는 master, develop 이 있고, 임시 브랜치로는 feature, release, hotfix가 있습니다. 각 브랜치를 간략하게 설명해보겠습니다.

master: 최종본 브랜치
develop: 개발 중인 브랜치
feature: 기능 개발용 브랜치
release: 이번 버전 출시용 브랜치
hotfix: relase 후 발생한 버그 수정용 브랜치

아래 그림을 함께 보면 이해가 쉽습니다.

master브랜치로 시작을 하고, develop 브랜치를 만듭니다. develop 브랜치로 작업을 진행하다가 새로운 기능을 넣기위해 feature브랜치를 만들고 작업을 이어갑니다. (기능에 따라서 여러개의 feature브랜치가 생성됩니다.) 기능이 완료되면 develop 브랜치로 이동해서 feature브랜치를 merge합니다. (브랜치 이동을 checkout이라고 합니다.) 개발이 완료되고 출시를 하기위해 release브랜치를 만듭니다. QA를 진행하고, 발견된 버그 수정작업을 진행합니다. QA를 모두 통과한 후, release 브랜치를 develop 브랜치로 merge하고, 최종적으로 master 브랜치로 merge합니다.

나의 Git 전략

Git을 시작하면 master브랜치만 존재합니다. 나머지 4가지의 브랜치는 임의로 생성하고 명명한 것들입니다. (develop, feature, release, hotfix) 1인 1프로젝트이고, 개발기간이 주로 2~3개월의 기간인 소규모 프로젝트를 진행하는 입장에서 Git-flow 전략에서 제시한 5가지 브랜치를 모두 이용할 필요는 없다고 판단을 했습니다. 메인 브랜치로 mater, develop을 사용하고, 필요에 따라서 feature브랜치를 만들어 활용하는 방법을 선택하게 되었습니다.

원칙적으로 feature은 하나의 기능으로 구성되어 있지만, 필요에 따라서 같은 기능이지만 구현방법에 따라 브랜치를 나눠서 작업을 할 수도 있습니다. A라는 기능을 구현하고자 할때, 구현방법은 다양합니다. 예를들어 3가지 방법의 구현방법이 있다고 가정해보겠습니다. feature-1, feature-2, feature-3 이렇게 3가지의 feature 브랜치들을 생성하고, 각기 다른 구현방법으로 구현 작업을 진행하였습니다. 최종적으로 feature-2가 가장 좋은 구현방법이라는 결론을 내리고 feature-2를 develop로 merge시킵니다. 그리고 남아있는 3개의 feature 브랜치들은 삭제를 합니다.

다수의 개발자가 협업하는 방법

협업시 업무를 분담해서 서로 다른 기능을 개발하게 됩니다. 이런 경우 상대방의 코드를 건드리거나, 오류있는 코드를 업로드하여 프로젝트를 고장나게 하면 안됩니다. 그러므로 개발 브랜치를 나눠서 작업하거나, 애초에 공통 프로젝트에서 여러갈래의 저장소로 Fork하는 방법이 있습니다.
중요한것은 Pull Request 를 사용해야 합니다. Pull Request란 말 그대로 Pull을 요청하는 것입니다. 자신의 코드를 Pull 하기 전에, 팀원들이나 개발팀장에게 먼저 물어보고, 검토를 다 받으면 그때서야 최종 Pull과 함께 Merge를 진행합니다.

다수의 개발자가 같은 코드를 수정하여 충돌이 나는 경우도 많다.

코드의 충돌을 방지하기 위해서는 개발자들은 최대한 작업을 나누어서 진행합니다. 그래도 코드 충돌은 날 수 있습니다. 그럴경우에는 먼저 최초 Pull Request를 진행한 뒤에, 다음 Pull을 요청할 개발자가 코드를 받고 충돌 코드 영역을 직접 수정한 후에 Pull Request를 합니다. 충돌 코드 부분에 대해서는 개발팀과 협의를 해서 수정해야 할 부분과 삭제해야 할 부분을 확인하는 과정도 필요합니다.

[출처]
Git-Flow 그림
우아한형제들 기술블로그
Fork란 무엇인가