📝 SeSAC의 'JetPack과 Kotlin을 활용한 Android App 개발' 강좌를 정리한 글 입니다.

---

💬 네트워크 프로그래밍 개요

❕ 퍼미션

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

• 해당 퍼미션이 있어야 서버와 네트워킹이 가능.

📌 통신 방법

서버와 http 통신을 하기 위한 방법에는 여러 가지가 있다.

📓 HttpURLConnection

• java SE 에서 제공되는 API.

• 표준 라이브러리, 초기 버전부터 제공.

사용할 수는 있지만 코드 작성 시 프로그램 코드가 길어지거나 복잡, 중복되는 측면이 있다.

그래서 사용하다면 HttpURLConnection 를 추상화 시켜 별도의 라이브러리로서 개발.

📓 HttpClient

• apache http 라이브러리.

• 안드로이드 초기 HttpURLConnection 부분에 내부적인 문제가 있어 표준 라이브러리에 포함되어 많이 사용하던 라이브러리.

• Android 6.0 에서는 Apache HTTP 클라이언트에 대한 지원이 제거.

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

• Android 9 이상을 대상이로 하는 앱이 Apache HTTP 클라이언트를 계속 사용하려면 AndroidManifest.xml 에 추가해야 한다.

초기에 HttpURLConnection 라이브러리에 문제가 있어 Apache 라이브러리임에도 불구하고 안드로이드 라이브러리에 포함 됐었다. 그러다 HttpURLConnection 의 내부적 문제 해결 및 많은 http 네트워킹 라이브러리의 등장으로 인기가 사그라들었다.

그래서 현재는 기본적으로 앱에서 이용할 수 없는 상태이다. 만약 사용한다면 Manifest 에 <uses-library> 로 선언해야 한다. 그 외에도 우리가 사용하는 네트워킹 라이브러리에서 내부적으로 HttpClient 라이브러리를 사용할 수도 있기 때문에 선언해야 하는 경우가 종종 있다.

📓 volley

• 2013년 Google I/O 에서 발표한 라이브러리이다.

• http 통신을 위한 다양한 기능을 제공해주는 라이브러리이다.

• 1.0.0 버전에서는 내부적으로 apache http 라이브러리를 이용했으며 1.1.1 버전에서는 apache http 종속성이 제거된 라이브러리이다.

• dependency 를 추가해 주어야 한다.

이용 비율이 높지는 않지만 가끔 volley 라이브러리로 개발하는 개발자도 있다.

📓 okHttp

• square 라는 회사에서 만든 라이브러리이다.

• 아주 유명한 라이브러리.

📓 retrofit

• 이것도 square 에서 만들었다.

• 2013년 1.0 발표 되었고 2016년 2.0 발표된 라이브러리이다.

• 내부적으로 okHttp 를 이용한다.

현재 가장 유명한 라이브러리. 현 시점 가장 이용 비율이 높고 유명한 라이브러리이다.
2.0 버전이 나오면서 변경된 부분이 있고 retrofit 이라고 하면 흔히 2.0 버전을 지칭한다.

🔑 보안 정책의 변경

❕ useCleartextTraffic

<application
	android:usesCleartextTraffic="true">

• api level 28 부터 네트워크 보안 정책변경.

• https 는 문제 없으며 http 인 경우는 설정이 필요

• useCleartextTraffic 설정

• 이전에도 있었던 속성. api level 28 부터는 기본값이 false 로 변경. 명시적으로 true 로 설정해 주어야 한다.

❕ network_security_config

<network-security-config>
	<domain-config cleartextTrafficPermitted="true">
    	<domain includeSubdomains="true">192.168.1.2</domain>
	</domain-config>
</network-security-config>

<application
	android:networkSecurityConfig="@xml/network_security_config">

• network_security_config 이용

