Hun's Blog

Kotlin algorithm - Hash (2)

jhk-im — Fri, 11 Jun 2021 00:17:01 +0900

프로그래머스

코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.

programmers.co.kr

https://github.com/jhk-im/jhk-algorithm/tree/main/kotlin/01_hash/test2

GitHub - jhk-im/jhk-algorithm

Contribute to jhk-im/jhk-algorithm development by creating an account on GitHub.

github.com

* 프로그래머스 2번째 코딩테스트의 문제와 제한사항

전화번호부에 적힌 전화번호 중, 한 번호가 다른 번호의 접두어인 경우가 있는지 확인하려 한다. 전화번호부에 적힌 전화번호를 담은 배열 phone_book 이 solution 함수의 매개변수로 주어질 때, 어떤 번호가 다른 번호의 접두어인 경우가 있으면 false를 그렇지 않으면 true를 return 하도록 solution 함수를 작성하라.

phone_book의 길이는 1 이상 1,000,000 이하
각 전화번호의 길이는 1 이상 20 이하
중복된 번호 없음

* 프로그래머스에 작성된 답안을 보면 Hash를 사용하지 않고 통과한 답안도 있다. 중복된 번호가 없다는 점에서 배열을 전부 탐색하지 않고 중간에 break으로 빠져나갈 수 있기도 하고 startWith() 메소드를 사용해서 비교적 쉽게 접두어 포함여부를 확인할 수 있기 때문인 것 같다. 그렇긴 하지만 Hash카테고리 안에 있는 테스트이므로 위 문제가 Hashing의 장점을 활용해 어떻게 해결될 수 있는지를 아는 것 도 중요한 것 같다.

1. Hash를 활용하기 위해 우선 입력되는 배열을 Hash에 전부 담는데 이 때 Key , Value에 모두 전화번호를 입력한다. 이번 문제에서 Value는 사용되지 않는다.

val phoneBook = arrayOf("119", "97674223", "1195524421")

val hashMap = HashMap<String, String?>()

for (phone in phoneBook) {
    hashMap[phone] = phone
}

---

<"119", "119">
<"91674223", "91674223">
<"1195524421", "1195524421">

2. HashMap은 keys (java의 keySet()) 를 통해서 키 리스트를 배열처럼 활용할 수 있다. 해쉬맵에 담긴 전화번호를 다시한번 검색한다.

for (key in hashMap.keys) {
    
}

3. Hash의 장점은 배열을 전부 검색하지 않더라도 Key를 입력하면 다이렉트로 입력된 Key값의 테이블에 접근 가능하다는 것이다.

*HashMap의 containsKey() 메소드에 값을 입력하면 해당 값이 현재 HashMap에 Key로 존재하는지를 확인할 수있다. Object가져올 필요 없으니 아주 적당한 메소드라고 볼 수 있다.

hashMap["119"] // 119
hashMap.containsKey("119") // true
hashMap.containsKey("112") // false

4. 바로 접근 가능하다는것도 알겠고 containsKey()를 활용한다는 것도 알겠는데 가장 중요한 것은 접두어가 존재하는 지를 파악해야 한다는 것이다. 어떻게 하면 될까?

* key를 한글자씩 추가하면서 containsKey()에 입력하면 된다. "119"를 하나씩 추가한다고 했을때 "119"가 입력되면 이는 접두어가 아닌 자기 자신을 찾게되는 것이므로 "1" 과 "11"만 확인한다. 결과적으로 "119"의 접두어가 "1", "11"이 될수 있으므로 해당 값이 HashMap에 Key로 존재하면 접두어가 존재하게 되므로 false를 반환한다.

<"119", "119">
1 
11

<"91674223", "91674223">
9
97
976
9767
97674
976742
9767422

<"1195524421", "1195524421">
1
11
119
false

5. 추출된 key를 마지막 한글자만 빼고 하나씩 추가하면서 입력하는 방법은 다음과 같다. 자바가 조금 더 직관적이라 같이 비교해서 확인해보자.

// java
for (String key : hashMap.keySet()) {
	// key.length() 보다 작을때까지 반복한다. 즉 마지막 글자 이전까지 반복한다. 
    for (int i = 0; i < key.length(); i++) {
        // Key가 첫 글자부터 더해지는 것은 substring() 메소드를 활용하면 된다.  
        // "(0,0) = "1"  -> (0,1) = "11" -> (0,2) = "119"
        if (hashMap.containsKey(key.substring(0,i))) return false;
    }
}

// kotlin
for (key in hashMap.keys) {
    for (i in key.indices) {
        if (hashMap.containsKey(key.substring(0, i))) return false
    }
}

* solution()

class HashCodingTest2 {

    fun solution(phoneBook: Array<String>): Boolean {
        val hashMap = HashMap<String, String?>()
        for (phone in phoneBook) {
            hashMap[phone] = phone
        }
        for (key in hashMap.keys) {
            for (i in key.indices) {
                println(key.substring(0, i))
                if (hashMap.containsKey(key.substring(0, i))) return false
            }
        }
        return true
    }
}

* test

import hash.test2.HashCodingTest2

val hash2 by lazy { HashCodingTest2() }

val phoneBook1 = arrayOf("119", "97674223", "1195524421")
val phoneBook2 = arrayOf("123", "456", "789")
val phoneBook3 = arrayOf("12","123","1235","567","88")

fun main(args: Array<String>) {
    println(hash2.solution(phoneBook1))
    println(hash2.solution(phoneBook2))
    println(hash2.solution(phoneBook3))
}

결과

안드로이드 라이브러리 만들기

jhk-im — Wed, 9 Jun 2021 00:35:51 +0900

https://developer.android.com/studio/projects/android-library?hl=ko

Android 라이브러리 만들기 | Android 개발자 | Android Developers

Android 라이브러리를 생성하는 방법을 알아보세요.

developer.android.com

MAC OS

Android studio 4.2.1

java

Openjdk 1.8

Android Library

Android 라이브러리는 구조적으로 안드로이드 앱 모듈과 동일
소스 코드, 리소스 파일, 매니페스트를 비롯하여 앱을 빌드하는 데 필요한 모든 항목이 포함될 수 있음
APK로 컴파일되는 대신 Android 앱 모듈의 종속 항목으로 사용할 수 있는 AAR로 컴파일

AAR ?

해당 파일에는 안드로이드 리소스 및 매니페스트 파일이 포함될 수 있음

자바 클래스 및 메서드 외에 레이아웃 및 드로어블과 같은 공유 리소스를 번들로 구성할 수 있음

또한 앱 모듈의 C/C++ 코드에서 사용할 라이브러리를 포함할 수 있음

라이브러리의 유용성

