옆집 스위프트: Json과 Javascript Bridge 연구 사용일지

JSON (JavaScript Object Notation)

 

1. 정의

 

• JSON은 경량의 데이터 교환 형식

• 사람과 기계 모두 쉽게 읽고 쓸 수 있음

• 구조화된 데이터를 텍스트로 표현하기 위한 포맷

 

2. 역할

 

• 데이터의 구조를 표현하고 전달하는 데 사용

• 일반적으로 서버와 클라이언트 간에 데이터를 전송할 때 사용

 

3. 특징

 

• 텍스트 기반: 사람이 읽기 쉬운 텍스트로 데이터를 표현

• 키-값 쌍: 데이터는 키-값 쌍으로 구성

• 유연성: 배열, 객체, 숫자, 문자열, 불리언 등을 포함할 수 있음

 

4. 사용 예시

 

• 서버에서 클라이언트로 사용자 정보 전송: {"id": 123, "name": "Alice", "email": "alice@example.com"}

• 설정 파일, API 응답 등에서 사용.

Json:

{
    "name": "Alice",
    "age": 30,
    "hobbies": ["reading", "hiking", "coding"]
}

 

---

 

JavaScript Bridge

 

1. 정의

 

• JavaScript Bridge는 주로 네이티브 앱과 웹 또는 네이티브 코드 간의 통신을 가능하게 하는 기술

• 일반적으로 모바일 앱에서 웹뷰와 네이티브 코드 간의 상호 작용을 위해 사용

 

2. 역할

 

• 다른 환경 간에 함수를 호출하거나 데이터를 전송할 때 사용

• 네이티브 앱이 JavaScript를 호출하거나, JavaScript가 네이티브 API를 호출할 수 있게 함

 

3. 특징

 

• 통신 메커니즘: 네이티브 코드와 JavaScript 사이에서 메시지나 데이터를 교환

• 양방향 통신: 네이티브 코드와 JavaScript 간에 상호 호출 가능

• 종속성: 특정 플랫폼(예: iOS, Android)이나 라이브러리에 따라 구현이 다를 수 있음

 

4. 사용 예시

 

• 모바일 앱의 웹뷰에서 JavaScript가 네이티브 API를 호출하여 카메라를 열거나 GPS를 사용하는 경우

• 네이티브 앱에서 웹뷰에 데이터를 보내거나 알림을 트리거하는 경우

 

예시: Swift에서 JavaScript Bridge를 사용하는 코드

• 웹키트(WebKit)를 사용

• 서버에서 받아올 정보에 따라 message, data, jsonObject 등으로 구분가능

 

Swift:

import Foundation
import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let contentController = WKUserContentController()
        contentController.add(self, name: "nativeHandler")
        
        let config = WKWebViewConfiguration()
        config.userContentController = contentController
        
        webView = WKWebView(frame: self.view.frame, configuration: config)
        self.view.addSubview(webView)
        
        if let url = URL(string: "https://mywebpage.com") {
            webView.load(URLRequest(url: url))
        }
    }
    
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "nativeHandler" {
            print("JavaScript message received: \(message.body)")
            // Handle the message from JavaScript
        }
    }
}