xml 디렉토리에 개발자 임의의 xml 파일을 생성한다. <network-security-config> 를 루트 태그로 작성하고 안 쪽의 <domain> 에 http 통신을 허용하는 도메인 혹은 IP 주속를 등록한다.

---

💬 Network 정보 확인

📓 ConnectivityManager

❕ 퍼미션

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

• ConnectivityManager 을 이용해 네트워크 상태를 파악

• 시스템 서비스이다.

네트워크 상황 파악의 가장 기본적인 기능을 제공하는 클래스. 네트워크 정보 파악을 위해서는 퍼미션이 요구된다.

📌 getActiveNetwork()

val nw = connectivityManager.activeNetwork
val acNw = connectivityManager.getNetworkCapabilities(nw)

• ConnectivityManager 의 getActiveNetwork() 을 이용해 Network 객체를 획득

• Network 객체를 getNetworkCapabilities() 함수의 매개변수로 지정하면 현재 접속된 네트워크 망 정보를 획득 가능.

실제 네트워크를 하는 것이 아니라 네트워크 정보가 담긴 객체를 획득해 getter 함수로 현재 네트워크 상태를 파악할 수 있다.

📌 hasTransport()

actNw.hasTransport(NetworkCapabilities.TRANSPORT_WIFI) -> {
	return "wifi online"
}
actNw.hasTransport(NetworkCapabilities.TRANSPORT_CELLULAR) -> {
	return "cellular available"
}

• hasTransport() 함수를 이용해 현재 폰에 와이파이에 접속된 상태인지 아니면 이통사 망에 접속된 상태인지를 파악
  
  

🧩 실습 예제

❕ 퍼미션 추가

• Manifest.xml

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

🎨 액티비티 레이아웃

• activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
	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">

    <TextView
        android:id="@+id/resultView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

📂 메인 소스 코드

• MainActivity.kt

package com.kotdev99.android.c85

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

		val resultView = findViewById<TextView>(R.id.resultView)
		resultView.text = isNetworkAvailable()
	}

	private fun isNetworkAvailable(): String {
		val manager = getSystemService(CONNECTIVITY_SERVICE) as ConnectivityManager
		if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
			val nw = manager.activeNetwork ?: return "offline"
			val actNw = manager.getNetworkCapabilities((nw)) ?: return "offline"
			return when {
				actNw.hasTransport(NetworkCapabilities.TRANSPORT_WIFI) -> {
					return "wifi online"
				}

				actNw.hasTransport(NetworkCapabilities.TRANSPORT_CELLULAR) -> {
					return "cellular online"
				}

				else -> "offline"
			}
		} else {
			if (manager.activeNetworkInfo?.isConnected ?: false) {
				return "online"
			} else {
				return "offline"
			}
		}
	}
}

📲 결과

---

💬 Retrofit

🛠 Retrofit 구조

Retrofit2 는 Square 사에서 만든 HTTP 통신을 위한 라이브러리 혹은 프레임워크

• 내부적으로 okHttp 를 사용하고 okHttp 를 이용하여 설정 정보를 줄 수 있다.

Retrofit 의 개념은 네트워킹 프로그램 코드를 자동으로 작성해 주는 것이다.
네트워킹을 하기 위해서는 기본적으로 네트워크 관련 코드 작성해야 한다. 하지만 Retrofit 은 이러한 기본 네트워킹 코드를 자동으로 작성 해준다. 개발자는 네트워크에 필요한 정보 (URL/request/response 등) 만 Retrofit 에 넘겨주면 되는 것이다.

❓ 그럼 어떻게 정보를 전달할까?

네트워크 정보는 어노테이션 으로 전달한다. 그래서 개발자는 인터페이스만 만들어서 Retrofit 에 등록시켜 버리면 끝이다. 그러면 Retrofit 에서 인터페이스의 구현체를 자동으로 만들어 준다.

🧷 dependency

implementation ("com.squareup.retrofit2:retrofit:2.9.0")
// Retrofit 필수 라이브러리