액티비티, 서비스 등 일부 구성요소를 동일하게 사용하는 여러 앱을 빌드하는 경우
여러 APK 변형에 포함되는 앱을 빌드하며 두 버전에서 모두 동일한 핵심 구성요소가 필요한 경우

아래 2가지 항목을 바탕으로 간단한 샘플을 만들어보고 라이브러리 모듈생성의 아주아주 기초적인 흐름을 정리해보자.

1. 라이브러리 모듈 생성

New project -> No Activity 프로젝트 생성(empty activity도 상관없음)

File -> New -> New Module -> Android Library -> Finish

app/build.gradle

plugins에서 id 'com.android.application' -> id 'com.android.library' 변경
defaultConfig에서 applicationId "com.example.libsample" 삭제

Sync Project with Gradle Files

Sync Project with Gradle Files 를 클릭 or Sync Now

* toast 함수 추가

samplelib/src/main/java/com.example.samplelib/Test.java

package com.example.samplelib;

import android.content.Context;
import android.widget.Toast;

public class Test {

    public void showToast(Context context, String text) {
        Toast.makeText(context, text, Toast.LENGTH_LONG).show();
    }
}

* aar 빌드

방법 A

Project에서 mylibrary선택 -> build -> Make Module 'LibSample.samplelib'

방법 B

Terminal -> ./gradlew assembleDebug

* aar 경로

samplelib/build/output/aar/samplelib-debug.aar

2. AAR 또는 JAR을 종속 항목으로 추가

empty activity 프로젝트 생성 후 TestApplication/app/libs 경로에 위에서 생성한 aar추가
File > Project Structure > Dependencies로 이동
Declared Dependencies 탭 -> Jar/AAR Dependency 선택
libs/samplelib-debug.aar 입력후 ok
File > Sync Project with Gradle Files 실행
추가된 라이브러리 확인

Module - build.gradle

*메인 액티비티에서 라이브러리 함수 호출

package com.example.testapplication;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

import com.example.samplelib.Test;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Test test = new Test();
        test.showToast(this, "library_sample");
    }
}

* 앱실행 혹은 Terminal -> ./gradlew installDebug

Terminal

* 설치된 앱 실행 확인

Kotlin algorithm - Hash (1)

jhk-im — Tue, 18 May 2021 12:16:07 +0900

프로그래머스

programmers.co.kr

https://github.com/jhk-im/jhk-algorithm/tree/main/kotlin/01_hash/test1

GitHub - jhk-im/jhk-algorithm

Contribute to jhk-im/jhk-algorithm development by creating an account on GitHub.

github.com

* ArrayList는 인덱스를 이용하여 검색이 한번에 이루어지기 때문에 검색 속도를 보장하는 반면 데이터의 추가/삭제시에는 많은 데이터가 다같이 이동해야 하기 때문에 많은 시간이 소요된다.

array_img

* 추가/삭제시 마주하는 한계를 극복하기 위해 제시된 방법이 Hash이다. 기존 데이터를 밀어내거나 당기는 작업이 필요없도록 특별한 알고리즘을 이용하여 데이터와 관련된 고유한 숫자를 만들고 이를 인덱스로 사용한다. Key-Value 방식으로 저장하며 여기서 Key값을 계산하는 것이 Hash Method이다. 그렇게 반환 된 데이터 고유 값을 Hash Code라고 한다. 그리고 이러한 방식으로 Table에 저장하고 검색하는 방법을 Hashing이라 한다.

hash_img

* String 클래스에서 Hash Method인 hashCode()를 오버라이딩 하여 문자열의 내용으로 고유값을 생성한다. 서로 다른 인스턴스이지만 같은 내용의 문자열을 가졌기 때문에 hashCode()호출 시 같은 값을 얻는다. HashMap도 같은 방법으로 객체를 구별하며 이미 존재하는 키와 동일한 값을 저장하는 경우 기존의 값에 덮어쓴다.

val s1 = "string"
val s2 = "string"
print(s1.hashcode()) // -891985903
print(s2.hashcode()) // -891985903
print(s1==s2) // true

val hashMap = HashMap<String, Int>()
hashMap["s1"] = 1
hashMap["s2"] = 3
hashMap["s2"] = 2
print(hashMap)

hash_img_2

* 프로그래머스 코딩테스트의 문제와 제한사항은 다음과 같다.

전체 선수 배열과 완주 선수 배열이 주어질 때 완주하지못한 참가자를 찾아라. (완주하지 못한 선수는 1명)

마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하
completion의 길이는 participant의 길이보다 1 작음
참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있음
참가자 중에는 동명이인이 있을 수 있음

* ArrayList를 사용할 때 문제점은 무엇인가?

index는 단순히 순서를 나타내는 고유값이다. 그렇기 때문에 player A의 완주유무를 검사한다고 했을 때 전체선수 배열의 player A의 index와 완주선수 배열의 player A의 index가 동일할 것이라고 보장할 수 없으므로 player A의 완주 유무를 판단하기 위해서는 완주선수 배열에서 매치될 때 까지 전부 검사해야한다. 각각의 index의 검사 완료 시점또한 동일하지 않다. 중복된 player를 검사하는 것 까지 추가되면 더욱 복잡해진다. (ArrayList로 해결한 답안도 있다.)

arrayList match

* HashMap을 사용할 때 어떠한 이점이 있는가?

전체선수 배열에서 선수의 이름을 Key값으로 하여 HashMap으로 정리 된다면 완주선수 배열의 선수명으로 HashMap Key값을 이용해서 빠르게 매치시킬 수 있다.

hash map match

전체선수 배열을 HashMap에 저장할 때 HashMap의 Key를 생성하는 hashCode()는 중복을 허용하지 않기 때문에 중복된 선수명 key값은 덮어쓰게 되는 문제가 있는데 다음과 같은 방식으로 중복 검사를 진행하여 해결한다.

val map = HashMap<String, Int>()

// 1. 전체 선수배열에서 선수의 이름을 Key값으로 하여 HashMap에 저장한다. 
for (player : String in participant) {

    // 2. 이미 저장했던 선수인지를 let {} 을 통해 판단한다. 
    //    let {}은 자바의 if(value != null)을 대체하여 유용하게 사용된다. 
    map[player]?.let {
        // 3. 이미 저장했던 선수인 경우 기존 value에 + 1을 더한다. 
        map[player] = it + 1
    }

    // 4. 중복되지 않은 선수는 value를 1로 지정한다. 
    if (map[player] == null) {
        map[player] = 1
    }
}

위 코드는 HashMap의 getOrDefault(Object, defaultValue)를 사용하면 간략하게 중복검사를 진행할 수 있다. getOrDefault()는 입력한 key값이 존재하는 경우 해당 key의 value를 반환하고 없을 경우 default값을 반환한다.

for (player : String in participant) {
    map[player] = map.getOrDefault(player, 0) + 1
}

