엄코딩의 개발 일지

WorkManager

엄코딩 — Wed, 12 May 2021 17:08:50 +0900

Migrating from Firebase JobDispatcher to WorkManager

WorkManager 동작 원리

Note: If your app targets Android 10 (API level 29) or above, your FirebaseJobDispatcher and GcmNetworkManager API calls will no longer work on devices running Android Marshmallow (6.0) and above. Follow the migration guides for FirebaseJobDispatcher and GcmNetworkManager for guidance on migrating. Also, see the Unifying Background Task Scheduling on Android announcement for more information regarding their deprecation.

developer.android.com/topic/libraries/architecture/workmanager

WorkManager로 작업 예약 | Android 개발자 | Android Developers

WorkManager로 작업 예약 Android Jetpack의 일부 WorkManager는 지연 가능한 비동기 작업을 쉽게 예약할 수 있는 API로, 지연 가능한 비동기 작업은 앱이 종료되거나 기기가 다시 시작되더라도 실행될 것

developer.android.com

결론은 targetSDK 30일 경우에 FirebaseJobDispatcher, GcmNetworkManager을 사용중이라면 WorkManager로 마이그레이션해야한다.

마이그레이션 방법은 간단하다. 기존에 JobService를 사용하였다면 ListenableWorker로 변경해주면된다.

코드 변경은 google docs를 보고 따라하면 충분하지만, 내부 동작이나 클래스들을 조금 더 살펴볼 필요가 있다.

WorkManager 특징

1. Job을 스케줄링 할 수 있다.

2. Job의 상태를 관찰 할 수 있다.

3. 제약조건을 두어, 해당 제약조건을 만족해야 Job이 동작할 수 있도록 설계할 수 있다.

4. Job들을 원하는 순서대로 실행되도록 chain할 수 있다.

Robust Scheduling

작업은 내부적으로 관리되는 SQLite 데이터베이스에 저장, WorkManager는 이 작업이 지속되고 기기 재부팅시 일정이 재조정되도록 한다.
절전 기능, Doze 모드 정책을 따라서 시행된다. ( 이전 도즈모드일 경우 FCM, AlarmManager 사용 )

주요 Class

WorkManager : 실행할 Job들을 enqueue하는 역할과 작업을 chain하는 역할을 담당한다.

Worker : 백그라운드에서 동작하고, Result를 반환하는 doWork 메소드를 가진다.

ListenableWorker : 메인스레드에서 동작하고, ListenableFuture<Result>를 반환하는 startWork 메소드를 가진다.

WorkRequest : Worker에 태그를 추가하거나, 특정 제약조건을 설정할지 명시한다.

Data : Worker들은 Data를 통해 데이터를 주고 받을 수 있다.

Result

Result.success() : 작업이 성공적으로 완료되었음을 의미한다.
Result.failure() : 작업이 실패로 끝났고, 다시 시작하지 않아도 됨을 의미한다.
Result.retry() : 작업이 실패로 끝났고, 다시 시작해야 함을 의미한다.

Cancel

WorkManager 에서 취소 하고자 하는 작업이 이미 완료 된 작업이라면 취소 메서드는 아무 기능도 하지 않는다. 아직 실행 전 큐에 담긴 상태라면 실행하지 않고 취소 된다.

예제 코드

WorkManager.getInstance(...)
    .beginWith(listOf(workA,workB))
    .then(workC)
    .enqueue()

위와 같은 코드를 작성한 경우 workA와 workB는 동시에 실행된다. (순차적이지 않다.) 이후 workC가 실행된다.

(workA와 workB가 성공적으로 완료되어야만 workC가 동작한다. )

우선 beginWith에 존재하는 작업들이 완료가 되면 세팅되어있던 InputMerger를 통해 데이터가 생성된다.

InputMerger는 추상화 클래스이고 이를 구현한 OverwritingInputMerger, ArrayCreatingInputMerger가 존재한다.

이름에서 느껴지듯이 전자는 결과를 overwrite하고, 후자는 배열로 합쳐준다.

OverwritingInputMerger

ArrayCreatingInputMerger

var firstReq: OneTimeWorkRequest =OneTimeWorkRequestBuilder<FirstWorker>()
        .addTag(TAG)
        .setInputMerger(ArrayCreatingInputMerger::class.java)
        .build()

InputMerger를 세팅하는 방법은 WorkerRequest를 생성할 때 위와 같은 코드를 작성하면 된다.

WorkQuery

val workQuery = WorkQuery.Builder
//                        .fromUniqueWorkNames(listOf(TAG))
                        .fromIds(listOf(firstReq.id, secondReq.id, thirdReq.id, fourthReq.id))
                        .addStates(listOf(WorkInfo.State.SUCCEEDED, WorkInfo.State.CANCELLED))
                        .build()

                val workInfos: ListenableFuture<List<WorkInfo>> = workManager.getWorkInfos(workQuery)


                for (currentWorker in workInfos.get()) {
                    Log.e("Seonoh", "Worker : " + currentWorker.tags)
                    Log.e("Seonoh", "State : " + currentWorker.state.name)
                }

WorkQuery는 일종의 query를 통해서 작업 상태를 관찰할 수 있다.

처음에는 주석으로 처리된 uniqueWorkName값을 사용해서 쿼리를 진행했는데, WorkManager가 내부적으로는 sqlite를 사용하여 내부에 저장되어서 이전 작업 목록들도 나오게 되어서 id 값을 통해 진행하게되었다.

getLiveData

workManager.getWorkInfoByIdLiveData(fourthReq.id)
            .observe(this, androidx.lifecycle.Observer{
binding.run{
stateTv.text=it.state.name
                    val progressValue =it.outputData.getInt("Progress", 0);
                    if (progressPercent < progressValue)
                        progressTv.text= progressValue.toString()

                    workerTitleTv.text=it.tags.toString()

                    if (it.outputData.getStringArray("finishedWorker") != null) {
                        for (result init.outputData.getStringArray("finishedWorker")!!) {
                            resultText += result

                        }
                    }
                    resultTv.text= resultText
}
            })

}

getWorkInfoByIdLiveData함수등을 사용하여 작업을 observe하여 변화값에 대하여 ui처리가 가능하다.

ListenableWorker

마지막으로 살펴볼 부분은 ListenableWorker이다. 구글에서는 왠만하면 Worker를 이용하기를 권장하고 있다. 하지만 콜백기반의 비동기 API를 사용하는 경우 ListenableWorker를 사용해야한다.

developer.android.com/topic/libraries/architecture/workmanager/advanced/listenableworker?hl=ko#kotlin

ListenableWorker의 스레딩 | Android 개발자 | Android Developers

특정 상황에서는 맞춤설정 스레딩 전략을 제공해야 합니다. 예를 들어 콜백 기반의 비동기 작업을 처리해야 하는 경우입니다. 이때는 차단 방식으로 작업을 할 수 없기 때문에 Worker를 사용할 수

developer.android.com

우선 지금까지 학습 내용을 살펴보자.

class CallbackWorker(
        context: Context,
        params: WorkerParameters
) : ListenableWorker(context, params) {
    override fun startWork(): ListenableFuture<Result> {
        return CallbackToFutureAdapter.getFuture { completer ->
            val callback = object : Callback {
                var successes = 0

                override fun onFailure(call: Call, e: IOException) {
                    completer.setException(e)
                }

                override fun onResponse(call: Call, response: Response) {
                    successes++
                    if (successes == 100) {
                        completer.set(Result.success())
                    }
                }
            }

            repeat(100) {
                downloadAsynchronously("https://example.com", callback)
            }

            callback
        }
    }
}

getFuture() 함수에서 내부적으로 동작하는 기능이 많다.

public static <T> ListenableFuture<T> getFuture(@NonNull Resolver<T> callback) {
    Completer<T> completer = new Completer<>();
    SafeFuture<T> safeFuture = new SafeFuture<>(completer);
    completer.future = safeFuture;
    // Set something as the tag, so that we can hopefully identify the call site from the
    // toString()
    // of the future. Retaining the instance could potentially cause a leak (if it's an inner
    // class)
    // and it's probably a lambda anyway so retaining the class provides just as much
    // information.
    completer.tag = callback.getClass();
    // Start timeout before invoking the callback
    final Object tag;
    try {
        tag = callback.attachCompleter(completer);
        if (tag != null) {
            completer.tag = tag;
        }
    } catch (Exception e) {
        safeFuture.setException(e);
    }
    return safeFuture;
}

디버그를 통해 내부를 조금만 더 살펴보자.

Resolver

Resolver은 callback object를 만들고, 트리거하는데 요구되는 작업을 시작한다.

Object attachCompleter(@NonNull Completer<T> completer) throws Exception

콜백 객체를 생성하고, 이를 트리거 하는 작업을 설정한다.

결국 콜백오는 시점에 completer를 통해 set(RESULT)를 하는것이다.

React Native Version Upgrade

엄코딩 — Wed, 16 Dec 2020 11:31:01 +0900

우선 이번 프로젝트의 react native version은 0.61.5이고, 0.63.4 버전으로 업그레이드할 것이다.

업데이트하게 된 계기는... 0.61.5 버전에서 ios 이미지들이 보이지 않는 이슈가 존재했는데, 대안으로 react-native-fix-image를 사용했다. 하지만 해당 버그가 해결된 버전이 나온 터라 언제까지 이 라이브러리에 의존할 수 없었다.

최근 들어서 이 프로젝트들을 하나씩 버전을 올리고 있다.

벌써 3번째...

앞에 두번째 모두 다음 사이트를 참고했다. react native upgrade helper

Upgrade React Native applications

react-native-community.github.io

그러다 보니 이 부분까지 바꿔줘야 하는 건가?라는 생각이 많이 들었다. 하지만 그 부분을 하나하나 테스트해보지 못하는 게 현실...

그래서 이번에는 다른 방법이 없을까 생각하면서 자료를 찾다가 cli를 통한 버전 업그레이드 방법이 생각났다.

( 이전에 사용하지 않았던 이유는 뭔지 모를 불안감 때문이었다. )

reactnative.dev/docs/upgrading

Upgrading to new React Native versions · React Native

Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it straightforward for you.

reactnative.dev

1. react, react-native 버전 업그레이드

첫번째로 package.json에 있는 react, react-native 버전을 올리고자 하는 버전으로 설정해야 한다.

yarn add react-native@{{REACT_NATIVE_UPGRADE_VERSION}}
yarn add react@{{REACT_UPGRADE_VERSION}}

본인의 경우 기존 react와 react-native 버전은 아래와 같았다.

"react": "16.9.0",
"react-native": "0.61.5",

업그레이드할 버전은 아래와 같다.

"react": "16.13.1",
"react-native": "0.63.4",

2. npx react-native upgrade

두 번째로 진행한 부분은 npx react-native upgrade 명령어를 통해 변경된 사항을 적용시키는 것이다.

해당 명령어를 수행함으로써 새로운 파일이 있으면 생성되고, 동일한 파일은 건너뛰게 된다.

또한 기존 프로젝트와 업데이트할 버전의 템플릿이 충돌되는 경우 git conflict와 같이 파일을 유지하거나 덮어쓸 수 있게 된다.

3. pod install 오류 해결

과정상 여기까지 하고 실행하면 될 것 같아서, 큰 기대를 하고 실행을 해보았다. 역시나 pod install에서 오류가 났었다.

jscallinvoker error

위 오류는 jscallinvoker가 해당 버전에서 duplicate 되면서 찾을 수 없다는 에러였는데 PodFile에서 간단하게 해결할 수 있었다.

기존 pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon" 구문을 다음과 같이 경로를 재지정해주었다. pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"

pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon" (X)

pod 'React-callinvoker', :path => "../node_modules/react-native/ReactCommon/callinvoker" (O)

4. retry...

위 오류를 해결하고 다시 pod install을 진행해보았더니 무수히 많은 에러와 함께 실행되지 않았다.

이 부분은 이전 버전 업데이트할 당시에 많이 봐왔던 에러들이었다. Podfile-lock과 관련된 에러였다.

package.json, package-lock.json, Podfile 등을 지우는 스크립트를 지정하여 사용했었는데 Podfile-lock은 빠져있었다. package-lock이나 Podfile.lock과 관련돼서 공부가 더 필요하겠지만 우선 간단히 정리했던 내용이 있으니 링크를 참고하면 좋을 것 같다.

여기까지 진행하면 ios에서는 잘 실행되었다. 물론 위에서 언급했던 react-native-fix-image를 이제는 더이상 사용하지 않아도 이미지 이슈는 해결되었다.

5. Android error ( code-push error )

하지만 이번에는 안드로이드에서 오류가 발생했다.

프로젝트에서 code-push를 사용하고 있었는데 관련 오류였다.

What went wrong: Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.

Could not resolve all task dependencies for configuration ':app:debugCompileClasspath'. Could not resolve project :react-native-code-push. Required by: project :app Unable to find a matching configuration of project :react-native-code-push:

None of the consumable configurations have attributes.

react-native-code-push의 config 매칭을 할 수 없다... 는 에러인데 마찬가지로 이전 노가다로 버전을 올렸을 때 겪었던 이슈였다.

android 디렉토리에서 settings.gradle에 다음 구문을 추가하면 된다.

include ':app', ':react-native-code-push' 
project(':react-native-code-push').projectDir =file('../node_modules/react-native-code-push/android/app')

혹시라도 위 문제가 아니라 버전을 올렸는데 갑자기 code-push 관련 오류가 보이는 것 같다면 링크를 확인해보면 code-push버전과 react-native-version이 매칭 되는지 확인해보길 바란다.

react-native-code-push version info

3번째 업그레이드는 비교적 수월하게 진행한 것 같다. 이전에 정말 엄청나게 삽질하면서 했던 일들이 정말 당황스러울 수 있는 상황에서도 침착함을 유지해줄 수 있었던 것 같았다.

이제 react-native version 편하게 올리자.

pod Install & pod update 무슨 차이가 있을까?

엄코딩 — Wed, 14 Oct 2020 18:19:29 +0900

React Native로 android / ios 환경을 개발하면서 아무 생각 없이 pod install & pod update를 남발하고 있었다.

그러던중 최근에 xcode 12.0.1 ARC Semantic Issue Group 관련 이슈를 겪었다.

요약하자면 프로젝트에서 Weibo SDK를 사용하고 있는데 Weibo SDK 함수를 불러오지 못하는 문제였다.

하지만, 협업하고 있는 개발자분 작업환경에서는 잘 동작했다.... 그래서 clean-install, rm -rf ./node_modules, npm install, pod install, pod update를 한참동안이나 남발한 것 같다.

결국에는 이게 문제가 아니었음을 알게된건 한참동안의 삽질 후였다...

pod install

React Native를 시작하면서 ios 작업환경을 처음 겪게 되었고, xcode를 사용하게 되었다. ( 내 개발 인생에 ios는 없을 것만 같았다. )

그리고 개발을 하면서 Library를 사용하게되었고 자연스럽게 Podfile의 존재 이유를 알게되었다.

내가 쉽게 이해한 바로는 Podfile을 통해 Library를 사용할 수 있다. Podfile에 라이브러리 정보를 입력하고, 아래 명령어를 입력하면 해당 라이브러리를 다운로드 받게된다.

pod install

pod install을 사용하면 이를 Podfile.lock에서 기록해두는데 이 부분에서 중요한점은 해당 파일에 열거된 lib들에 대해서는 지정된 버전만 다운로드 하게된다는 점 이다. ( 이 부분에 있어서 pod update와 차이가 난다. )

** 더 자세하게 알고 싶다면 COCOAPODS 공식 링크를 확인해보자.

그렇다면 Pod update는 어떻게 다를까?

pod update

pod update

해당 명령어를 사용하게되면 Podfile.lock을 참조하지 않고 최신 버전으로 업데이트하게 된다. 즉, pod update 명령을 실행하면 모든 pod들 library version들을 최신 버전으로 업데이트를 하게 된다.

** 더 자세하게 알고 싶다면 COCOAPODS 공식 링크를 확인해보자.

결론

결국 삽질의 이유는 버전차이였다. 단순하게 package.json에 리스트된 것들이 전부일 줄 알았고, Podfile에 있는 것들만 install면 될 줄 알았다. 하지만 PodFile.lock의 중요성을 알게 되었고, 평소 협업시 PodFile.lock은 공유하지 않았다.

협업하시는 개발자분에게 PodFile.lock를 공유드렸고, 단번에 해결되었다...

정말 단순한 문제로 발생한 반나절 삽질이었는데, 역시 삽질을 통해 배워서인지 뿌듯하고, 다시는 이런 삽질을 안할것만 같은 자신감이 든다.

Apple Login Email 이슈

엄코딩 — Fri, 3 Jul 2020 16:35:26 +0900

React Native 환경에서 개발하고, Apple Login 기능이 필요한 상황이라면 RN Apple Login Library를 사용하는 것이 상당히 편하다는 것을 느낄 수 있다.

최근에 Apple Login 작업을 진행하면서 겪었던 이슈와 해결 방법에 대해서 알아보자.

문제 상황

일단 마케팅 용도로 이메일 정보가 필요한 상황에서 문제는 시작되었다.

우선 애플로그인시 나타나는 화면을 살펴보자.

위 이미지처럼 애플로그인을 진행하면 나의 이메일 공유하기, 나의 이메일 가리기 두가지 항목이 존재한다.

이메일을 공유한다면 유저의 실제 이메일 정보 값을 받아올 수 있었고, 가린다면 나름 암호화된 메일 주소를 받게 된다.

여기까지는 순조로웠다. 하지만.

애플 로그인은 보안상 문제로 처음 로그인시에만 email값을 주게된다. 그 이후로는 null로 온다.

하지만 프로젝트의 로직상 애플 로그인을 진행하고, 추가로 입력해야 하는 부분까지 진행해야 회원가입이 된다.

여기서 고민이 되었다. 이메일 정보를 로컬에 저장하는게 좋을지, 서버에서 저장해두는게 좋을지.

로컬에 저장한다면 문제점이 생긴다.

앱을 삭제했을때. 구체적으로 말해보자면, 앱을 켜고, 애플로그인을 하고, 추가입력화면으로 진입했을 때, 추가 입력을 하지 않고 앱을 끈 경우 로컬에 이메일을 저장했다면 문제없다. 하지만 앱을 삭제한다면? 문제는 여기서부터 생겨났다.

애플은 보안상( 또 보안상 ) Apple Login을 단 한번이라도 진행한 앱을 저장하고있다. ( 애플폰에서 )

이를 확인해볼 수 있는 방법은 아래와 같다.

설정 -> 자신의 Apple 프로필 클릭 -> 암호 및 보안 -> 내 Apple ID를 사용하는 앱

위와 같은 경로로 진입해본다면 Apple ID를 사용했던 앱들을 볼 수 있다. 이는 앱을 지워도 이 목록은 지워지지 않는다. 사용자가 직접 지워야 지워진다...만약 사용자가 직접 지운다면 Email 값을 받을 수 있지만....너무 좋겠지만...

결국 애플로그인을 한번이라도 했다면 email 정보는 저장해두어야 한다. 그렇지 않으면 null값 만을 받을 수 있기 때문에 해당 정보를 사용하기가 어렵다.

그래서 검색 또 검색을 한 결과 해당 결과값을 디코딩하면 이메일 정보를 확인할 수 있다는 정보를 알게되었다.

바로 jwt에 접속해서 진행해보았다.

결과값으로 받은 identityToken을 넣어보니 email 정보를 얻을 수 있었다.

( 최대한 가리면서 어떤 유형의 값인지를 보여주고 싶다보니.. 이미지가 좀 난해한 점 이해부탁드립니다. )

토큰속에 이메일 정보가 있었다.

서버측에서 이 로직을 진행하게 되면 해결!!! ( 기존 서버에서 이미 해당 로직으로 작업하고 있어서 문제될 부분이 없었다. )

Apple Login

엄코딩 — Fri, 3 Jul 2020 15:47:45 +0900

갑자기 왜? Apple Login을 사용해야 하는가

바야흐로...

2019년 09월 12일 애플 뉴스에 따르면 신규앱은 당일부터, 기존의 앱과 업데이트는 2020년 4월 중으로 해당 가이드라인 ( Apple 로그인 관련 )을 따라야 한다고 기재되어 있다.

실제 본인이 참여한 프로젝트에서 애플 로그인 관련해서 2020년 7월 2일 심사에서 거부를 당했다.

실제 IOS 앱 심사를 경험한지는 얼마되지 않았지만, 리젝 사유는 매번 천차만별인 것 같다.

결론은, 앱에서 사용자의 기본 계정을 설정 또는 인증하기 위해 타사 또는 소셜 로그인 서비스 ( facebook, google, wechat 등 )을 사용하는 앱은 Apple 로그인 역시 제공해야 한다. ( 자세한 사항은 링크(4.8) 참조. )

Setting Apple Login

이 포스팅은 애플 개발자로 등록이 되어있거나, 팀에 속해있을 경우를 전제로 두고 작업을 진행한다.

본인은 React Native환경에서 다음과 같은 오류를 보게되어 이 작업을 시작했다.

com.apple.AuthenticationServices.AuthorizationError 오류 1000

1. Setting Identifiers ( App ID 등록 )

우선 애플 개발자 사이트 https://developer.apple.com/ 접속한다.

사이트에 접속해서 우측 상단 Account에 접속하면 좌측 네비게이션 바에서 Certificates, Ids & Profiles 로 접속한다.

다시 좌측에서 Identifiers 클릭.

위와 같은 이미지가 보이는데 +를 클릭하여 App ID를 등록한다.

App IDs 선택

위 항목들을 채우고 아래로 스크롤하여 Sign In with Apple을 클릭한다.

선택했다면 Edit을 누르고 나머지 설정을 진행한다.

Enable as a primary App ID를 선택했다면 저장하고 다음 단계를 진행하면 된다. ( App ID 등록 끝 )

2. Key 생성

Identifier와 같이 + 버튼을 누른다.

Sing in with Apple을 선택하고 Configure을 클릭한다.

그리고 해당 App ID를 선택한다.

여기까지 진행하면 키를 다운 받을 수 있는 화면을 볼 수 있다. 키는 다운로드해서 잘 보관하면 된다. 이페이지를 나가면 재다운로드 할 수 없다고 하여 일단 다운로드! ( 아직 써보지는 않았음. )

이렇게 진행하면 App에서는 문제없이 Apple Login 기능을 사용할 수 있다.

본인은 React Native에서 애플 로그인 기능 작업을 진행했고, RN 애플 로그인 라이브러리를 사용했다.

참고사항 : https://spiralmoon.tistory.com/entry/Apple-%EC%95%A0%ED%94%8C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-Sign-In-with-Apple

React Native Hook

엄코딩 — Fri, 5 Jun 2020 11:17:49 +0900

React Native Hook을 사용하게 된 가장 큰 이유는 Hook을 학습하게 된 가장 큰 이유는 Class를 쓰지 않고 function에서 state를 관리할 수 있기 때문이다. 이렇게 된다면 함수형 컴포넌트를 사용하면서, '독립적으로 state를 관리할 수 있게 되고, 테스트가 편해질 것' 이라고 생각했다.

1. 함수형 컴포넌트 상태 관리 ( useState )

Hook을 사용하기 전에는 클래스단에서 state를 선언하고 가감연산 부분에서 setState를 해주었을 것이다. 하지만 Hook을 사용하게 된다면 이제는 함수형 컴포넌트에서도 state를 쉽게 관리할 수 있다.

Counter(): JSX.Element {

    const [count, setCount] = useState(0);
    
    const onCountUp = () => {
      setCount(count + 1);
    };
    
    const onCountDown = () => {
      setCount(count - 1);
    };
    
    return (
      <View style={styles.container}>
        <View style={styles.touchArea}>
          <TouchableOpacity style={styles.upContainer} onPress={onCountUp}>
            <CustomText style={styles.title}>UP</CustomText>
          </TouchableOpacity>
          <TouchableOpacity style={styles.downContainer} onPress={onCountDown}>
            <CustomText style={styles.title}>DOWN</CustomText>
          </TouchableOpacity>
        </View>

        <View style={styles.countContainer}>
          <CustomText style={styles.title}>{count}</CustomText>
        </View>
      </View>
    );
  }

위 코드는 Hook을 설명할 때 많이 사용되는 가감연산만을 구현하고 있다. useState는 현재 state값과 state를 업데이트 할 수 있는 함수를 반환하고 초기값을 받는다. 즉, 클래스로 작성했을때에는 아래 코드 느낌이었을 것이다.

this.state = { count : 0 }

 setCount(value : number){
    this.setState(
      count : value
    )
  }

하지만 위 절차를 줄여주고, 함수내에서 state를 쉽게 관리할 수 있다는 점이 Hook의 장점이다.

2. 함수형 컴포넌트 라이프 사이클 ( useEffect )

useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록하는 Hook이다.

 useEffect(() => {
      showLog('렌더링');
      showLog('count : ' + count);
    });

위 코드는 함수형 컴포넌트가 렌더링 될 때 실행되는 코드다. 만약 마운트 될 때만 실행하고 싶다면 useEffect 함수의 2번째 인자로 비어있는 배열을 넣어주면 된다.

 useEffect(() => {
      showLog('렌더링 완료.');
      showLog('count : ' + count);
    }, []);

위 코드는 마운트 됬을 때만 동작하게된다.

만약 특정 값이 변할때만 실행하고 싶은 코드가 있다면 아래 코드처럼 특정 값을 배열에 넣어주면 된다.

 useEffect(() => {
      showLog('렌더링 완료.');
      showLog('count : ' + count);
    }, [count]);

useEffect함수는 기본적으로 렌더링 된 후에 실행되고, 두번째 파라미터에 따라 실행 조건이 변한다.

만약 컴포넌트가 언마운트 되기 전, 업데이트 되기 직전에 특정 작업을 수행하고 싶다면 아래 코드처럼 작성하면 된다.

 useEffect(() => {
      showLog('렌더링 완료.');
      showLog('count : ' + count);
      return () => {
        console.log('cleanup');
      };
    });

결론 진작 Hook을 사용했어야 했다.

참고자료 : https://velog.io/@velopert/react-hooks

SDK location not found

엄코딩 — Tue, 17 Mar 2020 11:51:32 +0900

협업을 진행하며 다음과 같은 에러 문구를 보게되었다.

SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file at '~/android/local.properties'.

문구 그대로 SDK 위치를 찾을 수 없는 것이 문제의 원인이었다.

React Native에서는 다음과 같은 방법으로 이 문제를 해결할 수 있다.

1. React Native 프로젝트에서 android 디렉토리로 접근한다.

2. android 디렉토리에서 local.properties 파일을 생성한다.

3. 아래 코드를 입력한다.

For windows users

sdk.dir=C\:\\Users\\UserName\\AppData\\Local\\Android\\sdk

For Mac users

sdk.dir = /Users/USERNAME/Library/Android/sdk

ESLint, Prettier 함께 사용하기.

엄코딩 — Wed, 18 Dec 2019 18:35:27 +0900

VSCode를 이용하여 react-native 프로젝트를 진행하던 시기, 회사에서는 commit - create pull request - review - merge .. 의 과정으로 협업을 진행하고 있었다.

commit과 review 과정을 겪으면서 개발자마다 코딩 스타일이 다르고, 이를 구두 또는 일반 문서로 합일화 하는 것은 어렵다고 생각했다.

그래서 코딩 스타일을 하나의 스타일로 규제할 수는 없을까 라는 생각을 시초로 EsLint, Prettier에 접근하게 되었다.

스타트업에서의 기술부채가 늘어가는 것은 당연한 것이라고 생각하고 있고, 기술부채를 꾸준히 지워가는게 중요하다고 생각한다. 그래서 ESLint를 적용해야겠다.

ESLint

ESLint is designed to be completely configurable, meaning you can turn off every rule and run only with basic syntax validation, or mix and match the bundled rules and your custom rules to make ESLint perfect for your project.

ESLint는 쉽게 말해서 javascript에서 코딩 컨벤션과 에러를 체크해주는 프로그램이다. 독립적으로 또는 IDE 플러그인으로도 존재한다.

Prettier

~~프리티어....? 아마존 잠깐 했을때 프리티어...?~~

An opinionated code formatter
Supports many language
Integrates wirh most editors
Has few options

음... 한마디로 많은 언어를 지원해주는 코드 포매터다.

ESLint, Prettier 같이 사용하는 이유

처음에 들었던 생각은 'ESLint, Prettier 둘 중에 하나만 사용하면 되는 걸.. 왜 두가지를 함께 사용해야할까? ' 였다.

각각의 doc와 구글링을 통해서 내린 결론은 서로의 부족한점을 매꿔주기 위해서 함께 사용하는 것이다.

ESLint는 code quality, Prettier은 code style위주라고 생각하면된다.

예를 들어서 ESLint는 사용하지 않는 변수, 전역변수의 사용 등을 알려준다면 Prettier은 한줄의 최대길이, ' 과 " 등을 신경써준다.

ESLint 모듈 설치

$ npm install eslint --save-dev

Prettier 모듈 설치

npm install prettier --save-dev --save-exact

eslint-plugin-react-native 모듈 설치

npm install eslint-plugin-react-native --save-dev

react-native 개발시 사용하면 좋다.

eslint-config-prettier 모듈 설치

npm install eslint-config-prettier --save-dev

eslint와 prettier를 함께 사용하는 경우 불필요하거나 충돌 위험이 있는 eslint 설정을 해제하는 모듈이다.

VS Code 세팅

설치가 완료되면 setting창에 들어가서 오른쪽 상단 아이콘을 통해 settings.json 접근한다.

"editor.formatOnSave": true,

"javascript.format.enable": false,

~~"prettier.eslintIntegration": true ( 포스팅 시간 기준 2019.12.18 deprecate되어서 삭제 )~~

위 코드를 settings.json 에 추가하면 설정파일만 생성해주면 된다.

설정파일 생성

프로젝트의 루트레벨에서 .eslintrc.json을 생성한 후에, 아래 코드를 작성하면된다.

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended",
    "plugin:react/recommended",
    "prettier",
    "prettier/react"
  ],
  "plugins": ["prettier", "react"],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "rules": {
    "prettier/prettier": [
      "error",
      {},
      {
        "usePrettierrc": false
      }
    ]
  }
}

위 코드를 적용하게 되면, Prettier의 규칙을 ESLint의 규칙으로 사용하게 된다.

그리고 아래 코드는 Prettier의 규칙 설정을 무시하겠다는 뜻이다.

"usePrettierrc": false

코딩 스타일을 사용자화 하고 싶은 경우에 ESLint 규칙은 rules레벨에서, prettier 규칙은 rules~~prettier/prettier레벨에서 변경하면 된다.

React Native Navigation undefined is not an object error

엄코딩 — Wed, 20 Nov 2019 11:06:49 +0900

React Native( 이하 RN ) 개발을 시작하면서 처음 난관에 부딫쳤던 에러가 있다.

개발해야 하는 피쳐는 아래와 같다.

rootView안에 FlatList에서 사용하는 CustomView가 존재한다. 이 CustomView에 TouchableOpacity를 씌우고 onPress시에

detail 화면으로 이동해야한다. 이전까지 너무 쉬웠던 navigate였기에 방심했던걸까..

우선 에러는 다음과 같다.

undefined is not an object... stackoverflow를 열심히 뒤져 보아도 모두 같은 내용일 뿐 해결되지 않았다. ( 너무 기본이라서 나오지 않았던 걸까...? )

constructor에 bind하는 방법이며, rootView에서 navigation을 넘겨주는 방법이며... 다 내가 찾던 방법이 아니었다.

그래서 ReactNative Document를 차근차근 읽어보던중 해법을 찾았다.

this.props.navigation

It's important to highlight the navigation prop is not passed in to all components; only screen components receive this prop automatically! React Navigation doesn't do anything magic here. For example, if you were to define a MyBackButton component and render it as a child of a screen component, you would not be able to access the navigation prop on it. If, however, you wish to access the navigation prop in any of your components, you may use the withNavigation HOC.

- 루트를 설정할 때 연결했었던 Screen에는 자동으로 navigation props가 전달된다.

- 직접적으로 설정되어 있지 않은 경우 react-navigation이 제공해주는 HOC 컴포넌트를 인자로 호출해서 직접 주입해줘야 한다.

import { withNavigation } from 'react-navigation';

class SubComponent extends React.Component {
	...
}

export default withNavigation(SubComponent);

진행하고 있던 프로젝트에서 FlatList의 ItemView를 클릭시 DetailView로 이동했어야 했는데, 해당 ItemView는 SubComponent였지만 위 코드처럼 HOC 컴포넌트를 인자로 호출해서 직접 주입하지 않았다.

그래서 에러가 발생했었고, 위 코드처럼 HOC 컴포넌트를 인자로 호출해서 직접 주입해주니 WORKING !!

안드로이드 앱 예약 게시

엄코딩 — Wed, 13 Nov 2019 14:42:21 +0900

사내에서 예약 게시기능을 처음으로 사용해보면서 이게 될까 라는 의문을 많이 가졌습니다.

' 이렇게만 하면 된다고..? ' 라는 생각 이 글 보고 지워버리셨으면 좋겠습니다.

우선 예약 게시 기능을 이용하기 전에 알아 두어야할 중요한 사실은 예약 게시 기능은 업데이트에만 사용할 수 있고, 앱을 처음 게시할 때는 사용할 수 없는 기능입니다. 또한 인앱 상품 페이지를 변경하거나, 가격을 업데이트하거나 '이번 버전의 새로운 기능' 섹션에 출시 노트를 추가한 경우 변경사항이 즉시 게시됩니다.

보다 자세한 사항은 Play Console 고객센터에서 확인하실 수 있습니다.

Google Play Console 설정

Google Play Console

Google Play Console -> 앱정보 -> 스토어 등록정보 및 가격 및 배포 등 이 섹션에 있는 여러 페이지에서 예약 게시 설정을 할 수 있습니다.

해당 섹션내 여러 페이지에 들어가셔서 하단에 보시면 예약 게시 토글 버튼이 있습니다. 이를 활성화 시켜 주시면 됩니다.

앱 업로드

예약 게시를 활성화 시킨 다음에는, 평상시처럼 앱 업데이트를 해주면됩니다. Google Play Console에 들어가서 앱 버전에서 업로드하고 노트적고 등 평상시처럼!!!

예약 게시

업데이트를 진행하시면서 느끼셨겠지만 페이지 상단에 이전에는 보이지 않았던 HeaderView가 보입니다.

변경 로그 보기를 클릭하면 위와 같은 화면을 보실 수 있습니다.

저의 경우 2시간정도 지나고나서 예약 게시 출시 가능 알람을 받았습니다.

그리고나서 Google Play Console 프로덕션 트렉에서 아래와 같은 화면을 볼 수 있습니다.

앱 업데이트 검토가 끝나기전에는 비활성화 되어있던 게시 버튼이 활성화 되어있고, 클릭하고 싶게? 변했습니다.

이제 원하는 시간에 클릭을 해주면 예약 게시 끝입니다.

읽어주셔서 감사합니다.

React-Native Navigation ( 화면 전환 ) 시작하기

엄코딩 — Tue, 24 Sep 2019 15:51:22 +0900

Navigation

React-Native에서 stack navigator는 앱이 화면간에 전환 및 탐색 기록을 관리 할 수 있는 방법을 제공한다.

앱에서 stack navigator를 하나만 사용하는 경우 웹 브라우저가 탐색 상태를 처리하는 방식과 개념적으로 유사하다.

사용자가 앱과 상호 작용할 때 앱이 탐색 stack에서 항목을 push 및 pop하여 사용자에게 다른 화면이 표시된다.

React-Native stack navigator와 웹 브라우저의 차이점은 React Navigation의 stack navigator는 스택의 경로 사이를 탐색 할 때 Android, IOS에서 예상되는 제스처 및 애니메이션을 제공한다.

환경 설정

1. 우선 expo-cli를 설치한다.

npm i -g expo-cli

2. expo에서 react-navigation, react-native-gesture-handler, react-native-reanimated, react-native-screens, react-navigation-stack 를 설치한다.

expo install
	 react-navigation
	 react-native-gesture-handler 
	 react-native-reanimated 
 	 react-native-screens
     react-navigation-stack

3. App,js 작성

import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Seonoh Home Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
});

export default createAppContainer(AppNavigator);

위 코드를 실행한 결과는 다음과 같다.

하지만 텍스트만 띄우는걸 하려고한게 아니다!!!

우리의 목적은 화면전환!

App.js를 수정해야한다.

App.js에서 Button을 추가하고 onPress function을 정의한다.

그리고 navigator에 DetailsScreen 추가하고 초기 화면을 Home으로 지정해주는 작업을 하면된다.

import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Seonoh Home Screen</Text>
        <Button
          title = 'Go detail screen'
          onPress = {()=>this.props.navigation.navigate('Details')}/>
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Seonoh Detail Screen</Text>
        <Button
          title = 'Go Home screen'
          onPress = {()=>this.props.navigation.navigate('Home')}/>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen
  },
  {
    initialRouteName: 'Home',
  }
);

export default createAppContainer(AppNavigator);

위 코드에서 중요한 부분은 this.props.navigation.navigate('Home') 코드이다.

위 코드에서는 navigate함수를 이용했는데, 외에도 push함수가 있다. 네이밍에서 느껴지듯이 navigate함수는 찾아가는 느낌이고, push는 추가해주는 느낌이다. 어떻게 다를지 감이 온다.

navigate함수를 사용해서 Home화면에서 ~navigate('Home')하면 어떻게 될까? ( 화면이 그대로 유지된다. )

하지만 push를 한다면? ( 'Home' ) 화면이 하나 더 뜬다. 그리고 goBack()함수를 이용한다면 stack에서 하나씩 pop되면서 제거된다.

실행결과

TypeScript 적용하기

엄코딩 — Mon, 23 Sep 2019 16:03:49 +0900

포스팅을 시작하기 전 저의 경우 회사내에서 앞으로 코드리뷰 과정을 진행하기 위해 기존 보기 힘들었던 자바스크립트 코드에 TypeScript를 적용하기로 했습니다.

기존 안드로이드 개발자라서 타입 명시를 할 수 없었던(?) 자바스크립트가 상당히 어색했는데, 이번 기회에 TypeScript를 바로 적용해보기로 했습니다.

TypeScript를 적용한 이유를 설명드리자면, 안드로이드 개발시 혼자 코드를 작성하더라도 타입명시를 꼭 하는 편입니다.

혼자 개발하는 경우에도 작성하다가 이 변수의 타입이 뭐였더라 찾는 경우가 많았습니다. 하물며 대규모 인원이 투입된 프로젝트라면... 더 심하겠죠. 그래서 적용해보기로 했습니다. ( 정말 쉽습니다. 해보세요! )

적용하기전에 TypeScript '너무 생소한데... 써도되나..?' '언제 없어질지 모르는데..' 생각이 들어서 검색해봤습니다.

아래 이미지는 2019.9.23 기준입니다.

TypeScript란?

TypeScript는 Microsoft에 의해 개발/관리되고 있는 오픈소스 프로그래밍 언어입니다.

어플리케이션 규모가 커지면서 분업화되고, 모듈별 서로다른 팀에서 개발을 진행하다보면 자바스크립트가 불편한 경우가 많습니다.

( 실제로 명시되어 있는 타입이 아니다보니 작성한지 꾀나 오래된 코드의 경우 기대값과 다른 값들을 넣을때가 많았습니다. )

안드로이드 개발자 입장에서 TypeScript는 정말 당연한 것이었습니다. ( 당연한게 없이 개발하다니... 자스 개발자분들 존경을 표합니다. )

TypeScript는 JavaScript + 타입 끝!!

TypeScript 설치

TypeScript를 설치하는 방법은 크게 두가지입니다.

1. NPM을 통해 (Node.js 패키지 매니저)

2. TypeScript의 Visual Studio 플러그인 설치

npm install -g -typescript 명령어를 통해 TypeScript를 설치합니다.

.ts 파일 생성

단지 확장자만 .ts 일뿐 코드는 완전 JavaScript입니다. 저는 test.ts 파일을 만들고 다음 코드를 작성했습니다.

function greeter(name : string){
  return 'Hello '+name
}

greeter(1)

작성하면서 보셨겠지만 greeter(1) 1아래에 빨간줄이 뜨는 것을 확인하실 수 있습니다.

드디어 자바스크립트에서도!!

function greeter(name : string) {
    return 'Hello ' + name;
}
greeter("seonoh");

위와 같은 코드를 test.ts 파일에 작성하고 tsc test.ts 명령어를 입력하면 test.js파일이 생기는 것을 확인할 수 있습니다.

참고자료 : TypeScript 공식문서

플렉스박스는 새로운 레이아웃 표준이다

엄코딩 — Mon, 23 Sep 2019 15:23:40 +0900

플렉스박스( flex box )란?

CSS에 유연한 박스 레이아웃 모델이 소개되기 전에는 레이아웃을 만들 때 에러를 유발할 것 같은 해킹스러운 다양한 방법이 존재했다.

플렉스 박스는 레이아웃이 동작하도록 만들기 위해 일반적으로 제공해야 하는 많은 프로퍼티를 추상화하여 이를 개선했다.

플렉스 박스는 이름에서 볼 수 있듯이 유연한 박스 모델이다. 컨테이너 역할을 하는 박스가 있으며 박스 내에는 자식 요소들이 있다.

( 이 부분만 놓고 보자면 안드로이드 상에서 LinearLayout이 생각났는데 선형 레이아웃보다는 flex라는 이름에서 더 유연할 것이라는 생각을 해볼 수 있다. )

플렉스박스 개념에 대한 상세정보는 링크를 통해 확인할 수 있다.

플렉스 박스 styles.js 정의

간단한 예제를 통해 플렉스박스를 살펴보자.

create-react-native-app my-app을 톨해 생성된 패키지에 styles.js를 생성한 뒤 다음 코드를 작성한다.

import { StyleSheet } from 'react-native'

const styles = StyleSheet.create({
    container : {
        //플렉스박스 레이아웃 모델 활성화
        flex : 1,
        //간격을 다른 자식을 참고해 정의한다.
        justifyContent : 'space-around',
        //자식을 컨테이너의 중앙에 맞춘다.
        alignItems : 'center',
        backgroundColor : 'ghostwhite',
    },
    box : {
        width : 100,
        height : 100,
        justifyContent : 'center',
        alignItems : 'center',
        backgroundColor : 'lightgray',
    },
    boxText : {
        color : 'darkslategray',
        fontWeight : 'bold',
    },
});

export default styles;

플렉스박스 렌더링

App.js에서 다음 작업을 진행한다.

import React from 'react';
import{
  Text,
  View
} from 'react-native';
import styles from './styles'

const StyleSheets = () => (
  <View style = {styles.container}>
    <View style = {styles.box}>        
      <Text style = {styles.boxText}>
        I'm in a box
      </Text>
    </View>
  </View>
);       

export default StyleSheets

실행 결과

이 정도는 아직 감이 오질 않는다.

이번에는 단순히 세 열을 갖는 레이아웃을 구성해보자.

styles.js 수정

styles에서는 플렉스박스에게 자식을 어느 방향으로 그릴건지에 대한 설정, 간격을 다른 자식을 참고해 정의하는 설정, width 값을 변경하는 작업을 진행합니다.

import { StyleSheet } from 'react-native'

const styles = StyleSheet.create({
    container : {
        //플렉스박스 레이아웃 모델 활성화
        flex : 1,
        //플렉스박스에게 자식을 위에서 아래로 (vertical)로 그리도록 요청.
        flexDirection : 'column',
        //간격을 다른 자식을 참고해 정의한다.
        justifyContent : 'space-around',
        //자식을 컨테이너의 중앙에 맞춘다.
        alignItems : 'center',
        backgroundColor : 'ghostwhite',
    },
    box : {
        width : 300,
        height : 100,
        justifyContent : 'center',
        alignItems : 'center',
        backgroundColor : 'lightgray',
    },
    boxText : {
        color : 'darkslategray',
        fontWeight : 'bold',
    },
});

export default styles;

flex, flexDirection 프로퍼티는 행 레이아웃이 위에서 아래로 배치되도록 설정하는 프로퍼티이다.

그리고 alignItems, justifyContent 프로퍼티는 자식 요소를 컨테이너의 가운데 맞추고 주변에 공간을 각각 추가한다.

App.js

App.js에서는 3개의 뷰를 그려주면된다.

import React from 'react';

import{
  Text,
  View
} from 'react-native';
import styles from './styles'

const ThreeColumnLayout = () => (
  <View style = {styles.container}>
    <View style = {styles.box}>
      <Text style = {styles.boxText}>
        #1
      </Text>
    </View>

    <View style = {styles.box}>
      <Text style = {styles.boxText}>
        #2
      </Text>                                                                                                                                               
    </View>

    <View style = {styles.box}>
      <Text style = {styles.boxText}>
        #3
      </Text>
    </View>
  </View>
)

export default ThreeColumnLayout

실행 결과

플렉스를 이용해서 안드로이드의 recyclerview를 구현한 느낌이다.

그렇다면 recylerview grid기능도 있지 않을까?

styles.js

styles에서는 Platform.select라는 기능을 추가했다.

눈으로 보기에도 ios, android 플랫폼에 따라서 각각 프로퍼티를 세팅해줄 수 있다.

import { Platform,StyleSheet,StatusBar } from 'react-native'

const styles = StyleSheet.create({
    container : {
        //플렉스박스 레이아웃 모델 활성화
        flex : 1,
        //플렉스박스에게 자식을 위에서 아래로 (vertical)로 그리도록 요청.
        flexDirection : 'column',
        //간격을 다른 자식을 참고해 정의한다.
        justifyContent : 'space-around',
        //자식을 컨테이너의 중앙에 맞춘다.
        alignItems : 'center',
        backgroundColor : 'ghostwhite',
        ...Platform.select({
            ios : { paddingTop : 20 },
            android : { paddingTop:StatusBar.currentHeight}
        })
    },
    box : {
        width : 100,
        height : 100,
        justifyContent : 'center',
        alignItems : 'center',
        backgroundColor : 'lightgray',
        borderWidth : 1,
        borderStyle : 'dashed',
        borderColor : 'darkslategray',
        margin : 10
    },
    boxText : {
        color : 'darkslategray',
        fontWeight : 'bold',
    },
});

export default styles;

참고자료 : 리액트&리액트 네이티브 통합교과서

컴포넌트 프로퍼티와 상태 파헤치기

엄코딩 — Fri, 20 Sep 2019 13:55:54 +0900

컴포넌트 상태란?

컴포넌트 상태에 대한 설명은 다음 질문으로 부터 시작된다.

JSX에서 자바스크립트 컬렉션을 <li>요소에 매핑하는 <ul> 태그를 선언했다면 이 컬렉션은 어떻게 채워질까?

상태는 리액트의 동적인 부분이다. 이는 컴포넌트의 초기 상태를 선언하고 시간이 지남에 따라 계속 변한다는 것을 의미한다.

초기 상태를 가진 컴포넌트가 빈 배열을 렌더링한다고 가정했을 때, 나중에 이 배열이 채워질 수 있다. 이를 상태 변화라고 하며 컴포넌트의 상태가 변할 때마다 자동으로 렌더링된다.

컴포넌트 프로퍼티란?

프로퍼티는 데이터를 컴포넌트로 전달하기 위해 사용된다. 새로운 상태가 인수 값인 메서드를 호출하는 대신, 오직 컴포넌트가 렌더링될 때만 전달된다. 즉 JSX 요소에 프로퍼티 값을 전달한다.

즉, 프로퍼티는 JSX 컨텍스트에서 XML 형식으로 호출되기 때문에 어트리뷰트(attributes)라 불린다.

프로퍼티는 컴포넌트의 초기 렌더링 후에 변경되지 않는 부분이 상태와 다르다.

컴포넌트 상태 설정

지난번 포스팅을 토대로 react app을 만든후 module.js라는 파일을 만들고 아래와 같은 코드를 작성했다.

import React, { Component } from 'react';

export default class MyComponent extends Component{
    state = {
        heading : 'React Awesomesauce ( Busy )',
        content : 'Loading...'
    }

    render(){
        const { heading, content } = this.state;

        return (
            <main>
                <h1>{heading}</h1>
                <p>{content}</p>
            </main>
        );
    }
}

위 코드는 초기 상태를 가진 컴포넌트이며 JSX는 heading, content 2개의 상태 프로퍼티에 의존하고 있다.

이러한 초깃값 설정은 렌더링 시 예기치 못한 일을 방지해준다.

위 코드 실행 결과 출력되는 화면은 다음과 같다.

이제 컴포넌트를 렌더링하고 상태 값 변경으로 재렌더링하는 코드를 살펴보자.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MyComponent from './module';

const myComponent = ReactDOM.render(
    (<MyComponent/>),
    document.getElementById('root')
);

setTimeout(()=> {
    myComponent.setState(
        {
            heading: 'React Awesomesauce',
            content: 'DONE!',
        }
    );
},3000);

컴포넌트는 일단 기본 상태로 렌더링된다. 그리고 setTimeout() 호출을 통해서 3초 후에 2개의 상태 프로퍼티 값을 변경한다.

그리고 UI에 자동 반영된다.

컴포넌트 상태 병합

리액트 컴포넌트의 상태를 설정할 때 setState()에 전달한 객체와 컴포넌트의 상태값을 병합한다.

