남잭슨의 개발 블로그

[Android Jetpack] AAC Navigation Component -4. Navigation Upgrade (ViewModel with NavGraph Scope & Modularizing(Nested Navgraph) & Multiple-Start-Destination) & 후기,장단점

남잭슨 — Mon, 26 Aug 2019 22:43:41 +0900

2019/03/31 - [Android] - [Android Jetpack] AAC Navigation Component - 1. Navigation 소개,구성 및 개요 , BackStack관리

2019/08/14 - [Android] - [Android Jetpack] AAC Navigation Component -2. SafeArgs & Deeplink & Action

2019/08/18 - [Android] - [Android Jetpack] AAC Navigation Component -3. NavigationUI & Animation/Transition

먼저 위에 글들을 먼저 참고해주세요!

이번글에는 2.1.0에 추가된 내용들인 ViewModel NavGraph Scope, Modularizing(Nested NavGraph), Back-Button 등

그리고 개인적으로 사용해본 경험, 장단 점에 대해 간략하게 소개할예정이다.

Navigation Modularizing

Navigation을 사용하여 간단하게 Modularizing을 할 수 있다.

먼저 모듈화를 위해 Navigation에서 제공하는 Nested Navigation Graphs 에 대해 알아보자

- Nested Navigation Graphs

Navigation은 Nested Navigation Graphs를 지원한다

여러화면이 개발되다 보면, 전체 NavGraph의 복잡성이 증가되면, 관리하기가 힘들어진다.

그렇기때문에, 아래처럼 여러개의 NavGraph로 나눠서 관리가 가능하다.

Nested NavigationGraph 를 사용하는 방법은 간단하다

<Navigation>태그안에 <Navigation>태그를 중첩해서 사용해도 되고.

따로 정의한후, Root NavGraph에서 아래처럼 <include>로 정의해줘도 된다.

<include app:graph="@navigation/included_graph" />

이를 이용하여 , 모듈화가 가능해진다.

각 모듈화를 하고,

root NavGraph에서 아래처럼 <include>를 하면된다.

<?xml version="1.0" encoding="utf-8"?>
<navigation 
    app:startDestination="@id/nav_feature_one">

    <include app:graph="@navigation/nav_feature_one"/>
    <include app:graph="@navigation/nav_feature_two"/>
    <include app:graph="@navigation/nav_feature_three"/>

</navigation>

또, 각 모듈내의 Destination끼리의 이동의 경우에는 Deeplink를 사용하여 구현하면된다.

Dynamic Feature Module에 대해서는 아직은 제공하지 않지만,

올해 안에 지원할 예정이라고 한다.

ViewModel with NavGraph Scope

NavGraph의 Destination(Fragment)끼리 ViewModel 공유하는 범위를 지정할수 있다.

아래의 그림처럼 같은 ViewModel을 사용하는 로직을 묶어 ViewModel을 공유하는 기능을 제공한다.

사용방법은 간단하다. 해당 Scope를 Nested Navigation Graph로 정의하고, 아래처럼 선언하여 사용하면 된다.

val factory: ViewModelProviderFactory = ...
val viewModel: MyViewModel
    by navGraphViewModels(R.id.my_graph) { factory }

Multiple-Start-Destination ( Multiple-BackStack Navigation )

많은 앱이 BottomNavigation, Tab으로 구현된 앱이라면,

NavigationUI (이전글 참고)을 사용하여 Top-Level-Destination을 정의하여 사용할수 있지만,

각 탭마다, 각자의 독립적인 백스택을 가지고 있어야하는 경우가 있다.

아직까진 공식적으로 지원하진 않지만 googlesample/NavigationAdvanedSampleApp에서 개발을 참조하면된다 .

        fun BottomNavigationView.setupWithNavController(
            navGraphIds: List<Int>,
            fragmentManager: FragmentManager,
            containerId: Int,
            intent: Intent
        ): LiveData<NavController> { 
        	.....
        }

아래처럼 사용하면 된다.

        val navGraphIds = listOf(R.navigation.home, R.navigation.list, R.navigation.form)

        // Setup the bottom navigation view with a list of navigation graphs
        val controller = bottomNavigationView.setupWithNavController(
            navGraphIds = navGraphIds,
            fragmentManager = supportFragmentManager,
            containerId = R.id.nav_host_container,
            intent = intent
        )

위처럼 탭마다의 NavGraph를 정의하고, BottomNavigationView에 setupWithNavController를 해주면 탭마다 서로다른 독립적인 백스택을 지원하는 화면을 만들 수 있다.

상세한 내용은 https://github.com/googlesamples/android-architecture-components/tree/master/NavigationAdvancedSample

깃허브 소스를 참조하자!

나의 후기 장/단점

Navigation의 모든 부분을 사용하진 않았지만, 많은 장점을 가지고 있는 것 같다.

아직까진 약간의 부족함?을 느끼지만, 그런 부분을 커버할만큼의 많은 장점을 가지고 있다고 생각이 든다.

개인적으로는 쓰지 않아야할 이유를 찾는게 더 어려운 것 같다

아직은 프로젝트에 도입단계이기 때문에, 큰 단점을 느끼진 못했다.

장점

앞선 글들에 제공하는 많은 기능과 여러 장점을 써놧지만, 다시한번 장점에 대해 생각해보면

시각적으로 화면 흐름을 볼수있을뿐 아니라, Editor를 사용하여, 화면 흐름을 쉽게 추가/수정이 가능하다.

FragmentTransactions없이 Fragment의 트랜잭션, Back스택 등이 쉽게 관리가 가능하고, 딥링크 처리 및 구현이 간단해졌다,

화면전환 애니메이션 처리 또한 간단하게 구현이 가능하고, Up,Back버튼 처리가 매우 쉬워졌다.

추가적으로 SafeArgs, NavGraph 등등 많은 기능을 제공해주어, 쉽게 사용이 가능해진것 같다

단점

단점이라고 한다면,

일단 Navigation에서의 Acitvity의 역할이 조금 다르다는 점이다.

"네비게이션 컴포넌트는 Activity의 역할을 기존과 다르게 바라볼 것을 요구합니다.

원래 Activity는 화면의 Entry Point 이면서도 Content와 Navigation Method를 들고있는 Owner 였습니다.

하지만 네비게이션 컴포넌트를 활용하기 위해서는 Entry Point로서의 역할만 보아야 합니다.

Content와 Navigation Method는 모두 NavHost 라는 Fragment에게 위임합니다.

그리고 이는 대부분의 화면을 Single Activity로 설계해야 함을 의미합니다."

그렇기 때문에 기존과는 다르게 Single Activity 기반의 설계를 해야하기 때문에,

기존의 프로젝트에서 활용하기에는 마이그레이션 작업이 필요하다.

(물론 Destination에는 Fragment가 기본이지만, Activity,Dialog를 지원하긴 한다.)

또한 사실상 AndroidX로의 마이그레이션 작업이 필요하다.

추가적으로

샘플 코드

해당 예제 코드는 아래 깃허브에 구현하였습니다.

(네비게이션 외에도 클린아키텍쳐 스터디를 위해 오픈소스를 진행하고 있습니다. 많은 Star 와 많은 PR,Issue 참여해주세요! )

https://github.com/namjackson/Clean-Architecture-App

namjackson/Clean-Architecture-App

Sample app for studying the Android clean architecture. - namjackson/Clean-Architecture-App

github.com

다음글

AAC Navigation Component -1. Navigation 소개, 구성 및 개여, BackStack 관리 ( 이전 글 )

AAC Navigation Component -2. SafeArgs & Deeplink & Action ( 이전 글 )

AAC Navigation Component -3. NavigationUI & Animation/Transition ( 이전 글 )

AAC Navigation Component -4. Navigation Upgrade (ViewModel with NavGraph Scope, Modularizing(Nested NavGraph) & Multiple-Start-Destination) & 나의 후기, 장단점 ( 현재 글 )

참고

https://medium.com/@fornewid/io19-jetpack-navigation-33da8811c9de

https://medium.com/swlh/using-the-navigation-component-in-a-modular-world-e7578825962

[Android Jetpack] AAC Navigation Component -3. NavigationUI & Animation/Transition

남잭슨 — Sun, 18 Aug 2019 21:51:41 +0900

아래의 AAC Navigation에 대한글을 먼저 보고 오세요!

2019/03/31 - [Android] - [Android Jetpack] AAC Navigation Component - 1. Navigation 소개,구성 및 개요 , BackStack관리

2019/08/14 - [Android] - [Android Jetpack] AAC Navigation Component - 2. SafeArgs & Deeplink & Action

이번 글에는 AAC Navigation에서 지원하는 NavigationUI 와 Animiation ,Transition에 대해 소개할 예정이다.

Navigation libraries Structure

Navigation은 4개의 모듈로 나눠진다.

navigation-common은 내부적으로 동작하는 부분이고,

navigation-runtime은 NavController에 해당한다.

navigation-fragment는 NavHostFragment, Destinations(Fragments)에 해당하고,

navigation-UI는 bottom-navigation, appbar 등의 UI 동작을 지원해주는 부분이다.

NavigationUI

NavigationUI에 대해 간단하게 알아보자

NavigationUI를 사용하여 아래의 Menu, Drawers, toolbar등의 UI들의 Action을 직접 구현하지 않고,

간단하게 연결하여 사용이 가능하다.

Toolbar
CollapsingToolbarLayout
ActionBar
DrawerLayout
BottomNavigationView

먼저 xml에 navigation의 컴포넌트를 사용하고

각 컴포넌트의 NavController와 Menu를 연결해주면 된다.

주의해야할점은 Menu의 <Item>의 id와 NavGraph의 Destination(<fragment>)의 id가 같아야된다.