중복검사

아래와 같이 완주선수 배열의 선수명과 전체선수 HashMap의 Key를 매치시키고 value값에 1을 빼도록 한다. 완주한 선수는 0이되고 완주하지 못한 선수는 1이 될 것이다. 중복된 선수중 한명만 완주 했다면 마찬가지로 해당 선수의 vlaue는 1이 된다. 모두 완주했다면 value는 0이 된다.

for (player : String in completion) {
    map[player]?.apply {
        map[player] = this - 1
    }
}

완주선수 배열과 매치가 끝난 HashMap은 아래와 같이 Key값을 검사하고 value가 1인 선수를 찾으면 문제가 해결된다.

for (key : String in map.keys) {
    if (map[key] != 0) {
        // map[key] -> 완주하지 못한 선수!
    }
}

Android Emulator on Apple M1

jhk-im — Sun, 27 Dec 2020 16:47:30 +0900

google/android-emulator-m1-preview

Contribute to google/android-emulator-m1-preview development by creating an account on GitHub.

github.com

애플 m1칩이 내장된 맥북에서는 안드로이드 스튜디오 애뮬레이터가 동작하지 않는다.

그리하여 구글에서 급하게..? m1에서 실행할 수 있는 안드로이드 애뮬레이터를 공개하였다.

설치하는 방법을 간단하게 정리해본다.

위에 있는 android-emulator-m1-preview에 들어간 후 releases로 이동한다.

android emulator m1 releases

최신 release에서 Assets를 확인하고 dmg 파일을 다운로드 한다.

download dmg file

다운로드 받은 dmg파일을 실행하고 다음과 같이 Emulator파일을 Application폴더로 이동시킨다.

emulator file이동

이제 애플리케이션에서 에뮬레이터를 실행해보면 다음과 같은 경고 메시지를 만나게 되는데 ..

경고 메세지

다음과 같이 설정을 변경해주어야 한다.

시스템 환경설정 -> 보안 및 개인정보 보호 -> 확인 없이 열기

설정 변경

애뮬레이터가 문제없이 실행된다.

에뮬레이터 실행

안드로이드 스튜디오에서도 잘 잡히고 앱을 설치하는 것도 문제없이 완료되었다.

안드로이드 스튜디오

해당 에뮬레이터는 다음과 같은 문제를 해결중이다.

1. Webview AOSP 버전에서 작동하지 않음

2. 크롬 동작하지 않음

3. Device skin없음

3. 비디오 코덱 작동하지 않음

4. 32비트 ARM 앱 작동하지 않음

5. 일부 Vulkan app 작동하지 않음

6. 시작 시 adb경로를 찾을 수 없다는 팝업

...

향후 릴리즈를 계속 확인하면서 작업해야 할 듯 하다.

참고자료

Setup Android Development Envrionment on Mac OS

jhk-im — Wed, 16 Dec 2020 14:05:35 +0900

MAC OS에서 안드로이드 개발환경 셋팅

1. Mac Command Line Tools

// 터미널 입력

xcode-select --install

2. Homebrew

Homebrew

The Missing Package Manager for macOS (or Linux).

brew.sh

Install Homebrew

// 터미널 입력

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

3. ZSH

ohmyzsh/ohmyzsh

A delightful community-driven (with 1700+ contributors) framework for managing your zsh configuration. Includes nearly 300 optional plugins (rails, git, OSX, hub, capistrano, brew, ant, php, pyt...

github.com

Basic Installation

// 터미널 입력

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

4. ZSH Highlighting

zsh-users/zsh-syntax-highlighting

Fish shell like syntax highlighting for Zsh. Contribute to zsh-users/zsh-syntax-highlighting development by creating an account on GitHub.

github.com

In your ~/.zshrc

// 터미널

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git
echo "source ${(q-)PWD}/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc


source ./zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

5. ZSH Auto suggestions

zsh-users/zsh-autosuggestions

Fish-like autosuggestions for zsh. Contribute to zsh-users/zsh-autosuggestions development by creating an account on GitHub.

github.com

Oh My Zsh

// 터미널

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

// 터미널

vim ~/.zshrc

// 플러그인 추가

...
plugins=(
        git
        zsh-autosuggestions
)
...

6. zsh - powerlevel10k

romkatv/powerlevel10k

A Zsh theme. Contribute to romkatv/powerlevel10k development by creating an account on GitHub.

github.com

Oh My Zsh

// 터미널 입력

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

// 터미널 입력

vim ~/.zshrc

// 테마변경

ZSH_THEME="powerlevel10k/powerlevel10k"

Terminal 최종결과

7. Android Studio

Download Android Studio and SDK tools | Android 스튜디오

developer.android.com

안드로이드 스튜디오 설치 후 sdk, avd 확인

안드로이드 스튜디오 창 가장오른쪽 AVD Manager와 SDK Manager를 통해 설치

마지막으로 안드로이드 스튜디오 터미널에 zsh 적용 되었는지 확인

글자크기 변경은 활성화해두자

SDK Manager icon -> Editor -> General -> Change font size with Command+Mouse Wheel check!

Android GraphQL tutorials (1) - Apollo Client? / setup apollo schema

jhk-im — Fri, 11 Dec 2020 17:16:26 +0900

Nexus GraphQL tutorials 를 통해서 Nexus - Prisma - PostgreSQL로 이루어진 서버가 간단하게 구현되었다.

현재 서버에 구현되어있는 쿼리와 뮤테이션은 다음과 같다.

해당 화면은 Graphql playground이며 구현된 쿼리와 뮤테이션을 다음과 같이 사용해볼 수있다.

Draft 쿼리에 대하여 결과를 확인해 볼 수 있다.

이제 Android Kotlin 환경에서 해당 쿼리와 뮤테이션을 사용해보도록 하겠다.

Get started with Kotlin

A guide to using Apollo with Android

www.apollographql.com

apollo graphql은 안드로이드 환경에서 apollo client를 사용할 수 있도록 문서를 제공하고 있다.

해당 가이드를 참고하여 서버에서 구현한 createDraft, publish, drafts, posts를 테스트해보도록 하겠다.

Add the Gradle Plugin

// build.gradle(project)
...

ext {
...
    // apollo graphql
    apolloVersion = '2.4.6'
    
    // coroutines
    coroutinesVersion = '1.4.0'
...
}

// build.gradle(app)
plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'kotlin-kapt'
    id 'kotlin-android-extensions'
    id 'com.apollographql.apollo' version "$apolloVersion"
}

...

apollo {
    // instruct the compiler to generate Kotlin models
    generateKotlinModels.set(true)
}

dependencies {
...
    // apollo graphql
    implementation "com.apollographql.apollo:apollo-runtime:$apolloVersion"
    implementation "com.apollographql.apollo:apollo-coroutines-support:$apolloVersion"

    // coroutines
    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:$coroutinesVersion"
    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:$coroutinesVersion"
...
}