이를 통해 상태의 나머지 부분을 그대로 남겨두고 컴포넌트 상태의 일부만을 설정할 수 있기 때문에 매우 유용하다.

import React, { Component } from 'react';

export default class MyComponent extends Component{
    state = {
        first : 'loading...',
        second : 'loading...',
        third : 'loading...',
        fourth : 'loading...',
        doneMessage : 'finished!'
    }

    render(){
        const { state } = this;

        return(
            <ul>
                {Object.keys(state)
                .filter(key => key !== 'doneMessage')
                .map(key => (
                    <li key = {key}>
                        <strong>{key}: </strong>
                        {state[key]}
                    </li>
                ))}
            </ul>
        )
    }
}

위 코드를 통해서 컴포넌트는 key값이 doneMessage인 값을 제외하고 상태의 키와 값을 렌더링한다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MyComponent from './module';

const myComponent = ReactDOM.render(
    (<MyComponent/>),
    document.getElementById('root')
);

setTimeout(()=> {
    myComponent.setState(
        {
            first : 'done!'
        }
    );
},1000);

setTimeout(()=> {
    myComponent.setState(
        {
            second : 'done!'
        }
    );
},2000);

setTimeout(()=> {
    myComponent.setState(
        {
            third : 'done!'
        }
    );
},3000);

setTimeout(()=> {
    myComponent.setState(
        {
            fourth : myComponent.state.doneMessage
        }
    );
},4000);

위코드를 통해 1,2,3,4초 마다 갱신되는 UI를 확인할 수 있다.

위코드에서 fourth 값은 처음 3개와 달라보인다. 새로운 객체를 기존 상태로 병합하는 대신, 함수를 전달할 수 있다.

이 함수는 컴포넌트의 현재 상태 값을 인수로 가진다. 현재 상태 값을 기반으로 상태를 변경할 경우에 유용하게 쓰일 수 있다.

참고자료 : 리액트&리액트 네이티브 통합 교과서

난생처음 React를 접하다.

엄코딩 — Thu, 19 Sep 2019 16:11:26 +0900

안녕하세요. 안드로이드 개발 2년차가 되어가는 엄선오라고합니다.

이번에 처음으로 리엑트 공부를 시작하게되었습니다.

매번 Java,Kotlin 언어로만 프로그래밍하다가 새로운 언어와 플랫폼으로 개발하다보니 정말 기본적인 부분부터 막막했습니다.

그래서 이렇게 포스팅을 하게 되었습니다. ( 정말 처음 시작하는 입문자 분들을 위한 포스팅입니다. )

환경 설정

우선 NodeJs를 최신버전으로 세팅했습니다.

그리고 사용하시는 IDE 저의 경우에는 Visual Sturio Code를 열고, 새로운 WorkPlace를 설정해주었습니다.

React 시작하기

그리고 터미널을 열고 다음 명령어를 입력합니다.

$ npm install -g create-react-app
$ create-react-app my-app

그럼 위 이미지처럼 파일들이 생성됩니다.

ls 명령어를 통해 현위치에 속한 파일을 보면 my-app이 생긴것을 볼 수 있는데요, my-app으로 이동하고나서 npm start 명령어를 통해서

react를 실행할 수 있습니다.

벌써 두근두근 거리네요 ㅎㅎ

자 이제 프로그래밍의 시작 "Hello World"를 출력해볼 차례네요.

src 하위 파일중에 index.js에 들어가셔서 다음 작업을 해줍니다.

기존 코드 제거 ( ReactDOM.render(<App />, document.getElementById('root')); )

아래 코드 추가

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
  );

render() 함수는 JSX 마크업을 렌더링하고, 결과 콘텐트를 DOM 노드에 배치한다.

리엑트 객체는 여기서 사용되지 않고 트랜스파일된 JSX 소스에서 사용된다.

위 코드는 JSX 마크업을 렌더링하며, 자바스크립트와 혼합된 XML 문법을 사용한다.

그리고 브라우저에 도달하기 전에 트랜스파일러에 의해 배치된다.

위 작업을 마친 뒤에 저장을 누르는 순간!!!

실시간으로 반영되는 것을 볼 수 있습니다. ( 우와... )

이제부터 React 공부 재미있게 할 수 있을 것 같습니다.

참고자료 : 리액트&리액트 네이티브 통합교과서

[코틀린] 지연 계산(lazy) 컬렉션 연산을 통한 속도 개선

엄코딩 — Tue, 6 Aug 2019 14:37:38 +0900

이번 포스팅에서는 시퀀스(sequence) 연산을 통한 속도 개선에 대해 정리해보겠습니다.

본글은 Kotlin In Action을 보며 학습 내용을 정리한 글입니다.

지연 개발 (lazy) 컬렉션 연산

map이나 flilter 같은 함수는 결과 컬렉션을 즉시 생성합니다. 이는 컬렉션 함수를 연쇄하면 매 단계마다 계산 중간 결과를 새로운 컬렉션에 임시로 담는것입니다.

시퀀스(sequence)를 사용하면 중간 임시 컬렉션을 사용하지 않고도 컬렉션 연산을 할 수 있습니다.

 	val p1 = Person(28,"seonoh")
    val p2 = Person(28,"bitna")
    val p3 = Person(26,"seongyu")
    val p4 = Person(3,"daon")

    val pList = listOf(p1,p2,p3,p4)

    println(pList.map(Person::name).filter { it.startsWith("s") })

위와 같은 코드에서 map 결과에 대한 리스트와 filter 결과에 대한 리스트까지 총 2개의 리스트가 반환됩니다.

map과 filter는 리스트를 반환합니다.

/**
 * Returns a list containing the results of applying the given [transform] function
 * to each element in the original collection.
 */
public inline fun <T, R> Iterable<T>.map(transform: (T) -> R): List<R> {
    return mapTo(ArrayList<R>(collectionSizeOrDefault(10)), transform)
}

/**
 * Returns a list containing only elements matching the given [predicate].
 */
public inline fun <T> Iterable<T>.filter(predicate: (T) -> Boolean): List<T> {
    return filterTo(ArrayList<T>(), predicate)
}

원본 리스트에 원소가 2개밖에 없다면 리스트가 2개 더 생겨도 큰 문제가 되지는 않지만, 원소가 많아질수록 훨씬 더 효율이 떨어지게됩니다.

이를 해결할 방법으로 각 연산이 컬렉션을 직접 사용하는 대신 시퀀스를 사용하게 만들어야 합니다.

pList.asSequence() // 원본 컬렉션을 시퀀스로 변환한다.
        .map { Person::name }
        .filter { it.name.startsWith("s") }
        .toList() // 결과 시퀀스를 다시 리스트로 변환한다.

위 코드는 중간 결과를 저장하는 컬렉션이 생기지 않기 때문에 원소가 많은 경우 성능이 좋아집니다.

코틀린 시쿠컨스는 Sequence 인터페이스에서 시작합니다. 이 인터페이스는 단지 한번에 하나씩 열거될 수 있는 원소의 시퀀스를 표현합니다.

Sequence 안에는 iterator라는 단 하나의 메소드가 존재하는데 이 메소드를 통해 시퀀스로부터 원소 값을 얻을 수 있습니다.

Sequence 인터페이스의 강점은 그 인터페이스 위에 구현된 연산이 계산을 수행하는 방법때문에 생깁니다.

시퀀스의 원소는 필요할 때 계산됩니다. 따라서 중간 처리 결과를 저장하지 않고도 연산을 연쇄적으로 적용해서 효율적으로 계산을 수행할 수 있습니다.

왜 시퀀스를 다시 컬렉션으로 되돌려야 할까?

컬렉션보다 시퀀스가 훨씬 낫다면 그냥 시퀀스를 쓰는 편이 낫지 않을까? 생각할 수 있습니다.

본인도 마찬가지로 책을 보면서 그런 생각을 했습니다. 하지만 자연스럽게 생각이 나더군요.

개발을 하다보면 원소하나하나에 인덱스를 사용해 접근하는 등 다른 API 메소드가 필요하다면 시퀀스를 리스트로 변환해야 한다는 것을...

시퀀스 연산 실행 순서

시퀀스에 대한 연산은 중간연산과 최종연산으로 나뉩니다. 중간 연산은 다른 시퀀스를 반환합니다.

그 시퀀스는 최초 시퀀스의 연산을 반환하는 방법을 알고 있고, 최종 연산은 결과를 반환합니다.

pList.asSequence() // sequence
        .map { Person::name } // 중간 연산
        .filter { it.name.startsWith("s") } // 중간 연산
        .toList() // 최종 연산

결과는 최초 컬렉션에 대해 변환을 적용한 시퀀스로부터 일련의 계산을 수행해 얻을 수 있는 컬렉션이나 원소, 숫자 또는 객체입니다.

 listOf(1,2,3,4)
        .asSequence()
        .map { print("map($it)  ");it*it }
        .filter { print("filter($it)  "); it%2 == 0 }

위 코드를 실행해보면 아무 내용도 출력되지 않습니다. 왜그럴까요?

sequence 중간 연산은 항상 지연 계산됩니다. 위 코드에서 map과 filter 변환이 늦춰져서 결과를 얻을 필요가 있을 때 ( 최종 연산이 호출되는 경우) 적용됩니다.

아래 코드와 같이 toList() (최종연산) 을 호출하게되면 늦춰졌던 모든 계산이 수행됩니다.

listOf(1,2,3,4)
        .asSequence()
        .map { print("map($it)  ");it*it }
        .filter { print("filter($it)  "); it%2 == 0 }
        .toList()

출력 결과 : map(1) filter(1) map(2) filter(4) map(3) filter(9) map(4) filter(16)

직접 연산을 구현한다면 map 함수를 각 원소에 대해 먼저 수행해서 새 시퀀스를 얻고, 그 시퀀스에 대해 다시 filter를 수행할 것입니다.

컬렉션에 대한 map과 filter는 그런 방식으로 작동합니다.

하지만 시퀀스에 대한 map과 filter는 그렇지 않습니다. 시퀀스의 경우 모든 연산은 각 원소에 대해 순차적으로 적용됩니다.

즉, 첫번째 원소가 (변환된 다음에 걸러지면섴0 처리되고, 다시 두번째 원소가 처리되며 모든 원소가 이렇게 처리됩니다.

따라서 원소에 연산을 차례대로 적용하다가 결과가 얻어지면 그 이후의 원소에 대해서는 변환이 이뤄지지 않을 수도 있습니다.

아래 예를 통해 살펴보겠습니다.

 println(listOf(1,2,3,4).map { print("access $it  ");it*it }.find { print("result $it  "); it>3 })

위 코드 같은 경우 map의 결과값들인 1,4,9,16 을 먼저 구하고, 1은 3보다 작으니 해당하지 않으며 4는 3보다 크니 조건에 해당되며 결과값이 됩니다.

실행 결과

access 1  access 2  access 3  access 4  result 1  result 4  4

원소 1,2,3,4 모두 접근하고 있는 것을 확인 할 수 있습니다.

이와는 다르게 sequence는 어떨까요?

println(listOf(1,2,3,4)
	.asSequence()
    .map { print("access $it  ");it*it }
    .find { print("result $it  "); it>3 })

시퀀스를 사용하면 지연 계산으로 인해 원소 중 일부의 계산은 이루어지지 않습니다. 말 그대로 시퀀스 (순차적)

실행 결과

access 1  result 1  access 2  result 4  4

그리고 컬렉션에 대해 수행하는 연산의 순서도 성능에 영향을 끼칩니다.

map을 먼저 한 경우에는 모든 원소가 변환된 후에 filter처리를 하지만, filter를 먼저 하게되면 불필요한 원소를 제외시키고 map 처리를 하게됩니다.

아래 이미지가 이해에 큰 도움이 되어 똑같이 그려봤습니다.

map 연산 후 filter

filter 연산 후 map

참고 자료 : Kotlin In Action, https://kotlinlang.org/

안드로이드 Kotlin Coroutines runBlocking, coroutineScope 차이

엄코딩 — Fri, 26 Jul 2019 16:06:29 +0900

사내 업무량을 어느 정도 마치고, 오랜만에 다시 코루틴 학습을 시작했습니다.

역시 복습하니 다시 모르는게 보였습니다. 그래서 정리의 필요성을 느끼고 포스팅을 시작했습니다.

코루틴에 대해서 처음부터 학습하실 분들은 저의 이전 포스팅들이나 구글 Document를 보시는 것을 추천드립니다.

//CoroutineScope는 runBlocking 내부에서만 사용 가능
    //runBlocking, coroutineScope 차이점
    //coroutineScope에서는 자식 스레드가 완료될 때 까지 현재 스레드를 block 하지 않는다.
    //runBlocking에서는 자식 스레드가 완료될 때 까지 현재 스레드를 block 한다.
    fun main() = runBlocking { // this: CoroutineScope
        //자식 스레드가 완료될 때 까지 현재 스레들 block 한다.

        //자식 스레드가 완료될 때 까지 현재 스레드를 block한다고 하는데
        //왜 아래 coroutineScope에 "Task from coroutine scope"가 먼저 실행 되는건지 궁금합니다.
        launch {
            delay(200L)
            Log.e("main","Task from runBlocking")
        }

        coroutineScope { // Creates a coroutine scope
            //자식 스레드
            launch {
                delay(500L)
                Log.e("main","Task from nested launch")
            }
            //현재 스레드
            delay(100L)
            Log.e("main","Task from coroutine scope")
        }
        Log.e("main","Coroutine scope is over")
    }

정리해보니 위와 같았습니다.

주석을 열심히 달아보고, 혼자 질문도 해봅니다 ㅎㅎ( 사실 한참 고민하다가 오픈채팅방에 자문을 구했습니다. )

질문하려고 주석을 정리하다보니 저의 질문에 의심을 품게 되었습니다. ( 사실 제가 틀에 박힌 생각을 하고 있지는 않았나 싶어서... )

항상 느끼는 거지만, 질문을 하려고 정리하다보면 문득 정답이 스쳐간다는...

답변해주신 태환님께 정말 감사했습니다! ( 문제가 될 시 삭제하겠습니다.)

runBlocking은 자식 스레드가 완료될 때 까지 현재 스레드를 block하는 것이고, coroutineScope는 자식 스레드가 완료될 때 까지 현재 스레드를 block 하지 않는다.

"launch는 그냥 스레드를 돌려두는 것이고, coroutineScope 자체가 async/await 할때까지 기다린다"

위 문장까지 들었을 때는 사실 아직도 헷갈리고 있었는데,

"coroutineScope 자체가 async/await이고, coroutineScope 안에서 다시 launch 하면 그냥 또 돌아간다" 라는 말을 듣고 이해할 수 있었습니다.

그래서 저에게 좀 더 이해하기 쉽도록 예제 코드를 작성해봤습니다.

// Job을 등록할 수 있도록 초기화
    // CoroutineScope의 동작을 제어할 객체
    // 안드로이드 상에서는 Lifecycle을 활용할 수 있도록 도와준다.
    lateinit var job : Job


    // coroutine의 스레드를 어떠한 형태로 사용할지 지정할 수 있다.
    override val coroutineContext: CoroutineContext
        get() = Dispatchers.Main + job



    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        job = Job()

        runBlocking {
            delay(1000L)
            Log.e("coroutineScope","STEP 1")
        }

        Log.e("coroutineScope","STEP 2")

        CoroutineScope(coroutineContext).launch{
            delay(1000L)
            Log.e("coroutineScope","STEP 4")
        }


        Log.e("coroutineScope","STEP 3")

    }

    // 작업 중이던 모든 job, children을 종료 처리
    override fun onDestroy() {
        super.onDestroy()
        job.cancel()
    }

실행순서는 STEP1 -> STEP2 -> STEP3 -> STEP4

이제 생각대로 흘러가는 것 같습니다.

참고로 위에서 쓰인 Dispatchers는 코루틴을 실행할 때 어떤 스레드를 사용할 것인지 결정하기 위해 사용됩니다.

Dispachers.Main은 안드로이드에서는 Main 스레드 즉, UI 스레드를 위해서만 사용됩니다. 또한 suspend functions, UI 프레임워크 연산, 최근에는 LiveData update를 위해 사용됩니다.

이외에도 Dispatchers.IO, Dispatchers.Defaule가 존재합니다. 자세한 내용은 링크를 통해 확인해보시면 좋을 것 같습니다.

참고자료

https://thdev.tech/coroutines/2019/04/08/Init-Coroutines-Job/

Kotlin Coroutines의 Job 동작을 알아보자

개인 광고 영역 Kotlin Coroutines을 컨트롤하기 위한 Job을 제공해준다. 이 Job은 N 개의 coroutines의 동작을 제어할 수도 있으며, 하나의 coroutines 동작을 제어할 수도 있다. 먼저 Job이 어떤 것인지 알아보고, exception 발생 케이스를 함께 알아보겠다. Job Coroutines의 Job은 결국 coroutines의 상태를 가지고 있는데, 아래와 같은 6가지 상태를 포함하고 있으며, active/complet

thdev.tech

https://developer.android.com/kotlin/coroutines

Improve app performance with Kotlin coroutines | Android Developers

A coroutine is a concurrency design pattern that you can use on Android to simplify code that executes asynchronously. Coroutines were added to Kotlin in version 1.3 and are based on established concepts from other languages. On Android, coroutines help to

developer.android.com

Android 8.0 Only fullscreen opaque activities can request orientation error

엄코딩 — Fri, 19 Jul 2019 15:01:18 +0900

문제 상황

어제 기분 좋게 7마켓에 모두 빌드를 올리고, 오전에 모든 마켓에서 release 되었습니다.

하지만...

Fabric에 처음 보는 에러가 날라왔습니다.(긴장..)

에러 문구

Only fullscreen opaque activities can request orientation

해결 방법

문제 상황을 인지하고, 구글링을 시도했습니다.

제일 먼저 눈에 띄었던 박상권님의 블로그를 보며 이해할 수 있었습니다.

( 상권님의 에러 대응 방법도 배우게되었습니다. 감사합니다.

에러는 투명한 Activity를 만들기 위해 style에서 사용한 windowIsTranslucent 때문에 발생합니다.

저도 안드로이드 8.0 ( Oreo ) API 26 SDK에서 코드를 봤습니다. ( 사실 이렇게 구글 SDK 코드를 보는 건 처음이었습니다. )

if (getApplicationInfo().targetSdkVersion > O && mActivityInfo.isFixedOrientation()) {
            final TypedArray ta = obtainStyledAttributes(com.android.internal.R.styleable.Window);
            final boolean isTranslucentOrFloating = ActivityInfo.isTranslucentOrFloating(ta);
            ta.recycle();
            if (isTranslucentOrFloating) {
                throw new IllegalStateException(
                        "Only fullscreen opaque activities can request orientation");
            }
        }

정말 이런 코드가 있었습니다. 제가 정말 맞게 공부하고 있었는가 의문이 들었습니다. 이렇게 명료하게 에러 이유를 볼 수 있었다니...!

이 문제의 해결방법으로는 orientation을 설정하지 않는 방법, style v26 따로 두는 방법, sdk버전이 안드로이드 오레오일 경우 예외처리, 그리고 코드상으로 orientation을 설정하고 이에 try/catch로 감싸는 방법이 있었습니다.

저는 BaseActivity에 아래와 같은 코드를 추가했습니다.

 try{
            //API 8.0 Only fullscreen opaque activities can request orientation 안드로이드 이슈.
            requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
        }catch (e : IllegalStateException){

        }

그리고 AndroidManifest에 있는 모든 orientation을 지워줬습니다.

실행 결과 잘 작동합니다.

Lorg/apache/http/params/BasicHttpParam error

엄코딩 — Fri, 19 Jul 2019 13:48:03 +0900

문제 상황

프로젝트에서 SNS 연동 로그인을 사용중입니다.

그중에서도 Weibo 연동 로그인 버튼 클릭시 나타난 에러입니다.

에러가 발생한 기기는 Android 9, API 28 이었습니다.

에러 문구

-> NoClassDefFoundError: Failed resolution of: Lorg/apache/http/params/BasicHttpParam

해결방법

Android 6.0에서는 Apache HTTP 클라이언트에 대한 지원이 제거되었습니다.

Android 9 부터는 이 라이브러리가 bootclasspath에서 제거되고 기본적으로 앱에서 사용할 수 없습니다.

즉 기본적으로 제공하고 있던 기능이었는데 Android 9에서는 제공하지 않기 때문에 에러가 발생했다는 걸 알 수 있습니다.

이 문제를 해결하기 위해서는 다음과 같은 코드를 AndroidMainfest <Application> 영역에 추가해주어야 합니다.

<uses-library android:name="org.apache.http.legacy" android:required="false"/>

Android Mockito를 사용한 유닛 테스트 코드 작성

엄코딩 — Fri, 12 Jul 2019 14:43:34 +0900

Mockito를 이용한 UI 테스트 코드

Mockito는 유닛 테스트를위한 Java mocking framework 입니다. Mockito를 사용하여 쉽게 Mock Object를 만들어 관리할 수 있습니다.

Mock에 대한 개념은 아래 링크에서 자세하게 설명하고 있습니다.

Mock Object

Mock Object란 무엇인가? - Yoo Young-mo - Medium

다른 누군가로부터 휴대 전화 서비스(CellphoneService) 기능을 제공 받아 이를 사용한 휴대 전화 문자 발신기(CellphoneMmsSender)를 프로그래밍 한다고 생각해 보자.

medium.com

이 포스팅의 목적

제가 제일 처음 안드로이드 유닛 테스트 예제 코드를 작성하는 것 부터 이번 포스팅까지,

테스트를 접해보지 못하신분들, 도무지 어떻게 시작해야할지 모르는 분들에게 유익한 포스팅이 되었으면 좋겠습니다.

저도 구글링하면서 테스트를 실제 프로젝트에 도입해보기 위해 공부하며 정리한 포스팅인만큼, 충분히 쉽게 이해하실 수 있을겁니다!

그리고 시작했으면 끝을 봐야겠죠!

build.gradle

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.mockitotest"
        minSdkVersion 24
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'

    testImplementation 'junit:junit:4.12'
    testImplementation 'org.mockito:mockito-core:2.28.2'

    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

Person.kt

 data class Person(var name : String, var age : Int)

MockTest.kt

import junit.framework.Assert.assertEquals
import junit.framework.Assert.assertTrue
import org.junit.Test
import org.mockito.Mockito.`when`
import org.mockito.Mockito.mock

class MockTest{
    @Test
    fun test(){

        val p : Person = mock(Person::class.java)
        assertTrue(p != null)

        `when`(p.name).thenReturn("Seonoh")
        `when`(p.age).thenReturn(28)

        assertEquals(p.name,"Seonoh")
        assertEquals(p.age,28)
    }
}

코틀린에서는 when 구문이 존재해서인지 `when`으로 표기됩니다.

해당 구문을 통해서 stubbing을 제공합니다. 즉, 여기서는 thenReturn("Seonoh")를 통해서 Person의 name에 "Seonoh"를

여기서 stubbing란 무엇일까 많이 들어봤지만 정확한 뜻은 무엇일까요?

아래 링크를 통해서 차근차근 이해해보면 좋을 것 같습니다. ( 저는 '정해진 질문에 대해 사전에 준비한 답' 이 와닿았습니다. )

테스트 스텁

실행결과

org.mockito.exceptions.base.MockitoException: 
Cannot mock/spy class com.example.mockitotest.Person
Mockito cannot mock/spy because :
 - final class

???

실행하자마자 겪은 에러입니다.

위 에러의 이유는 Mockito mock에서는 일반적으로 인스턴스를 만들기 위해 요청 클래스들을 확장합니다.

하지만 코틀린의 모든 클래스들은 default로 final 클래스로 정의됩니다.

그래서 Mockito 라이브러리에서는 해당 클래스들을 확장할 수가 없는 것입니다.

해결방법

open을 사용하여 해결할 수도 있지만 개발자의 디자인 아키텍쳐와 맞지 않을 수 있기 때문에 dependency를 설정해주면됩니다.

testImplementation 'org.mockito:mockito-inline:2.8.47'

Android Espresso를 사용한 UI 테스트 예제 코드 작성

엄코딩 — Thu, 11 Jul 2019 15:33:49 +0900

UI 테스트 코드를 작성하게된 이유

유닛테스트와 마찬가지로 수동으로 테스트하게 되면, 인력 소모와 테스트의 효율성, 안정성을 보장하기 어렵습니다.

그리고 최근에는 모바일앱이 점점 거대해지고, 복잡해지면서 각각의 기능을 분리하여 개발하게 되고,

모듈화된 feature들을 merge하는 경우가 많습니다.

이에 효율적인 테스트 코드 작성이 가능해진다면 복잡한 앱이라도 더 쉬운 테스트, 효율적인 테스트가 가능할 것입니다.

이 포스팅의 목적

이번 포스팅은 이전 포스팅인 유닛테스트 ( https://eso0609.tistory.com/77 ) 와 다르게 UI 테스트를 목적으로 작성했습니다.

구글링을 통해서 학습하고, 정리한 내용은 Kotlin으로 작성해 보았습니다.

예제 코드는 간단하게 이름, 아이디, 비밀번호를 입력하고, 하단 textView에 입력된 정보가 맞게 들어갔는지 확인합니다.

마지막으로 버튼을 클릭하여 입력된 정보를 Toast 메세지로 뿌려줍니다.

프로젝트 구조

UI 테스트를 위해 src/androidTest에 프로젝트를 생성해줍니다.

build.gradle

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.espressotest"
        minSdkVersion 24
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'

    testImplementation 'junit:junit:4.12'

    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    androidTestImplementation 'com.android.support.test:rules:1.0.2'
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        android:orientation="vertical"
        android:padding="16dp"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <LinearLayout
            android:weightSum="4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        <TextView
                android:id="@+id/name_tv"
                android:layout_weight="1"
                android:textSize="16sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="NAME"/>
        <EditText
                android:id="@+id/name_et"
                android:layout_weight="3"
                android:layout_marginLeft="8dp"
                android:textSize="16sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:hint="Input name .."/>

    </LinearLayout>

    <LinearLayout
            android:layout_marginTop="16dp"
            android:weightSum="4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        <TextView
                android:id="@+id/id_tv"
                android:layout_weight="1"
                android:textSize="16sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="ID"/>
        <EditText
                android:id="@+id/id_et"
                android:layout_weight="3"
                android:layout_marginLeft="8dp"
                android:textSize="16sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:hint="Input id .."/>

    </LinearLayout>

    <LinearLayout
            android:layout_marginTop="16dp"
            android:weightSum="4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        <TextView
                android:id="@+id/pwd_tv"
                android:layout_weight="1"
                android:textSize="16sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="PWD"/>
        <EditText
                android:id="@+id/pwd_et"
                android:layout_weight="3"
                android:layout_marginLeft="8dp"
                android:textSize="16sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:hint="Input password .."/>

    </LinearLayout>

    <Button
            android:id="@+id/done_btn"
            android:text="DONE"
            android:layout_marginTop="16dp"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    <LinearLayout
            android:weightSum="3"
            android:layout_marginTop="16dp"
            android:id="@+id/board_linear"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <TextView
                android:id="@+id/name_board_tv"
                android:textSize="16sp"
                android:textStyle="bold"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"/>
        <TextView
                android:layout_marginTop="4dp"
                android:id="@+id/id_board_tv"
                android:textSize="16sp"
                android:textStyle="bold"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"/>
        <TextView
                android:layout_marginTop="4dp"
                android:id="@+id/pwd_board_tv"
                android:textSize="16sp"
                android:textStyle="bold"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"/>


    </LinearLayout>

</LinearLayout>

MainActivity.class

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.text.Editable
import android.text.TextWatcher
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        name_et.addTextChangedListener(object : TextWatcher {
            override fun afterTextChanged(p0: Editable?) {

            }

            override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {

            }

            override fun onTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
                name_board_tv.text = "NAME : $p0"
            }
        })

        id_et.addTextChangedListener(object : TextWatcher {
            override fun afterTextChanged(p0: Editable?) {

            }

            override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {

            }

            override fun onTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
                id_board_tv.text = "ID : $p0"
            }
        })

        pwd_et.addTextChangedListener(object : TextWatcher {
            override fun afterTextChanged(p0: Editable?) {

            }

            override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {

            }

            override fun onTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
                pwd_board_tv.text = "PWD : $p0"
            }
        })

        done_btn.setOnClickListener {
            Toast.makeText(
                this,
                "이름 : ${name_board_tv.text}\nID : ${id_board_tv.text}\nPWD : ${pwd_board_tv.text}",
                Toast.LENGTH_LONG
            ).show()
        }
    }
}