다음은 bottomNavigation을 구현해보는 예제이다.

        <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/nav_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:menu="@menu/bottom_nav_menu"/>

먼저 xml에 BottomNavigation 컴포넌트를 추가한다.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
            android:id="@+id/dashboard"
            android:title="@string/fragment_dashboard"/>
    <item
            android:id="@+id/home_list"
            android:title="@string/fragment_home_list"/>
    <item
            android:id="@+id/mypageFragment"
            android:title="@string/fragment_mypage"/>
</menu>

menu 리소스를 추가한다.

( 이때 NavGraph(xml)의 Destination Fragment 의 Id들과 매핑되기때문에 일치시켜주어야한다.)

binding.navView.setupWithNavController(navController)

이제 Activity내에서 위의 navController을 setUp해주면 된다.

구현은 간단하지만, 빌드해보면 첫번째 탭외에 다른 탭으로 이동시마다 backstack이 쌓이는 현상을 볼수있다.

BackButton이나 , appbar사용을 위한 backstack사용에 대한 추가적인 작업이 필요하다.

AppBarConfiguration

이러한 작업을 위해 AppBarConfiguration를 지원해준다.

Tab의 경우나, BottomNavigation등의 경우는 각 탭들 모두 최상단의 Destination이기 때문에,

이를 지원하기 위해 Top-Level-Destination을 정의할 수 있다.

AppBarConfiguration 에서 Top-Level-Destination을 지정해주어야한다.

var appBarConfiguration: AppBarConfiguration

appBarConfiguration = AppBarConfiguration(
  setOf(R.id.home_list, R.id.dashboard, R.id.mypageFragment)
)

HomeList,Dashboard, MyPage가 Top-Level-Destination임을 선언 후,

아래 코드처럼 ActionBar에도 Top-Level-Destination 설정 하면,

Top-Level-Destincation이 아니라면 Actionbar에 뒤로 가기[<-] 가 표현된다 ( Up Button)

setupActionBarWithNavController(host.navController, appBarConfiguration)

onSupportNavigateUp에 appBarConfiguration Top-Level-Destination설정이 포함한 정보를 추가해주면,

Up-Button 의 이벤트에도 Top-Level-Destination설정이 가능하다.

override fun onSupportNavigateUp(): Boolean {
	return findNavController(R.id.nav_container).navigateUp(appBarConfiguration)
}

※ Navigation 에서 Up-Button 과 Back Button은 동일한 작업이 되어야하지만,

( BottomNavigation 탭에서는 Multi - Start Point - Destination을 따로 지원하지 않기 때문에 ,,,)

Top-Level-Destination에서도, Back Button 이벤트 발생시,

StartPoint 외의 Destination(Fragment)에서 BackStack처리가 된다.

기본적으로 Navigation 기본원칙(Fixed Start Destination)으로 구현되어 있어,

appBar나 Up-Button의 경우는 Top-Level-Destination은 지원하지만 Back-Button의경우는

아직까진 Navigation에서 multiple start destinations을 지원하지 않는 것 같다.

아래는 조금이 편법을 사용하여, TopLevel 체크를 하였다.

override fun onBackPressed() {

  if(appBarConfiguration.topLevelDestinations.contains( host.navController.currentDestination?.id)){
    if (System.currentTimeMillis() - Back_Key_Before_Time < 2000) {
    	finish()
    } else {
    	Toast.makeText(applicationContext, "한번더 누르면 꺼집니다.", Toast.LENGTH_SHORT).show()
    	Back_Key_Before_Time = System.currentTimeMillis()
    }
    return;
  }

  super.onBackPressed()
}

- 추 후엔 back 버튼에도 Top-Level-Destination을 기준으로 multiple start destinations을 지원해 주지 않을까 싶다.

추가

또, Single Activity 기반이기 때문에 navHostFragment가 아닌 범위 ( Appbar, BottomNavigation) 등의 영역은

Navigation에서 따로 지원해주지 않기 때문에, 수동으로 처리해주어야한다.

( 사실 Appbar의 경우는 Up-Button[<-]을 지원해주긴한다.)