Download schema.json file

서버로부터 schema 정보를 받아 json 파일에 저장해야한다.

우선 graphql에 관련된 파일들이 위치할 디렉토리를 생성하고 schema.json 파일과 LauchDetails.graphql 파일을 생성한다.

로컬 서버가 돌아가고있는 상태에서 안드로이드 스튜디오 터미널에 다음과 같은 명령어를 입력한다.

./gradlew downloadApolloSchema 
--endpoint="http://localhost:4000/graphql/endpoint" 
--schema="app/src/main/graphql/jrooms/example/schema.json"

--endpoint에 로컬서버의 endpoint 경로를 입력한다.

--shcema에 위에서 생성한 schema.json 파일의 경로를 입력한다.

해당 명령어를 실행하면 schema.json 파일에 다음과같이 서버의 schema 정보가 자동으로 입력된다.

shcema.json

LaunchDetails.graphql 파일에는 playground에 입력한 쿼리와 뮤테이션을 다음과 같이 입력해주면 된다.

// LaunchDetails.graphql

mutation CreateDraft($title: String!, $body: String!) {
    createDraft(title:$title, body: $body) {
        title
        id
    }
}

mutation Publish($id: Int!) {
    publish(draftId: $id){
        id
        title
    }
}

query Drafts {
    drafts {
        id
        published
    }
}

query Posts {
    posts {
        id
        published
    }
}

이제 안드로이드 스튜디오의 Build -> Clean Poject와 Rebuild Project를 차례대로 실행한다.

Build to Apollo Client

마지막으로 Activity onCreate() 내부에 다음과 같은 코드를 추가한다.

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

        // First, create an `ApolloClient`
        // Replace the serverUrl with your GraphQL endpoint
        val apolloClient = ApolloClient.builder()
            .serverUrl("http://10.0.2.2:4000/graphql/endpoint")
            .build()
            
            
            ...

 }

apolloClient 를 build하는 코드를 보면 serverUrl을 입력한다.

테스트는 안드로이드 애뮬레이터를 통해 진행된다.

로컬 서버를 연결하기위해 endpoint에 http://localhost:4000 을 입력하면 될것같지만 안드로이드 애뮬레이터에서는 localhost로 입력했을 때에는 경로를 찾지 못한다. localhost 대신 10.0.2.2를 입력하면 된다는 글을 많이 보았으나 동작하지 않았다.

그래서 다음과 같이 셋팅해 주어야 했다.

res/xml/network_security_config.xml 을 생성한다.

아래와 같은 내용을 추가해준다.

 <?xml version="1.0" encoding="utf-8"?>
<!--
reference
https://qastack.kr/programming/6760585/accessing-localhostport-from-android-emulator
-->
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
        <domain includeSubdomains="true">10.0.2.2</domain>
    </domain-config>
</network-security-config>

AndroidManifest.xml

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        ...
        android:networkSecurityConfig="@xml/network_security_config"
        tools:targetApi="n">
    </application
    ...

Test ApolloClient with Coroutines

다음으로 onCreate() 내부에 코루틴 + Apollo client를 활용하여 로컬 서버의 쿼리와 뮤테이션을 테스트하는 코드를 추가한다.

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

        GlobalScope.launch {
            val response = try {
                apolloClient.mutate(CreateDraftMutation("android", "client")).toFlow().collect {
                    Log.e("response", "${it.data?.createDraft}")
                }
                apolloClient.mutate(PublishMutation(3)).toFlow().collect {
                    Log.e("response","${it.data?.publish}")
                }
                apolloClient.query(PostsQuery()).toFlow().collect {
                    Log.e("response", "${it.data?.posts}")
                }
                apolloClient.query(DraftsQuery()).toFlow().collect {
                    Log.e("response", "${it.data?.drafts}")
                }
            } catch (e: ApolloException) {
                // handle protocol errors
                Log.e("exception", "${e.message}")
                return@launch
            }
 }

위에서부터 CreateDraftMutation, PublishMutation, PostsQuery, DraftQuery 를 차례대로 실행한다.

네트워크 요청이기 때문에 코루틴 스코프 내부에서 사용되며 try{}catch{}를 통해 exception을 체크한다.

toFlow().collect {} 를 통해서 로컬서버의 뮤테이션과 쿼리를 성공적으로 사용한 후 결과값을 log를 통해 출력한다.

log로 출력되는 내용은 playground에서 출력되는 내용과 동일하다.

앱을 실행하고 다음과 같이 로그가 찍히면 성공!

dbeaver + postgreSQL을 통해 Post 테이블이 뮤테이션과 쿼리의 결과를 잘 반영하였는지 확인해보았다.

https://github.com/jhk-im/gql-talk

GitHub - jhk-im/gql-talk: Android Kotlin Client & TypeScript Nexus GraphQL Server

Android Kotlin Client & TypeScript Nexus GraphQL Server - GitHub - jhk-im/gql-talk: Android Kotlin Client & TypeScript Nexus GraphQL Server

github.com

Nexus GraphQL tutorials (5) - Persisting data (via Prisma)

jhk-im — Mon, 7 Dec 2020 23:16:33 +0900

GraphQL을 개인 프로젝트에 적용하기위해 제대로 학습해보기 시리즈

해당 글은 Nexus 를 개인 프로젝트에 적용하고자 제대로 학습하기 위해 Nexus tutorial의 내용을 정리한 것입니다.

Nexus tutorial에도 상세하게 나와있음을 알려드립니다.

5. Persisting data (via Prisma)

nexusjs.org

지금까지의 튜토리얼은 in-memory 데이터로 작업해왔다. 이제부터는 데이터에 초점을 두고 Nexus가 데이터베이스와 함께 사용하는 방법에 대해 알아보자. 해당 튜토리얼에선 PostgreSQL과 Prisma를 활용한다.

PostgreSQL은 오픈소스 관계형 데이터베이스이다.

Nexus는 이러한 기술들을 요구하지 않으며 데이터베이스 추상화(raw SQL, Query builder, ORM ..)와 함께 사용될 수 있지만 Nexus는 Prisma의 팀에 의해 만들어졌기 때문에 둘 사이에 유용하게 통합된 부분이 있다.

What is Prisma?

Prisma Client: Node.js & TypeScript 용 자동 생성 및 Type-safe Query Builder
Prisma Migrate (experimental): Declarative data modeling & Migration system
Prisma Studio: 데이터베이스의 데이터를 눈으로 확인하고 편집하는 GUI

Prisma의 중심에는 Schema.prisma라는 파일이있다. 데이터베이스 스키마, 데이터베이스 연결 등을 인코딩하고 domain spcific 언어를 사용하는 Declarative 파일이다.