EspressoTest.class

import android.support.test.espresso.Espresso.onView
import android.support.test.espresso.action.ViewActions.*
import android.support.test.espresso.assertion.ViewAssertions.matches
import android.support.test.espresso.matcher.ViewMatchers.withId
import android.support.test.espresso.matcher.ViewMatchers.withText
import android.support.test.filters.LargeTest
import android.support.test.rule.ActivityTestRule
import android.support.test.runner.AndroidJUnit4
import org.junit.Rule
import org.junit.Test
import org.junit.runner.RunWith

@RunWith(AndroidJUnit4::class)
@LargeTest
class EspressoTest{

@get:Rule
var myActivityActivityTestRule: ActivityTestRule<MainActivity> = ActivityTestRule(MainActivity::class.java)


        @Test
        fun startTest(){

                //editText에 값 입력후 키보드 닫음.
                onView(withId(R.id.name_et)).perform(typeText("qwertyui"))
                onView(withId(R.id.id_et)).perform(typeText("ace69"))
                onView(withId(R.id.pwd_et)).perform(typeText("123456"), closeSoftKeyboard())


                //textView 값이 Hello Wordl! 인지 확인
                onView(withId(R.id.name_board_tv)).check(matches(withText("NAME : qwertyui")))
                onView(withId(R.id.id_board_tv)).check(matches(withText("ID : ace69")))
                onView(withId(R.id.pwd_board_tv)).check(matches(withText("PWD : 123456")))

                //Button 클릭
                onView(withId(R.id.done_btn)).perform(click())
        }
}

실행

이번 Espresso UI테스트의 실행은 안드로이드 단말기 또는 에뮬레이터로 실행하게됩니다.

EspressoTest 우클릭 Run ~ 하시면됩니다.

실행결과

처음에 샤오미 단말기로 테스트해보았는데, 계속해서 timeout에러가 났습니다.

이 부분에 대해서는 더 학습해보고 포스팅 해볼 예정입니다.

( 이번 테스트 기기는 갤럭시 s10+였습니다. )

참고 자료

- https://developer.android.com/training/testing/espresso

Android JUnit을 사용한 로컬 유닛 테스트 예제 코드 작성

엄코딩 — Wed, 10 Jul 2019 16:12:14 +0900

유닛테스트 코드를 작성한 이유

앱을 개발하다보면 코드가 예상대로 실행이 되는지 테스트가 필요합니다.

하지만 매번 수동으로 테스트하게 되면 인력 소모도 심하고, 수동으로 하다보니 매번 정확하지 않은 테스트가 수행될 수 있어 안정성이 떨어질 수 있습니다.

만약 자동화 테스트를 진행하게 된다면 인력 소모를 줄일 수 있고, 보다 정교하고 안정적인 테스트를 진행할 수 있다고 생각했습니다.

이 포스팅의 목적

이번 포스팅은 로컬 JVM 에서 실행할 수 있는 유닛 테스트 코드 작성입니다.

구글링한 자료를 바탕으로 Kotlin 언어로 작성해 보았습니다.

우선 위 이미지에서 테스트 환경 프로젝트 구조를 볼 수 있습니다. ( 샘플 예제 코드와는 관련이 없습니다. )

~androidTest/java/com.example.androidtest/ExampleInstrumentedTest는 실제 안드로이드 기기를 통한 테스트 방법이고,

~test/java/com.example.androidtest/ExampleUnitTest가 유닛테스트, 즉 이번 포스팅에서 다루게 될 로컬 JVM에서 실행할 수 있는 테스트 방법입니다.

build.gradle

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.androidtest"
        minSdkVersion 24
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'

    // android test implementation
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

values/strings

<resources>
    <string name="app_name">AndroidTest</string>
    <string name="coffee_price">Coffee: $%.1f</string>
    <string name="total_price">Total price: $%.1f</string>
    <string name="increment_label">+</string>
    <string name="decrement_label">-</string>
    <string name="default_coffee_count">0</string>
</resources>

acitivity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    <TextView
            android:id="@+id/coffee_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:text="@string/coffee_price"/>
    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:layout_marginBottom="12dp"
            android:gravity="center_vertical">
        <Button
                android:id="@+id/coffee_decrement"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                android:text="@string/decrement_label"/>
        <TextView
                android:id="@+id/coffee_count"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp"
                android:textSize="32sp"
                android:text="@string/default_coffee_count"/>
        <Button
                android:id="@+id/coffee_increment"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                android:text="@string/increment_label"/>
    </LinearLayout>
    <TextView
            android:id="@+id/total_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:text="@string/total_price"/>
</LinearLayout>

MainActivity.class

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.os.PersistableBundle
import android.util.Log
import android.view.View
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    val COFFEE_COUNT = "coffee_count"
    val DEFAULT_COFFEE_PRICE = 5.0f

    private lateinit var mOrder : CoffeeOrder

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        mOrder = CoffeeOrder(DEFAULT_COFFEE_PRICE)

        coffee_price.text = String.format(getString(R.string.coffee_price),DEFAULT_COFFEE_PRICE)
        total_price.text = String.format(getString(R.string.total_price),0.0f)

        coffee_increment.setOnClickListener {
            mOrder.incrementCoffeeCount()
            updateCoffeeCount()
            updateTotalPrice()
        }

        coffee_decrement.setOnClickListener {
            mOrder.decrementCoffeeCount()
            updateCoffeeCount()
            updateTotalPrice()
        }
    }


    override fun onSaveInstanceState(outState: Bundle?) {
        super.onSaveInstanceState(outState)
        outState!!.putInt(COFFEE_COUNT,mOrder.mCoffeeCount)
    }

    override fun onRestoreInstanceState(savedInstanceState: Bundle?) {
        super.onRestoreInstanceState(savedInstanceState)
        if(savedInstanceState != null){
            mOrder.mCoffeeCount = savedInstanceState.getInt(COFFEE_COUNT)
            updateCoffeeCount()
            updateTotalPrice()
        }
    }

    private fun updateCoffeeCount(){
        coffee_count.text = ""+mOrder.mCoffeeCount

    }

    private fun updateTotalPrice(){
        total_price.text = String.format(getString(R.string.total_price),mOrder.mTotalPrice)
    }
}

CoffeeOrder.class

class CoffeeOrder(coffeePrice : Float) {
    var mCoffeePrice = coffeePrice
    var mCoffeeCount =  0
        get() = if(field < 0) 0 else field

    var mTotalPrice = 0f

    fun incrementCoffeeCount(){
        mCoffeeCount++
        calculateTotalPrice()
    }

    fun decrementCoffeeCount(){
        if( mCoffeeCount > 0){
            mCoffeeCount--
            calculateTotalPrice()
        }
    }

    fun calculateTotalPrice(){
        mTotalPrice = mCoffeePrice * mCoffeeCount
    }
}

CoffeeOrderTest.class

import junit.framework.Assert.assertEquals
import junit.framework.Assert.assertNotNull
import org.junit.Before
import org.junit.Test

class CoffeeOrderTest {
    private val PRICE_TEST = 5.0f
    private lateinit var mOrder : CoffeeOrder

    @Before
    fun setUp(){
        mOrder = CoffeeOrder(PRICE_TEST)
    }

    @Test
    fun orderIsNotNull(){
        assertNotNull(mOrder)
    }
    @Test
    fun orderDecrement(){
        mOrder.decrementCoffeeCount()
        assertEquals(0, mOrder.mCoffeeCount)

        mOrder.mCoffeeCount = 25
        mOrder.decrementCoffeeCount()
        assertEquals(24,mOrder.mCoffeeCount)
    }


    @Test
    fun orderIncrement(){
        mOrder.incrementCoffeeCount()
        assertEquals(1,mOrder.mCoffeeCount)

        mOrder.initCoffeeCount(25)
        mOrder.incrementCoffeeCount()
        assertEquals(26,mOrder.mCoffeeCount)

    }

    @Test
    fun orderTotalPrice(){
        assertEquals(0.0f, mOrder.mTotalPrice)

        mOrder.initCoffeeCount(25)
        assertEquals(PRICE_TEST*25, mOrder.mTotalPrice)
    }

    @Test
    fun orderSetCoffeeCount(){
        mOrder.initCoffeeCount(-1)
        assertEquals(0, mOrder.mCoffeeCount)

        mOrder.initCoffeeCount(25)
        assertEquals(25, mOrder.mCoffeeCount)
    }
}

실행

실행 결과

만약 기대값과 다른 결과가 나온다면?

위 이미지에서 볼 수 있듯이 코드 왼쪽에 빨간 아이콘이 보입니다.

( 해당 테스트코드가 실패했을 경우 빨간색. 성공했다면 초록색이 보일겁니다. )

각각의 @Test 어노테이션이 붙은 코드 블록에서 아이콘을 확인할 수 있습니다. 즉, 각 메소드마다 테스트를 해볼 수 있습니다.

위 이미지에서 기대값이 -1인데 실재 값이 0으로 나왔을 때 아래와 같은 에러 코드를 볼 수 있습니다.

이것저것 테스트해보고 있는데 유닛테스트를 더 자세하게 학습하고 싶어지네요!

읽어주셔서 감사합니다.

- 참고 자료

https://alexzh.com/2016/03/24/android-testing-unit-testing/

Android testing codelab ModuleComponentIdentifierImpl error

엄코딩 — Wed, 10 Jul 2019 13:21:38 +0900

안드로이드 유닛 테스트 학습을 위해 https://codelabs.developers.google.com/codelabs/android-testing/#4 에서 샘플 프로젝트를 다운받았습니다.

그리고 안드로이드 스튜디오에서 실행한 결과...

시작하자마 Failed to notify build listener 에러가 떴습니다.

자세한 로그

Cause: org.jetbrains.plugins.gradle.tooling.util.ModuleComponentIdentifierImpl.getModuleIdentifier()Lorg/gradle/api/artifacts/ModuleIdentifie

열심히 구글링을 해보았는데, 모든 답변들이 gradle 버전 문제였습니다.

그래서 gradle plugin 버전을 올렸습니다.

( 올리는 김에 안스 버전도 함께 업데이트해줬어요. 기존 안드로이드 스튜디오 버전은 3.2.1이 었습니다. )

안드로이드 스튜디오 버전

버전 업데이트 후 실행해보니 정상적으로 실행됩니다.

안드로이드 Kotlin Coroutines 정리 Part 3

엄코딩 — Tue, 2 Apr 2019 16:52:41 +0900

Channels ( experimental )

지연된 값은 코루틴간에 단일 값을 전송하는 편리한 방법을 제공합니다. Channels는 값의 흐름을 전송하는 방법을 제공합니다.

Channels are an experimental feature of kotlinx.coroutines. 
Their API is expected to evolve in the upcoming updates of the kotlinx.coroutines library with potentially breaking changes.

Channel basics

Channel 은 개념적으로 BlockingQueue 와 매우 유사합니다. 한가지 중요한 차이점은 blocking put 연산 대신에 suspending send, 그리고 blocking take 연산 대신에 suspending receive를 갖습니다.

fun main() = runBlocking {
    val channel = Channel<Int>()
    launch {
        // this might be heavy CPU-consuming computation or async logic, we'll just send five squares
        for (x in 1..5) channel.send(x * x)
    }
    // here we print five received integers:
    repeat(5) { println(channel.receive()) }
    println("Done!")
}

출력 결과

1
4
9
16
25
Done!

Closing and iteration over channels

queue와 다르게 채널은 더 이상 요소가 없다는 것은 나타낼 수 있습니다. receiver 측에서 for루프를 사용하여 채널로부터 요소들을 편리하게 받을 수 있습니다.

개념적으로, close 는 특별한 close 토큰을 채널에 보내는 것과 같습니다. close 토큰이 수신되는 즉시 반복이 중지되므로 이전에 전송된 모든 요소가 수신된다고 보장할 수 있습니다.

fun main() = runBlocking {
    val channel = Channel<Int>()
    launch {
        for (x in 1..5) channel.send(x * x)
        channel.close() // we're done sending
    }
    // here we print received values using `for` loop (until the channel is closed)
    for (y in channel) println(y)
    println("Done!")
}

출력 결과

1
4
9
16
25
Done!

Building channel producers

코루틴이 일련의 요소를 생산하는 것은 매우 일반적입니다. 이는 동기 코드에서 종종 발견할 수 있는 producer - consumer 코드의 일부분입니다. producer 를 매개 변수로 사용하는 함수로 추상화 할 수 있지만, 결과가 함수에서 return 되어야 한다는 일반적 상식에 어긋납니다.

편리한 코루틴 빌더 produce 를 통해서 producer 측에서 이를 쉽게할 수 있습니다. 그리고 consumer 측 for loop를 대신할 확장 함수 consumeEach 가 있습니다.

fun CoroutineScope.produceSquares(): ReceiveChannel<Int> = produce {
    for (x in 1..5) send(x * x)
}

fun main() = runBlocking {
    val squares = produceSquares()
    squares.consumeEach { println(it) }
    println("Done!")
}

출력 결과

1
4
9
16
25
Done!

Pipelines

파이프라인은 하나의 코루틴이 무한의 값 스트림을 생성하는 패턴입니다.

fun CoroutineScope.produceNumbers() = produce<Int> {
    var x = 1
    while (true) send(x++) // infinite stream of integers starting from 1
}

다른 코루틴 또는 코루틴들에서는 이 스트림을 소비하고, 일부 처리를 수행합니다. 그리고 다른 결과를 생산합니다. 아래 예에서 숫자는 단지 제곱입니다.

fun CoroutineScope.square(numbers: ReceiveChannel<Int>): ReceiveChannel<Int> = produce {
    for (x in numbers) send(x * x)
}

main code는 전체 파이프라인을 연결하고 시작합니다.

fun main() = runBlocking {
    val numbers = produceNumbers() // produces integers from 1 and on
    val squares = square(numbers) // squares integers
    for (i in 1..5) println(squares.receive()) // print first five
    println("Done!") // we are done
    coroutineContext.cancelChildren() // cancel children coroutines
}

fun CoroutineScope.produceNumbers() = produce<Int> {
    var x = 1
    while (true) send(x++) // infinite stream of integers starting from 1
}

fun CoroutineScope.square(numbers: ReceiveChannel<Int>): ReceiveChannel<Int> = produce {
    for (x in numbers) send(x * x)
}

출력 결과

1
4
9
16
25
Done!

코루틴을 만드는 모든 함수들은 CoroutineScope의 확장으로 정의 되므로, 구조화된 동시성에 의존하여, 어플리케이션에 느린 전역 코루틴이 없는지 확인할 수 있습니다.

Prime numbers with pipeline

코루틴의 파이프라인을 사용하여 소수를 생성하는 예를 설명해 보겠습니다.

fun CoroutineScope.numbersFrom(start: Int) = produce<Int> {
    var x = start
    while (true) send(x++) // infinite stream of integers from start
}

다음으로 파이프라인에 들어오는 스트림을 필터링하여 소수면 send 합니다.

fun CoroutineScope.filter(numbers: ReceiveChannel<Int>, prime: Int) = produce<Int> {
    for (x in numbers) if (x % prime != 0) send(x)
}

이제 2에서 숫자의 흐름을 시작하고, 현재 채널로부터 소수를 가져옵니다. 그리고 각 소수에 대해 파이프라인 단계를 시작하여 새로운 파이프라인을 만듭니다.

numbersFrom(2) -> filter(2) -> filter(3) -> filter(5) -> filter(7) ...

다음 예제는 메인스레드의 context에서 전체 파이프라인을 실행하는 10개의 소수를 출력합니다.

모든 코루틴은 메인 runBlocking 코루틴의 범위에서 시작되므로, 모든 코루틴의 목록을 명시할 필요는 없습니다.

10개의 소수를 출력하고 cancelChildren 확장 함수를 사용하여 모든 children 코루틴을 취소합니다.

fun main() = runBlocking {
    var cur = numbersFrom(2)
    for (i in 1..10) {
        val prime = cur.receive()
        println(prime)
        cur = filter(cur, prime)
    }
    coroutineContext.cancelChildren() // cancel all children to let main finish    
}

fun CoroutineScope.numbersFrom(start: Int) = produce<Int> {
    var x = start
    while (true) send(x++) // infinite stream of integers from start
}

fun CoroutineScope.filter(numbers: ReceiveChannel<Int>, prime: Int) = produce<Int> {
    for (x in numbers) if (x % prime != 0) send(x)
}

출력 결과

코루틴 빌더의 iterator 를 사용하여 동일한 파이프라인을 만들 수 있습니다.

produce를 iterator로 send를 yield로 receive를 next로 ReceiveChannel을 Iterator로 대체해보세요. 그리고 Coroutine scope를 제거해보세요. 더이상 runBlocking가 필요하지 않을 것입니다. 그러나, 채널을 사용하는 파이프라인의 이점은 Dispatchers.Default context에서 여러 CPU 코어를 사용할 수 있다는 것입니다.

어쩃든, 위처럼 소수를 찾는 방법은 극단적인 케이스로, 실용적이지 못합니다. 실제 파이프라인은 다른 suspending invocations ( 원격 서비스에 대한 비동기 호출 ) 을 포함하지만, 파이프라인은 비동기적인 produce와는 다르게 임의의 suspension을 허용하지 않기 때문에 sequence / iterator을 사용하여 만들 수 없습니다.

Fan-out

여러개의 코루틴은 동일한 채널에서 수신할 수 있으며 상호간에 작업을 분배할 수 있습니다. 주기적으로 정수를 생성하는 생산자 코루틴을 예로 들어보겠습니다.

fun CoroutineScope.produceNumbers() = produce<Int> {
    var x = 1 // start from 1
    while (true) {
        send(x++) // produce next
        delay(100) // wait 0.1s
    }
}

그리고 여러개의 프로세서 코루틴을 가질 수 있습니다. 이 예에서는 id와 숫자만을 출력합니다.

fun CoroutineScope.launchProcessor(id: Int, channel: ReceiveChannel<Int>) = launch {
    for (msg in channel) {
        println("Processor #$id received $msg")
    }    
}

5개의 프로세서를 launch 하고, 약 1초동안 작동시켜보겠습니다.

val producer = produceNumbers()
repeat(5) { launchProcessor(it, producer) }
delay(950)
producer.cancel() // cancel producer coroutine and thus kill them all

출력 결과

Processor #2 received 1
Processor #4 received 2
Processor #0 received 3
Processor #1 received 4
Processor #3 received 5
Processor #2 received 6
Processor #4 received 7
Processor #0 received 8
Processor #1 received 9
Processor #3 received 10

출력 결과를 보면 알 수 있듯이, 비록 프로세서 아이디는 다를 수 있으나 number 값은 위와 동일할 것입니다.

producer 코루틴을 취소하면 채널이 닫히고 결국 프로세서 코루틴이 수행하는 채널에서 종료될 것입니다.

consumeEach 와는 다르게 for 루프 패턴은 다수의 코루틴에서 안전합니다. 만약 하나의 프로세서 코루틴이 실패하면, 다른 코루틴은 여전히 채널을 처리합니다. 반면에, consumeEach 로 작성된 프로세서는 정상 또는 비정상 완료시 항상 채널을 consumes ( 취소 ) 합니다.

Fan-in

여러개의 코루틴이 동일한 채널로 전송할 수 있습니다. 예를 들어, 문자열 채널과, 특정 delay 를 지정하여 문자열을 채널에 반복적으로 보내는 함수를 보겠습니다.

fun main() = runBlocking {
    val channel = Channel<String>()
    launch { sendString(channel, "foo", 200L) }
    launch { sendString(channel, "BAR!", 500L) }
    repeat(6) { // receive first six
        println(channel.receive())
    }
    coroutineContext.cancelChildren() // cancel all children to let main finish
}

suspend fun sendString(channel: SendChannel<String>, s: String, time: Long) {
    while (true) {
        delay(time)
        channel.send(s)
    }
}

출력 결과

foo
foo
BAR!
foo
foo
BAR!

Buffered channels

지금까지 보았던 채널에는 버퍼가 없었습니다. 버퍼링되지 않은 채널은 발신자와 수신자가 서로 만날 때 값을 전송합니다.

send 가 먼저 호출되면 receive 가 호출 될 때까지 일시 중단되고, receive가 먼저 호출되면 send 가 호출 될 때까지 일시 중단됩니다.

Channel() factory function 그리고 produce 빌더는 선택적으로 버퍼의 크기를 구체화하는 용량을 파라미터로 갖습니다.

버퍼는 발신자에게 일시 중단되기 전까지( BlockingQueue와 유사하게 버퍼가 꽉차기 전까지 ) 다수의 요소를 보내는 것을 허락합니다.

fun main() = runBlocking<Unit> {
    val channel = Channel<Int>(4) // create buffered channel
    val sender = launch { // launch sender coroutine
        repeat(10) {
            println("Sending $it") // print before sending each element
            channel.send(it) // will suspend when buffer is full
        }
    }
    // don't receive anything... just wait....
    delay(1000)
    sender.cancel() // cancel sender coroutine    
}