implementation ("com.google.code.gson:gson:2.10.1")
// JSON 혹은 XML 파싱을 위한 라이브러리 (optional)

implementation ("com.squareup.retrofit2:converter-gson:2.9.0")
// 파싱한 데이터를 모델(VO 클래스) 객체로 변환하는 라이브러리 (optional)

안드로이드 표준 라이브러리에 XML parser 혹은 JSON parser 를 사용해도 된다. 그럴 경우 파싱한 데이터를 VO 클래스 객체로 만들어주는 코드를 직접 작성해 주어야 한다.

외부 라이브러리를 사용하면 파싱과 VO 클래스로 변환해주는 작업을 간소화할 수 있다. 외부 라이브러리는 개발자 취향대로 사용하면 된다. 위에서는 gson 을 예로 들었다.

📋 Parser 라이브러리

Gson : com.squareup.retrofit2:converter-gson

Jackson : com.squareup.retrofit2:converter-jackson

Moshi : com.squareup.retrofit2:converter-moshi

Protobuf : com.squareup.retrofit2:converter-protobuf

Wire : com.squareup.retrofit2:converter-wire

Simple XML : com.squareup.retrofit2:converter-simplexml

JAXB : com.squareup.retrofit2:converter-jaxb

Scalars (primitives, boxed, and String) : com.squareup.retrofit2:converter-scalars

📂 모델 클래스

// 서버 사이드에서 넘어오는 JSON

{
	"id": 3,
    "email": "kotdev.coder@reqres.in",
    "first_name": "kotdev",
    "last_name": "Lawson",
    "avatar": "https://reqres.in/img/faces/3-image.jpg"
}

// 모델 클래스

data class UserModel(

	var id: String,						// JSON 의 Key와 동일하게 변수를 선언해야 한다
    @SerializedName("first_name")		// 만약 임의의 변수명을 사용한다면 annotation 작성
    var firstName: String,
    @SerializedName("last_name")
    var lastName: String,
    var avatar: String,
    
    var avatarBitmap: Bitmap
}

• 모델 클래스란 서버와 주고 받는 데이터를 표현하는 클래스
  (모델/VO/DTO 클래스 = 뭐라 부른던 데이터를 담기 위한 클래스를 의미)

• JSON, XML 데이터를 파싱해 모델 클래스 객체에 담아주는 것을 자동화

---

💬 Retrofit 활용

📓 서비스 인터페이스

interface INetworkService {
	@GET("api/users")	// http 프로토콜과 연동할 URL 혹은 path 를 어노테이션으로 작성
    fun doGetUserList(@Query("page") page: String): Call<UserListModel>	
    // 서버에 넘겨여할 데이터가 있다면 매개변수에 Query 어노테이션으로 넘겨주면 된다
    // "page" 가 Key 값, page: String 가 Value 값
}

• 네트워크 통신에 이용될 인터페이스

• 네트워크 통신이 필요한 순간 호출할 함수를 선언

❓ Call 객체란?

실제 네트워킹이 가능한 객체. 이 Call 객체를 받아 enqueue() 함수로 네트워킹을 한다.

그리고 제네릭으로 리턴 타입으로서 우리가 만든 DTO 객체를 명시해 준다. 외부 라이브러리가 서버에서 넘어온 데이터를 자동으로 parsing 및 converting 하여 DTO 객체로 생성 해주면, 우리는 어떤 DTO 객체를 사용할 것인지만 제네릭 타입으로 알려주면 된다.

📓 Retrofit 객체

val retrofit: Retrofit
	get() = Retrofit.Builder()
    	.baseUrl("https://reqres.in/")	// 서비스 인터페이스의 어노테이션에 작성한 URL 앞 문자열을 지정
        .addConverterFactory(GsonConverterFactory.create())
        .build()

• Retrofit 의 초기 설정을 목적