Connect to your database

Prisma 클라이언트, Prisma CLI 설치
api/schema.ts 모듈에서 사용
Prisma 스키마 만들기
데이터베이스 인증내용을 저장할 .env 파일 만들기
데이터베이스 연결

yarn add @prisma/client && yarn add --dev @prisma/cli

npx prisma init

prisma

이제 postgreSQL을 설치해보자. 현재 Ubuntu 20.04를 사용하고있고 그에 맞게 설치해보도록 하겠다.

sudo apt update
sudo apt install postgresql postgresql-contrib

//PostgreSQL 접속
sudo -u postgres psql

// psql

// user 생성 
CREATE USER jrooms WITH PASSWORD 'jrooms123!';

// user 권한설정
ALTER ROLE jrooms superuser createrole createdb;

// database 생성
CREATE DATABASE gqltalk OWNER jrooms;

// prisma/.env
DATABASE_URL="postgresql://jrooms:jrooms123!@localhost:5432/gqltalk"

Create your database schema

in-memory 데이터를 실제 데이터베이스의 테이블로 바꿔보자. 이를위해 prisma 스키마에 모델을 작성한다.

// prisma/schema.prisma
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  body      String
  published Boolean
}

데이터베이스 스키마를 지정하고 다음을 입력하여 첫 번째 데이터베이스 마이그레이션을 진행해보자.

npx prisma migrate save --experimental

마이그레이션을 지정한 후 다음을 입력하여 마이그레이션을 적용한다.

npx prisma migrate up --experimental

Access your database

이제 in-memory 데이터를 버리고 Prisma 클라이언트로 대체해보자.

// api/db.ts
import { PrismaClient } from '@prisma/client'

export const db = new PrismaClient()

npx prisma generate

// api/graphql/Post.ts

export const PostQuery = extendType({
  type: 'Query',
  definition(t) {
    t.list.field('drafts', {
      type: 'Post',
      resolve(_root, _args, ctx) {
        return ctx.db.post.findMany({ where: { published: false } })
      },
    })
    t.list.field('posts', {
      type: 'Post',
      resolve(_root, _args, ctx) {
        return ctx.db.post.findMany({ where: { published: true } })
      },
    })
  },
})

export const PostMutation = extendType({
  type: 'Mutation',
  definition(t) {
    t.field('createDraft', {
      type: 'Post',
      args: {
        title: nonNull(stringArg()),
        body: nonNull(stringArg()),
      },
      resolve(_root, args, ctx) {
        const draft = {
          title: args.title,
          body: args.body,
          published: false,
        }
        return ctx.db.post.create({ data: draft })
      },
    })
    t.field('publish', {
      type: 'Post',
      args: {
        draftId: nonNull(intArg()),
      },
      resolve(_root, args, ctx) {
        return ctx.db.post.update({
          where: {
            id: args.draftId
          },
          data: {
            published: true,
          },
        })
      },
    })
  },
})

Try it out

yarn dev

playground

dbeaver

Nexus GraphQL tutorials (4) - Testing your API

jhk-im — Mon, 7 Dec 2020 12:36:45 +0900

GraphQL을 개인 프로젝트에 적용하기위해 제대로 학습해보기 시리즈

해당 글은 Nexus 를 개인 프로젝트에 적용하고자 제대로 학습하기 위해 Nexus tutorial의 내용을 정리한 것입니다.

Nexus tutorial에도 상세하게 나와있음을 알려드립니다.

Testing your API

4. Testing your API

nexusjs.org

지금까지 구현된 내용은 Playground를 통해 수동으로 검증하였다. 처음에는 문제가 없지만 어느 시점부터는 자동화 된 테스트를 원할 것이다. 해당 챕터에서 몇 가지 자동화된 테스트를 추가해보자.

GraphQL API 테스트 방법은 여러가지가 있다. 한 가지 방법은 Resolver를 분리하여 분리 된 함수에 추출한 후 유닛 테스트를 하는 것이다. 이러한 기능은 pure function이 아니기 때문에 부분 통합 테스트 혹은 테스트 유닛 level을 유지하기 위한 Mock이 도입된다.

Resolver Unit Test 의 문제

추후 사용하게 될 Prisma는 Resolver를 쓸 필요가 없을 수 있다. 이 경우 Reslover를 테스트하는 것은 무의미하다.
Nexus가 가져오는 Static type safety 덕분에 입력 및 예상 출력 유형에 대한 테스트가 크게 감소할 수 있다. ( 예를들어 Resolver가 null을 검사하는지, 올바른 유형을 반환하는지를 테스트할 필요가 없다.)
Resolver는 내부적인 것에 초점을 맞추기 때문에 정확한 client의 관점을 제공할 수 없다.

Nexus는 실제 Client 처럼 API를 실제로 실행하여 테스트 하는 System testing을 서포트한다.

Setting up your test environment

Jest를 사용한다. 의무사항은 아니지만 Nexus에서 추천하는 방법이다.

선호하는 테스트 프레임워크를 사용해도 무방하다.

yarn add --dev jest @types/jest ts-jest graphql-request get-port

// package.json
"scripts": {
	...
  "generate": "ts-node --transpile-only api/schema",
  "test": "npm run generate && jest"
},
	...
"jest": {
  "preset": "ts-jest",
  "globals": {
    "ts-jest": {
      "diagnostics": { "warnOnly": true }
    }
  },
  "testEnvironment": "node"
}

mkdir tests && touch tests/Post.test.ts

Testing the publish mutation

쉬운 테스트를 위해서 통합 테스트를 실행하도록 설계 된 createTestContext 유틸리티를 생성한다.

테스트가 실행되면 동일한 프로세스에서 앱을 부팅하고 테스트와 상호작용하기 위한 인터페이스를 노출한다.

Jest는 각 테스트를 자체 프로세스로 실행하므로 8개의 테스트를 병렬로 실행하면 8개의 앱 프로세스도 실행됨을 의미한다.

// tests/__helpers.ts                                            // 1
import { ServerInfo } from "apollo-server";
import getPort, { makeRange } from "get-port";
import { GraphQLClient } from "graphql-request";
import { server } from "../api/server";

type TestContext = {
  client: GraphQLClient;
};

export function createTestContext(): TestContext {
  let ctx = {} as TestContext;
  const graphqlCtx = graphqlTestContext();
  beforeEach(async () => {                                        // 2
    const client = await graphqlCtx.before();
    Object.assign(ctx, {
      client,
    });
  });
  afterEach(async () => {                                         // 3
    await graphqlCtx.after();
  });
  return ctx;                                                     // 8
}