출력 결과

Sending 0
Sending 1
Sending 2
Sending 3
Sending 4

처음 요소 4개까지는 버퍼에 추가되고 다섯번째 요소를 보내려고 할 때 일시 중단됩니다.

Channels are fair

여러 코루틴에서 호출 한 순서와 관련하여 채널에 작업을 보내고 받는 것은 공정합니다. 그 순서는 First-In First-Out 입니다.

즉 호출할 첫번째 코루틴 receive 요소를 가져옵니다. 다음 예제에서는 두개의 코루틴 "ping" "pong" 는 공유 채널인 table 에서 ball 객체를 수신합니다.

data class Ball(var hits: Int)

fun main() = runBlocking {
    val table = Channel<Ball>() // a shared table
    launch { player("ping", table) }
    launch { player("pong", table) }
    table.send(Ball(0)) // serve the ball
    delay(1000) // delay 1 second
    coroutineContext.cancelChildren() // game over, cancel them
}

suspend fun player(name: String, table: Channel<Ball>) {
    for (ball in table) { // receive the ball in a loop
        ball.hits++
        println("$name $ball")
        delay(300) // wait a bit
        table.send(ball) // send the ball back
    }
}

출력 결과

ping Ball(hits=1)
pong Ball(hits=2)
ping Ball(hits=3)
pong Ball(hits=4)

때떄로 채널은 실행 프로그램의 특성으로 불공정한 실행을 처리할 수 있습니다.

Ticker channels

Ticker channel은 채널에서 마지막으로 소비된 이후 지연이 될 때마다 생성되는 특별한 rendezvous 채널 입니다.

쓸데없는 독립형으로 보일 수 있지만, 복잡한 시간 기반 produce 파이프라인 그리고 windowing , 시간 종속 처리를 수행하는 연산을 만드는데 유용합니다. Ticker channel 은 select 에서 사용될 수 있습니다.

이러한 채널을 만들기 위해서는 factory method tciker 을 사용해야합니다. 더이상 필요 요소가 없다는 것을 나타내려면 ReceiveChannel.cancel 메소드를 사용하면 됩니다.

fun main() = runBlocking<Unit> {
    val tickerChannel = ticker(delayMillis = 100, initialDelayMillis = 0) // create ticker channel
    var nextElement = withTimeoutOrNull(1) { tickerChannel.receive() }
    println("Initial element is available immediately: $nextElement") // initial delay hasn't passed yet

    nextElement = withTimeoutOrNull(50) { tickerChannel.receive() } // all subsequent elements has 100ms delay
    println("Next element is not ready in 50 ms: $nextElement")

    nextElement = withTimeoutOrNull(60) { tickerChannel.receive() }
    println("Next element is ready in 100 ms: $nextElement")

    // Emulate large consumption delays
    println("Consumer pauses for 150ms")
    delay(150)
    // Next element is available immediately
    nextElement = withTimeoutOrNull(1) { tickerChannel.receive() }
    println("Next element is available immediately after large consumer delay: $nextElement")
    // Note that the pause between `receive` calls is taken into account and next element arrives faster
    nextElement = withTimeoutOrNull(60) { tickerChannel.receive() } 
    println("Next element is ready in 50ms after consumer pause in 150ms: $nextElement")

    tickerChannel.cancel() // indicate that no more elements are needed
}

출력 결과

Initial element is available immediately: kotlin.Unit
Next element is not ready in 50 ms: null
Next element is ready in 100 ms: kotlin.Unit
Consumer pauses for 150ms
Next element is available immediately after large consumer delay: kotlin.Unit
Next element is ready in 50ms after consumer pause in 150ms: kotlin.Unit

안드로이드 Kotlin Coroutines 정리 Part 2

엄코딩 — Tue, 2 Apr 2019 13:27:21 +0900

Cancelling coroutine execution

장기적으로 실행되는 어플리케이션에서 백그라운드 코루틴 제어권을 얻는 것이 필요합니다.

예를 들어서 유저가 코루틴을 시작한 페이지를 닫은 경우, 결과가 더이상 필요하지 않은 경우, 해당 작업을 취소할 수 있습니다.

launch 함수는 코루틴 실행을 취소할 수 있는 job 을 반환합니다.

val job = launch {
    repeat(1000) { i ->
            println("I'm sleeping $i ...")
        delay(500L)
    }
}
delay(1300L) // delay a bit
println("main: I'm tired of waiting!")
job.cancel() // cancels the job
job.join() // waits for job's completion 
println("main: Now I can quit.")

출력 결과는 다음과 같습니다.

I'm sleeping 0 ...
I'm sleeping 1 ...
I'm sleeping 2 ...
main: I'm tired of waiting!
main: Now I can quit.

메인 호출 job.cancle 이 발생하면, 코루틴이 취소되었기 때문에 어떠한 출력도 볼 수 없습니다.

job extension 함수로 cancel과 join을 결합한 cancelAndJoin 있습니다.

cancelAndJoin

suspend fun Job.cancelAndJoin(): Unit (source)

Cancels the job and suspends invoking coroutine until the cancelled job is complete.

This suspending function is cancellable and always checks for the cancellation of invoking coroutine’s Job. If the Job of the invoking coroutine is cancelled or completed when this suspending function is invoked or while it is suspended, this function throws CancellationException.

In particular, it means that a parent coroutine invoking cancelAndJoin on a child coroutine that was started using launch(coroutineContext) { ... } builder throws CancellationException if the child had crashed, unless a non-standard CoroutineExceptionHandler is installed in the context.

This is a shortcut for the invocation of cancel followed by join.

Cancellation is cooperative

코루틴 취소는 협조적입니다. 코루틴 코드는 취소가능하도록 협조되어야 합니다. kotlinx.coroutines의 모든 suspending function은 취소가능합니다. 코루틴의 취소를 확인하고, 취소되었을 때 CancelliationException 을 발생시킵니다.

하지만, 코루틴이 복잡한 환경에서 작동하고, 취소를 확인하지 않으면 다음 예제처럼 취소할 수 없습니다.

val startTime = System.currentTimeMillis()
val job = launch(Dispatchers.Default) {
    var nextPrintTime = startTime
    var i = 0
    while (i < 5) { // computation loop, just wastes CPU
        // print a message twice a second
        if (System.currentTimeMillis() >= nextPrintTime) {
            println("I'm sleeping ${i++} ...")
            nextPrintTime += 500L
        }
    }
}
delay(1300L) // delay a bit
println("main: I'm tired of waiting!")
job.cancelAndJoin() // cancels the job and waits for its completion
println("main: Now I can quit.")

출력 결과

I'm sleeping 0 ...
I'm sleeping 1 ...
I'm sleeping 2 ...
main: I'm tired of waiting!
I'm sleeping 3 ...
I'm sleeping 4 ...
main: Now I can quit.

Making computation code cancellable

계산 코드를 취소할 수 있게 만드는 방법은 두가지가 있습니다. 첫번째 방법은, 주기적으로 취소를 체크하는 suspending function 를 발생시키는 것입니다. yield() 함수는 목적을 위한 좋은 선택입니다. 다른 한가지 방법은 명시적으로 취소 상태를 체크하는 것입니다.

아래 코드는 후자의 접근 방식으로 접근한 것입니다.

fun main() = runBlocking {
    val startTime = System.currentTimeMillis()
    val job = launch(Dispatchers.Default) {
        var nextPrintTime = startTime
        var i = 0
        while (isActive) { // cancellable computation loop
            // print a message twice a second
            if (System.currentTimeMillis() >= nextPrintTime) {
                println("I'm sleeping ${i++} ...")
                nextPrintTime += 500L
            }
        }
    }
    delay(1300L) // delay a bit
    println("main: I'm tired of waiting!")
    job.cancelAndJoin() // cancels the job and waits for its completion
    println("main: Now I can quit.")    
}

위 코드는 이 전 코드에서 while ( i < 5 ) 를 while ( isActive ) 로 변경한 것입니다.

안드로이드에서 isActive 설명은 아래와 같습니다.

* This property is a shortcut for `coroutineContext.isActive` in the scope when
 * [CoroutineScope] is available.
 * See [coroutineContext][kotlin.coroutines.coroutineContext],
 * [isActive][kotlinx.coroutines.isActive] and [Job.isActive].
 */
@Suppress("EXTENSION_SHADOWED_BY_MEMBER")
public val CoroutineScope.isActive: Boolean
    get() = coroutineContext[Job]?.isActive ?: true

출력 결과

I'm sleeping 0 ...
I'm sleeping 1 ...
I'm sleeping 2 ...
main: I'm tired of waiting!
main: Now I can quit.

while ( i < 5 ) 를 사용했을 때와는 다르게 1300L 만큼 delay 된 후에 main이 실행된 것을 볼 수 있습니다.

Closing resources with finally

취소 가능한 suspending functions 는 일반적인 방법으로 처리할 수 있는 CancellationException을 throw 합니다.

예를 들어서 try { ... } finally { .. } 표현과 Kotlin use function 은 코루틴이 취소되었을 때 종료 작업을 실행합니다.

fun main() = runBlocking {
    val job = launch {
        try {
            repeat(1000) { i ->
                    println("I'm sleeping $i ...")
                delay(500L)
            }
        } finally {
            println("I'm running finally")
        }
    }
    delay(1300L) // delay a bit
    println("main: I'm tired of waiting!")
    job.cancelAndJoin() // cancels the job and waits for its completion
    println("main: Now I can quit.")    
}

출력 결과

I'm sleeping 0 ...
I'm sleeping 1 ...
I'm sleeping 2 ...
main: I'm tired of waiting!
I'm running finally
main: Now I can quit.

Run non-cancellable block

finally 블록에서 suspending function을 호출하려고 시도하면 실행되고 있는 코루틴이 취소되므로 CancellationException 이 발생합니다.

일반적으로 모든 문제를 해결하는 closing 연산들 ( 파일 닫기, job 취소, 또는 다른 종류의 통신 채널 닫기 등 ) 은 일반적으로 non-blocking 이고 suspending functions를 포함하지 않기 때문에 문제가 되지 않습니다. 그러나, 취소된 코루틴에서 delay 또는 중단해야 하는 경우 충돌하는 코드를 withContext 함수와 NonCancellable context를 사용한 withContext(NonCancellable) { ... } 를 사용하여 해당 코드를 감쌀 수 있습니다.

fun main() = runBlocking {
    val job = launch {
        try {
            repeat(1000) { i ->
                    println("I'm sleeping $i ...")
                delay(500L)
            }
        } finally {
            withContext(NonCancellable) {
                println("I'm running finally")
                delay(1000L)
                println("And I've just delayed for 1 sec because I'm non-cancellable")
            }
        }
    }
    delay(1300L) // delay a bit
    println("main: I'm tired of waiting!")
    job.cancelAndJoin() // cancels the job and waits for its completion
    println("main: Now I can quit.")    
}

출력 결과

I'm sleeping 0 ...
I'm sleeping 1 ...
I'm sleeping 2 ...
main: I'm tired of waiting!
I'm running finally
And I've just delayed for 1 sec because I'm non-cancellable
main: Now I can quit.

Timeout

실행중인 코루틴을 취소해야하는 가장 명백한 이유는 실행시간이 초과한 경우입니다. 해당 코루틴에 대한 참조를 수동적으로 추적하고, delay 또는 일시 정지된 후에 참조를 통해 추적하여 취소할 수 있지만 whilteTimeout 기능을 사용할 수도 있습니다.

fun main() = runBlocking {
    withTimeout(1300L) {
        repeat(1000) { i ->
                println("I'm sleeping $i ...")
            delay(500L)
        }
    }
}

출력 결과

I'm sleeping 0 ...
I'm sleeping 1 ...
I'm sleeping 2 ...
Exception in thread "main" kotlinx.coroutines.TimeoutCancellationException: Timed out waiting for 1300 ms
 at kotlinx.coroutines.TimeoutKt.TimeoutCancellationException (Timeout.kt:122) 
 at kotlinx.coroutines.TimeoutCoroutine.run (Timeout.kt:88) 
 at kotlinx.coroutines.EventLoopBase$DelayedRunnableTask.run (EventLoop.kt:316) 
 at kotlinx.coroutines.EventLoopBase.processNextEvent (EventLoop.kt:123) 
 at kotlinx.coroutines.DefaultExecutor.run (DefaultExecutor.kt:61) 
 at java.lang.Thread.run (Thread.java:745)

withTimeout에 의해 발생되는 TimeoutCancellationException은 CancellationException의 subclass 입니다.

이전 콘솔에서는 보지 못했는데, 그 이유는 취소된 코루틴 내부 CancellationException은 코루틴 완성에 정상적인 이유로 고려되었기 때문입니다. 그러나 예제에서는 withTimeout를 main 내부에서 사용했습니다.

취소는 단지 예외이기 때문에, 모든 리소스들은 정상적으로 닫힙니다. 만약 구체적으로 모든 종류의 타임아웃 또는 withTimeout 과 유사한 withTimeoutOrNull을 사용하여,

null 또는 timeout return해야 하는 추가적인 action이 필요한 경우에 try { ... } catch (e: TimeoutCancellationException { ... } 을 사용하여 코드를 감쌀 수 있습니다.

fun main() = runBlocking {
    val result = withTimeoutOrNull(1300L) {
        repeat(1000) { i ->
                println("I'm sleeping $i ...")
            delay(500L)
        }
        "Done" // will get cancelled before it produces this result
    }
    println("Result is $result")
}

출력 결과

I'm sleeping 0 ...
I'm sleeping 1 ...
I'm sleeping 2 ...
Result is null

안드로이드 Kotlin Coroutines 정리 Part 1

엄코딩 — Tue, 2 Apr 2019 10:30:20 +0900

Coroutin GlobalScope

 GlobalScope.launch { // launch new coroutine in background and continue
            delay(1000L) // non-blocking delay for 1 second (default time unit is ms)
            Log.e("coroutine","World!") // print after delay
        }
        Log.e("coroutine","Hello,")
        Thread.sleep(2000L) // block main thread for 2 seconds to keep JVM alive

Hello,
World!

본질적으로 코루틴은 light-weight threads 입니다. 코루틴은 CoroutineScope의 context에서 시작된 Coroutine builder로 시작됩니다.

여기서 우리는 GlobalScope에서 새로운 코루틴을 시작합니다. 즉, 새로운 코루틴의 생명주기는 Application의 생명주기로 제한됩니다.

GlobalScope.launch { ... } with thread { ... } and delay(...) with Thread.sleep(...). Try it.

GlobalScope.launch 를 thread로 바꾸어 보면 아래와 같은 에러 문구를 확인할 수 있습니다.

Suspend function 'delay' should be called only from a coroutine or another suspend function

delay()는 스레드를 차단하지 않으며, 코루틴에서만 사용할 수 있습니다.

runBlocking { ... }

아래 코드는 runBlocking 코루틴 빌더를 사용하여 blocking에 대해 명시적으로 알아보겠습니다.

fun main() { 
    GlobalScope.launch { // launch new coroutine in background and continue
        delay(1000L)
        println("World!")
    }
    println("Hello,") // main thread continues here immediately
    runBlocking {     // but this expression blocks the main thread
        delay(2000L)  // ... while we delay for 2 seconds to keep JVM alive
    } 
}

처음 위 코드를 접했을 때 무슨말인지 몰랐습니다. 그래서 로그를 추가하여 순서를 파악해 보았습니다.

GlobalScope.launch { // launch new coroutine in background and continue
            delay(1000L) // non-blocking delay for 1 second (default time unit is ms)
            Log.e("sequence","4") // print after delay
        }
        
        Log.e("sequence","1")

        runBlocking {     // but this expression blocks the main thread
            delay(4000L)  // ... while we delay for 2 seconds to keep JVM alive
            Log.e("sequence","3")

        }
        
        Log.e("sequence","2")

어떻게 출력될까요?

출력 순서는 1 4 3 2 입니다. 즉, GlobalScople.~에서 delay는 메인스레드를 막지 않고, runBlocking은 메인스레드를 막고 있습니다.

import kotlinx.coroutines.*

fun main() = runBlocking<Unit> { // start main coroutine
    GlobalScope.launch { // launch new coroutine in background and continue
        delay(1000L)
        println("World!")
    }
    println("Hello,") // main coroutine continues here immediately
    delay(2000L)      // delaying for 2 seconds to keep JVM alive
}

위 코드를 통해서 runBlocking을 사용하여 main 함수를 더 관용적인 방법으로 다시 작성할 수 있습니다.

 runBlocking<Unit> { ... }

위 코드는 최상위 메인 코루틴을 시작하기 위해 사용되는 어댑터로서의 역할을 하게됩니다.

Kotlin의 Unit 즉, 올바른 형식의 main 함수가 반환되어야하기 떄문에 반환 형식을 명시적으로 Unit으로 지정합니다.

join()

다른 코루틴이 작동하는 동안 delay하는 것은 좋지 않은 접근 방법입니다.

백그라운드 작업이 완료될때까지 join()을 사용하여 명시적으로 기다려야합니다.

fun main() = runBlocking {
    val job = GlobalScope.launch { // launch new coroutine and keep a reference to its Job
        delay(1000L)
        println("World!")
    }
    println("Hello,")
    job.join() // wait until child coroutine completes    
}

구조화된 동시성

코루틴의 실용적인 사용을 위해 여전히 요구되는 사항이 있습니다. 우리가 GlobalScope.launch 사용할 때 최상위 레벨의 코루틴을 생성합니다. 물론 light-weigh 이지만 실행되는 동안 일부 메모리 자원을 여전히 소모합니다. 새로 시작된 코루틴에 대한 참조를 유지하는 것을 잊어버리면 여전히 실행됩니다. 코루틴의 코드가 멈추는 경우 ( 예를 들어 너무 오랜 시간동안 delay되는 경우 ), 너무 많은 코루틴을 실행하여 메모리가 부족하면 어떻게 될까요?

즉, 실행된 모든 코루틴에 대한 참조를 수동으로 유지하고 이들을 join() 해야 하는 것은 오류가 발생하기 쉽습니다.

해결방법은 GlobalScope에서 coroutines를 시작하는 대신 일반적으로 Thread( thread는 항상 전역 )와 마찬가지로, 수행중인 작업의 특정 범위에서 동시 루틴을 시작할 수 있습니다.

runBlocking를 포함한 모든 코루틴 빌더는 CoroutineScope 인스턴스를 추가합니다. 외부 코루틴에서는 범위 내에서 시작된 모든 코루틴이 완료 될 때까지 코루틴을 완료하지 않기 때문에 명시적으로 처리하지 않고도 ( join() ) 이 범위에서 코루틴을 시작할 수 있습니다.

아래 코드는 위의 코드를 join() 사용하지 않고 더 간단하게 작성한 코드입니다.

fun main() = runBlocking { // this: CoroutineScope
    launch { // launch new coroutine in the scope of runBlocking
        delay(1000L)
        println("World!")
    }
    println("Hello,")
}

Scope builder

다른 빌더가 제공하는 코루틴 Scope 외에도 coroutineScope 빌더를 사용하여 자신의 범위를 선언할 수 있습니다.

새로운 코루틴 범위를 작성하고 시작한 모든 자식이 완료될 때까지 완료되지 않습니다.

runBlocking 와 coroutineScope의 주요 차이점은 runBlocking는 모든 자식이 완료될 때까지 기다리는 동안 현재 스레드를 차단하지 않고,

coroutineScope는 모든 자식이 완료될 때 까지 기다리지 않고 현재 스레드를 차단합니다.

fun main() = runBlocking { // this: CoroutineScope
    launch { 
        delay(200L)
        println("Task from runBlocking")
    }
    
    coroutineScope { // Creates a new coroutine scope
        launch {
            delay(500L) 
            println("Task from nested launch")
        }
    
        delay(100L)
        println("Task from coroutine scope") // This line will be printed before nested launch
    }
    
    println("Coroutine scope is over") // This line is not printed until nested launch completes
}

출력 결과

Task from coroutine scope
Task from runBlocking
Task from nested launch
Coroutine scope is over

Extract function refactoring

launch { ... } 코드 블록을 별도의 함수로 추출해 봅시다. 이 코드에서 "Extract function" 리펙토링을 실행하면 suspend 함수로 작성할 수 있습니다. 이것이 첫번쨰 suspend 기능입니다. suspending functions는 코루틴에서 사용할 수 있지만 추가적으로 동시에 다른 suspend 함수 ( delay 등 )을 사용할 수 있습니다.

fun main() = runBlocking {
    launch { doWorld() }
    println("Hello,")
}

// this is your first suspending function
suspend fun doWorld() {
    delay(1000L)
    println("World!")
}

Glide 라이브러리 사용시 유의사항

엄코딩 — Mon, 28 Jan 2019 12:44:41 +0900

Fabric에서 오류를 확인하던 도중에

Glide 관련 You cannot start a load for a destroyed activity 에러를 확인했다.

에러 로그는 다음과 같다.

Fatal Exception: java.lang.IllegalArgumentException: You cannot start a load for a destroyed activity

at com.bumptech.glide.manager.RequestManagerRetriever.b(SourceFile:302)

at com.bumptech.glide.manager.RequestManagerRetriever.a(SourceFile:127)

at com.bumptech.glide.Glide.a(SourceFile:632)

at com.likealocal.wenwo.dev.wenwo_android.utils.glide.GlideApp.a(SourceFile:84)

at com.likealocal.wenwo.dev.wenwo_android.ui.begin.SplashActivity.onAdvertisementSuccess(SourceFile:383)

at com.likealocal.wenwo.dev.wenwo_android.http.protocol.AdvertisementRequest$send$1.accept(SourceFile:43)

at com.likealocal.wenwo.dev.wenwo_android.http.protocol.AdvertisementRequest$send$1.accept(SourceFile:23)

at io.reactivex.internal.observers.ConsumerSingleObserver.a(SourceFile:61)

at io.reactivex.internal.operators.single.SingleObserveOn$ObserveOnSingleObserver.run(SourceFile:81)

at io.reactivex.android.schedulers.HandlerScheduler$ScheduledRunnable.run(SourceFile:109)

at android.os.Handler.handleCallback(Handler.java:790)

at android.os.Handler.dispatchMessage(Handler.java:99)

at android.os.Looper.loop(Looper.java:164)

at android.app.ActivityThread.main(ActivityThread.java:7002)

at java.lang.reflect.Method.invoke(Method.java)

at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:441)

at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1408)

해당 에러 내용은 액티비티가 destroy되고 load를 시작할 수 없다는 내용인데,

해결 방법은 무엇일까?

https://github.com/bumptech/glide/issues/803 Glide 깃헙에도 해당 에러를 가지고 얘기가 많았다.

하지만 위 링크에서는 내가 원하는 정확한 해답을 찾을 수 없었다.

구글링을 통해 문제 상황을 검색하던 도중 내가 원하던 답을 찾을 수 있었다.

https://stackoverflow.com/questions/31964737/glide-image-loading-with-application-context/32887693#32887693

문제 상황 인식

해당 액티비티가 종료되고 나서 Glide load를 진행할 수 없다.

해결 방법

1. Fragment의 경우를 생각해보면 이해하기 쉽다.

프레그먼트의 onCreateView 메소드에서 Glide.with~를 사용하는 경우,

사용자가 Back key를 눌렀을 경우 어떻게 될까?

해당 이미지가 5MB인 경우 with(getActivity.getApplicatonContext())를 사용하는경우 5MB의 데이터가 모두 다운로드되어 디코딩되고 캐싱되고, 해당 ImageView에 세팅된다. 그리고 이것은 Glide의 garbage collect된다.

2. with((Fragment)this) 를 사용하면 Glide는 Fragment의 생명주기를 구독하고, Fragment가 stop되자마자 해결되지 않은 모든 request를 멈추어야 한다. 그리고 destroy될 때 보류중인 요청은 모두 삭제된다. 즉, 이미지 다운로드가 중단될 것이고, 종료된 프레그먼트에서 더이상 리소스가 사용되지 않을 것이다.

3.with(getActivity())를 사용하면 Glide는 Activity의 생명주기를 구독하고, 위(Fragment)와 같은 일이 일어날 것이다. 하지만 Activity의 활동이 중지되거나 소멸된 경우에만 발생할 것이다.

4. 가장 좋은 방법은 사용 가능한 request들의 완료를 피하기 위해 가장 가까운 context/fragment를 사용하는 것이다. 또한, load를 수동으로 중지하는 방법도 있다. Glide.clear(ImageView|Target)

마지막으로 중요한 점은,

with(this)가 가능한 경우 이 방법을 사용하고, Adapter의 경우 RequestManger를 인자로 받는 것을 추천.

이미지 가로세로 비율 유지하기 adjustBounds

엄코딩 — Mon, 21 Jan 2019 15:21:15 +0900

