add post

Author: minsOne

_posts/2024/05/2024-05-08-ios-wkwebview-webpage-communication-2-control-flow.md

@@ -5,7 +5,7 @@ tags: [iOS, WKWebView, Javascript, if, switch, statement]
 ---
 {% include JB/setup %}
 
-이전 글에서 `WKScriptMessageHandler` 프로토콜의 메소드 `func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage)`를 구현하여 웹 페이지에서 iOS 앱으로 데이터를 전달하는 방법을 살펴보았습니다. 
+이전 글에서 `WKScriptMessageHandler` 프로토콜의 메소드인 `func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage)`를 구현하여 웹 페이지에서 iOS 앱으로 데이터를 전달하는 방법을 살펴보았습니다.
 
 이번 글에서는 `userContentController` 메소드에서 구현되는 if 문과 switch 문과 같은 흐름제어(Control Flow) 코드로 인해 `WKWebView`와 다른 도메인과의 강한 결합 관계가 형성되는 것을 살펴보려고 합니다.
 
@@ -15,17 +15,19 @@ Swift는 if, switch 문과 같이 제어문을 제공합니다. 이는 프로그
 
 제어한다는 의미는 어떤 조건에 따라 코드의 실행을 중단하거나, 코드의 실행을 계속할지 결정하는 것을 의미합니다. 여기에서 각 도메인에서 필요한 Action을 처리하고 전달해야한다면 `userContentController` 는 많은 도메인과 강한 결합 관계를 형성합니다.
 
-다음 코드는 웹페이지에서 전달받은 message의 action을 구분하여 처리하는 코드입니다.
+다음 코드는 웹페이지에서 전달받은 message의 action을 구분하여 처리하는 코드입니다:
 
 ```swift
 // WKScriptMessageHandler 프로토콜 메서드 구현
 func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
+  // 메시지의 이름과 body 추출
   guard
     message.name == "actionHandler",
     let messageBody = message.body as? [String: Any],
     let action = messageBody["action"] as? String
   else { return }
 
+  // Action에 따라 처리하는 switch 문
   switch action {
     case "loading": loading(body: messageBody)
     case "openCard": openCard(body: messageBody)
@@ -34,18 +36,23 @@ func userContentController(_ userContentController: WKUserContentController, did
     default: break
   }
 
+  // loading Action을 처리하는 함수
   func loading(body: [String: Any]) {
-    guard let value = body["show"] as? Bool else { return }
+    guard
+      let value = body["show"] as? Bool
+    else { return }
 
     switch value {
       case true: ShowLoading()
       case false: HideLoading()
     }
   }
+
+  // payment Action을 처리하는 함수
   func payment(body: [String: Any]) {
     guard
-     let id = body["paymentId"] as? String
-     let info = body["paymentInfo"] as? [String: String] 
+      let id = body["paymentId"] as? String
+      let info = body["paymentInfo"] as? [String: String]
     else { return }
 
     cardPayment(paymentId: id, paymentInfo: info)
@@ -61,18 +68,18 @@ func userContentController(_ userContentController: WKUserContentController, did
 
 ### Inject Action Handler
 
-`Action`을 Key로 사용하고, `messageBody`를 받아 수행하는 `Closure`를 가지는 Dictonary을 만들 수 있을 수 있습니다.
+`Action`을 Key로 사용하고, `messageBody`를 받아 수행하는 `Closure`를 가지는 Dictionary를 만들 수 있습니다.
 
 ```swift
-struct WKScriptMessageActioHandler {
+struct WKScriptMessageActionHandler {
   let closure: (_ body: [String: Any], _ webView: WKWebView?) -> Void
 }
 
 class ViewController: UIViewController, WKScriptMessageHandler {
-  var actionHandlers: [String: ActioHandler] = [:]
+  let actionHandlers: [String: WKScriptMessageActionHandler]
   var webView: WKWebView?
 
-  init(actionHandlers: [String : ActioHandler]) {
+  init(actionHandlers: [String : WKScriptMessageActionHandler] = [:]) {
     self.actionHandlers = actionHandlers
 
     super.init(nibName: nil, bundle: nil)
@@ -92,8 +99,8 @@ class ViewController: UIViewController, WKScriptMessageHandler {
 }
 ```
 
-`userContentController` 메소드에서 `actionHandlers` Dictionary에 등록되어 있는 `WKScriptMessageActioHandler`를 찾아 `closure`를 호출합니다. 이전과 같이 switch 문을 통해 action을 구분하여 처리하지 않기 때문에, 웹페이지에서 전달받은 action이 많아지더라도, 비즈니스 로직을 처리하는 코드가 없기 때문에 유지보수가 쉬워집니다.
+`userContentController` 메소드에서 `actionHandlers` Dictionary에 등록되어 있는 `WKScriptMessageActionHandler`를 찾아 `closure`를 호출합니다. 이전과 같이 switch 문을 통해 action을 구분하여 처리하지 않기 때문에, 웹페이지에서 전달받은 action이 많아지더라도, 비즈니스 로직을 처리하는 코드가 없기 때문에 유지보수가 쉬워집니다.
 
 `WKScriptMessageActioHandler`는 Closure만 가지고 있어, 각 ActionHandler가 messageBody의 값을 검증하여 유효한 값인 경우에만 Closure를 호출할 수 있도록 코드를 좀 더 구조화할 수 있지 않을까요?
 
-그 내용은 다음편에서 다루겠습니다.
+그 내용은 다음편에서 다루겠습니다.