function graphqlTestContext() {
  let serverInstance: ServerInfo | null = null;
  return {
    async before() {
      const port = await getPort({ port: makeRange(4000, 6000) });  // 4
      serverInstance = await server.listen({ port });               // 5
      return new GraphQLClient(`http://localhost:${port}`);         // 6
    },
    async after() {
      serverInstance?.server.close();                               // 7
    },
  };
}

모듈 네임의 prefix(__helpers.ts)는 Jest 스냅샷 폴더의 __snapthots__과 일치한다.
Jest 라이프사이클 beforeEach를 활용한다. 각각의 테스트 이전에 Jest에 의해 호출된다.
Jest 라이프사이클 afterEach를 활용한다. 각각의 테스트 종료 후 Jest에 의해 호출된다.
여러개의 서버를 동시에 실행할수 있도록 random 포트를 사용한다. Jest가 기본적으로 동일한 파일에서 테스트를 동시에 실행할 때 유용하다.
테스트를 시작하기 전에 GraphQL 서버를 시작한다.
테스트 컨텍스트에 pre-configured GraphQL 클라이언트를 추가하여 각각의 테스트가 GraphQL 서버로 쉽게 쿼리를 보낼 수 있도록 한다.
테스트가 종료되었을 때 GraphQL 서버를 멈춘다.
GraphQL 클라이언트가 configured 객체를 반환하여 GraphQL 서버로 쿼리를 보낸다.

이제 mutation을 테스트해보자.

우선 메모리에 미리 셋팅된 데이터를 제거한다.

// api/db.ts
...
export const db = {
 posts: []
}

테스트 코드를 다음과 같이 작성한다.

// tests/Post.test.ts
import { createTestContext } from './__helpers'

const ctx = createTestContext()

it('ensures that a draft can be created and published', async () => {
  // Create a new draft
  const draftResult = await ctx.client.request(`            # 1
    mutation {
      createDraft(title: "Nexus", body: "...") {            # 2
        id
        title
        body
        published
      }
    }
  `)

  // Snapshot that draft and expect `published` to be false
  expect(draftResult).toMatchInlineSnapshot()              // 3
  
  // Publish the previously created draft
  const publishResult = await ctx.client.request(`
    mutation publishDraft($draftId: Int!) {
      publish(draftId: $draftId) {
        id
        title
        body
        published
      }
    }
  `,
    { draftId: draftResult.createDraft.id }
  )
  
  // Snapshot the published draft and expect `published` to be true
  expect(publishResult).toMatchInlineSnapshot()
})

테스트 컨텍스트는 ctx.client.request에 GraphQL 클라이언트를 노출한다. 이곳에 테스트할 mutation을 작성한다.
이전에 작성한 createDraft() mutation이다.
테스트 결과로 스냅샷 인라인으로 입력과 출력이 정렬된 것을 볼 수 있게 해준다.

Try it out

prettier를 추가하라는 error 메세지가 떠서 추가하였다.

yarn add --dev prettier

테스트 실행

yarn test

다음과 같이 Object가 .toMatchInlineSnapshot에 추가된다.

// tests/Post.test.ts
...
  // Snapshot that draft and expect `published` to be false
  expect(draftResult).toMatchInlineSnapshot(`
    Object {
      "createDraft": Object {
        "body": "...",
        "id": 1,
        "published": false,
        "title": "Nexus",
      },
    }
  `); // 3
  
    // Snapshot the published draft and expect `published` to be true
  expect(publishResult).toMatchInlineSnapshot(`
    Object {
      "publish": Object {
        "body": "...",
        "id": 1,
        "published": true,
        "title": "Nexus",
      },
    }
  `);
  
  ...

테스트 결과

개인 프로젝트(Bookmark-kotlin)를 통해 알아보는 ViewModel의 생성

jhk-im — Fri, 4 Dec 2020 11:12:01 +0900

ViewModel 개요 | Android 개발자 | Android Developers

ViewModel을 사용하면 수명 주기를 인식하는 방식으로 UI 데이터를 관리할 수 있습니다.

developer.android.com

ViewModel

본래 MVVM 디자인 패턴의 ViewModel 에서 파생되었으며 Android에서는 Jetpack에 포함된 ViewModel기능을 제공한다.

안드로이드의 개발 환경을 살펴보면 XML을 사용하여 레이아웃과 같은 View를 표시하게 되는데 Button의 on/off와 같은 사용자에 의한 간단한 UI 상호작용을 담당하며 이를 UI Controller(Activity, Fragment..)내부에서 View로부터 발생한 상호작용과 Model에서 가지고있는 데이터 사이에서 복합적인 상호작용을 구현하여 다양한 화면을 구성하게 된다. 여기서 시간이 지날수록 UI Controller에 방대한 코드가 자리잡게 된다.

MVVM은 View와 ViewModel을 분리하는데 이는 Activity, Fragment와 같은 UI Controller에 쌓이게 되는 코드를 분담하여 유지보수 및 재사용성, 테스트를 용이하게 해준다. UI Controller를 View의 일부분으로 묶기 때문에 UI Controller 내부에 뷰를 표시하는 것 이외에 모델과의 상호작용하는 로직을 ViewModel에서 구현하는 것이 원칙이다.

다시한번 처음으로 돌아가서 Android 에서는 Jetpack에 ViewModel이 포함되어있다. 이는 Android의 개발환경에 알맞게 설계되어 제공된다는 의미일 것이다. 어떠한 기능이 있는지 공식문서의 내용을 통해 정리해보도록 하겠다.

* Android Architecture ViewModel 이라해서 ACC ViewModel이라 부른다.

ACC ViewModel

ACC ViewModel 클래스는 안드로이드 생명주기를 의식하여 UI와 관련된 데이터를 저장하고 관리하도록 설계되었다. 안드로이드 프레임워크는 Activity, Fragment와 같은 UI Controller의 생명주기를 관리하는데 이는 다음과 같은 문제가 있다.

1. UI Controller를 파괴하거나 다시 생성하면 저장되었던 모든 UI관련 데이터가 손실된다.

2. UI Controller가 비동기로 구현되어야 할때 다소 시간이 걸릴 수 있다.

3. UI Controller가 데이터베이스, 네트워크 로딩을 담당하는 경우 클래스가 거대해진다.

4. 과도한 책임을 부여받은 클래스는 테스트를 어렵게 만든다.

그렇기 때문에 View 데이터관련 로직을 UI Controller에서 분리하는 것이 효율적이다.

다음은 ACC ViewModel에 대한 설명이다.

1. LifecycleOwner 혹은 특정 View 인스턴스보다 오래 지속되도록 설계되었다.

2. Lifecycle혹은 View 객체를 모르더라도 테스트코드를 쉽게 적용할 수 있다.

3. LiveData 객체와 같은 LifecycleObserver를 포함할 수 있다.

4. 생명주기를 인식하는 Observable의 변경사항을 관찰하면 안된다.