이미지 가로세로 비율 유지

문제 상황

Glide를 사용하여 ImageView에 해당 url을 넣어주었는데, 이미지뷰 크기가 url에 해당하는 실제 이미지크기보다 크게 설정되는 상황.

프로젝트를 작업중에 이미지 가로세로 비율을 유지해야하는 경우가 많은데요.

저의 경우에는 최근에 '전면광고' 화면에서 해당 이미지의 가로세로 비율을 유지해야하는 것이 중요한 포인트였습니다.

해당 이미지가 들어가게 될 ImageView xml 코드입니다.

ImageView의 background를 준 이유는 여백을 확인해보기 위함이었습니다.

서버 통신으로 받아온 url을 glide를 사용하여 위 이미지뷰에 넣어주었는데요,

( 사전 동의를 구하고 업로드하는 저희 프로젝트 개발서버 테스트 화면입니다. )

이미지뷰의 background로 주었던 색이 보이게 되는데요,

이로써 이미지뷰의 높이가 실제 이미지보다 더 크게 잡혀있는 것을 확인해보실 수 있습니다.

그리고 '건너뛰기' 의 xml 코드상으로 constraintLayout을 사용하여 이미지뷰의 하단 오른쪽에 위치하게 해주었는데, 이 상황에서는 실제 이미지보다 더 크게잡혀있어서 해당 '건너뛰기' 버튼의 위치도 이상했습니다.

처음에 해결방법으로 생각했던 방법은, Glide의 onResourceReady 함수에서 해당 이미지의 가로와 세로길이를 구하고, ratio를 구해서 imageView의 크기를 설정해주는 것이었습니다.

하지만 초기에 이미 resize 작업을 거친 뒤에 glide를 통해 이미지를 이미지뷰에 넣어주는 작업을 했기 때문에 효율적이지 못하다고 생각했습니다.

그래서 다시 ImageView 속성으로 초점을 돌렸습니다.

역시 ImageView에 위와 같은 문제상황을 단번에 해결할만한 기능이 있었습니다.

해결방법

바로 ImageView의 adjustBounds 속성 입니다.

https://developer.android.com/reference/android/widget/ImageView

위 링크에서 설명하고 있듯이, adjustBounds는 이미지의 가로세로 ratio를 유지하기 위한 옵션입니다. adjustBounds에 true 값을 주니 이미지의 가로세로 비율이 유지되면서,

이미지뷰가 실제 이미지의 크기만큼만 높이를 갖게 되었습니다.

정말 간단하게 해결할 수 있는 문제였지만, 다시한번 ImageView 속성값들에 대해 공부할 수 있었던 계기가 되었습니다.

아래 링크는 구글 플레이스토어에 있는 제가 개발하고 있는 android wenwo app 다운로드링크입니다.

https://play.google.com/store/apps/details?id=com.likealocal.wenwo.dev.wenwo_android

피드백주시면서, 서로 소통할 수 있었으면 좋겠습니다.

realm 레코드 순서

엄코딩 — Thu, 17 Jan 2019 17:31:44 +0900

Realm 객체 삭제 후 삽입시 레코드 순서 이상 현상

문제상황

프로젝트를 진행하면서 최근 검색어 기능을 작업을 진행하면서,

생성했던 Realm 객체를 최근 검색 순서대로 정렬해서 보여줘야 하는 경우가 생겼다.

요구사항으로는 최근 검색어는 5개까지만 노출해서 보여주도록 만들어야 했다.

처음 접근했던 방식은, Realm 데이터를 단순하게 생성하고, RecyclerView에서 reverseLayout을 true 값을 주었다.

그렇게해서 가장 마지막에 생성되었던 Realm 객체가 최상단에 보이는 RecyclerView를 만들었다.

하지만,

특정한 사이즈만큼만 RecyclerView에서 보여주는 과정에서 문제가 발생했다.

해당 검색어를 삭제하고, 다른 검색어를 입력하여 Realm 객체를 생성하고 어댑터를 갱신했는데,

최근 검색어가 5개가 있을 때 0번째 index의 아이템을 삭제해주고 Realm 객체를 추가해주면 당연하게 마지막인덱스에 데이터가 쌓일 줄 알았다. 아니었다.

Realm 레코드들은 기본적으로 정렬되지 않았고, 명시적으로 정렬하지 않으면 정렬되지 않은 세트로 간주해야 했다.

일반적으로 레코드들은 삽입 한 순서대로 나오지만, 그걸 보장할 수는 없다.

기술적인 이유는 디스크의 데이터를 압축하는 것이므로 목록 중간에있는 항목을 삭제하면 마지막 항목이 해당 위치로 이동하는 경우가 발생한다.

해결방안

결론은, realm 객체들을 명시적으로 sort를 해주어야 한다.

최근 검색어를 realm 추가하는 소스이다.

기존에는 primary key 없이 realm 객체를 생성했는데, 명시적으로 정렬을 해주기 위해서 primary key를 사용했다.

primary key값을 검색이 이루어진 현재 시간값으로 설정하였다.

그리고 realm 데이터를 불러올 때, primary key 필드명 time을 사용하여 Descending 정렬을 해주었다. 이 과정에서 RecyclerView의 reverseLayout값을 false 값을 주었다.

Can not perform this action after onSaveInstanceState

엄코딩 — Wed, 21 Nov 2018 12:06:45 +0900

Fabric [ New Fatal Issue] 가 전송되면 항상 조마조마한게 개발자의 마음...

이번 에러 메세지를 해결하는 과정을 기록해보았습니다.

이번 에러 메세지는 다음과 같습니다.

Fatal Exception: java.lang.illegalStateException

Can not perform this action after onSaveInstanceState

이러한 경우는 테스트할 때 한 번도 본 적이 없는 에러였습니다.

직역을 해보자면,

'onSaveInstanceState 후에 action을 수행할 수 없다'

우선, developer.android.com에서 onSaveInstanceState 메소드에 대해서 살펴보았습니다.

간단하게 보고 지나갔던 기억이 있었는데, 다시 보니 중요한 내용이 많았습니다.

이 문제를 해결하면서 중요하다고 생각하는 부분을 정리해 보았습니다.

( 안드로이드 공식 가이드 문서 참고 )

정상적인 앱 동작으로 인해 액티비티가 소멸되는 경우로,

사용자가 Back 버튼을 누르는 경우
액티비티가 finish() 를 호출하여 자체적인 소멸 신호를 보내는 경우
액티비티가 현재 정지되어 있고 장시간 사용되지 않는 경우
전면에 있는 액티비티가 더 많은 리소스를 필요로 하여 시스템이 백그라운드 프로세스를 종료해서 메모리를 회수해야 할 필요가 있는 경우 ( 시스템이 액티비티를 소멸시킬 수 있음 )

사용자가 Back 버튼을 누르거나 액티비티가 스스로 종료되어 소멸된 경우, Activity 인스턴스에 대한 시스템의 개념은 완전히 사라지게 됩니다. 왜냐하면 동작이 액티비티가 더 이상 필요치 않다는 것을 나타내기 때문입니다. 하지만 시스템이 정상적인 앱 동작이 아닌 시스템 제약 조건으로 인해 액티비티를 소멸한 경우, 실제 Activity 인스턴스는 사라지지만 시스템은 그것이 존재하고 있었음을 기억합니다. 예를 들어 사용자가 다시 해당 액티비티를 탐색하면, 시스템은 소멸된 액티비티의 상태를 설명하는 저장된 데이터 세트를 사용하여 액티비티의 새 인스턴스를 생성합니다.

시스템이 이전 상태를 복원하기 위해 사용하는 저장된 데이터를 "인스턴스 상태"라고 하며, 이는 Bundle 객체에 저장된 키-값 쌍의 컬렉션입니다.

기본적으로 시스템은 Bundle 인스턴스 상태를 사용하여 액티비티 레이아웃의 각 View 객체에 대한 정보를 저장합니다. 따라서 액티비티 인스턴스가 소멸되고 재생성된 경우, 레이아웃의 상태는 별도의 코드 요청 없이 이전 상태로 복원됩니다. 하지만 액티비티에서 사용자 진행 상태를 추적하는 멤버 변수처럼 액티비티에 복원하고자 하는 상태 정보가 더 많이 있는 경우도 있습니다.

※ Android 시스템이 액티비티에서 뷰의 상태를 복원하기 위해서는 android:id 특성으로 제공되는 고유 ID가 각 뷰마다 있어여 합니다.

액티비티 상태에 대한 추가 데이터를 저장하려면 onSaveInstance() 콜백 메서드를 재정의해야 합니다. 시스템은 사용자가 액티비티를 떠날 경우 이 메서드를 호출하며, 액티비티가 예기치 않게 소멸될 경우 저장되는 Bundle 객체로 전달합니다. 시스템이 나중에 액티비티 인스턴스를 재생성해야 하는 경우, 동일한 Bundle 객체를 onRestoreInstanceState() 및 onCreate() 메서드 모두에 전달합니다.

onSaveInstanceState() 메서드가 무엇인지 파악하다보니, 자연스럽게 무엇이 문제였는지 깨달았습니다.

문제 상황의 원인

Fragment를 생성할 때, commit() 메서드를 호출하는 시점은 Activity가 상태를 저장하기 전에 이루어져야 하는데, Activity의 상태 저장 후에 이루어졌기 때문입니다.

이 문제를 해결하기 위해서 즉, Activity가 상태를 저장하고 난 후에 commit()를 하기 위해서는

commitAllowingStateLoss() 메서드를 이용해서 commit를 진행하면 됩니다.

참고 사이트 : https://developer.android.com/training/basics/activity-lifecycle/recreating?hl=ko

http://gogorchg.tistory.com/entry/Android-Can-not-perform-this-action-after-onSaveInstanceState

http://unikys.tistory.com/318

기존 앱에 App Bundle 적용하기

엄코딩 — Fri, 16 Nov 2018 17:47:33 +0900

2018 Google IO에서 App Bundle에 대한 세미나를 들었습니다.

'적용해야지' 말만 하다가 이번 기회에 적용해보았습니다.

App Bundle 이란?

App Bundle 이란 APK 와 비슷하지만 모든 코드, 리소스, CPU 아키텍처와 메다데이터를 압축한 zip파일입니다. 그래서 Google Play는 App Bundle에서 사용자 기기에 필요한 코드와 리소스만을 선택해 빌드될 수 있는 것입니다.

App Bundle 을 빌드하면 .aab 파일이 생성됩니다.

빌드된 aab 파일을 Play Store에 업로드하면 Play Store가 각각 기기에 최적화된 APK를 빌드합니다.

( 위의 자료는 정리를 잘해두신 zerogdev 블로그를 참고하였습니다. )

안드로이드 앱 번들은 모든 응용 프로그램의 컴파일 된 코드와 리소스를 포함하는 새로운 업로드 형식이지만, Google Play 에 APK 생성 및 서명을 연기합니다.

그런 다음, Google Play의 새로운 앱 게제 모델인 Dynamic Delivery를 이용하여,

App Bundle을 사용자의 기기 구성에 최적화된 APK를 생성하고 게제함으로써 앱을 실행하는 데 필요한 코드와 리소스만 다운로드합니다.

이제는, 서로 다른 장치를 지원하기 위해 더 이상 APK를 작성, 서명 및 관리 할 필요가 없으며 사용자는 더 작고 최적화 된 APK를 다운로드 받을 수 있습니다.

App Bundle 생성

서비스 중인 앱의 App Bundle을 생성하는 방법은 간단합니다.

Build -> Generate Bundle / APK -> Android App Bundle

그런데 저는 아래와 같은 에러 메시지를 확인했습니다.

The Android Gradle plugin supports only Kotlin Gradle plugin version 1.2.51 and higher. Project '~~~' is using version 1.2.20.

Kotlin은 사용하고있는데, Kotlin Gradle plugin version이 낮아서 발생하는 에러였습니다.

그래서 해당 플러그인을 업데이트하려고 보니, 안드로이드 스튜디오 버전을 올리기로 결심.

( 저는 3.2 Preview 버전을 사용하고 있었습니다. )

3.2 버전으로 올리니 위와 같은 화면을 볼 수 있네요.

코틀린 플러그인 버전은 1.2.51을 사용했습니다.

App Bundle로 생성하니 .aab가 나오긴하는데... 용량이 기존 용량과 비슷합니다.

기존 용량은 google play store에 올렸을 때 28MB 정도였습니다.

의심을 품고, 업로드 해보겠습니다.

음 이건... 55%나 감소되는거면 기존에 안쓰는 리소스가 상당했나 봅니다.

놀랍게도 정말 용량이 확 줄은 것을 확인할 수 있습니다.

기쁜 마음을 추스리고,

배포 후 다운로드 받아서 이상이 없습니다!!

App Bundle 사용하시고, 사용자가 다운받기에 부담스럽지 않은 용량이 되도록 노력해보세요!

읽어주셔서 감사합니다.

혹시나 제가 잘 못 이해한 부분이나, 추가 조언, 피드백 환영합니다.

주저마시고 말해주세요.

apksigner을 사용하여 unsigned.apk 서명

엄코딩 — Fri, 9 Nov 2018 18:27:07 +0900

apksigner

프로젝트 진행중 중국 Baidu 앱 스토어에 앱을 재등록해야하는 상황을 겪었습니다.

Baidu에서 제공하는 apk파일을 다운로드한 후에, 서명을 하고 업로드를 진행해야합니다.

참고로 저는 중국어를 못해서 번역 돌렸습니다.

( 번역돌려도 무슨말인지... 한참을 생각했습니다. )

이 과정에서 '서명되지 않은 apk 파일을 어떻게 서명할까'라는 의문이 들었고,

apksigner 를 알게되었습니다.

apksigner는 간단히 말하자면 이 도구를 사용해서 apk에 서명하거나, 해당 apk가 지원하는 모든 Android 플랫폼 버전에서 서명이 성공적으로 검증되는지를 확인할 수 있는 기능을 제공하는 도구입니다.

제가 해야하는 일은 apksigner를 통해 unsigned.apk 즉, 서명되지 않은 apk를 수동으로 서명해야 했습니다.

주의 사항 : apksigner 도구를 사용하려면 수정 버전 24.0.3 이상의 Android SDK 빌드 도구를 설치해야 합니다. SDK Manager를 사용하여 이 패키지를 업데이트할 수 있습니다.

하지만, 서명되지 않은 APK 수동으로 서명하기 해당 페이지를 보고 시도해보았지만..

gradlew 명령어도, apksigner 명령어도 먹질않았습니다.

-bash: apksigner: command not found

위와 같은 문구가 뜨면서 말이죠.

apksigner는 어디서 쓸 수 있는걸까...

이런 생각중에 google developer reference에 있는 주의사항이 생각났습니다.

apksigner 도구를 사용하려면 수정 버전 24.0.3 이상의 Android SDK 빌드 도구를 설치해야 합니다. SDK Manager를 사용하여 이 패키지를 업데이트할 수 있습니다.

'아 경로를 변경해서 해봐야지' 라는 생각과 함께...

안드로이드가 설치된 경로 -> sdk -> build-tools -> 사용하고있는 버전 ( 저는 26.0.2 ) -> apksigner

이 경로에 와보니 apksigner이 보입니다.

apksigner sign --ks my-release-key.jks --out my-app-release.apk my-app-unsigned-aligned.apk

그럼 이제 터미널로 돌아와서, 위의 양식대로 작성하시면 됩니다.

예시 : ~/Android/sdk/build-tools/26.0.2/apksigner sign --ks [서명키경로] --out [signed.apk경로] [unsigned.apk경로]

[서명키경로] : Baidu 앱 업로드의 경우 Baidu에서 제공하는 ~unsigned.apk를 다운로드 받고, 업로드할 앱의 서명을 입혀줘야합니다. 즉, [서명키경로]에는 업로드할 앱의 키파일(.jks) 경로를 입력합니다.

예시 : /Users/admin/AndroidProject/myProject/testApp/key/test_keystore.jks

[signed.apk경로] : unsigned.apk가 서명된 후, 서명된 apk가 만들어질 경로와 해당 apk파일의 이름을 입렵합니다.

예시 : /Users/admin/Desktop/my_signed.apk 입력하시면 데스크탑 폴더에 my_signed.apk가 생성됩니다.

[unsigned.apk경로] : 서명해야할 apk 경로, 즉 서명되지않은 apk 경로를 입력합니다.

예시 : /Users/admin/Desktop/my_unsigned.apk

옳바르게 입력하셨다면 Kestore password for signer #1: 보이실겁니다.

Key password를 입력하시면 signed.apk경로에 서명된 apk 파일이 생성됩니다!

읽어주셔서 감사합니다.

참고

https://developer.android.com/studio/command-line/apksigner

https://developer.android.com/studio/publish/app-signing

안드로이드 GIF 로딩 구현

엄코딩 — Mon, 29 Oct 2018 18:57:12 +0900

안드로이드 raw directory 생성

안드로이드 res 하위에 Android Resource Directory를 생성합니다.

안드로이드에서 gif는 리소스 타입이 raw인 폴더에 보관해야 합니다.

raw를 생성한 뒤, 해당 경로에 .gif 파일을 넣어줍니다.

제 프로젝트의 경우 모든 Activity, Fragment에서 상속받는 부모 Activity에서

showLoading() 함수를 구현했습니다.

fun showLoading() {

    if (progressDialog == null) {
        progressDialog = ProgressNetDialog(this)
        progressDialog!!.setCancelable(false)
        progressDialog!!.setCanceledOnTouchOutside(false)
        progressDialog!!.setOnDismissListener {
            try {
                Thread.interrupted() 
            } catch (e: Exception) {
            }
        }
        if (!this.isFinishing) {
            progressDialog!!.show()
        }
    } else if (!progressDialog!!.isShowing) {
        if (!this.isFinishing) {
            progressDialog!!.show()
        }
    }
}

해당 부모 클래스를 상속 받는 모든 Activity와 Fragment에서 간단하게 로딩을 띄울 수 있습니다.

위 코드에서 ProgressNetDialog 클래스를 로딩을 구현하고 싶은 화면으로 커스텀하시면 됩니다.

만약 Glide를 사용하신다면 다음의 코드가 도움이 될 것입니다.

GlideApp.with(context)
        .asGif()
        .override(width,height)
        .load(R.raw.loading)
        .diskCacheStrategy(DiskCacheStrategy.RESOURCE)
        .into(imageView);

.asGif()

단순 이미지 뿐만 아니라 GIF도 로딩할 수 있습니다.

.override(width,height)

지정한 이미지 크기만큼 불러 올 수 있습니다.

override 메소드는 이미지를 최적화 하는 경우 유용하게 사용할 수 있습니다.

.diskCacheStrategy(DiskCacheStrategy.RESOURCE)

Glide에서 해당 리소스를 캐싱하고, 캐싱된 리소스와 load할 리소스가 같은 리소스일 때

별도의 절차 없이 캐싱된 리소스를 사용하기 때문에,

만약 안드로이드에서 gif를 사용하는데 속도가 느리신 경우에 해결 방법이 될 수 있습니다.

참고 사이트

https://github.com/bumptech/glide/issues/600

https://bumptech.github.io/glide/

안드로이드 O (오레오 ) Notifications Channel

엄코딩 — Mon, 22 Oct 2018 18:21:13 +0900

Notification Channels

프로젝트 작업중 푸시 기능 테스트가 필요한 작업이 있어 테스트 하던중 백그라운드 상태에서 앱의 알림이 오지 않는

문제에 직면하게 되었습니다.

'기존 코드가 잘못되었나 ?' 라는 생각에 기존 코드들을 살펴보았고, 다른 기기로 테스트해보았습니다.

웬걸, 다른 기기는 잘되네요. 왜그럴까요?

바로 안드로이드 O ( 오레오 ) , 8.0버전부터는 Notification Channel을 따로 만들어야 알림을 받을 수 있습니다.

구글은 안드로이드 8.0 ( API 26 ) 부터 모든 알림을 채널에 할당하고, 각 채널에 대해 해당 채널의 모든 알림에 적용되는

시각, 청각 동작을 설정할 수 있습니다. 그리고 사용자는 이러한 설정을 변경하고 앱의 알림 채널을 방해하거나

눈에 띄게할지 결정할 수 있습니다.

채널을 지정하지 않은 경우 에러 테스트

만약, 안드로이드 8.0 이상에서 채널을 지정하지 않고 알림을 게시하는 경우 로그에 다음과 같은 에러가 뜹니다.

E/NotificationService: No Channel found for pkg=~~~~~

그리고 안드로이드 스튜디오가아닌 단말기에서도 채널을 지정하지 않고 알림을 게시하는 경우에 대한 시스템 경고를

아래의 방법을 통해 확인할 수 있습니다.

( 시스템 설정 -> 개발자 옵션 -> 알림 채널 경고 표시 활성화 )

위와 같은 설정 후 채널을 지정하지 않고 알림을 게시하면 다음과 같은 경고가 단말기에 표시되네요.

패키지명은 모자이크 처리했습니다.

채널이 "null"이라고 뜹니다.

그럼 이제 오류의 원인이 명확해 졌으니, 오류를 해결해보도록 합시다.

Create a notification channel

NotificationChannel의 ID 객체를 생성.
시스템 설정에서 볼 수 있는 description을 설정. setDescription() ( 선택 사항 )
알림 채널 등록 createNotificationChannel()

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
    // Create the NotificationChannel
    val name = getString(R.string.channel_name)
    val descriptionText = getString(R.string.channel_description)
    val importance = NotificationManager.IMPORTANCE_DEFAULT
    val mChannel = NotificationChannel(CHANNEL_ID, name, importance)
    mChannel.description = descriptionText
    // Register the channel with the system; you can't change the importance
    // or other notification behaviors after this
    val notificationManager = getSystemService(NOTIFICATION_SERVICE) as NotificationManager
    notificationManager.createNotificationChannel(mChannel)
}


if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
    // Create the NotificationChannel
    val name = getString(R.string.channel_name)
    val descriptionText = getString(R.string.channel_description)
    val importance = NotificationManager.IMPORTANCE_DEFAULT
    val mChannel = NotificationChannel(CHANNEL_ID, name, importance)
    mChannel.description = descriptionText
    // Register the channel with the system; you can't change the importance
    // or other notification behaviors after this
    val notificationManager = getSystemService(NOTIFICATION_SERVICE) as NotificationManager
    notificationManager.createNotificationChannel(mChannel)
d

위 코드는 안드로이드 공식 홈페이지에서 권장하는 코드입니다.

만약 해당 채널의 기본 알림 동작을 추가해야할 필요가 있는 경우 enableLights(), setLightColor() 등의 메소드를 통해,

불빛, 색상, 진동패턴등 설정이 가능합니다.

