Swift에서 evaluateJavaScript 메서드 심층 분석

Swift는 강력한 기능을 가진 네이티브 앱 개발 언어로, 웹 기술과의 통합을 통해 더욱 다양한 응용 프로그램을 만들 수 있습니다. 이 글에서는 웹 뷰를 통해 JavaScript 코드를 실행하고, 이에 따라 Swift 앱과 웹 콘텐츠가 상호작용하는 방법을 중점적으로 다룹니다.

WKWebView 설정하기

웹 콘텐츠와의 상호작용을 시작하려면 WKWebView를 설정해야 합니다. WKWebView는 네이티브 앱에서 웹 페이지를 로드하고 JavaScript를 실행할 수 있게 해주는 강력한 컨트롤입니다.

swift
import WebKit

class ViewController: UIViewController {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Configure the web view
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.navigationDelegate = self
        view.addSubview(webView)

        // Load a web page
        if let url = URL(string: "https://www.example.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }
}

이 코드는 WKWebView 인스턴스를 생성하고 뷰의 서브뷰로 추가한 다음, 특정 웹 페이지를 로드합니다.

evaluateJavaScript 메서드

evaluateJavaScript 메서드는 Swift 코드에서 JavaScript 코드를 실행할 수 있게 해줍니다. 이 기능은 웹 콘텐츠와의 상호작용을 강화시켜주며, 데이터를 송수신하거나 특정 동작을 제어할 수 있습니다.

JavaScript 코드 실행

JavaScript 코드를 실행하는 기본적인 방법은 다음과 같습니다.

swift
webView.evaluateJavaScript("document.title") { (result, error) in
    if let error = error {
        print("Error evaluating JavaScript: \(error.localizedDescription)")
        return
    }
    if let title = result as? String {
        print("The title of the webpage is \(title)")
    }
}

이 코드는 현재 로드된 웹 페이지의 제목을 가져와 출력합니다. 결과는 result 파라미터에 담겨져 반환되며, 에러 발생 시 착오를 error 파라미터를 통해 알 수 있습니다.

JavaScript와의 데이터 교환

JavaScript와 Swift 간의 데이터 교환은 주요 기능 중 하나입니다. 예를 들어, 폼 데이터를 JavaScript를 통해 읽어오거나 설정할 수 있습니다.

데이터 전송

Swift 코드를 통해 JavaScript 함수를 호출하여 데이터를 전송하는 방법은 다음과 같습니다.

swift
let name = "John Doe"
let age = 29
let script = "sendDataToWebApp('\(name)', \(age))"
webView.evaluateJavaScript(script) { (result, error) in
    if let error = error {
        print("Error sending data: \(error.localizedDescription)")
        return
    }
    print("Data sent successfully!")
}

sendDataToWebApp라는 JavaScript 함수를 호출하면서 이름과 나이를 인자로 전달합니다.

웹 페이지와의 상호작용

웹 페이지와의 상호작용을 통해 다양한 사용자 경험을 제공할 수 있습니다. 예를 들어, JavaScript를 통해 특정 요소를 클릭하게 하거나 스타일을 변경할 수 있습니다.

요소 클릭하기

JavaScript를 통해 특정 요소를 클릭하는 방법은 다음과 같습니다.

swift
let script = "document.getElementById('button').click();"
webView.evaluateJavaScript(script) { (result, error) in
    if let error = error {
        print("Error clicking button: \(error.localizedDescription)")
        return
    }
    print("Button clicked successfully!")
}

이 코드는 웹 페이지에서 ID가 button인 요소를 클릭합니다.

예제 프로젝트

간단한 예제 프로젝트로 모든 것을 종합하여 실습해보겠습니다. 이 예제에서는 사용자 입력을 받아 웹 페이지에 전달하고, JavaScript를 통해 데이터를 처리합니다.

Swift 코드

swift
import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {
    var webView: WKWebView!
    override func viewDidLoad() {
        super.viewDidLoad()

        // Configure the web view
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.navigationDelegate = self
        view.addSubview(webView)

        // Load a web page
        if let url = URL(string: "https://www.example.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }

    func sendDataToWeb() {
        let userName = "Alice"
        let userAge = 30
        let script = "receiveDataFromApp('
            \(userName)', \(userAge))"
            webView.evaluateJavaScript(script) { (result, error) in
            if let error = error {
                print("Error sending data: \(error.localizedDescription)")
                return
            }
            print("Data sent successfully!")
        }
    }
}

JavaScript 코드

javascript
function receiveDataFromApp(name, age) {
  console.log("Received data from app: Name = " + name + ", Age = " + age);
}

이 예제는 Swift에서 이름과 나이를 JavaScript 함수에 전달하는 것으로 구성되어 있습니다. JavaScript는 앱에서 전달받은 데이터를 받아 콘솔에 출력합니다.

결론

Swift의 evaluateJavaScript 메서드를 통해 네이티브 앱과 웹 콘텐츠 간의 상호작용을 손쉽게 구현할 수 있습니다. 이를 적용하여 앱의 기능을 확장하고, 더욱 풍부한 사용자 경험을 제공할 수 있습니다. 이 글에서 다룬 내용을 프로젝트에 활용해 더 나은 앱을 개발하시길 바랍니다.