ACC ViewModel 생명주기

ViewModel 객체의 범위는 ViewModelProvider에 전달되는 Lifecycle로 지정된다. ViewModel은 범위가 지정된 Lifecycle이 끝날 때까지 메모리에 남아있으며 Activity가 종료되거나 Fragment의 경우 분리될 때 까지 메모리에 남아있다.

다음의 이미지는 Activity의 Lifecycle이 지정된 ViewModel의 주기를 나타낸다. Fragment에도 동일하게 적용된다.

https://developer.android.com/topic/libraries/architecture/viewmodel

일반적으로 Activity의 onCreate() 메서드가 호출될 때 ViewModel을 요청한다. ViewModel이 처음 요청되고나서 Activity가 onDestroy() 될 때까지 존재한다.

Fragment 사이에 데이터 공유

Activity에 속한 두개 이상의 프래그먼트간의 데이터를 공유할 때 각각 인터페이스 설명을 정의해야 하며, Owner Activity에서 두가지를 함께 묶어야 하므로 간단히 처리할 수 있는 작업이 아니다. 또한 다른 프래그먼트가 아직 생성되지 않았거나 표시되지 않은 시나리오도 처리해야 한다. 이러한 고충을 ViewModel 객체를 사용하여 해결할 수 있다.

두 프래그먼트 모두 자신이 포함된 Activity를 검색하고 각 프래그먼트에서 ViewModelProvider를 가져올 때 Activity로 범위가 지정된 동일한 ViewModel 인스턴스를 받는다.

이러한 접근 방법은 다음과 같은 이점이 있다.

Activity는 아무것도 하지 않아도 되거나 데이터 공유에 관해 어떤 것도 알 필요가 없다.
각 프래그먼트는 ViewModel외에 서로에 관해 알 필요가 없다. 프래그먼트가 사라져도 다른 프래그먼트는 평소대로 동작한다.
각 프래그먼트에 자체 생명주기가 있으며, 다른 프래그먼트의 생명주기에 영향을 받지 않는다.

여기 까지는 안드로이드 공식 문서에 나오는 ViewModel에 관한 설명이었다. 이제 프로젝트에서 ViewModel이 어떻게 활용되는지 살펴보고 위에서 설명하는 내용이나 이점들이 잘 녹아들었는지 살펴보도록 하겠다.

BookmarkActivity

class BookmarkActivity : AppCompatActivity(), BookmarkNavigator, BookmarkItemNavigator {

  private lateinit var viewModel: BookmarkViewModel

  @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    overridePendingTransition(R.anim.fadein, R.anim.fadeout)
    setContentView(R.layout.bookmark_act)
	
    ...

    viewModel = obtainViewModel().apply {
		...
    }
  }
  
  fun obtainViewModel(): BookmarkViewModel =
    obtainViewModel(BookmarkViewModel::class.java, this)
   
   ...
  }

우선 액티비티가 생성될 때 obtainViewModel() 메서드를 활용하여 ViewModel을 생성한다.

obtainViewModel()메서드는 동일한 이름의 메서드를 통해 ViewModel을 생성하고 반환한다. 메서드에는 생성될 ViewModel 클래스와 현재 액티비티를 입력한다.

해당 메서드는 다음과 같은 경로에 선언되어 있다.

// util/AppcompatActivityExt.kt

...
fun <T : ViewModel> AppCompatActivity.obtainViewModel(
  viewModelClass: Class<T>,
  owner: ViewModelStoreOwner
) =
  ViewModelProvider(owner, ViewModelFactory.getInstance(application)).get(viewModelClass)

위에서 보았던 공식문서와 같이 ViewModelProvider를 통해 ViewModel을 생성한다.

중간에 있는 ViewModelFactory를 통해 Factory를 생성하고 입력하게 된다. 이부분을 조금 더 자세히 살펴보도록 하자.

ViewModelFactory

일반적으로 ViewModel을 생성하기위한 코드는 다음과 같다.

viewModel = ViewModelProvider(this, ViewModelProvider.NewInstanceFactory())
		.get(MainViewModel::class.java)

ViewModelFactory는 위와 동일하게 ViewModelProvider.NewInstanceFactory()를 통해 생성되는 Factory를 반환한다. 다만

Factory가 생성될 때 사용되는 create 함수를 오버라이드하고 재정의하여 사용한다. 해당 부분을 살펴보도록 하겠다.

class ViewModelFactory private constructor(
  private val itemsRepository: ItemsRepository
) : ViewModelProvider.NewInstanceFactory() {

  override fun <T : ViewModel?> create(modelClass: Class<T>) =
    with(modelClass) {
      when {
        isAssignableFrom(BookmarkViewModel::class.java) ->
          BookmarkViewModel(itemsRepository)
        isAssignableFrom(AddEditBookmarkViewModel::class.java) ->
          AddEditBookmarkViewModel(itemsRepository)
        isAssignableFrom(BookmarkDetailViewModel::class.java) ->
          BookmarkDetailViewModel(itemsRepository)
        isAssignableFrom(DeleteBookmarkViewModel::class.java) ->
          DeleteBookmarkViewModel(itemsRepository)
        else ->
          throw IllegalArgumentException("Unknown ViewModel Class: ${modelClass.name}")
      }
    } as T

  companion object {

    @SuppressLint("StaticFieldLeak")
    @Volatile
    private var INSTANCE: ViewModelFactory? = null

    fun getInstance(application: Application) =
      INSTANCE ?: synchronized(ViewModelFactory::class.java) {
        INSTANCE ?: ViewModelFactory(
          Injection.provideBookmarkRepository(application.applicationContext)
        ).also { INSTANCE = it }
      }

    @VisibleForTesting
    fun destroyInstance() {
      INSTANCE = null
    }
  }
}

싱글턴으로 되어있는 ViewModelFactory는 인스턴스가 생성될 때 Injection클래스를 통해 ItemRepository를 주입한다. 해당 부부은 나중에 자세히 다뤄 보도록하겠다.
ViewModelFactory가 생성될 때 오버라이드 된 create 메서드를 통해 ViewModel 클래스를 구분하고 현재 생성해야 할 ViewModel을 선택하여 생성한다.
ViewModel 클래스의 구분은 ViewModelProvider에서 .get() 메서드로 입력되는 ViewModel 클래스에 의해 선택된다.

결과적으로 위와같은 흐름을 활용하면 각각 다르게 구현된 프래그먼트와 ViewModel을 불필요한 코드의 반복없이 obtainViewModel()에 입력하는 것 만으로 ViewModel을 생성할수 있다.

이렇게 생성된 ViewModel은 프래그먼트의 onCreateView() 에서 다음과 같이 연결된다.

  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
  ): View? {
    viewDataBinding = BookmarkFragBinding.inflate(inflater, container, false).apply {
      viewModel = (activity as BookmarkActivity).obtainViewModel()
    }
    setHasOptionsMenu(true)
    return viewDataBinding.root
  }