( https://developer.android.com/training/notify-user/channels 참고 )

채널 아이디와, 이름을 설정하고, 채널은 한번만 생성해줍니다.

저의 경우 앱이 시작할때 SharedPreference의 boolean값을 이용해서 채널을 한번만 만들어주었습니다.

채널을 생성한 후, 채널의 ID값을 Notification.Builder(context,CHANNEL_ID) 형식으로 넣어주면 됩니다.

저의 경우..

이미 deprecated 경고표시가 떠있었네요.

Builder의 인자값으로 context,CHANNEL_ID를 넣어주세요.

속이 시원합니다.

테스트해보시면 알림이 잘 오는 것을 확인해볼 수 있습니다.

테스트 단말기의 시스템 설정에서 알림 -> 해당 Application에 가보시면 알림 유형에 생성했던 noti channel이 보입니다.

위와 같은 화면까지 떴다면 이제 채널을 삭제해볼 차례입니다.

Delete a notification channel

채널을 지우는 것 또한 간단합니다.

deleteNotificationChannel() 메소드를 이용하면 됩니다.

// The id of the channel.
val notificationManager = getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
val id: String = "my_channel_01"
notificationManager.deleteNotificationChannel(id)

알림 설정 화면에는 스팸 방지 메커니즘으로 삭제된 채널 수가 표시됩니다.

앱을 재설치하거나 앱 데이터를 삭제하여 개발 기기의 테스트 채널을 삭제할 수 있습니다.

테스트는 채널을 여러 개 만들고 삭제해보시면 됩니다.

Create a notification channel group

알림 채널 그룹이라는 기능도 생겼습니다.

온라인 협업 툴인 Slack을 예를들어 설명해보겠습니다.

평상시 개인적으로 사용할 때, 업무중에 공적인 일로 사용할 때 여러 알림 채널이 필요할 수 있습니다.

이러한 경우에 알림 채널 그룹을 사용하면 좋습니다.

알림 채널 그룹을 생성하는 코드는 다음과 같습니다.

// The id of the group.
val groupId = "my_group_01"
// The user-visible name of the group.
val groupName = getString(R.string.group_name)
val notificationManager = getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
notificationManager.createNotificationChannelGroup(NotificationChannelGroup(groupId, groupName))

그룹을 생성했으면 채널을 만들기전 ( createNotificationChannel() 메소드 호출 전 ) setGroup() 메소드를 사용하여

해당 채널이 어느 그룹에 속하는지 설정합니다.

저는 그룹을 두개로 나누어봤습니다. ( 테스트 삼아 )

상당히 많이 쓰이고 있는 기능이고, 유용한 기능이라고 생각합니다.

오늘도 또 한 번 버전별 동작 변경 사항 숙지에 대한 중요성을 깨닫습니다.

새로운 버전이 나오면 즉각 즉각 대응하는 습관을 갖도록 합시다 ㅎㅎ

읽어주셔서 너무 감사하고, 피드백 또는 조언 주시면 감사하겠습니다.

참고자료 : https://developer.android.com/training/notify-user/channels

javascript 배열의 모든 것

엄코딩 — Fri, 19 Oct 2018 15:39:37 +0900

JavaScript 배열

배열은 프로토타입으로 탐색과 변형 작업을 수행하는 메서드를 갖는, 리스트와 비슷한 객체입니다.

JavaScript에서는 배열의 길이와 요소들의 타입은 고정되어 있지 않습니다. 배열의 길이가 언제든지 늘어나거나 줄어들 수 있기 때문에 자바스크립트 배열들은 밀집도가 보장되지 않습니다.

보통 이 성질은 편리하지만, 목적에 따라서 타입을 가진 배열 (typed array)을 사용하는 것을 고려해 볼 수 있습니다.

배열 선언 && 인덱스로 배열의 항목 접근

배열 forEach

Javascript에서의 forEach 메소드는 배열에 있는 각 요소에 대해 한 번 씩 인덱스 순서대로 callbackfn을 호출.

배열 외에도 forEach 메소드를 사용하여 length 속성을 포함하는 개체(entity)와 숫자로 인덱싱된 속성 이름을 포함하는 모든 개체에서 사용할 수 있다.

value는 배열 요소의 값을, index는 배열 요소의 인덱스값을, array는 요소가 포함된 배열 객체를 나타낸다.

배열 끝에 항목 추가 && 배열 끝에 항목 제거

배열 앞에 항목 추가 && 배열 앞에 항목 제거

배열 indexOf && 배열 splice

인덱스 위치에서 부터 여러개의 항목 제거 && 배열 복사

참고 자료 : https://developer.mozilla.org/ko/

JavaSctipt 시작하기

엄코딩 — Sun, 7 Oct 2018 17:13:08 +0900

JavaScript 시작하기

HTML, CSS를 학습하고 JavaScript 학습을 시작했습니다.

HTML, CSS JavaScript를 사용하고 있는 툴은 Brackets입니다. 이번 포스팅에서는 기본적인 부분을 정리해보겠습니다.

우선 HTML 코드에서 JavaScript를 사용할 수 있게 해주는 태그는 <script> </script> 태그 입니다.

script 태그를 통해서 웹브라우저에게 지금부터 자바스크립트가 시작된다는 것을 알려줍니다.

그리고, script태그 안에서 JavaScript 사용해보겠습니다.

document 사용한 Hello world 출력

기본은 Hello world를 찍어봐야겠죠?

각각의 웹 페이지에서는 자신의 document 객체를 갖습니다. document 인터페이스는 웹 페이지의 컨텐츠에 대해 접근할

수 있도록 하는 기능을 제공하고, 해당 문서에 대한 전역 기능을 제공합니다. ( 참조 : Document Reference )

( 사진 출처 : w3schools )

Hello world를 찍어보기 위해, document객체를 사용하는 가장 일반적인 방법인 <script>태그에서 사용해보겠습니다.

DOM은 문서 객체 모델이라고도 합니다. DOM은 문서의 구조화된 표현과 DOM 구조에 접근할 수 있는 방법을 제공하여,

문서의 구조나 스타일, 내용 등을 변경할 수 있게 합니다.

DOM 속성이나 메소드에 대한 자세한 설명은 w3chools링크를 참고하시면 좋을 것 같습니다.

위처럼 Hello world를 찍는 방법은 매우 간단합니다.

하지만 왜 JavaScript를 사용하여 Hello world를 화면에 나타내는 걸까요? HTML의 태그를 통해서 간단하게 텍스트를

표현할 수 있을텐데.

이유는 바로 JavaScript는 데이터를 동적으로 화면에 표현할 수 있기 때문입니다.

위의 Hello world같은 경우는 <h1>태그를 사용해서도 간단하게 표현할 수 있습니다.

하지만, 동적인 데이터( 예를 들어 간단한 계산된 데이터를 표현하고 싶을 경우 )를 표현하고 싶은경우 JavaScript를 사용

하여 웹 페이지 화면에 표현할 수 있습니다.

위처럼 간단하게 JavaScript를 사용하여 10232 * 42 의 결과값을 웹 페이지에 표현하게됩니다.

JavaScript 이벤트 사용해보기

JavaScript를 사용하여 다양한 이벤트를 사용할 수 있습니다.

수많은 이벤트 중 onchange, onclick, onmouseover, onmouseout, onkeydown, onload에 대해 정리해보았습니다.

onchange

onchange 이벤트는 HTML 엘리먼트가 변경되었을 때 발생하는 이벤트.

onclick

onclick 이벤트는 HTML 엘리먼트를 클릭했을때 발생하는 이벤트.

onmouseover

onmouseover 이벤트는 마우스를 HTML 엘리먼트 위로 이동하게되면 발생하는 이벤트.

onmouseout

onmouseout 이벤트는 마우스를 HTML 엘리먼트 밖으로 이동하면 발생하는 이벤트.

onkeydown

onkeydown 이벤트는 유저가 키보드를 눌렀을때 발생하는 이벤트.

onload

onload 이벤트는 웹 브라우저가 페이지를 불러오는것을 완료했을때 발생하는 이벤트.

맥 모하비( Mac Mojave ) 설치부터 기능까지

엄코딩 — Mon, 1 Oct 2018 23:54:11 +0900

맥 모하비 ( Mac Mojave )

맥 OS 모하비가 2018년 9월 24일 출시되었습니다. 맥OS 하이 시에라 ( High Sierra )에 이은 대형 업데이트입니다.

모하비 업데이트 사항으로 사용자 인터페이스에 다크 모드 추가, 갤러리 뷰, 퀵 액션, 스택 사용으로 인한 파일 정리 등

사용자 편의를 위한 기능이 추가되거나 업데이트 되었습니다. 업데이트된 기능들 중에 맥 사용자의 이목을 끌만한 기능

지금부터 함께 살펴보겠습니다.

맥 모하비( Mac Mojave ) 설치

애플에서는 모하비부터 앱 스토어를 강조하기 위해 기존 소프트웨어 업그레이드 기능을 통해서 버전을 업데이트 하는 대신

앱 스토어를 통해 다운받는 형식으로 방식의 변화를 주었습니다.

앱 스토어에 들어가서 모하비를 다운로드 하시거나, macOS Mojave 다운로드 링크를 통해 다운로드 받으실 수 있습니다.

다크 모드

첫 번째로, 다크 모드 입니다.

평소 개발툴을 사용할 때에도 전체적으로 검은색 바탕에서 작업을 해서인지, 검은색이 좋더라구요.

맥 모하비의 다크모드는 검은색 테마라고 생각하시면 됩니다.

화면이 밝으면 눈이 너무 쉽게 피로해지는 기분이 들던 분들이 오랫동안 기다렸던 기능입니다.

다크 모드를 사용하는 방법은 매우 간단합니다.

1. Apple(  ) 메뉴에서 '시스템 환경설정'을 선택합니다.

2. '일반'을 클릭합니다.

3. 윈도우 상단의 화면 모드 옵션에서 '다크 모드'를 선택합니다.

( 모하비 기능중 다이나믹 데스크탑 사용 시 다크 모드를 켜면 야간 이미지만 보입니다. )

[ 출처 https://www.apple.com ]

별 것 아니라고 생각하실 수도 있지만, 작업중인 부분이 확실하게 더 부각되어, 사용자가 보고자 하는 콘텐츠를 상대적으로

강조시키는 효과또한 기대해 볼 수 있습니다.

스택 사용

스택 기능은 이미지, 프리젠테이션, PDF 및 텍스트 등의 파일을 파일 유형별로 손쉽게 정렬해주는 기능입니다.

비슷한 기능을 제공해주는 앱도 있다고하는데, 애플에서 정식으로 지원해주는 만큼 믿고 써보는 것도 좋을 것 같습니다.

[ 출처 https://www.apple.com ]

스택은 기본적으로 이미지, PDF, 프레젠테이션등 유형별로 그룹화 되지만, 스택을 수정된 날짜, 태그 등 기타 카테고리별로

그룹화하기 위해서는 메뉴 막대-> 보기-> '다음으로 스택 그룹화'를 선택하시면 됩니다.

스크린샷

새로워진 스크린샷 기능을 통해, 새로운 동영상 녹화 기능에 빠르게 접근할 수 있고, 사용자의 편의성을 한 층 더

업그레이드 시켜줄 제어 기능이 화면에 표시됩니다.

해당 기능은 스크린샷 유틸리티 또는 shift-command-5 단축키를 통해 이용할 수 있습니다.

또한, 타이머 설정 옵션과 더불어 스크린샷 저장 장소 선택, Mac 화면의 정지 화면 및 동영상을 포착할 수 있는 다양한 제어

기능이 제공됩니다. 기존 QuickTime 앱에서 제공되었던 화면 녹화기능이었지만 이번 업데이트를 통해서 사용자의

편의성을 더욱 향상시켜 주었습니다.

[ 출처 : https://www.apple.com ]

위 화면은 shift-command(⌘) 또는 스크린샷 유틸리티를 사용했을때 나타나는 제어 기능 화면입니다.

해당 버튼들을 통해 전체 화면 캡처 ( ), 윈도우 하나 캡처 ( ), 선택한 부분 화면 캡처 ( )등의 기능을 이용할 수

있습니다.

저처럼 이미지나 동영상파일을 자주 사용하시는 분들에게는 최고의 업데이트 기능이 되겠네요.

이상 포스팅을 마치겠습니다. 읽어주셔서 감사합니다.

자료 출처 : https://www.apple.com

position 파헤치기

엄코딩 — Thu, 27 Sep 2018 20:44:13 +0900

position 종류

html && css에서 엘리먼트의 위치를 지정하는 방법은 4가지로 분류됩니다.

static (정적 위치), relative (상대적 위치), absolute (절대적 위치), fixed(고정 위치)가 있습니다.

position:static;

우선 static의 예를 살펴보죠. 아래 이미지는 각각의 엘리먼트에 아무 속성도 추가하지 않았을 때의 화면입니다.

other라는 독자적인 엘리먼트, 그리고 parent를 하위의 child엘리먼트가 있습니다.

child 엘리먼트에 position:static; 을 추가해보고, 화면을 보세요 달라지는게 있나요?

달라지는 건 없습니다. 즉 position의 default value는 static이라는 것을 알 수 있습니다.

position:relative;

relative라는 단어에서 유추할 수 있듯이, position:relative는 상대적은 위치값을 나타냅니다.

위와 같이 other, parent, child엘리먼트가 존재할 때 child에 position을 relative로 설정해 보겠습니다.

화면이 어떻게 변했을까요?

( left는 왼쪽을 기준으로 50px만큼 떨어져서 위치해라, top은 상단을 기준으로 100px만큼 떨어져서 위치시켜라. )

위와 같은 이미지처럼 child는 parent를 원래의 위치에서 left, top값만큼 위치가 변경된 것을 알 수 있습니다.

position:absolute;

absolute는 절대적 위치를 나타냅니다. absolute에서는 다소 헷갈리는 부분이 있으니 집중해주세요.

absolute는 부모의 position값이 static이냐 아니냐에 따라 상이한 결과를 보여줍니다.

parent의 position을 설정하지 않거나, static으로 주었을 때 부터 살펴보겠습니다.

위의 경우, child는 parent기준으로 left,top이 적용될까요? 아니면 html (최상위) 기준으로 적용될까요?

정답은 html 기준으로 적용됩니다.

absolute는 바로 상위의 엘리먼트에서 position:static; 혹은 position을 설정하지 않았다면, 최상위 html 엘리먼트를 기준

으로 위치를 설정하게 됩니다. 또한, absoulte의 특성상 부모 엘리먼트와의 연결이 끊기게 되면서 부모 엘리먼트와는 무관

하게 됩니다. 즉, 크기를 지정할 수 없게 되면서 자기 자신의 콘텐트 크기만 남게되는것입니다.

( 이 경우, 크기를 지정하고 싶으면 width,height값을 따로 주면됩니다. )

그러면서 자연스럽게? 부모 또한 자식 엘리먼트가 차지하고 있던 공간을 빼버리게 되는 것입니다.

이제 parent의 position을 relative( static이 아닌 다른 값 )을 넣어보겠습니다.

위에서 볼 수 있듯이, 이제는 최상위 엘리먼트인 html을 기준으로 child의 위치값이 정해지는 것을 확인할 수 있습니다.

참고 자료 : https://opentutorials.org/course/2418/13414

초간단 웹 호스팅(github) && 웹 서버 설치 ( MAC )

엄코딩 — Sat, 22 Sep 2018 01:00:00 +0900

웹 호스팅이란?

웹 호스팅이란 무엇일까?

웹 브라우저는 웹 서버에 데이터를 요청 (request)하고, 웹 서버는 웹 브라우저에 응답 (respnse) 합니다.

이를 통해 우리는 웹 서버의 하드디스크에 있는 특정 파일을 화면에 나타낼 수 있습니다.

하지만, 웹 서버를 우리가 직접 운영하는것은 인터넷에 대한 이해 뿐만아니라 여러가지 지식이 수반됩니다.

이 어려움들을 해결해 주는 것이 웹 호스팅 서비스입니다.

호스팅이란 '한 행사의 사회자로서의 역할을 수행하는 것' 입니다. - 위키 백과

즉, 웹 호스팅은 개인과 단체가 월드 와이드 웹을 통하여 웹사이트를 제공하는 것을 뜻합니다.

웹 호스트는 인터넷 연결을 제공할뿐 아니라, 일반적으로 데이터 센터에서 클라이언트 이용에 대한 임대 또는 소유하는

서버의 공간을 제공하는 것입니다.

개발자라면 깃 헙(github)에 익숙할 것입니다. 지금부터 깃 헙을 이용하여 웹 호스팅을 해보겠습니다.

먼저 깃 헙에 로그인 후, 오른쪽 상단의 아이콘을 클릭한 후, New repository를 눌러 새로운 저장공간을 생성합니다.

그리고 작성한 코드를 업로드합니다.

그러면 위와 같은 화면을 볼 수 있습니다. 위 화면에서 오른쪽 상단의 Settings를 눌러줍니다.

화면이 이동한 뒤 스크롤을 아래로 내리면 GitHub Pages가 보입니다.

Select source에서 master branch를 클릭하고 저장합니다.

그러면 파란색 창에 주소가 생성된 것을 볼 수 있습니다.

앞으로 위의 도메인이 나만의 웹 사이트 주소가 되는 것입니다.

해당 주소를 클릭하면 작성해둔 코드에 해당하는 웹 페이지를 확인할 수 있습니다.

웹 서버 설치 ( MAC )

맥에서 웹 서버를 설치하는 것은 간단합니다 !

요즘에는 Apache를 직접 설치하고, 환경 설정해주는 것은 상당히 까다롭습니다. 하지만 MAMP를 다운 받으시면

비교적 간단하게 작업을 진행할 수 있습니다.

MAMP 링크를 통해 프로그램을 다운로드합니다. ( MAMP는 Mac Apache Mysql Php의 약자입니다. )

프로그램을 다운로드 한 후 해당 파일을 실행하면 웹 페이지가 하나 뜨고, 프로그램이 하나 실행됩니다.

위의 프로그램은 Management Console인데, Apache라는 웹 서버를 관리하는 도구입니다.

Manage Servers를 클릭하면 아래와 같은 화면이 뜹니다.

옆의 Start, Stop, Restart, Configure를 통해서 웹 서버를 관리할 수 있습니다.

어떻게 확인할 수 있을까요?

아까 프로그램 설치를 마친 뒤 화면에 나타는 웹 페이지로 확인할 수 있습니다.

서버를 멈춘뒤 웹 페이지에서 새로고침을 누르면 어떻게 될까요?

위 화면에서 127.0.0.1은 IP ( 인터넷 프로토콜 ) 즉, 인터넷 규약을 의미합니다. 이는 인터넷에 연결되어 있는

각각의 컴퓨터들의 고유한 주소를 의미하죠.

그리고 뒤의 :8080은 포트 번호를 뜻합니다. MAC에는 기본적으로 웹 서버가 깔려있다고합니다. 기존 8080으로 접속이

안되셨다면 그것을 지워보는 것도 한 방법이 될 수 있습니다.

웹 브라우저와 웹 서버 실습 방법

저희에게는 실습용 컴퓨터가 두 대 있습니다. 바로 지금 사용하시는 컴퓨터와 스마트폰입니다.

위에서 설치한 MAMP를 통해 서버를 운영하고, 이를 웹 브라우저에 띄워주었습니다. 웹 브라우저에서 띄워주는

파일들의 위치는 응용프로그램 -> mampstack~ -> apache2 -> htdocs에 존재합니다.

이전에 작성한 자신의 프로젝트를 해당 폴더에 넣고, 위의 웹 브라우저를 새로고침하면 자신이 작성한 코드에

해당하는 화면을 볼 수 있습니다.

또한 같은 IP 에 접속한 두 대의 컴퓨터에서도 확인할 수 있습니다.

(스마트폰으로 같은 IP에 접속해서 확인해보세요.)

참고 자료 : https://www.youtube.com/watch?v=roETNgQf3x8&index=23&list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb

HTML 태그를 어떻게 사용해야 할까?

엄코딩 — Fri, 21 Sep 2018 11:35:23 +0900

HTML 태그( tag )란?

태그는 원래 우편물이나 화물, 택배물 등에 붙여 화물의 분류나 송수신인, 취급 주의 등을 나타내는 인식표였다.

뒤에 옷 등에도 쓰였고, 컴퓨터 프로그램 등에도 비슷하게 쓰이게 되었다. - 위키 백과

말 그대로 태그는 컴퓨터 프로그램에서도 하나의 '인식표'로 인식하면 됩니다.

정확하게 정의를 내리자면, HTML에서 태그는 HTML 문서를 이루는 문법적 표시라고 할 수 있습니다.

HTML 태그의 종류

1960년대 인터넷이 등장하고, 1990년 웹이 등장했습니다. 1990년대에 등장한 첫 웹 보셨나요?

생활코딩 이고잉님의 강의를 들으며 '웹의 메소포타미아'라는 곳에 저도 방문을 해보았습니다.

( 이고잉님의 강의를 듣게 되면, 정말 웹에 대한 흥미가 생기고 보다 재미있게 공부할 수 있는 것 같습니다. )

본론으로 돌아와서 html 태그의 종류에 대해 알아보겠습니다.

html에서 2017년도 기준 150+@개 정도의 태그가 존재합니다. 물론 모든 태그를 공부해야겠지만, 시작은 중요 태그들을

우선적으로 공부하는 것이 좋은 것 같습니다.

위 이미지를 보면, 수많은 태그 중에 자주 쓰이는 태그가 무엇이고, 그 태그를 위주로 먼저 학습하는 것이 좋겠다는

생각이 들겁니다.

html에서 태그를 크게보면 최상위 태그인 <html> 태그, 본문을 설명하는 <head> 태그, 본문을 나타내는 <body> 태그

학습한 내용을 정리하면 구조를 한 번 정리해보았습니다.

최상위 <html>태그 위에 html에서는 관용적으로 <!doctype html>태그를 써줍니다.

위의 형식아래에서 수많은 태그를 사용하면 됩니다. 수많은 태그를 여기 링크를 통해서 검색하는 능력만 있으셔도 충분히

html을 정복할 수 있습니다.

적절한 태그 사용의 중요성

제가 포스팅할 태그는 <br>태그와 <p>태그입니다. <br>태그는 줄바꿈 태그이고, <p> 태그는 문단을 나눌 수 있게 해주는

태그입니다. 처음 사용할 때는 <br>을 연달아서 사용하여 문단을 나누었습니다.

하지만, HTML의 사용목적과 그 중요함을 알게되고, 각 사용목적에 따라 나누어 사용하게 되었습니다.

그 사용목적과 중요함은 뭘까요?

HTML이 중요한 이유는 시각적인 이미지가아닌, 정보로서의 표현이 중요합니다.

위의 코드에서 <br>태그를 사용하여 단순히 시각적으로 줄이 바뀌었구나를 표현했습니다.

<p>태그를 이용해서는 문단을 표현했구요.

오늘날 검색 엔진들은 이 태그들을 키워드로 수많은 웹사이트들을 분석하고, 분류합니다.

블로그를 하는 사람에게 검색 누락은 상상하기도 싫은 일이죠.

검색 엔진들의 분석에서 좋은 결과를 얻기 위해서는 바로 이 태그들을 적절한 곳에서, 적절한 태그로 사용해야합니다!

티스토리를 예로 든다면,

제목을 입력할 때 어떻게 하시나요?

글을 입력후 글씨체를 바꾸고, 폰트를 바꾸시나요? 아니면 폰트를 바꾸고 글씨체를 바꾸시나요?

아니면, 제일 왼쪽의 본문을 클릭하시나요? ( 저는 본문을 클릭해서 바꾼적이 없습니다. )

앞 포스팅에서 말했듯이, html을 배우고 난 후와 전 확연히 다를겁니다. 티스토의 경우 HTML 체크박스를 클릭하여

HTML 코드를 볼 수 있습니다. 이 기능을 이용해서 태그를 적절하게 사용하고 있는지 꼭 확인해보세요.

참고 자료 : https://www.youtube.com/watch?v=pYOEy_mAMpI

처음이자 마지막 HTML - 실습환경 구축 ( Atom )

엄코딩 — Thu, 20 Sep 2018 19:01:18 +0900

HTML 실습환경 구축 ( Atom )

웹을 시작하게 되면서, 가장 기본이라고 할 수 있는 html 공부부터 시작했습니다.

제목에서 알 수 있듯이 처음이자 마지막인 html ( 시작하자마자 끝나는... ) 학습 내용 포스팅을 시작하겠습니다.

우선 html을 언어를 사용하고, 편집할 수 있는 툴을 설치해야합니다.

저는 Atom ( 아톰 ) 을 사용했습니다. ( https://atom.io/ 링크를 통해 해당하는 OS에 맞게 다운로드하시면 됩니다. )

아톰을 다운로드 받고, 실행하면 위와 같은 화면을 볼 수 있습니다. 아톰 설치 후 프로젝트의 디렉토리가 될 폴더를 만듭니다

폴더를 만들고, File -> Open...을 통해 해당 폴더를 우리의 프로젝트의 디렉토리로 정합니다.

이제 html 파일을 만들어야 겠죠?

해당 기능을 통해 .html 확장자의 파일을 생성합니다.

해당 파일에 Hello web을 찍어봐요. ( 개발자 숙명 Hello world 부터 시작하는 느낌으로 )

작성한 코드( Hello web 뿐이지만 ) 를 웹브라우저로 실행해보겠습니다.

( 마이크로소프트 엣지 브라우저를 사용하시는분들은 다른 브라우저를 이용하셔야 합니다. )

우선 사용하시는 브라우저를 열고 command o(알파벳)을 눌러줍니다.

( 저는 맥을 사용중이기 때문에 단축키는 command o(알파벳)입니다. 윈도우의 경우 command대신에 ctrl이 되겠습니다. )

작성한 파일을 열어줍니다.

너무 쉽죠?

시작이 반이라는 말이 있습니다. html이 그렇습니다. 이제 반은 끝낸 겁니다.

제가 이고잉님의 강의를 들으면서 크게 공감한 부분이 있습니다.

'여러분의 인생은 태그를 배우기 전과, 후로 나뉠 수 있다' 특히, 블로그를 하는 저로서는 크게 공감 갔습니다.

이제 본격적으로 HTML을 시작해보도록 합시다! ( 다음 포스팅에서 )

참고 동영상

- https://www.youtube.com/watch?v=tZooW6PritE&index=1&list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb

filter, map 함수 사용법

엄코딩 — Wed, 19 Sep 2018 19:38:58 +0900

프로젝트를 진행하며, 코틀린의 유용한 함수에 대한 기본적인 코드를 학습하며 정리한 내용을 포스팅해 보았습니다.

filter

filter함수는 map함수와 함께 컬렉션을 활용할 때 기반이 되는 함수입니다.

위와 같이 Person 형태의 people 리스트가 있습니다.

woman은 람다식을 변수에 저장한 것으로, Person객체가 W( woman ) 이면 true를 반환합니다.

people에 filter 함수를 사용하여 여자인 객체만을 갖는 새로운 컬렉션을 출력해 보았습니다.

filter 람다에서는 it이 Person을 가르키고 있습니다. 이를 이요하여 27살 이상인 사람들을 출력해보겠습니다.

이처럼 filter함수를 이용하여 컬렉션에서 원치 않는 원소를 간단하게 제거할 수 있습니다.

하지만 filter는 원소를 변환할 수는 없습니다. 원소를 변환하기 위해서는 map 함수를 사용해야 합니다.

map

map 함수는 주어진 람다를 컬렉션의 각 원소에 적용한 결과를 모아서 새 컬렉션을 만듭니다.

위 filter의 예제에서 27살 초과하는 사람들의 이름으로 map함수를 통해 새로운 컬렉션을 만들 수 있습니다.

아래 코드는 위 코드에 코틀린의 멤버 참조 개념을 적용한 것입니다.

위와 같이 filter와 map 함수의 개념은 생각보다 간단합니다.

앞으로의 프로젝트에서는 filter, map 함수를 자주 볼 수 있기를 기대하면서 포스팅을 마치겠습니다.

참고문헌 : Kotlin in Action

RecyclerView 보이는 아이템 먼저 불러오기 -(1)

엄코딩 — Fri, 7 Sep 2018 19:22:33 +0900

RecyclerView 화면에 보이는 아이템 추출

프로젝트 진행중에 화면에 띄워주어야 할 아이템은 많은데, 불려지는 순서대로 아이템의 이미지를 로딩하다보니

스크롤하면서 나중에 불려진 아이템의 이미지 로딩이 상당히 느린 상황을 겪게 되었습니다.

저는 안드로이드에서 자주사용하는 image load lib로 glide를 사용중입니다.

glide에는 priority라는 개념의 메소드가 있죠. 해당 메소드는 glide작업시 우선순위를 두고 우선순위가 높은 이미지부터

load하는 것입니다. 간단하게 살펴본 우선순위 타입은 다음과 같습니다.

Priority.Low

Priority.NORMAL

Priority.HIGH

Priority.IMMEDIATE

하지만 저는 위의 기능이 필요한 것이 아니었습니다.

그래서 저는 보이는 아이템, 즉 화면에 출력된 아이템들을 우선순위로 정하고, 해당 아이템의 데이터를 bind 시켜주는

작업을 시작 하게되었습니다.

findFirstVisibleItemPosition

위 메소드는 화면에 보이는 영역 즉, 조금이라도 보이는 아이템의 포지션을 리턴합니다.

위와 같은 아이템이 있다고 가정해 보겠습니다.

findFirstVisibleItemPosition()메소드를 이용하면 0 을 리턴하게됩니다.

이는 화면에 보이는 제일 상단의 아이템 (item0) 의 포지션 값입니다.

findFirstCompletelyVisibleItemPosition

위 메소드는 첫 번째로 설명드린 메소드와는 다소 차이가 있습니다.

이번에는 조금 다른 UI의 아이템으로 설명드리겠습니다.

위 사진과 같이 화면이 보인다고 가정해 보죠.

item0은 사용자의 스크롤에 의해 부분적으로 조금만 보이게됩니다.

바로 부분적으로 조금이라도 보이는 부분! 바로 findFirstCompletelyVisibleItemPosition의 리턴값입니다.

그렇기 때문에, item0의 포지션값인 0을 리턴하게됩니다.

findLastVisibleItemPosition

이제 감이 오실겁니다.

findLastVisibleItemPosition은 화면에 보이게되는 마지막 아이템을 리턴하게 됩니다.

findLastCompletelyVisibleItemPosition

마찬가지로 화면에 조금이라도 보이게되는 마지막 아이템의 포지션을 출력합니다.

위의 함수들을 사용하여 다음과 같이 화면에 보여지는 아이템들의 범위를 구하는 코드를 추출해 냈습니다.

if(position>= firstCompletlyVisibleItem && position<= lastCompletlyVisibleItem){
    Log.e("visibleItem","position : $position")
}

이제 위의 기능들을 사용하여, 해당 ViewHolder에서 bind작업을 하면 될 것 같습니다.

전체 소스가 궁금하시거나, 피드백을 원하시는분들은 댓글 부탁드립니다.

감사합니다.

Android resource linking failed error

엄코딩 — Thu, 6 Sep 2018 11:29:03 +0900

Android resource linking failed error

프로젝트를 진행중 Android resource linking failed 라는 문구로 시작되는 에러를 겪었습니다.

AAPT~ 문구가 보여서 당황했습니다. ( AAPT 관련 에러를 심하게 겪은적이 있기 때문에.. )

우선 처음 시도해본 것은 AndroidStudio 프로젝트 구조 ( Project Structure ) 에서 컴파일 SDK version 을 수정했습니다.

( 저 같은 경우에는 해당란이 unresolved~~ 로 되어있었습니다. )

하지만, 해당 작업을 해도 문제는 해결되지 않았습니다.

저의 경우 문제는 말그대로 안드로이드 리소스 연결 실패...

이유는 해당 액티비티를 찾기 위해, 전체 파일 검색을 하던중 해당 문구가 들어가 있는 코드부분을 지워버린 것이었습니다.

( 황당한 실수지만, 원인을 알아가는 것이 중요하다고 생각했습니다. )

구글 애드센스 정책 위반 계정 정지( 무효 클릭 )

엄코딩 — Sun, 2 Sep 2018 14:36:51 +0900

구글 애드센스 계정 정지 ( 무효 클릭: 직접 클릭 )

2018.08.24 , 약 3달간의 무한 검토과정을 마치고 드디어 구글 애드센스 계정이 활성화 되었습니다.

근방에는 매일 아침 일어나서 눈 뜨자 마자 애드센스 앱에 들어가서 예상수입을 봅니다. ( 8월 24일 부터..ㅎㅎ )

무효 클릭: 직접 클릭? 혹시...? 설마...? 맞습니다. 설마가 사람 잡습니다...

처음 광고를 게시한 후, 게시물을 올릴때 마다 해당 광고를 서식을 통해 추가로 넣는 작업을 하는 경우도 있었습니다.

그럴 때 마다 해당 광고가 잘 게시 되었는지, 광고를 테스트하는 겸해서 클릭해보는 일이 잦았습니다.

( 지금 생각해보니 광고주들 광고를 제가 테스트한 것 같다는 생각이 들기도 하네요... )

위 상황을 겪은 후 너무 당황스러워서, 해당 링크에 접속했습니다.

해당 애드센스 프로그램 정책은 상당히 많습니다.

해당 적책 사항은 구글 애드센스 정책 링크를 통해 확인하시면 좋을 것 같습니다. ( 애드센스 입문자분들 께서는 필수 )

무효 클릭: 직접 클릭에 대한 자세한 사항은 다음과 같습니다.

수입이 많은 상황은 아니어서 그나마 다행이지만, 한 달간 다시 기다려야하는 상황입니다.

아직도 드는 의문점은 애드센스 측에서는 이의 제기를 할 수 없도록 했다는 점입니다.

저는 처음에 정책 위반이 봇들로 인한 트래픽 증가 때문이라고 생각했는데... 실수로라도 자기 광고 누르면 어떻게 되는지

궁금하네요.

혹시 관련 상황이나 조언 가능하신분들 피드백 환영입니다. 읽어주셔서 감사합니다.

참고사이트 : https://support.google.com/adsense/answer/48182

Activity간 데이터 전송

엄코딩 — Thu, 30 Aug 2018 17:59:39 +0900

startActivity

프로젝트를 진행하면서 단연 안쓸 수 없는 메소드 중에 하나입니다.

startActivity는 intent를 통해 설정된 activity로 이동을 시켜주는 메소드입니다.

해당 버튼을 누르면 SecondActivity로 화면전환이 이루어지겠죠?

SecondActivity에 존재하는 버튼을 통해 단순히 finish()를 실행하게 되면, 당연히 MainActivity 화면이 보입니다.

단순하게 다른 activity로의 전환뿐만아니라 전환 후 결과 값을 받아야한다면?

위 상황에서 사용할 수 있는 메소드가 startActivityForResult 입니다.

startActivityForResult

위의 startActivity와는 다르게 startActivityForResult를 사용하면 activity로의 전환 후 requestCode를 통해 특정 행위를 할 수 있습니다.

startActivity와는 다르게, 첫 번째 인자는 Intent, 두 번째 인자는 Int값을 매개변수로 필요로합니다.

두 번째 Int값은 requestCode로 사용됩니다.

startActivityForResult에 대한 처 즉, MainActivity에서 startActivityForResult를 통해 SecondActivity에서의 특정 행위

에 대한 결과값을 처리하기 위해 onActivityResult를 오버라이드합니다.

SecondActivity에는 버튼을 2개 추가하여 회원가입, 로그인을 처리한다고 가정해 보겠습니다.

setResult를 통해 resultCode를 반환 후, MainActivity에서 resultCode값을 통해 각각의 다른 처리를 할 수 있습니다.

각 버튼을 눌렀을 때 해당 resultCode별로 분기처리 할 수 있습니다.

저 같은 경우에는 setResult를 선언하지 않고, 해당 Activity를 종료시켜 다음과 같은 에러가 발생했었습니다.

( 실 패키지명은 packageName로 대체하였습니다. )

java.lang.RuntimeException: Failure delivering result ResultInfo{who=null, request=65537, result=0, data=null} to activity {~~ packageName}: java.lang.IllegalArgumentException: Parameter specified as non-null is null: method kotlin.jvm.internal.Intrinsics.checkParameterIsNotNull, parameter data

at android.app.ActivityThread.deliverResults(ActivityThread.java:4318)

at android.app.ActivityThread.handleSendResult(ActivityThread.java:4362)

at android.app.ActivityThread.-wrap19(Unknown Source:0)

at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1672)

at android.os.Handler.dispatchMessage(Handler.java:106)

at android.os.Looper.loop(Looper.java:171)

at android.app.ActivityThread.main(ActivityThread.java:6637)

at java.lang.reflect.Method.invoke(Native Method)

at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:518)

at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:824)

Caused by: java.lang.IllegalArgumentException: Parameter specified as non-null is null: method kotlin.jvm.internal.Intrinsics.checkParameterIsNotNull, parameter data

at packageName.EventFragment.onActivityResult(Unknown Source:2)

at android.support.v4.app.FragmentActivity.onActivityResult(FragmentActivity.java:151)

at android.app.Activity.dispatchActivityResult(Activity.java:7351)

위와 같은 에러는 정확한 코드의 위치도 알 수 없었고, 단순하게 널이아닌 곳에서 널이 발생했다 정도만 명시하고 있습니다.

알고보니 A->B->A 화면전환이 이루어지는데 A->B로 갈때 startActivityForResult로 반환값을 요구하고 있었고, 해당 resultCode에서 특정 작업을 하고 있었습니다.

결국, B->A로 전환시 finish()전에 setResult를 해주었더니 해결되었습니다.

데이터 바인딩 이벤트 처리

엄코딩 — Wed, 29 Aug 2018 14:27:12 +0900

이벤트 처리

데이터 바인딩을 사용하여 뷰에서 발송되는 이벤트를 처리하는 식을 작성할 수 있습니다. ( 예를 들면 onClick )

이벤트 특성 이름은 몇 가지 예외를 제외하면 리스너 메소드의 이름에 따라 결정됩니다.

예를 들어, View.OnLongClickListener 에는 메소드 onLongClick()이 있으므로, 이 이벤트에 대한 특성은

android:onLongClick 입니다.

데이터 바인딩에서 이벤트를 처리하는 두 가지 방법이 있습니다.

- 메소드 참조

- 리스너 바인딩

메소드 참조

식에서 리스너 메소드의 서명을 준수하는 메소드를 참조할 수 있습니다.

( 코틀린 람다는 Java8 람다와 매우 유사합니다. Java8에서의 Method Reference(메소드 참조) 를 생각하시면 됩니다. )

식이 메소드 참조로 평가되면 데이터 바인딩은

메소드 참조와 소유자 객체를 리스너에 래핑하고, 대상 뷰에서 리스너를 설정합니다.

즉, 객체를 가지고 있는 소유자를 리스너로 감싸게 되고, 해당 뷰에서 리스너를 사용하게 됩니다.

식이 null로 평가되면 데이터 바인딩은 리스너를 생성하지 않고, 그 대신 null 리스너를 설정합니다.

메소드 참조는 해당 Activity에 존재하는 메소드에 android:onClick을 할당하는 것과 비슷한 방법으로

이벤트를 핸들러 메소드에 직접 바인딩 할 수 있습니다.

기존 View#onClick 특성에 비해 한 가지 주요 장점은 컴파일 시에 식이 처리되므로, 메소드가 존재하지 않거나

메소드의 서명이 올바르지 않을 경우 컴파일 시 오류를 발생시켜, 개발자가 이를 알아 차릴 수 있습니다.

메소드 참조에 대한 코드를 함께 살펴 보겠습니다.

user::onUserClick 이 부분이 메소드 참조입니다.

해당 버튼을 클릭하게되면 User 클래스의 onUserClick메소드가 실행됩니다.

위에서 언급하였듯이, 메소드 참조는 컴파일 시점에 식이 처리됩니다.

컴파일 시점이아니라 실제 이벤트 발생 시 식을 처리하기 위해서 리스너 바인딩을 사용해야 합니다.

처리하기 위해서 리스너 바인딩을 사용해야 합니다.

리스너 바인딩

리스너 바인딩은 메소드 참조와 달리 이벤트 발생 시 식이 처리됩니다. 또한, 리스너 바인딩을 사용하면 임의의 데이터

바인딩 식을 실행할 수 있습니다. 이 기능은 Android Gradle Plugin for Gradle 버전 2.0 이상에서 사용 가능합니다.

메소드 참조에서는 메소드의 매개변수가 이벤트 리스너의 매개변수와 일치해야 합니다.

( 위의 예제에서는 onClick의 매개변수 view : View 를 생각하시면 됩니다. )

하지만, 리스너 바인딩에서는 반환 값만 리스너의 예상 반환 값과 일치하면 됩니다. ( void 제외 )

view는 어디가고 age 값만 받는 걸까요?

리스너는 식의 루트 요소로만 허용되는 람다 식으로 표현됩니다. 식에서 콜백이 사용될 때 데이터 바인딩이 필요한 리스너

를 자동으로 생성하고 이벤트에 등록합니다. 뷰가 이벤트를 발생시키면 데이터 바인딩이 주어진 식을 계산하게 됩니다.

정규 바인딩 식에서처럼, 이 리스너 식이 평가되는 동안 여전히 데이터 바인딩의 null 및 스레드의 안전이 보장됩니다.

위 onClick에서는 람다식을 이용하여 식을 처리했습니다.

혹시나 view가 필요한 경우는 다음과 같이 코드를 작성할 수 있습니다.

해당 메소드의 매개 변수로 View, String 값을 버튼에서는 다음과 같이 설정할 수 있습니다.

참고 사이트 : https://developer.android.com/topic/libraries/data-binding/

데이터 바인딩 (DataBinding)

엄코딩 — Mon, 27 Aug 2018 16:14:31 +0900

데이터 바인딩(DataBinding) 사용 목적

안드로이드에서 다양한 리소스( 예를 들면, layout, value, string 등)를 바인딩하는 것은 상당히 반복되는 코드가 많아 질 수

있고, 번거로울 수 있습니다. 물론, 코틀린을 사용하면 코틀린 extension을 사용하여 비교적 편리하게 리소스에 접근할 수

있습니다.

하지만, 최근 패턴 사용에 대한 개발자들의 긍정적인 시선, 코드 분리를 통한 최적화의 방법으로

버터나이프, 데이터바인딩 라이브러리를 사용하는 개발자가 많습니다.

저 또한 최근 프로젝트를 진행하면서, 코드 분리 및 최적화를 위해 App에 MVVM 패턴을 적용하기로 했습니다.

제가 버터나이프 대신 데이터 바인딩을 사용하는 가장 큰 이유는 다음과 같습니다.

첫 번째, 안드로이드에서 지원하는 데이터 바인딩과 다르게 버터나이프 (ButterKnife)는 Third Party 라이브러리입니다.

여기서 말하는 Third Party 라이브러리란

이와 같은 이유때문에 데이터 바인딩을 사용했을때 deprecated에 대한 우려를 저희는 걱정할 필요가 없습니다.

두 번째, 안드로이드에서 java, kotlin 코드를 통해서 했던 작업들을 xml에서 처리할 수 있기 때문에, View 자체에서 데이터

변경에 대한 동적 처리가 가능해집니다. 즉, View Model에 데이터만 남게 함으로써 View- ViewModel 분리가 용이합니다.

데이터 바인딩(DataBinding) 사용

우선 데이터 바인딩 사용을 위해 build.gradle(app)에 다음 코드를 추가합니다.

코틀린에서는 추가로 kapt도 추가해주어야 합니다.

apply plugin:'kotlin-kapt'

여기서 중요한 변경 사항이 있습니다. 예전에 데이터 바인딩을 할 때만해도

kapt "com.android.databinding:compiler:$android_plugin_version" 와 같은 코드를 추가해야했습니다.

하지만 https://developer.android.com/topic/libraries/data-binding/start 확인해본 결과

위와 같은 내용을 확인할 수 있습니다. ( apply plugin:'kotlin-kapt' 코드는 넣어주셔야 합니다. )

이제 xml 파일에서 데이터 바인딩 적용 전, 적용 후 소스를 살펴보겠습니다.

- 데이터 바인딩 적용 전 xml 소스

텍스트뷰가 하나있는 간단한 xml 코드입니다.

데이터 바인딩을 사용하기 위해서 해당 xml의 최상위에 layout을 추가해야합니다.

- 데이터 바인딩 적용 후 xml 소스

data를 통해 MainActiviy를 객체화해서 사용할 수 있습니다. 해당 액티비티의 객체명을 통해 MainActivity 클래스의

변수나 메소드에 접근할 수 있고, 이를 통해 소스 코드를 줄일 수 있습니다.

기존 데이터 바인딩 사용전, 통신을 통해 받아온 객체를 일일이 setText 해주던 것과는 다르게, 데이터 바인딩을 통해

xml 에서 위 작업을 대신할 수 있습니다.

레이아웃 내에 있는 "@{}" 구문을 사용하여 값을 부여할 수 있습니다.

이제 코틀린 코드상에서 데이터 바인딩을 적용해 보겠습니다.

메인에서 하게되는 작업은 간단합니다.

기존에 setContentView 대신에 DataBindingUtil을 통해 setContentView를 하시면됩니다.

user_name_tv 에는 "Seonoh", user_age_tv에는 27 값이 설정된 것을 확인할 수 있습니다.

간단하게 살펴본 DataBinding 적용하는 방법이었습니다.

참고 사이트 : https://developer.android.com/topic/libraries/data-binding/start

샤오미 6Pro 언락(Unlock) 성공

엄코딩 — Mon, 27 Aug 2018 11:26:33 +0900

샤오미 언락(Unlock) 실패 경험

샤오미 6 pro를 얻은지는 벌써 1달이 지났습니다.

처음 6 pro를 접하고 들뜬 마음으로 디버깅 시도했다가 뜻밖의 Unlock 때문에 실망했을 때가 생각납니다.

샤오미에서는 언락이라는 기능을 두고, 단말기에 대한 디버깅을 막아두고 있는데, 무려 15일후에 언락을 풀 수 있습니다.

( 샤오미에서 언락을 도입한 이유는 다음 샤오미 포럼에 올라온 게시물 링크를 확인해보시면 좋을 것 같습니다. )

15일인데 제가 30일 넘게 걸린 이유는 뭘까요...?

바로 MI 계정 변경때문입니다. 처음에는 A 계정으로했다가 인터넷에 돌아다니는 각종 언락 금방 푸는 방법 등을 시도해보면서,

계정을 B계정 C계정까지해보았고, 마지막에 C계정으로 작업을 마무리 지었습니다. ( 15일 기다리는 것으로 )

하지만 재시도할 때 A계정으로 시도를 하였고, 이는 다시 360시간을 기다리는 것으로 결론났습니다.

B, C계정또한 마찬가지였죠.

결국 A계정으로 마지막으로 로그인하고, 5일 간격으로 남은 시간을 확인했습니다.

즉, 가장 확실한 방법은 한 계정으로 언락을 시도하고, 남은 시간 확인작업만 하시면서 15일 기다리는 것입니다.

샤오미 언락(Unlock) 성공

드디어 15일 또 흐르고, 출근하자마자 언락 작업을 진행했습니다.

익숙한 화면입니다. 샤오미 폰 부트모드로 전환 후, miflash를 실행하고 로그인한 후 언락을 진행하는 첫 화면이었습니다.

다음 퍼센트 화면이나오고... 드디어 언락에 성공했습니다.

성공후에 개발자모드를 다시 설정하고, 드디어 Install via USB를 활성화 했습니다.

안드로이드 스튜디오에서 앱을 빌드해보니 아주 잘됩니다.

샤오미폰을 테스트로하시는 개발자분들 혹은 샤오미폰에 대해서 피드백해주실 내용이 있으신분들, 피드백 환영합니다.

읽어주셔서 감사합니다.

구글 에드센스 승인 및 콘텐츠 중간 광고 삽입

엄코딩 — Sat, 25 Aug 2018 17:37:31 +0900

구글 애드센스란?

애드센스(AdSense)는 광고주를 위한 구글의 광고 프로그램입니다. 웹사이트 소유자는 애드센스에 가입함으로써 광고 수익을 구글과

나눌 수 있습니다. 광고 수익은 사용자가 에드센스 광고를 클릭함으로써 광고 게시자는 구글에 광고비를 지급하고, 구글은 그렇게 적립된

광고비를 웹사이트 제작자와 나누어 갖게 됩니다.

애드센스는 구글에 가입된 광고풀 가운데 웹페이지와 가장 연관성이 높은 광고가 나오게 되지만,

그렇지 못한 경우에 공익 광고가 나오게 됩니다. 공익광고는 사용자가 클릭을 했다고 해도 수익이 생기지 않습니다.

구글 애드센스 무한 검토 후 승인 해결 방법 및 후기

저는 티스토리를 학습한 내용을 정리하는 용도로 사용했습니다. 블로그 게시물 수가 40개가 넘어서 구글 애드센스에 대해 알게

되었습니다. 경험삼아 광고를 붙여볼까 라는 생각으로 시작하여 구글 애드센스 홈페이지에서 가입을 진행했습니다.

( https://www.google.com/intl/ko_kr/adsense/start/#/?modal_active=none )

가입절차는 타 블로그에도 자세히 설명되어 수월하게 진행할 수 있었습니다.

하지만, 애드센스 계정 승인에는 3달 넘게 걸린 것 같습니다....!

1차 시기에는 6주 정도 검토과정을 기다렸고, 그 이후 관련 자료를 검색하며 ( 생활 코딩, 구글링 등 ) 해결 방법을 찾아 보았습니다.

제가 시도한 방법은 다음과 같습니다.

1. 무한 검토에 빠진 후, 티스토리 HTML 소스에서 애드센스 코드를 제거한 후 계정 활성화 거절 통보를 받기.

2. 거절 통보를 받은 후 다시 티스토리 HTML 소스에 코드 붙여 넣기.

3, 애드센스 사용자 게시판에 게시글 올리기.

( 지푸라기라도 잡는 심정으로 올렸습니다. 이것 때문이지 정확하진 않지만, 새로운 콘텐츠를 올리지도 않고 해당 게시글 업로드 다음날에 승인!! )

구글 애드센스 콘텐츠 중간에 광고 삽입

오매불망 기다리던 애드센스 계정이 활성화 되고 제일 먼저한 작업은 콘텐츠 중간에 광고를 붙이는 작업이었습니다. ( 승인 받고, 들뜬 기분으로 !! )

애드센스 홈페이지에서 광고 -> 광고 단위를 클릭하시면 위와 같은 화면을 볼 수 있습니다.

저는 콘텐츠 내 자동 삽입 광고를 선택하였습니다.

저장 및 코드 생성을 누르면 광고에 대한 코드를 확인할 수 있습니다.

이 코드를 티스토리 서식 추가( 서식 글쓰기 화면에서 오른쪽 상단 HTML 버튼 클릭 )를 통해서 글을 쓸때마다 코드를 붙여

넣는 대신 서식을 통해 처리할 수 있었습니다.

주석을 달아 놓으면 추후 수정할 때 보기가 편리할 것 같아 표시해 두었습니다.

참고 사이트 : https://ko.wikipedia.org/wiki/%EC%95%A0%EB%93%9C%EC%84%BC%EC%8A%A4