• baseUrl() 함수를 이용해 서버 연동을 위한 URL 을 설정
  즉, 서비스 인터페이스의 어노테이션 주소를 path 로 사용할 수 있다.
  매번 풀 도메인 쓰는 건 귀찮으니까!

  baseUrl + @GET = "https://reqres.in/" + "api/users" = "https://reqres.in/api/users"

• addConverterFactory() 함수를 이용해 converter 지정

초기 설정이니 앱이 실행되면서 딱 한 번만 실행되는 곳에 작성하는 것이 일반적이다.

📓 인터페이스 구현 객체 획득

var networkService: INetworkService = retrofit.create(INetworkService::class.java)

• Retrofit 객체를 이용해 서비스 인터페이스를 구현한 클래스의 객체를 획득

이제 실제 네트워킹을 해야 한다. 네트워킹을 위해서는 인터페이스를 구현한 객체가 필요하다.

Retrofit의 create() 함수에 인터페이스를 넣어준다. 붙여진 어노테이션에 따라 네트워킹 코드가 작성된 객체를 얻을 수 있다. 이제 우린 인터페이스에 작성한 함수만 호출하면 된다.

📓 네트워킹

val userListCall = networkService.doGetUserList("1")	// 구현체의 함수를 호출해서 Call 객체 생성

// Call 객체.enqueue 하는 순간 네트워킹이 된다
// 매개변수에 콜백을 전달
userListCall.enqueue(object : Callback<UserListModel> {

	// 네트워킹이 성공해 데이터를 정상적으로 받은 순간 자동 콜
    // 매개변수 response 로 서버 데이터가 넘어온다
	override fun onResponse(call: Call<UserListModel>, response: Response<UserListModel>) {
    
    	val userList = response.body()

}
    // 네트워킹이 실패했을 경우 자동 콜
    // 오류가 났던 객체도 매개변수 t 로 전달을 하긴 한다
	override fun onFailure(call: Call<UserListModel>, t: Throwable) {	
		call.cancel()
	}
})

🧩 실습 예제

리스트뷰의 데이터를 서버에서 가져오자!

🧷 dependency

• build.gradle.kts

implementation("com.squareup.retrofit2:retrofit:2.9.0")
implementation("com.google.code.gson:gson:2.10.1")
implementation("com.squareup.retrofit2:converter-gson:2.9.0")

❕ 퍼미션 추가

• Manifest.xml

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

🎨 액티비티 레이아웃

• activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

🧮 모델 클래스

하나의 유저 정보를 담는 DTO 클래스

• UserModel.kt

package com.kotdev99.android.c87

data class UserModel(
	@SerializedName("first_name")
	var firstName: String,
	@SerializedName("last_name")
	var lastName: String
)

JSON 안의 여러 데이터를 담는 VO 클래스

• UserListModel.kt

package com.kotdev99.android.c87

data class UserListModel(
	var data: List<UserModel>?
	// total 페이지 수 등의 정보를 받을 수 있다
)

📀 서비스 인터페이스

네트워킹 시 호출할 함수를 갖는 인터페이스

• INetworkService.kt

package com.kotdev99.android.c87

interface INetworkService {
	@GET("api/users")
	fun doGetUserList(@Query("page") page: String): Call<UserListModel>
}

📂 메인 소스 코드

• MainActivity.kt

package com.kotdev99.android.c87

class MainActivity : AppCompatActivity() {

	// Retrofit 초기화
	private val retrofit: Retrofit
		get() = Retrofit.Builder()
			.baseUrl("https://reqres.in/")
			.addConverterFactory(GsonConverterFactory.create())
			.build()

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

		val listView = findViewById<ListView>(R.id.listView)

		// Retrofit 에 인터페이스 등록
		var networkService = retrofit.create(INetworkService::class.java)
		// Call 객체 획득
		val call = networkService.doGetUserList("1")