databinding의 viewModel에 액티비티의 obtainViewModel()을 통해 얻은 ViewModel의 인스턴스를 입력하여 연결한다.

https://github.com/jhk-im/bookmark-kotlin-mvvm

GitHub - jhk-im/bookmark-kotlin-mvvm: bookmark se refactoring with kotlin

bookmark se refactoring with kotlin. Contribute to jhk-im/bookmark-kotlin-mvvm development by creating an account on GitHub.

github.com

개인 프로젝트(Bookmark-kotlin)를 통해 알아보는 MVC-MVP-MVVM

jhk-im — Thu, 3 Dec 2020 01:11:57 +0900

Bookmark-kotlin

해당 프로젝트는 MVVM 패턴으로 구현되어있다. MVVM패턴에 대해 정리하고 MVC - MVP 패턴과의 비교를 통해 예전에 확실하게 감을잡지 못했던 부분들을 다시한번 정리해보려한다.

프로젝트의 내용은 간단하다. Bookmark를 저장하고 저장된 Bookmark의 정보를 활용해 편집/삭제를 하거나 웹뷰를 통해 웹사이트를 검색하는 기능을 구현하였다. 메인 화면에서 Bookmark 리스트를 표현하고있는 화면을 기준으로 정리해보자.

MVC

Model + View + Controler

Model

Bookmark의 데이터에 해당한다. url, title, favicon과 같은 상태정보를 가지고있는 객체이다.

View

실제 표시되는 영역이며 메인화면을 나타내는 main_act.xml이 이에 해당한다. View에서는 표시되는 UI와 사용자가 상호작용할 때 Controller에 전달하는 역할을 한다. Model에 대한 정보를 완전히 모르는 상태이기 때문에 단순히 UI가 눌렸다/안눌렸다 등의 간단한 정보를 전달하게 된다. Model에 대한 정보가 없기때문에 눌렸다/안눌렸다를 전달하더라도 Controller에서의 처리에 따라서 다양한 데이터와 각각의 상태에 따라 유연하게 로직을 구현할 수 있다.

Controller

사용자 -> View와 Model 사이에서 서로가 연동하여 실질적으로 구현하고자 하는 로직를 작성하는 곳이다. 사용자의 상호작용을 View가 Controller에 전달하면 그에맞는 상황을 Model의 데이터와 비즈니스 로직을 활용하여 최종적인 결과물을 만들어내는 곳이라 볼 수 있다. 안드로이드에서 Activity, Fragment 등을 UI Controller라고 부른다. 따라서 main_act.xml과 상호작용하는 MainActivity가 Controller에 해당한다고 볼 수 있다.

MVC는 모델과 뷰를 분리한다. 모델이 어느곳에도 묶여있지 않기 때문에 모델에 대하여 쉽게 테스트를 진행 할 수 있다.

MVC의 문제점

컨트롤러는 안드로이드API에 종속되므로 유닛 테스트가 어렵다.
컨트롤러와 뷰가 긴밀하게 결합되기 때문에 뷰를 변경하면 컨트롤러도 변경해야한다.
앱이 커질수록 컨트롤러에 수많은 코드줄이 형성되어 유지보수를 어렵게 한다.

MVP

Model + View + Presenter

Model

MVC 모델과 동일한 역할

View

UI Controller(Activity, Fragment)를 View의 일부분으로 간주한다. 즉, MVC 컨트롤러에서 뷰를 표시하는 로직과 모델의 상태에 따른 뷰의 변화를 구현하는 로직을 담당하게 되는데 MVP에선 뷰와 컨트롤러를 하나로 보기때문에 컨트롤러에선 뷰를 표시하는 부분만 담당하고 나머지는 Presenter에게 역할을 분담한다고 볼 수 있다.

Presenter

MVC의 컨트롤러와 같지만 뷰와 연결되지 않는 인터페이스라는 점이 다르다. 안드로이드API에도 종속되지 않기 때문에 유닛테스트가 어려웠던 문제를 해결한다. 또한 MVC 컨트롤러에선 뷰의 표시에 해당하는 로직과 모델의 상태에 따라 작성되는 코드가 섞여있었는데 Presenter에는 뷰를 표시하는 로직이 없으므로 모델과 상호작용하는 코드만 작성하면 된다.

MVC의 컨트롤러의 문제점을 MVP를 통해 보완하였다.

MVP의 문제점

코드의 비중이 뷰를 표시하는 코드보다는 모델과 상호작용하는 코드가 더 많기 때문에 Presnter에도 시간이 지남에 따라 코드가 늘어나는 문제가 있다.

MVVM

Model + View + ViewModel

Model

MVC 모델과 동일한 역할

View

데이터바인딩을 사용하여 act_main.xml등과 같은 XML 레이아웃을 작성한다. 이렇게 작성된 레이아웃은 컨트롤러에서 뷰를 표시하는 로직없이 해당 레이아웃의 데이터 바인딩을 연결하는 로직만으로 레이아웃과 내부의 모든 뷰에 접근할 수 있게된다. 또한 XML 레이아웃에 뷰모델을 연결하여 뷰모델 내부에서 모델의 상태를 관찰하고있는 Observer 데이터에 의해 컨트롤러에서의 뷰 표시,변동 로직없이 UI 완성할 수 있다.

ViewModel

LiveData를 통해 모델의 데이터를 관찰한다. 이렇게 관찰되는 데이터를 XML 레이아웃에서 접근할 수 있으며 원하는 곳에 셋팅하여 데이터를 업데이트 한다. 여기서 뷰는 뷰모델에 접근할 수 있지만 뷰모델은 뷰에 접근할 수 없다.

MVVM에선 뷰를 표시하는 로직과 모델과의 상호작용에 의한 뷰의 변경 로직이 획기적으로 줄어들게 되었다. 또한 뷰모델은 뷰에대한 의존성이 전혀 없으므로 유닛테스트를 더욱 쉽게 구현할수 있도록 도와준다. 모델이 변경되는 시점에 LiveData로 관찰하는 변수가 제대로 설정되었는지 확인하면 되는 것이다.

안드로이드의 MVC, MVP, MVVM 종합 안내서

안드로이드 앱을 만드는 개발자를 위한 MVC, MVP, MVVM 패턴 사용법과 장단점에 대한 안내서입니다.

academy.realm.io

https://github.com/jhk-im/bookmark-kotlin-mvvm

GitHub - jhk-im/bookmark-kotlin-mvvm: bookmark se refactoring with kotlin

bookmark se refactoring with kotlin. Contribute to jhk-im/bookmark-kotlin-mvvm development by creating an account on GitHub.

github.com