(예를 들어 BottomNavigation은 각 Tab 화면 들의 Detail화면에서는 보여지지 않아야할때,

Top-Level-level의 Fragment 에서만 하단 BottomNavigation 탭이 보여야할때 수동으로 처리해주어야한다 .

아래코드는 해당 작업의 예시이다.

host.navController.addOnDestinationChangedListener { _, destination, _ ->
    when (destination.id) {
      R.id.dashboard, R.id.home_list, R.id.mypageFragment -> showBotNav()
      else -> hideBotNav()
    }
}

navController에 ChangedListener을 달아서, Bottom Navigation이 보여야할지, 말아야할지 처리해주어야한다.

Animation

Navigation에서는 Action에 Animation기능을 제공한다.

enterAnim : action 실행시, 이동할 Destination에 대한 애니메이션
exitAnim : action을 실행할 때 현재 Destination에 대한 애니메이션
popExitAnim : 이전 화면으로 돌아갈 때(Pop or Back) 종료되는 현재 Destincation 에 대한 애니메이션
popEnterAnim : 이전 화면으로 돌아갈 때(Pop or Back) 이동할 BackStack의 Destination에 대한 애니메이션

Animation추가는 두가지 방법이 있다.

1. navigate 실행시, NavOptions 을 정의해서 사용하는방법

val options = navOptions {
  anim {
    enter = R.anim.slide_in_right
    exit = R.anim.slide_out_left
    popEnter = R.anim.slide_in_left
    popExit = R.anim.slide_out_right
  }
}

<!-- 사용 -->
navController.navigate(R.id.flow_step_one_dest, null, options)

2. NavGraph에 명시하여 사용하는 방법

<action
      android:id="@+id/action_to_add"
      app:destination="@id/addFragment"
      app:enterAnim="@anim/slide_in_up"
      app:exitAnim="@anim/fade_out"
      app:popEnterAnim="@anim/fade_in"
      app:popExitAnim="@anim/slide_out_down"/>

마찬가지로 navigate를 사용하여 Action 실행시, Animation이 실행된다.

Transition

Navigation 에서도 간단하게 Transition 구현이 가능하다

일단, 각 Component View( XML )에 같은 TransitionName을 정의해준다.

<ImageView
        android:transitionName="test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/test"
        android:layout_gravity="top"/>

어떤 TransitionName이 naming이든 상관은 없지만, 전,후 화면의 name은 같아야 실행된다.

val extras = FragmentNavigatorExtras(
	binding.imgview to "test"
)
findNavController().navigate( HomeListFragmentDirections.actionToDetail(itemId), extras)

먼저 action을 실행시키는 화면에서 FragmentNavigationExtras에 Transition에 대한 정보를 담아서

navigate에 파라미터로 추가하여 실행한다.

sharedElementEnterTransition = 
	TransitionInflater.from(context).inflateTransition(android.R.transition.move)

받는 화면에서 위의 코드만 작성하면 Transition이 실행된다.

샘플 코드

해당 예제 코드는 아래 깃허브에 구현하였습니다.

(네비게이션 외에도 클린아키텍쳐 스터디를 위해 오픈소스를 진행하고 있습니다. 많은 Star 와 많은 PR,Issue 참여해주세요! )

https://github.com/namjackson/Clean-Architecture-App

namjackson/Clean-Architecture-App

Sample app for studying the Android clean architecture. - namjackson/Clean-Architecture-App

github.com

다음글

AAC Navigation Component -1. Navigation 소개, 구성 및 개여, BackStack 관리 ( 이전 글 )

AAC Navigation Component -2. SafeArgs & Deeplink & Action ( 이전 글 )

AAC Navigation Component -3. NavigationUI & Animation/Transition ( 현재 글 )

AAC Navigation Component -4. Navigation Upgrade (ViewModel with NavGraph Scope & Modularizing(Nested NavGraph) & Multiple-Start-Destination ) & 나의 후기, 장단점( 다음글 )

참고

https://medium.com/@fornewid/io19-jetpack-navigation-33da8811c9de

[Android Jetpack] AAC Navigation Component -2. SafeArgs & Deeplink & Action

남잭슨 — Wed, 14 Aug 2019 05:07:31 +0900

2019/03/31 - [Android] - [Android Jetpack] AAC Navigation Component - 1. Navigation 소개,구성 및 개요 , BackStack관리

[Android Jetpack] AAC Navigation Component - 1. Navigation 소개,구성 및 개요 , BackStack관리

Navigation Android Jetpack 의 AAC (Android Architecture Component) 컴포넌트중 Navigation에 대해 알아보자! 네비게이션은 앱내의 화면 이동 구현을 도와주는 AAC 라이브러리이다. AAC 라이브러리는 기존에 없..

namjackson.tistory.com

AAC의 Navigation에 대해 잘모르는분들은 먼저 첫번째 게시글을 읽고 오자!

이번글에는 SafeArgs, Deeplink , Action에 대해 소개할예정이다.

SafeArgs

먼저 SafeArgs를 사용하기 위해 추가 설정이 필요하다

해당 설정은 구글 공식문서를 참고하여 추가하자

https://developer.android.com/jetpack/androidx/releases/navigation

기존에 Fragment의 이동에 따른 데이터전달은 보통 Argument Bundle을 이용한다.

Navigation에서도 마찬가지로 Bundle을 이용하여 사용할수 있다.

findNavController().navigate(R.id.action_to_gameFragment, bundleOf("itemId" to 15))

마찬가지로 받을때 아래처럼 사용할수 있다.

arguments?.getInt("itemId")!!

이렇게 사용해도 큰 문제는 없지만, "itemId"라는 Key값을 통일하여 사용해야한다.

물론 상수로 정의하여 사용해도 되지만,

Navigation에서는 type-safe한 SafeArgs기능을 제공한다. NavGraph(Xml)의 Arguments를 미리 정의하여, 자동으로 Boilerplate Code를 생성하여 사용할 수 있다. "itemId"라는 Key값을 사용할 필요가 없다.

자동으로 보내는 쪽에선 Directions Class가 생성되고, 받는 쪽에서는 Args Class가 생성된다.

    <fragment android:id="@+id/detailFragment"
              android:name="com.namjackson.arch.sample.view.ui.detail.DetailFragment"
              android:label="detail_fragment"
              tools:layout="@layout/detail_fragment">

        <argument
                android:name="itemId"
                app:argType="integer"
                android:defaultValue="0"/>
    </fragment>

NavGraph에서 fragment내의 argument를 정의하면, 자동으로 Directions,Args가 생성된다.

findNavController().navigate( HomeListFragmentDirections.actionToDetail(itemId), extras)

HomeListFragmentDirections 클래스가 생성되고, HomeListFragment의 Action들이 메소드로 생긴다.

해당 Action의 파라미터로 argument가 생성된다.

생성된현재FragmentDiretions클래스.정의된Action( 정의된 Argument)

위처럼 사용하면된다.

Action 목적지의 Fragment에서는 아래와 같이 파라미터를 받을수있다.

// 2가지방법 - 1. by navArgs()
val safeArgs: DetailFragmentArgs by navArgs()
val itemId = safeArgs.itemId

// 2가지방법 - 2. fromBundle
arguments?.let {
  val arguments = DetailFragmentArgs.fromBundle(it)
  val itemId = arguments.itemId
}

DeepLink

딥링크는 안드로이드에서 어플의 특정 목적지까지 포인팅하는 URI이다.

이런 URI는 사용자에게 어떤일을 위해 특정 목적지로 보낼때 유용하다.

ex> 빠르게 송금, 빠르게 메세지 확인, 빠르게 상품 확인 등등..

기존의 플로우 과정없이 한번에 이동하는 로직을 짤때 필요하다.

Navigation의 DeepLink은 딥링크로 특정목적지를 들어왔어도,

첫화면부터 특정 목적지 까지의 일반적인 백스택을 그대로 지원해준다.

Navigation에서 DeepLink는 간단하게 짤수있다.

Deeplink는 두가지 구현방법이 있다.

1. Explicit Deep Linking - 명시적 딥링크

NavDeeplinkBuilder를 사용하여 인스턴스를 생성하여 핸들링이 가능하다.

val args = Bundle()
args.putString("itemId", itemId)
val pendingIntent = NavDeepLinkBuilder(context)
  .setGraph(R.navigation.mobile_navigation)
  .setDestination(R.id.detailFragment)
  .setArguments(args)
  .createPendingIntent()

위처럼 NavGraph, Desination Fragment, Args 를 명시적으로 선언하여 사용할 수 있다.

위 방법도 좋지만

2. Implicit Deep Linking - 암시적 딥링크

개인적으로 NavGraph에서 Navigation의 대한 정보를 정의하고 사용해야 Navigation Component가 의미가 있는거 같기 때문에

이방법을 추천한다.

또한 더 간단하다.

NavGraph에 선언하여 사용하면된다.

  <fragment android:id="@+id/detailFragment"
          android:name="com.namjackson.arch.sample.view.ui.detail.DetailFragment"
          android:label="detail_fragment"
          tools:layout="@layout/detail_fragment">

    ...action 생략...

    <argument
          android:name="itemId"
          app:argType="integer"
          android:defaultValue="0"/>

    <deepLink android:id="@+id/deepLink"
          app:uri="sample.detail/{itemId}" />
  </fragment>

Manifest의 추가 작업이 더필요하다

 <activity
       android:name=".view.ui.MainActivity"
       android:label="@string/app_name">
   <intent-filter>
     <action android:name="android.intent.action.MAIN"/>

    <category android:name="android.intent.category.LAUNCHER"/>
  </intent-filter>

  <nav-graph android:value="@navigation/mobile_navigation" />
</activity>

Manifest의 nav-graph추가와 , NavGraph에서의 <deepLink> 태그로 정의 하면 쉽게 사용가능하다

Action

Action은 Destination(Fragment)끼리의 화면이동이다.

NavGraph에선 화살표로 표시된다.

Action엔 일반 Action, Global Action 두가지 종류가 있다.

일반적인 Action은 특정한 Destination <Fragment> 태그 아래에 존재하여, 특정 Destination에서 사용가능하지만

Global Action은 <Fragment> 태그들과 같은 레벨에 존재한다.

<?xml version="1.0" encoding="utf-8"?>
<navigation 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"
            app:startDestination="@id/dashboard"
            android:id="@+id/mobile_navigation">

  
    <fragment android:id="@+id/progressFragment"
              android:name="com.namjackson.arch.sample.view.ui.detail.ProgressFragment"
              android:label="progress_fragment"
              tools:layout="@layout/progress_fragment">
        <action
                android:id="@+id/action_to_detail"
                app:destination="@id/detailFragment"/>
        <argument
                android:name="itemId"
                app:argType="integer"
                android:defaultValue="0"/>
    </fragment>

    <fragment android:id="@+id/errorFragment"
              android:name="com.namjackson.arch.sample.view.ui.ErrorFragment"
              android:label="ErrorFragment"
              tools:layout="@layout/error_fragment"/>

    <action
            android:id="@+id/action_to_error"
            app:destination="@id/errorFragment"/>

</navigation>

action_to_error의 Action은 어디서나 사용가능한 Global Action이다.

Global Action의 경우 xml에선 화살표가 위와 같이 표현된다.

findNavController().navigate(R.id.action_to_error)

navigation은 일반적으로 똑같이 사용이 가능하다.

샘플 코드

해당 예제 코드는 아래 깃허브에 구현하였습니다.

(네비게이션 외에도 클린아키텍쳐 스터디를 위해 오픈소스를 진행하고 있습니다. 많은 Star 와 많은 PR,Issue 참여해주세요! )

https://github.com/namjackson/Clean-Architecture-App

불러오는 중입니다...

AAC Navigation Component -1. Navigation 소개, 구성 및 개여, BackStack 관리 ( 이전 글 )

AAC Navigation Component -2. SafeArgs & Deeplink & Action ( 현재 글 )

AAC Navigation Component -3. NavigationUI & Animation/Transition ( 다음 글 )

AAC Navigation Component -4. Navigation Upgrade (ViewModel with NavGraph Scope & Modularizing(Nested NavGraph) & Multiple-Start-Destination ) & 나의 후기, 장단점( 다음 글 )

디자인패턴1 - 스트래티지 패턴 (strategy pattern)

남잭슨 — Sat, 27 Jul 2019 22:22:49 +0900

Strategy Pattern

스트래티지패턴은 객체의 동작/행위를 정의하고, 구현함으로써

해당 객체의 특정 동작/행위에 대한 구현을 행동객체(Behavior)에 위임하여

해당 객체와는 독립적으로 동작/행위를 구현하는 패턴이다.

적용할수 있는 예시를 들어보자!

게임을 개발함에 있어, 여러종류의 무기를 구현하자,

기본 무기엔 활, 총 ,검이 있다.

아래처럼 공통으로 가지는 동작을 추가한 Weapon 클래스를 상속받는 Gun,Bow, Sword를 구현하자.

하지만, 총과 활과 검의 공격방식은 서로 다르다.

그리고 또한, 앞으로 수많은 종류의 무기가 추가될예정이고,

총은 총알이 없어도, 총을 휘둘러 공격할수 있도록 업데이트예정이며,

또 검은 찌르기와, 베기 2가지 종류의 공격으로 나눌예정이다.

각각의 Attack 메소드를 오버라이딩해서 구현하는 방법도 있지만,

상속은 이러한 변화에 유연하지않아 각 업데이트에 대응하는데 힘들것이고,

또한 점점 재사용하기 힘든코드가 될것이다.

그럼 어떻게 구현해야할까?

먼저 Gun,Bow,Sword클래스의 Attack행위/동작에 대한 인터페이스를 정의한다.

interface AttackBehavior {
	public void attack();
}

그리고 이 행위/동작에 대한 인터페이스를 구현하는 클래스를 생성하자

class GunShootAttack implements AttackBehavior{
	public void attack() {
		System.out.println("총 발사 ! ");
	}
}

class ArrowShootAttack implements AttackBehavior{
	public void attack() {
		System.out.println("화살 발사 ! ");
	}
}

class StabAttack implements AttackBehavior{
	public void attack() {
		System.out.println("찌르기 ! ");
	}
}

class CutAttack implements AttackBehavior{
	public void attack() {
		System.out.println("베기 ! ");
	}
}

class HitAttack implements AttackBehavior{
	public void attack() {
		System.out.println("때리기 !");
	}
}

class NoAttack implements AttackBehavior{
	public void attack() {
		System.out.println("공격 불가");
	}
}

총 발사 , 화살 발사, 찌르기, 뻬기, 때리기, 공격불가등의 행위에 대한 구현체(행동객체)를 선언하였고,

추가되는 공격종류에 대해서는 구현체를 만들면 된다.

무기객체에 Attack 행위를 행동객체에 위임해보자 .

필요에 따라서는 행동객체를 동적으로 할당할수 있다.

abstract class Weapon{
	//행동객체
	AttackBehavior attackBehavior;
	
	public Weapon(AttackBehavior attackBehavior ){
		setAttackBehavior(attackBehavior);
	}
	
	void setAttackBehavior(AttackBehavior attackBehavior){
		this.attackBehavior=attackBehavior;	//행위 동적할당 
	}
	
	void attack(){
		attackBehavior.attack();	//attack의 행위를 행동객체에 위임! 
	}

	//부셔짐  - 동적으로 행동객체를 할당할수있다.
	void breakDown() {
		setAttackBehavior(new NoAttack());
	}
}

구현이 다되었으면, 테스트를 해보자 .

public static void main(String[] args) {
		
		Weapon weapon1 = new ShotGun();
		weapon1.attack(); //빵야
		weapon1.attack(); //빵야
		//총알 다씀 - 동적으로 행동객체를 할당할수있다.
		weapon1.setAttackBehavior(new HitAttack());
		weapon1.attack(); //총으로 때리기! 
		
		Weapon weapon2 = new Bow();
		weapon2.attack(); // 화살쏘기
		weapon2.breakDown(); //고장 
		weapon2.attack(); //공격불가 ..... 
		
		Weapon weapon3 = new Sword();
		weapon3.attack(); //찌르기!
		weapon3.setAttackBehavior(new CutAttack());	//베기로 변경 
		weapon3.attack(); //베기!
		weapon3.setAttackBehavior(new StabAttack()); //찌르기로 변
		weapon3.attack(); //찌르기!
		
}

무기객체의 특정 행동(Attack)을 인터페이스로 정의한 후,

무기 객체의 (Attack)행동에 대한 구현을 행동객체(Behavior)의 구현체에 위임하여

무기 객체와 독립적으로 Attack행위를 구현할수있었다.

※Attack과 같은 동작은 어떤객체의 알고리즘군이라고 표현된다.

이러한 알고리즘군을 정의하고, 각각을 캡슐화하여 교환해서 사용할수 있도록 만든다.

이러한 패턴으로 특정동작을 해야하는 객체와 독립적으로 알고리즘군을 구현할수 있다.

특정 동작이 객체에 영향을 받지 않고, 여러 방식으로 구현될수있다.

객체는 이런 특정동작을 행동(Behavior)객체에 위임하기 때문에, 독립적으로 사용될수있다.

소스코드 - 깃허브 Star는 큰도움이됩니다!

https://github.com/namjackson/SoftwareEngineeringStudy/blob/master/src/namjackson/designpatterns/strategy/TestSimulator.java

참고

https://movefast.tistory.com/95

[NodeJS ]1. Nodejs 동작원리 및 이벤트 루프, 논블로킹I/O (Event Loop , Non-Blocking)

남잭슨 — Mon, 17 Jun 2019 05:29:55 +0900

NodeJS란 ?

비동기 이벤트 기반 주도 , JavaScript 런타임으로써, Nodejs는 확장성 있는 네트워크 애플리케을 만들수 있는 언어.

Chrome V8엔진 기반의 이벤트 기반( Event-driven ) , 논-블로킹 I/O ( Non-Blocking) 패러다임을 채택한 언어로

가볍고 빠르다.

정확한 설명은 공식 문서를 참고하자!

https://nodejs.org/ko/about/

Nodejs의 장점 및 동작원리에 대해 알아보자

크게 3가지를 알아볼것이다.

1. 이벤트 기반 ( Event-Driven) - 이벤트 루프 동작원리

2. 논블로킹 I/O ( Non-Blocking I/O)

3. 싱글 스레드

각각의 특징들이 어떤식으로 동작하는지 간단하게 알아보겠다.!

1. 이벤트 기반 (Event-Driven)

- 이벤트가 발생하였을때, 저장해둔 작업을 수행하는 방식

( ex>클릭 리스너, 네트워크 요청에 대한 처리 등등)

- 이벤트 리스너에 미리 콜백함수를 저장해놓고, 입력된 이벤트에 따라

해당하는 작업을 수행한다

ex> 요청 url에 해당하는 콜백함수 선언

/about이라는 요청이 들어오면 res.send()를 호출하는 콜백함수가 실행된다.

- 발생한 이벤트는 순차적으로 처리하며, 발생한 이벤트가 없다면, 대기한다.

-이벤트 루프가 이벤트 처리 순서를 관리해준다.

그렇다면 이벤트 루프란 무엇인가?

이벤트 루프를 설명하기 위해, Java Script의 동작 원리를 알아보자

JavaScript는 싱글스레드 기반이기 때문에

console.log("Hi 1 !");
console.log("Hi 2 !");
console.log("Hi 3 !");

위코드를 실행하면. 위에서 아래로 순차적으로 실행이 된다.

하지만 만약 중간에 오래걸리는 작업이 있다면,

해당 작업이 완료되기전까지 그 아래 작업은 진행되지 않는다.

console.log("Hi 1 !");
Delay() // 오래걸리는 작업
console.log("Hi 2 !");
console.log("Hi 3 !");

다음 코드의 호출 스택을 확인해보자.

function one(){
 two();
 console.log("One");
}
function two(){
 three();
 console.log("Two");
}
function three(){
 console.log("Three");
}
one();

해당 코드의 호출 스택을 보면 아래와 같다.

자 이제 아래처럼 TimeOut이 포함된 코드의 호출 스택을 생각해보자!

console.log("start!");

setTimeout(function timeout(){
	console.log("Time Out log");
},5000);

console.log("end!");

물론 실행 순서는 예측할수 있다.

start!

end!

(5초이후)Time Out log

하지만 호출 스택을 어떻게 표현하고, 동작할까?

※참고 : 자바스크립트는 싱글스레드 기반에서 콜백이 실행될수 있는 이유는

Web환경에서 스레드를 제공해주는api환경을 제공해준다.

( ex> Dom(Documnet), Ajax, setTimeOut )

위코드의 호출스택을 이해하기 위해 3가지 요소를 이해해야한다.

- 이벤트 루프(Event loop) : 이벤트 발생시, 콜백함수를 관리하고, 실행순서를 관리하는 역할

- 태스크 큐(Task Queue) : 이벤트 발생 후, 실행되어야 하는 작업들이 순차적으로 대기하는 공간

- 백그라운드(Background) : Timer, I/O , 이벤트 리스너 등등

전체 호출스택을 표현하자면 이렇게 된다.

1. 먼저 실행 코드들이 호출스택에 쌓인다.

2. 실행 코드중 백그라운드가 필요한 작업은 백그라운드공간으로 이동하고, 순차적으로 호출스택이 진행된다.

3. 백그라운드에서 자체적으로 작업완료된 콜백함수는 태스크큐로 이동하여 대기한다.

4. 호출 스택들이 완료되면 이벤트 루프(Event Loop) 가 태스크 큐에 있는 콜백을 순서대로 호출스택에 올린다.

5. 호출스택이 완료되면 이벤트루프(Event Loop) 가 돌면서 태스크 큐에 있는 콜백을 실행시키고,

6. 태스크 큐에 아무것도 없다면, 이벤트가 올때까지 대기한다.

참고 링크 ( 자바스크립트 이벤트 루프 상세한 내용 및 연습 동작 샘플)

http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D

latentflip.com

아래는 전체적인 JS 이벤트 루프 내용이다.

다시 노드의 동작원리 및 장점으로 들어와서

2. 논 블록킹 I/O ( Non-Blocking I/O) 에 대해 알아보자

- 논-블록킹은 이전 작업이 완료될때 까지, 기다리면서 멈추지 않고, 다음작업이 지연되지 않게 동작하는 패러다임이다.

- 오래걸리는 작업은 백그라운드에서 진행하며 완료 후, 이벤트 루프를 통해 태스크 큐를 거쳐 호출스택에 올라오길 기다리는 방식

- (시간이 많이 걸리는) 다른 컴퓨팅 자원에 접근하는 I/O(=파일 입/출력,네트워크등)에서 논 블로킹(Non-Blocking) 방식으로 채택됨

논 블로킹I/O는 비동기 개념으로 쉽게 이해할수 있다.

fun longTimeTask(){
	//...오래걸리는작업
    console.log("작업 끝");
}
console.log("시작");
longTimeTask();
console.log("끝, 다음작업");

위 코드를 실행하면

시작

(//오래걸리는작업 이후) 작업끝

끝, 다음작업

이런 순서대로 실행이 된다.

하지만 오래걸리는작업 (longTimeTask()의 함수)에서

오래걸린다면 다음 작업 시작까지 오래걸린다.

fun longTimeTask(){
	//...오래걸리는작업
    console.log("작업 끝");
}
console.log("시작");
setTimeout(longTimeTask(),0);
console.log("끝, 다음작업");

하지만 위처럼 setTimeout을 사용해서, 실행하면

시작

끝, 다음작업

(//오래걸리는작업 이후) 작업끝

이런 순서로 실행된다.

오래걸리는 작업 ( longTimeTask)를 논-블로킹 으로 처리하기때문에

다음작업까지, 기다리지않고 바로 실행이 된다.

3. 다음은 노드의 싱글스레드이다.

NodeJs는 논/블로킹기반의 싱글스레드로 동작하고 있다.

(사실 NodeJs는 내부적으로 여러 스레드가 동작하지만, 개발자가 제어하는건 싱글스레드이다.)

아래의 예시다.

주방 (요리 ) - I/O작업

점원 - 스레드

고객 - 요청

으로 생각하고 이해하면된다.

위의 그림은 스레드(점원)가 하나뿐이고,

한 요청(고객)에 주문-> 요리 ->서빙 이 실행되지만,

Non-Blocking을 채택하지 않아서,

다른 요청들(고객2,고객3)은 스레드(점원)의 순서가 올때까지 대기한다.

아래는 Non-Blocking을 채택한 싱글스레드 기반의 예시다.

스레드(점원)가 하나인것은 똑같지만, 주방요리(I/O)작업은 Non-Blocking작업으로 백그라운드에서 작업하므로

요청(고객)이 대기하지 않아도, 바로 주문을 할수 있고,

주문후, 요리가 완료되면 바로바로 서빙이된다.

이렇게 NonBlocking 싱글스레드로

아래의 멀티스레드 (점원여러명)와 비슷하게 처리할 수 있다.

이렇게 효율적으로 자원을 관리하기 때문에

멀티 스레드 기반의 프로그램보다,

메모리나 기타 자원이 적게 소모된다.

이런면이 노드 Js 의 큰장점이다

☆ 필요시 NodeJs는 스레드를 늘리는 멀티스레드가 아닌

여러개의 프로세스를 동작하는 멀티프로세싱을 채택한다! (추후 , cluster모듈 참고)

[Android Jetpack] AAC Navigation Component - 1. Navigation 소개,구성 및 개요 , BackStack관리

남잭슨 — Sun, 31 Mar 2019 18:20:00 +0900

Navigation
Android Jetpack 의 AAC (Android Architecture Component) 컴포넌트중 Navigation에 대해 알아보자!

네비게이션은 앱내의 화면 이동 구현을 도와주는 AAC 라이브러리이다.

AAC 라이브러리는 기존에 없었던 기능이 아니라, 개발자들이 구현하기 쉽게 도와주는 컴포넌트라고 생각하면된다.

아래의 화면처럼 Android 내에서 화면흐름을 시각적으로 볼수있을 뿐만아니라 바로 수정할 수 있기때문에 편하다!

이 뿐만아니라 아래처럼 여러 기능들을 제공해준다.

Navigation은 앱내에서 화면 탐색에 필요한 모든 것을 처리할 수 있다.

Fragment 트랜잭션을 관리할수 있다.
Up, Back 버튼의 작업 등(백스택 관리)을 간단하게 처리
화면 전환시, Animation 이나 Transition을 위한 표준화된 리소스를 제공
딥링크 구현 및 처리
Navigation UI 패턴을 사용한 Navigation drawers, Bottom Navigation의 연동을 쉽게 구현 가능하게 지원
fragment간의 이동시 안전하게 데이터를 전달 가능
Navigation Editor를 통해 화면흐름을 시각적으로 관리할 수 있다.

기본 FragmentManager, Intent , Bundle등의 사용을 대체할수 있다.

1. Navigation의 구성요소

Navigation의 구성요소는 3가지로 나눠서 이해하면된다.

Navigation Graph
Nav Host
Nav Controller

1. Navigation Graph

Navigation Graph 는 res/navigation/ 폴더에 추가한 xml 파일이다.

화면이동에 대한 모든정보( Action, 화면이동시 파라미터, 화면단위)를 정의하는 곳이다.

위와 같은 화면 흐름을 시각적으로 보고 관리할 수 있는 파일이며, Android Studio 3.3 이상에서 지원한다.

NavGraph에는 아래의 기본 요소에 대한 태그들을 사용할 수 있다.

<navigation> - NavGraph의 기본 태그
<fragment> or <Activity> or <Dialog>등의 Destination ( 목적지가 되는 하나의 화면라고 생각하면된다. ) ( 그래프에서는 하나의 화면으로 구분된다.) ( <Dialog>태그는 2.1.0부터 지원한다. )

<action> - 화면 이동에 대한 액션을 정의할 수 있다. ( 화면간의 이동을 정의하는 태그 ) ( 그래프에서는 화살표로 표현된다.)
<argument> - 화면 이동에 대한 파라미터를 정의한다.
<deeplink> - 딥링크에 대한 내용을 정의한다.

위의 태그를 이용하여, 아래와 같이 각 화면들과 화면 이동에 대한 내용이 정의된 xml파일이다.

<?xml version="1.0" encoding="utf-8"?>
<navigation 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"
            app:startDestination="@id/dashboard"
            android:id="@+id/mobile_navigation">


    <fragment
            android:id="@+id/home_list"
            android:name="com.namjackson.arch.sample.view.ui.home.HomeListFragment"
            android:label="@string/fragment_home_list"
            tools:layout="@layout/home_list_fragment">

        <action
                android:id="@+id/action_to_detail"
                app:destination="@id/detailFragment"/>
        <action
                android:id="@+id/action_to_add"
                app:destination="@id/addFragment"
                app:enterAnim="@anim/slide_in_up"
                app:exitAnim="@anim/fade_out"
                app:popEnterAnim="@anim/fade_in"
                app:popExitAnim="@anim/slide_out_down"/>
    </fragment>

    <fragment android:id="@+id/detailFragment"
              android:name="com.namjackson.arch.sample.view.ui.detail.DetailFragment"
              android:label="detail_fragment"
              tools:layout="@layout/detail_fragment">
        <action
                android:id="@+id/action_to_progress"
                app:destination="@id/progressFragment"/>

        <argument
                android:name="itemId"
                app:argType="integer"
                android:defaultValue="0"/>
    </fragment>

    <fragment android:id="@+id/progressFragment"
              android:name="com.namjackson.arch.sample.view.ui.detail.ProgressFragment"
              android:label="progress_fragment"
              tools:layout="@layout/progress_fragment">
        <action
                android:id="@+id/action_to_detail"
                app:destination="@id/detailFragment"/>
        <argument
                android:name="itemId"
                app:argType="integer"
                android:defaultValue="0"/>
    </fragment>

    <fragment android:id="@+id/errorFragment"
              android:name="com.namjackson.arch.sample.view.ui.ErrorFragment"
              android:label="ErrorFragment"
              tools:layout="@layout/error_fragment"/>

    <action
        android:id="@+id/action_to_error"
        app:destination="@id/errorFragment"/>

</navigation>

각각의 Fragment,Activitiy는 하나의 화면인 Destination 을 의미하고,

Fragment내에 action,argument 태그는 각각 화면을 이동 , 파라미터를 의미한다.

2.Nav Host

NavHost는 NavGraph에 정의된 화면들을 보여주는 컨테이너의 역할을 한다.

화면이동에 대한 액션은 모두 NavHost라는 Fragment에게 위임된다.

일반 Fragment의 Name에 NavHostFragment를 정의해주어야하고,

연결되는 navGraph 또한 정의해주어야한다.

        <fragment
                android:id="@+id/nav_container"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:name="androidx.navigation.fragment.NavHostFragment"
                app:defaultNavHost="true"
                app:navGraph="@navigation/mobile_navigation"/>

NavHost에는 NavController도 포함한다.

3.NavController

NavController는 화면이동에 대한 컨트롤러 역할을 한다.

NavController는 NavHost에서 얻을수있다.

navController는 아래 처럼 여러 방법으로 가져온다.

 <!--navController fragment,activity,view에서 find -->
 val navController = findNavController()
 
 <!--navController navhost id로 가져오기 -->
 val navController = findNavController(R.id.nav_container)
 
 <!--navController - navhost에서 가져오기 -->
 val host: NavHostFragment = supportFragmentManager
                .findFragmentById(R.id.my_nav_host_fragment) as NavHostFragment? ?: return
 val navController = host.navController

아래와 같이 navController를 사용하여 간단하게 화면 전환이 가능하다.

아래의 간단예제외에 많은 사용방법이있다.

<!--NavGraph(xml)에 정의된 R.id.flow_step_one_dest에 해당하는 action이 진행된다.-->
findNavController().navigate(R.id.flow_step_one_dest)

<!--
  NavGraph에 정의된 Action(R.id.next_action)을 사용한다 
  HomeFragmentDirections은 intent개념으로 이해하면된다.
  NavGraph(xml)에 action을 정의하면 tool내에서 자동으로 해당 클래스를 생성해준다.
-->
findNavController().navigate(HomeFragmentDirections.nextAction(1))

<!--NavGraph에 정의된 Action(R.id.next_action)으로 Listner를 반환한다. -->
Navigation.createNavigateOnClickListener(R.id.next_action, null)

Navigation의 Action Structure

NavDestination,NavDirections,NavArgs은 NavGraph(xml)에서

각각 정의된 Destination, Action, Argument를 기반으로 자동 생성된 클래스이다.

아래처럼 Nav 클래스는 오른쪽에 매핑된다고 보면된다.

NavHost / NavController = Activity / FragmentManager
NavGraph = res/navitaion(xml)
Navigator
NavDestination = Fragment
NavDirections / NavArgs = Intent / Bundle
NavigationUI = UI Helper

화면이 이동될때, NavController가 다음 화면으로 향하는 Action을 동작시켜주는 NavDiretions을 요청하면, NavBackStackEntry에서 Stack을 처리한후, 다음 NavDestination을 NavArgs과 함께 실행한다.

사실 사용할땐 Navigation과 Destination,NavArgs 만 알면 사용할수있다.

Navigation BackStack 관리

Backstack에 관한 네이게이션의 기본원칙들을 먼저 알아보자

1. 앱은 반드시 고정된 시작점(Starting Destination)을 가진다.

( 고정된 시작점은 사용자가 보는 첫번째 화면이자, 사용자들이 Back버튼을 눌러서 도착하는 마지막 화면 )

( 로그인같은 일회성 화면이 시작화면이 되어서는 안된다. )

2. Navigation Stack은 화면의 상태를 나타낸다.

( 스택은 LIFO 구조로, 시작 Destination은 가장 아래에 있고 현재 Destination은 항상 위에 있다.

만약 스택을 변경할땐, Stack의 최상단에서 push,pop으로 동작해야한다.)

3. Up버튼으로 앱을 종료시킬수는 없다.

( 시작 Destination에서는 Up버튼이 보이지않아야 한다.)

4. Up 과 Back 버튼은 동작이 일치해야한다.

5. Deep Linking이나 Navigation이나 특정 Destination 진입 시, 동일한 Stack을 가져야한다.

( DeepLink로 들어온 화면일지라도, Stack은 기존과 같이 고정된 시작점(Starting Destination)부터 쌓여있어야한다.)

위의 원칙을 기본으로

Navigation에서는 이전 Destination(Fragment) 이 포함된 백스택을 자동으로 관리한다.

앱을 열때 첫화면이 백스택에 배치된다. 그 후, Navigate()를 실행시켜서 화면을 이동할때마다

백스택 맨위에 해당 Destination(Fragment)이 놓여집니다.

이전(뒤로가기, 위로가기) 기능 시 , 스택의 맨위의 Destination(Fragment)를 제거(or Pop)함으로

바로 이전의 (바로아래의 ) Destination(Fragment)가 호출된다. (NavController.navigateUp() or NavController.popBackStack())

이런 작업들 Navigation에서 관리해준다.

popUpTo 및 popUpToInclusive

Navigation의 Action을 사용하여 이동할때, 일반 BackStack 외에도 추가목적지를 백스택에서 Pop 할수 있다.

예를들어, 로그인 흐름등의 경우는 로그인 완료 이후, 사용자가 뒤로가기 이동시 다시 로그인 흐름으로 가져가지 않고,

로그인 외의 흐름이동을 가져와야한다.

특정 Destination(Fragment)에서 다른 Destination(Fragment)으로 이동할때 ,

<Action> 태그안에 app:popUpTo를 추가하면 된다.

app:popUpTo=Destination(Fragment)을 추가하면, 특정 Destination(Fragment)로 Pop하도록 Navigation에서 처리한다.

또한 app:popUpToInclusive="true" 추가시, app:popUpTo에 지정된 Destination(Fragment)이 백스택에서도 제거된다.

<action android:id="@+id/next_action"
        app:popUpTo="@id/login1"
        app:popUpToInclusive="true"
        app:destination="@id/home"/>

login2에서 위의 Action을 실행되면

Home Destination(Fragment)으로 이동하고,

app:popUpTo="@id/login1"

@id/login1까지의 백스택(login2)이 사라진다

app:popUpToInclusive="true" 이기 때문에

@id/login1의 백스택도 함께 Pop되어

결과적으로 백스택에서 login1,login2가 같이 사라진다.

만약 해당옵션을 사용하지 않았다면, Home화면에서 Pop or Back 버튼시 Login2화면이 떳을것이다.

이렇게 BackStack을 간단한 옵션을 통해 관리할수 있다.

Custom BackPressed

BackButton에 대한 커스텀또한 지원해준다.

class MyFragment : Fragment() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // This callback will only be called when MyFragment is at least Started.
        val callback = requireActivity().onBackPressedDispatcher.addCallback(this) {
            // Handle the back button event
        }

        // The callback can be enabled or disabled here or in the lambda
    }
    ...
}

Back 버튼 관리를 위한 Custom BackPressed callback을 지원한다!

샘플 코드

해당 예제 코드는 아래 깃허브에 구현하였습니다.

(네비게이션 외에도 클린아키텍쳐 스터디를 위해 오픈소스를 진행하고 있습니다. 많은 Star 와 많은 PR,Issue 참여해주세요! )

https://github.com/namjackson/Clean-Architecture-App

namjackson/Clean-Architecture-App

Sample app for studying the Android clean architecture. - namjackson/Clean-Architecture-App

github.com

AAC Navigation Component -1. Navigation 소개, 구성 및 개요, BackStack 관리 ( 현재글 )

AAC Navigation Component -2. SafeArgs & Deeplink & Action ( 다음 글 )

AAC Navigation Component -3. NavigationUI & Animation/Transition ( 다음 글 )

AAC Navigation Component -4. Navigation Upgrade (ViewModel with NavGraph Scope & Modularizing(Nested NavGraph) & Multiple-Start-Destination ) & 나의 후기, 장단점( 다음 글 )

참고링크

https://medium.com/@fornewid/navigation-%ED%9B%91%EC%96%B4%EB%B3%B4%EA%B8%B0-82d23fbc85af

https://developer.android.com/guide/navigation/navigation-getting-started

[날씨 API 사용하기]OpenWeatherMap을 이용한 날씨 API를 사용해보자!

남잭슨 — Sat, 10 Mar 2018 22:26:47 +0900

오픈API란?

개발을 하다보면, 내가 스스로 얻을수 없는 정보들이 있다.

버스 정보라든가 , 날씨 정보라든가 , 도서관 정보 등의 데이터들이다.

대부분 국가, 기업, 기관등에서 해당 정보들을 공유한다.

해당 데이터들을 쉽게 사용할수 있도록 간단하고 쉽게 제공해주는것을 오픈API라고 한다!

이번에 사용한 API 는 날씨정보 API입니다 !

날씨를 제공해주는 API는 꽤 있으니,

이 OpenWeatherMap API가 마음에 들지않으면,

다른 API도 많으니 찾아보는것도 좋다!

( API를 선택한 이유는 해외날씨를 가져와야하기 때문이다!)

OpenWeatherMap 를 이용한 날씨정보를 가져오는 API를 소개해드립니다.

https://openweathermap.org/

우선 이 날씨 API는 완전 무료는 아니고, 부분적 무료입니다.

자세한 가격정보는 아래 링크에 있습니다.

( 사실 전 많은 사용을 하지않을 것이라서 무료를 사용하긴 하는데, 필요에 따라서는 유료나 다른 API를 사용하셔야합니다 )

https://home.openweathermap.org/api_keys

사용방법은 간단합니다.

1. 해당 사이트에 가입을 합니다.

2. API Key를 발급받습니다.

3. API를 사용합니다.

끝입니다.

1. 해당 사이트를 가입합니다.

>이메일정보만 입력하면, 가입이 완료

됩니다 ..!

2. 로그인 후, API Key를 발급받습니다.

>아래의 API Key 탭으로 가시면, API가 기본적으로 하나 생성되어 있습니다.

> 아래의 API Key를 복사합니다! .

3. API 를 사용합니다.

> 먼저 필요한 API 종류를 알아보고, 선택합니다.

> 여러종류의 API를 제공하고 있습니다,,,

( 부분적 무료, 유료 포함. )

> 위 사진의 원하는 API의 [API doc]을 눌러 상세한 API 사용법을 확인합니다 !!

https://openweathermap.org/api

> ( 저는 기본적은 Current Weather data를 사용하였습니다.)

> 여러종류의 호출법 ( 우편번호로 날씨 받기, 위도/경도로 받기, 도시이름으로 받기, 도시ID로 받기 등등 이 존재합니다.

> 사용법에 appid = 나의apiKey를 추가하여 호출합니다.

( ex> http://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=나의 API Key )

Json 형태의 Data가 오는 것을 알수 있습니다. !

자 이제, 간단하게 JavaScript, JQUERY를 사용하여, 몇몇 도시들의 현재 날씨정보를 받아와봅시다.

var apiURI = "http://api.openweathermap.org/data/2.5/weather?q="+city+"&appid="+"내APIKEY";
		$.ajax({
		    url: apiURI,
		    dataType: "json",
		    type: "GET",
		    async: "false",
		    success: function(resp) {
		    	console.log(resp);
		    	console.log("현재온도 : "+ (resp.main.temp- 273.15) );
		    	console.log("현재습도 : "+ resp.main.humidity);
		    	console.log("날씨 : "+ resp.weather[0].main );
		    	console.log("상세날씨설명 : "+ resp.weather[0].description );
		    	console.log("날씨 이미지 : "+ resp.weather[0].icon );
		    	console.log("바람   : "+ resp.wind.speed );
		    	console.log("나라   : "+ resp.sys.country );
		    	console.log("도시이름  : "+ resp.name );
		    	console.log("구름  : "+ (resp.clouds.all) +"%" ); 		    	
		    }
		})
	}

현재온도는 섭씨온도를 만들기위해 273을 뺍니다!

날씨이미지도 지원을 해줍니다.

var imgURL = "http://openweathermap.org/img/w/" + resp.weather[0].icon + ".png";
 $("html컴포넌트").attr("src", imgURL);

위처럼 사용하시면됩니다.

( 단 , 제공해주는 이미지크기가 작고 이쁘지 않은 관계로 저는 다른 이미지를 사용했습니다.

참고 : https://erikflowers.github.io/weather-icons/

)

ajax를 사용하여, 간단하게 도시의 날씨 정보를 받아오게됩니다.

이날씨 API를 활용하여, 아래의 웹페이지를 만듭니다!

대부분의 API는 사용하기 쉽게 만들어져있고,

샘플도 많기 때문에, 어렵지 않습니다.

날씨데이터를 활용하여 개발해보세요!

[Android SSL]Retrofit2로 SSL을 이용한 HTTPS 통신하기 ( Okhttp3 )

남잭슨 — Mon, 12 Feb 2018 21:26:24 +0900

Android Retrofit2에서 SSL을 사용하여, HTTPS 통신을 진행해보자!

우선, SSL을 구현하기전에

HTTPS란? SSL이란? SSL인증서란? 암호화 통신방법은? HandShake란 뭘까?

등의 내용은 간략하게 아래 글(링크)에 소개해놨다.

( 무작정 SSL 을 구현하기보다, 약간의 이해와 함께하면 좋을것 같으니,

SSL 인증서발급이나 Tomcat의 SSL 설정이 필요한 서버단 개발자가 아니라도 아래의 글을 읽어보자!

~~사실 방문자수를 늘리려는 음흉한 목적이...~~ )

2018/01/31 - [개발일지] - [SSL]HTTPS통신을 위한 SSL인증서 발급하기(OpenSSL)

2018/02/06 - [개발일지] - [SSL]HTTPS 통신을 위한 Tomcat SSL 설정하기

자 그럼 이제, Retrofit2란 무엇일까?

안타깝게도 아직 Retrofit2에 대한 글을 작성하지 않았기때문에

(추후 Retrofit 소개 및 사용에 대한 글을 쓰겟습니당)

간단하게 소개를 하겠다.

Android에 관심이 많은 개발자라면 Retrofit 라이브러리를 모르진 않을것이다.

여러종류의 통신 라이브러리가 있지만, 레스토핏 라이브러리는 아마도 가장 많이 사용되는 대표 라이브러리이다.

통신 라이브러리를 사용하지 않고,

통신기능을 구현한다면, 매우 번거롭고 짜증나는 작업이 된다.

이런 통신기능을 더쉽게 사용하기위해 여러 종류의 라이브러리들이 존재한다.

대표적으로 Android SDK에서 공식으로 지원했던 HttpUrlConnection (현재는 Deprecated된..) , 구글의 Volley ,

Square의 OKHttp , Retrofit 등이 있다.

현재 HttpUrlConnection는 Deprecated되었고,

그에따라서 HttpUrlConnection를 사용하던 Volley도 내부적으로는 OKHttp를 많이 사용한다.

Retrofit은 Okhttp를 더 쉽게 사용할수있게하는 라이브러리다 .

( OKHTTP의 래퍼클래스라고 생각하면된다. 내부적으로는 OKHTTP를 사용한다. )

Retrofit의 장점으로는

1. 구현하기 쉬운편이다.

2. 모듈화되어 재사용및 유지보수에 용이하다.

3. 인터페이스 정의로 가독성이 좋다.

4. 성능이 좋은편이다.

이쯤되면 Retrofit을 사용하지 않을 이유가 없다!

이글이 Retrofit2 소개와 사용법에 대한 글이 아니기때문에 소개는 여기까지하겠다.

필요시 다른 Retrofit2글을 참조해보자

Android Retrofit2에서 SSL을 사용하여 Https 통신을 구현해보자

오늘 구현할 방법은 2가지이다.

1. 인증서없이 Https사이트를 우회접속 통신 구현하기.

2. 정상적으로 SSL 인증서를 가지고 SSL을 이용한 HTTPS통신을 구현하기/

먼저 첫번쨰 방법인

1. 인증서없이 Https사이트를 우회접속 통신 구현하기.

이 방법은 Android App내에 인증서를 가지고 있지않을때 임시적으로 사용하는방법이다.

사실상 SSL이 적용되지 않는 통신을 한다.

아래의 스크린샷처럼, 인증서 없이도, SSL에 적용된 웹사이트에 접근이 가능하다 .

( 이 웹사이트를 계속 탐색합니다. (권장하지 않음)). 으로 우회 접근이 가능하다.

이방법도 위의 우회접속과 같은 기능이다 .

먼저 Retrofit2에서 OkHTTP3를 사용하기때문에

SSL 우회접속이 가능한 OkhttpClient를 만들어줍니다.

   // 안전하지 않음으로 HTTPS를 통과합니다.
    public static OkHttpClient.Builder getUnsafeOkHttpClient() {
        try {
            final TrustManager[] trustAllCerts = new TrustManager[] {
                    new X509TrustManager() {
                        @Override
                        public void checkClientTrusted(java.security.cert.X509Certificate[] chain, String authType) throws CertificateException {
                        }

                        @Override
                        public void checkServerTrusted(java.security.cert.X509Certificate[] chain, String authType) throws CertificateException {
                        }

                        @Override
                        public java.security.cert.X509Certificate[] getAcceptedIssuers() {
                            return new java.security.cert.X509Certificate[]{};
                        }
                    }
            };

            final SSLContext sslContext = SSLContext.getInstance("SSL");
            sslContext.init(null, trustAllCerts, new java.security.SecureRandom());

            final SSLSocketFactory sslSocketFactory = sslContext.getSocketFactory();

            OkHttpClient.Builder builder = new OkHttpClient.Builder();
            builder.sslSocketFactory(sslSocketFactory, (X509TrustManager)trustAllCerts[0]);
            builder.hostnameVerifier(new HostnameVerifier() {
                @Override
                public boolean verify(String hostname, SSLSession session) {
                    return true;
                }
            });
            return builder;
        } catch (Exception e) {
            throw new RuntimeException(e);
        }

    }

선언 후 , Retrofit2를 생성해줄때, 아래와같이 해당 OkhttpClinet를 선언해주면 된다.

public static Retrofit createRetrofit(Context context) {
        return new Retrofit.Builder()
                .baseUrl(SERVER_URL)
                .client(getUnsafeOkHttpClient().build())
                .build();
    }

이것은 인증을 하지않고, 안전한지않은 통신 방법이다.

두번째 방법은 인증서로

2. 정상적으로 SSL 인증서를 가지고 SSL을 이용한 HTTPS 통신 구현하기

먼저 서버와 같은 SSL 인증서가 필요하다.

res 디렉토리 아래에 raw라는 디렉토리를 만들고

확장자가 crt인 인증서를 넣어준다.

그리고 아래의 코드처럼 R.raw.localhost를 가지고와서 작업을한다.

 /**
     * localhost라는 인증서 정보로 ssl 연결을시도합니다.
     * @param context
     * @return
     */
    public static SSLSocketFactory getPinnedCertSslSocketFactory(Context context) {
        try {
            CertificateFactory cf = CertificateFactory.getInstance("X.509");
            InputStream caInput = context.getResources().openRawResource(R.raw.localhost);
            Certificate ca = null;
            try {
                ca = cf.generateCertificate(caInput);
                System.out.println("ca=" + ((X509Certificate) ca).getSubjectDN());
            } catch (CertificateException e) {
                e.printStackTrace();
            } finally {
                caInput.close();
            }

            String keyStoreType = KeyStore.getDefaultType();
            KeyStore keyStore = KeyStore.getInstance(keyStoreType);
            keyStore.load(null, null);
            if (ca == null) {
                return null;
            }
            keyStore.setCertificateEntry("ca", ca);

            String tmfAlgorithm = TrustManagerFactory.getDefaultAlgorithm();
            TrustManagerFactory tmf = TrustManagerFactory.getInstance(tmfAlgorithm);
            tmf.init(keyStore);

            SSLContext sslContext= SSLContext.getInstance("TLS");
            sslContext.init(null, tmf.getTrustManagers(), null);

            return sslContext.getSocketFactory();
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        } catch (KeyStoreException e) {
            e.printStackTrace();
        } catch (KeyManagementException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

마찬가지로 위의 메소드 선언 후 ,

Retrofit2를 생성해줄때, 아래와같이 해당 OkhttpClinet를 선언해주면 된다.

public static Retrofit createRetrofit(Context context) {
        return new Retrofit.Builder()
                .baseUrl(SERVER_URL)
                .client(
                        new OkHttpClient.Builder()
                        .sslSocketFactory(SSLUtil.getPinnedCertSslSocketFactory(context))   //ssl 
                        .hostnameVerifier(new NullHostNameVerifier())                       //ssl HostName Pass
                        .build())
                .addCallAdapterFactory(RxJava2CallAdapterFactory.create())                  // Rxandroid 
                .addConverterFactory(GsonConverterFactory.create())                         // JSON
                .build();
    }

SSL 적용이 끝났다! 테스트를 진행해보자 !!

※ 단, 위의 코드 중

 .hostnameVerifier(new NullHostNameVerifier())

의 경우는 SSL인증서가 테스트용이기때문에 추가해주었다.

( SSL의 인증서의 경우 도메인값이 필수기 때문에, 해당 도메인별 SSL인증서가 필요하지만

나는 테스트용 SSL인증서를 발급받았기때문에 도메인이름 검증을 생략하기위함이다.

궁금하다면, 아래 링크 참조!

2018/01/31 - [개발일지] - [SSL]HTTPS통신을 위한 SSL인증서 발급하기(OpenSSL))

정식 SSL 인증서일 경우에는 생략하는게 좋다.

＊필요시 아래의

javax.net.ssl.HostnameVerifier

를 상속받은 커스텀 클래스를 선언한뒤 사용하면된다.

public class NullHostNameVerifier implements HostnameVerifier {
    @Override
    public boolean verify(String hostname, SSLSession session) {
        return true;
    }
}

전체적인 코드는 아래 링크( 깃허브 )에 있습니다.

https://github.com/namjackson/MyUtility/tree/master/app/src/main/java/com/namjackson/util/myutility/http

혹시 도움이되셧다면!

해당링크의 를 눌러주세요!

GitHub의 Star를 남겨주세요

[SSL]HTTPS 통신을 위한 Tomcat SSL 설정하기

남잭슨 — Tue, 6 Feb 2018 00:14:57 +0900

HTTPS 및 SSL 암호화 통신을 위해 Tomcat 설정을 해보자

일단 HTTPS, SSL을 왜 사용할까?

링크를 통해 어떠한 사이트에 접속하게된다.

이 사이트가 아무 문제가 없는 사이트라면, 상관이없지만,

개인정보를 뻇는 사이트인지, 해킹당하고 있는사이트인지 ,해킹 위험이 있는 사이트인지 우리는 알수가 없다.

이 웹사이트가 어떤 사이트인지, 누가 만든사이트인지, 통신이 안전한지 등의 정보알아야 하기때문에 HTTPS 통신을한다.

HTTPS/ SSL 통신을 하면 , 인증기관( CA )에서 해당 사이트가 누구의 소유인가, 누가만든것인가등의 정보를

인증해주고 , 이러한 인증기관의 인증으로 안전한 사이트접속을 하게한다.

먼저, HTTPS / SSL 암호화 통신 방법에 대해 알아보자!

1. 서버측에서는 서버에 대한 정보와 인증등이 담긴 인증서와, 공개키 (비대칭키)를 인증기관( CA : 공인, 사설 이 존재한다 )에 등록한다.

※ 비대칭키 = 공개키, 개인키가 존재한다. 공개키로 암호화를 하고, 개인키로 복호화한다.

개인키가 분실되지 않는 한, 안전하지만, 리소스를 많이 잡아먹는다.

주로 개인키는 서버측에서 관리하고, 공개키는 인증기관에 등록하며 이런한 키는 웹브라우저 보안기능내에 내장되어있다.

2. 클라이언트가 등록되어있는 공개키(비대칭키)로 공통키( 대칭키)를 암호화 하여 서버측에 전송한다.

※ 대칭키 (공통키) = 암호화와 복호화에 사용하는 키가 같다. 비대칭키에 비해 리소스를 덜 잡아먹지만, 해당 키를 분실하게 되면 면 보안에 매우 취약해진다.

>> 중간에 누군가 가로채더라도, 공통키는 공개키(비대칭키)로 암호화되어 있기때문에 안전하다.

( 공개키로 암호화되어있으면, 개인키로만 복호화가 가능하다.)

3. 서버측에서 클라이언트에서 전송된 암호( 공통키로 암호화된 )를 개인키( 비대칭키 )를 사용하여 복호화하여 공통키를 흭득한다.

4. 서버 및 클라이언트는 공통키를 사용하여 보안 통신을 한다!

이렇게 통신전 공통키를 암호화해서 주고 받는 단계를 핸드쉐이크( Handshake )라고 한다.

자 이제 기다리던 Tomcat 서버에 HTTPS / SSL 을 적용해보자

먼저 ,HTTPS/SSL 암호화 통신을 하기위해서는 SSL 인증서가 필요하다.

SSL 인증서를 발급해주는 전문적인 기관( CA )이 있다.

많은 다양한 기관이 있다 Verisign , comodo, thawte 등 여러 유료/무료 기관이 있다.

나는 내가 CA를 만들고 SSL 인증서를 인증을 했다.

아래 링크에 들어가서 따라하면 , 나만의 SSL 인증서를 발급할수 있다. ( 테스트 및 개발용 )

2018/01/31 - [개발일지] - [SSL]HTTPS통신을 위한 SSL인증서 발급하기(OpenSSL)

SSL 인증서 ( 인증서이름.crt )가 준비되었다면, OpenSSL을 통해 Tomcat에 맞는 형식으로 바꿔준다. ( OpenSSL 사용법은 위에 링크 참조 )

pkcs12 -export -in private.crt(인증서이름) -inkey private.key(인증서키이름) -out .keystore -name tomcat

를 하면 .keystore가 생긴다.

1. .keystore 파일 경로를 원하는 위치에 이동시킨다!!!

2. Tomcat 서버의 server.xml을 연다 . (보통은 톰캣위치\conf 경로에 존재한다. )

server.xml을 열어보자!

3. 아래의 소스코드를 추가한다.

HTTPS통신을 할 포트번호를 정한다 ( https는 Port 443이 기본이다. 혹시 기존에 해당 포트가 사용중이라면 , 다른포트를 이용하자)

keystorepass에는 키스토어 비밀번호를 입력한다.

keystorefile에는 .keystore의 위치를 지정해준다.

 
 < connector port="443" protocol="org.apache.coyote.http11.Http11NioProtocol"
          maxthreads="150" sslenabled="true" scheme="https" secure="true" 
          clientauth="false" sslprotocol="TLS" 
          keystorepass="password" keystorefile="C:/OpenSSL-Win64/bin/.keystore" >

자 매우 간단하게 HTTPS / SSL 통신을 위한 Tomcat 설정이 끝났다.

비록 인증서가 공인CA에서 인증된 인증서가 아니라 안전하지 않음 이지만

SSL 적용이 완료되었다!

비록 인증되지않아.

공인CA에 인증서가 등록되어있지않아서,

정상적으로 접근할수 없지만

[고급]버튼을 누르면

[localhost(안전하지않음) 으로 이동 ]을 통해 웹사이트에 우회하여 접근할수 있다.

개발인증서가 아닌, 실제 인증서를 설정하면 , 정상적으로 아래와 같이 웹사이트에 접속이 될것이다.

[SSL]HTTPS통신을 위한 SSL인증서 발급하기(OpenSSL)

남잭슨 — Wed, 31 Jan 2018 18:04:22 +0900

먼저 HTTPS통신을 구현 하기 하기전,

SSL 이란?

Secure Socket Layer의 약자로 SSL 프로토콜은

간단하게 웹서버와 브라우저 사이의 보안을 위해 만들어졌다.

간단하게 요약하자면 대칭키를 이용하여 암호화 통신을 한다!

HTTP에 SSL 적용을 하여 Https 통신을 하게된다!

이러한 암호화 통신을 하기 위해선 SSL 인증서가 필요하다.

SSL 인증서란

해당 웹 사이트가 해킹에 신뢰있는 사이트인지, 안전한 통신을하는 사이트인지를 구분하기 위해

누군가가 이 사이트가 신뢰가 있는 사이트라고 인증을 해주기 위한 인증서이다.

인증서에는 인증서 소유자의 email, 소유자 이름, 인증서 용도, 인증서 유효기간, 발행기관, public key 등이

포함되어 있다.

인증서에 서명한 사람을 신뢰한다면, 서명된 인증서 또한 신뢰할수 있는것이다.

인증서가 다른 인증서에 서명을 해주며 트리구조로 되어 있다.

Https는 이미 많이 사용되고있다

구글 크롬, 파이어폭스등에서 이미 HTTPS가 적용되지 않은 사이트는안전하지 않은 사이트로 경고를 보여주고

실제 많은 사이트들이 https가 적용되어있다.

SSL의 장점은

아래는 https ssl 이 적용된 사이트(공인된 CA의 인증서)

아래는 https ssl 이 적용되지 않은 사이트

아래는 https ssl 적용되었지만, 인증서가 보장되지 않은 사설인증(사설 CA)일경우..

자 이제 Https 통신을 구현을 위한 ssl 인증서를 발급해보자

먼저 ssl 인증서를 발급을 하기위해선 openssl이 필요하다 .

해당 툴이 없다면 아래링크를 통해 설치하자 ( 저는 Window 기준입니다.)

https://sourceforge.net/projects/openssl/files/latest/download?source=typ_redirect

설치가 완료되면, C드라이브 바로 아래 경로에 압축을 풀어주고 ,

해당파일/bin/openssl.exe를 실헹합니다.

(안되시는분들은 cmd 로 해당 경로 이동 후 , openssl.exe 혹은 관리자권한으로 실행해보세요)

1. 개인키 , 공개키 발급

실행이 됬다면, 먼저 PrivateKey를 생성해줍니다.

genrsa -des3 -out 키이름 2048

를 실행하면

비밀번호까지 두번 입력하면

비밀번호가 담긴 개인키를 만들수 있다 .

공인인증서의 경우는 비밀번호가 필요하지만.....

https의 ssl 인증서에는 서비스등록할때마다, 비밀번호를 입력해줘야하기 때문에,

비밀번호가 없는 키를 새로 만들어주자..

genrsa -out 키이름 2048

비밀번호가 없는 private키를 새롭게 발급하였다.

생성된 private.key를 확인해보면 아래와 같은 키가 생겨있는걸 알수 있다.

이제 아래 명령어로 해당 개인키와 쌍이되는 공개키를 뽑아내보자

rsa -in <개인키> -pubout -out public.key

개인키와, 공개키가 생성되었다!

2. CSR( 인증요청서 ) 만들기

CSR이란 ?

SSL 인증의 정보를 암호화하여 인증기관에 보내 인증서를 발급받게하는 신청서입니다.

정보항목에는 국가코드, 도시, 회사명, 부서명, 이메일, 도메인주소 등이 들어가있습니다.

다음 명령어로 CSR을 생성합니다.

req -new -key private.key -out private.csr

req -new -key <키> -out CSR이름csr

명령어 진행후 , 추가 사항을 입력하면 됩니다.

( 개발용이기때문에 아무 정보나 입력했습니다. )

3. CRT( 인증서 ) 만들기

CSR까지 생성했다면, CRT는 그냥 만들수 있지만,

나는 나만의 사설 CA에서 인증까지 받은 인증서를 만들어보려고한다.

먼저 인증서의 서명을 해줄 rootCA가 필요하다.

3-1> rootCA.key 생성하기!

genrsa -aes256 -out rootCA.key 2048

genrsa <암호화 알고리즘> -out 키이름 2048

3-2> rootCA 사설 CSR 생성하기

rootCA.key를 사용하여 10년 짜리 rootCA.pem을 생성한다.

req -x509 -new -nodes -key rootCA.key -days 3650 -out rootCA.pem

(임시로 국가,도시, 회사, 도메인,메일 등을 입력했습니다.)

3-3> CRT 생성

[2]에서 만들었던 csr을 나만의 커스텀 CA인 rootCA의 인증을 받아 private.crt로 생성합니다.

x509 -req -in private.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out private.crt -days 3650

파일을 확인해보면 CRT를 확인할수 있습니다!

인증서를 확인할수 있습니다.

저는 TOMCAT에 인증서를 적용할것이기 때문에 pkcs12라는 형식으로 바꿔줍니다.

1. >

pkcs12 -export -in private.crt -inkey private.key -out .keystore -name tomcat

자이제

.keystore를 사용하여 SSL 통신을 구현할 수 있습니다.

참조

http://joonjava.blogspot.kr/2015/05/tomcat-ssl-2-ca.html

https://blog.hangadac.com/2017/07/31/%ED%99%88%EC%84%9C%EB%B2%84-%EA%B5%AC%EC%B6%95%EA%B8%B0-ssl-%EC%9D%B8%EC%A6%9D%EC%84%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%97%B0%EC%8A%B5/

------------------------------------------

해당 본문 내용은 openssl을 사용한 사설 인증서 발급 방법 입니다.

보통 공인 ssl 인증서의 경우는 도메인 및 기타비용이 필요할수 있습니다.

공인 ssl 발급을 원하시는경우 아래 링크를 참조하세요

http://trend21c.tistory.com/777