		// 콜백으로 결과값을 받는다
		call.enqueue(object : Callback<UserListModel> {
			override fun onResponse(call: Call<UserListModel>, response: Response<UserListModel>) {
				val userList = response.body()
				val mutableList = mutableListOf<Map<String, String>>()
				userList?.data?.forEach {
					val map = mapOf("firstName" to it.firstName, "lastName" to it.lastName)
					mutableList.add(map)
				}
				val adapter = SimpleAdapter(
					this@MainActivity,
					mutableList,
					android.R.layout.simple_expandable_list_item_2,
					arrayOf("firstName", "lastName"),
					intArrayOf(android.R.id.text1, android.R.id.text2)
				)
				listView.adapter = adapter
			}

			override fun onFailure(call: Call<UserListModel>, t: Throwable) {
				call.cancel()
			}
		})
	}
}

📲 결과

---

💬 Glide

❓ Glide 를 사용하는 이유

서버에서 JSON 혹은 XML 만큼 많이 넘어오는 것이 이미지이다.

이미지는 바이트 데이터이다. 그래서 흔히 이미지 다운로드라고 이야기 한다.

❓ 그럼 이미지 다운로드를 어떤 방식으로 구현할까?

Java 의 코어 API 로 가능하다. Retrofit 으로도 가능하다. 하지만 이미지만을 위한 전문 라이브러리들이 존재한다. 만약 이미지 라이브러리를 사용하지 않는다면 상황에 따른 처리를 일일이 작성해 주어야 한다.

이미지가 파일 or 리소스 or 다운로드?
사이즈로 인한 OOM.
이미지 로딩 시간이 길 경우 placeholder, 그리고 로딩이 끝났을 때 이벤트 처리.
이미지 로딩 실패 시 에러 처리.
etc...

그냥 이미지 라이브러리 사용하자.

🧷 dependency

implementation ("com.github.bumptech.glide:glide:4.16.0")

• 구글에서 만든 이미지 핸들링을 위한 라이브러리

• 리소스 이미지, 파일 이미지, 네트워크 이미지 획득

• 이미지의 크기 조정

• 로딩 이미지 표시

• 에러 이미지 표시

📂 사용 방법

// 이미지를 ImageView 에 출력

Glide.with(this)
	.load(R.drawable.seoul)		// 리소스 이미지
    .into(resultView)			// 이미지를 출력하는 View


Glide.with(this)
	.load(url)			// 네트워크 이미지
    .into(resultView)	// 이미지를 출력하는 View
    
// File의 경우에도 .load 에 파일 경로를 주면 된다.

// 특정 크기로 이미지 로딩 (OOM)

Glide.with(this)
	.load(R.drawable.seoul)		
    .override(200, 200)			// 이미지 사이즈
    .into(resultView)			

// 특정 크기로 이미지 로딩 (OOM)

Glide.with(this)
	.load(R.drawable.seoul)		
    .override(200, 200)			// 이미지 사이즈
    .into(resultView)			

// 로딩, 에러 이미지 출력

Glide.with(this)
	.load(R.drawable.seoul)		
    .override(200, 200)
    .placeholder(R.drawable.loading)	// 로딩 이미지 (주로 GIF 사용)
    .error(R.drawable.error)			// 에러 이미지
    .into(resultView)			

• 보다시피 그냥 사용하기가 편하다. 그래서 인기가 많다 👍
  
  

🧩 실습 예제

🧷 dependency

• build.gradle.kts

implementation ("com.github.bumptech.glide:glide:4.16.0")

❕ 퍼미션 추가

• Manifest.xml

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

🎨 액티비티 레이아웃

• activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
	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">

    <ImageView
        android:id="@+id/resultView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

📂 메인 코드

• MainActivity.kt

package com.kotdev99.android.c88

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

		val imageView = findViewById<ImageView>(R.id.resultView)

		Glide.with(this)
			.load("https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png")
			.override(200, 200)
			.placeholder(R.drawable.loading)
			.error(R.drawable.error)
			.into(imageView)
	}
}

📲 결과