{"id":25786,"date":"2024-10-27T05:48:51","date_gmt":"2024-10-27T05:48:51","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=25786"},"modified":"2024-11-26T07:57:00","modified_gmt":"2024-11-26T07:57:00","slug":"%ec%8a%a4%ec%9c%84%ed%94%84%ed%8a%b8%eb%a1%9c-swiftui-%eb%b0%a9%ec%8b%9d-%ec%95%84%ec%9d%b4%ed%8f%b0-%ec%95%b1-%ea%b0%9c%eb%b0%9c-%ec%9b%b9-%eb%b7%b0%eb%a1%9c-%ea%b0%84%eb%8b%a8%ed%95%9c-%ec%9b%b9","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/25786\/","title":{"rendered":"\uc2a4\uc704\ud504\ud2b8\ub85c SwiftUI \ubc29\uc2dd, \uc544\uc774\ud3f0 \uc571 \uac1c\ubc1c: \uc6f9 \ubdf0\ub85c \uac04\ub2e8\ud55c \uc6f9 \ube0c\ub77c\uc6b0\uc800 \ub9cc\ub4e4\uae30"},"content":{"rendered":"

<\/p>\n

\uc548\ub155\ud558\uc138\uc694! \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 SwiftUI\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc544\uc774\ud3f0 \uc571\uc744 \uac1c\ubc1c\ud558\ub294 \uacfc\uc815\uacfc \ud568\uaed8 WKWebView\ub97c \ud65c\uc6a9\ud574 \uac04\ub2e8\ud55c \uc6f9 \ube0c\ub77c\uc6b0\uc800\ub97c \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. SwiftUI\ub294 \uc560\ud50c\uc758 \ucd5c\uc2e0 UI \ud234\ud0b7\uc73c\ub85c, \ucf54\ub4dc \uba87 \uc904\ub9cc\uc73c\ub85c \ud6cc\ub96d\ud55c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ucd95\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7fc \ubcf8\uaca9\uc801\uc73c\ub85c \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4!<\/p>\n

1. SwiftUI\uc640 \uc544\uc774\ud3f0 \uc571 \uac1c\ubc1c\uc758 \uae30\ucd08<\/h2>\n

SwiftUI\ub294 \uc2a4\uc704\ud504\ud2b8 \uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uc5ec \uadf8\ub798\ud53d \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \uad6c\uc131\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4. \uc774\ub294 UIKit\ubcf4\ub2e4 \ud6e8\uc52c \uac04\uacb0\ud558\uace0 \uc9c1\uad00\uc801\uc785\ub2c8\ub2e4. SwiftUI\uc640 \ud568\uaed8 Xcode\uc758 Preview \uae30\ub2a5\uc744 \ud65c\uc6a9\ud558\uba74 \uc2e4\uc2dc\uac04\uc73c\ub85c UI\ub97c \ud655\uc778\ud558\uba74\uc11c \uac1c\ubc1c\ud560 \uc218 \uc788\uc5b4, \uac1c\ubc1c \ud6a8\uc728\uc131\uc744 \uadf9\ub300\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

2. \ud658\uacbd \uc124\uc815<\/h2>\n

\uc571\uc744 \uac1c\ubc1c\ud558\uae30 \uc704\ud574\uc11c\ub294 Xcode\ub97c \uc124\uce58\ud574\uc57c \ud558\uba70, Xcode\uc758 \ucd5c\uc2e0 \ubc84\uc804\uc744 \uad8c\uc7a5\ud569\ub2c8\ub2e4. \uc544\ub798\uc758 \ub2e8\uacc4\uc5d0 \ub530\ub77c \uac1c\ubc1c \ud658\uacbd\uc744 \uc124\uc815\ud569\ub2c8\ub2e4.<\/p>\n

    \n
  1. App Store\uc5d0\uc11c Xcode \ub2e4\uc6b4\ub85c\ub4dc \ubc0f \uc124\uce58.<\/li>\n
  2. Xcode\ub97c \uc2e4\ud589\ud558\uace0, ‘Create a new Xcode project’\ub97c \uc120\ud0dd\ud569\ub2c8\ub2e4.<\/li>\n
  3. ‘App’ \ud15c\ud50c\ub9bf\uc744 \uc120\ud0dd\ud55c \ud6c4, \ud504\ub85c\uc81d\ud2b8 \uc774\ub984\uacfc \uae30\ud0c0 \uc124\uc815\uc744 \uc785\ub825\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n

    3. WKWebView\ub97c \uc0ac\uc6a9\ud558\ub294 \uc774\uc720<\/h2>\n

    WKWebView\ub294 \uc6f9 \ucf58\ud150\uce20\ub97c \ud45c\uc2dc\ud558\uace0 \uc0c1\ud638\uc791\uc6a9\ud560 \uc218 \uc788\ub294 \uac15\ub825\ud55c \ube0c\ub77c\uc6b0\uc800 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \uc6f9 \ud398\uc774\uc9c0\ub97c \ub85c\ub4dc\ud558\uace0, JavaScript\ub97c \uc2e4\ud589\ud558\uba70, \ucfe0\ud0a4\ub97c \uad00\ub9ac\ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc90d\ub2c8\ub2e4. UIWebView\uc758 \ub2e8\uc810\uc744 \ubcf4\uc644\ud55c WKWebView\ub294 \ub354 \ub098\uc740 \uc131\ub2a5\uacfc \ubcf4\uc548\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n

    4. \uae30\ubcf8 \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131\ud558\uae30<\/h2>\n

    SwiftUI\ub97c \uae30\ubc18\uc73c\ub85c \ud558\ub294 \uae30\ubcf8 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud55c \ud6c4, WKWebView\ub97c \ucd94\uac00\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uba3c\uc800, SwiftUI \ubdf0\ub97c \ub9cc\ub4e4\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/p>\n

    \n        \n        import SwiftUI\n        import WebKit\n        \n        struct WebView: UIViewRepresentable {\n            let url: URL\n            \n            func makeUIView(context: Context) -> WKWebView {\n                return WKWebView()\n            }\n            \n            func updateUIView(_ uiView: WKWebView, context: Context) {\n                let request = URLRequest(url: url)\n                uiView.load(request)\n            }\n        }\n        <\/code>\n    <\/pre>\n
    5. \uc6f9 \ube0c\ub77c\uc6b0\uc800 UI \ub9cc\ub4e4\uae30<\/h2>\n
    \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc758 \uae30\ubcf8 UI\ub97c \ub9cc\ub4e4\uae30 \uc704\ud574 \uc544\ub798\uc640 \uac19\uc740 SwiftUI \ubdf0\ub97c \uc0dd\uc131\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
    \n        \n        struct ContentView: View {\n            @State private var urlString: String = \"https:\/\/www.apple.com\"\n            @State private var shouldLoad: Bool = false\n            \n            var body: some View {\n                VStack {\n                    TextField(\"URL \uc785\ub825\", text: $urlString)\n                        .textFieldStyle(RoundedBorderTextFieldStyle())\n                        .padding()\n                    \n                    Button(\"\ub85c\ub4dc\") {\n                        shouldLoad = true\n                    }.padding()\n                    \n                    if shouldLoad {\n                        WebView(url: URL(string: urlString)!)\n                            .edgesIgnoringSafeArea(.all)\n                    }\n                }\n            }\n        }\n        <\/code>\n    <\/pre>\n
    6. \uc6f9 \ube0c\ub77c\uc6b0\uc800 \uc791\ub3d9 \uc6d0\ub9ac<\/h2>\n
    \uc704\uc758 \ucf54\ub4dc\ub294 \uc0ac\uc6a9\uc790\uac00 URL\uc744 \uc785\ub825\ud558\uace0 ‘\ub85c\ub4dc’ \ubc84\ud2bc\uc744 \ub204\ub974\uba74 \uc6f9 \ud398\uc774\uc9c0\uac00 \ub098\ud0c0\ub098\ub294 \uac04\ub2e8\ud55c \uc6f9 \ubdf0\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uc758 \uc785\ub825\uc744 \ubc1b\uace0 \ucc98\ub9ac\ud558\ub294 \uacfc\uc815\uc5d0\uc11c SwiftUI\uc758 @State \ud504\ub85c\ud37c\ud2f0 \ub798\ud37c\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0c1\ud0dc \uad00\ub9ac\ub97c \uc218\ud589\ud569\ub2c8\ub2e4.<\/p>\n
    7. \uc5d0\ub7ec \ud578\ub4e4\ub9c1 \ubc0f \ucd5c\uc801\ud654<\/h2>\n
    \uc2e4\uc81c \uc571\uc5d0\uc11c\ub294 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad \uc2dc \uc5d0\ub7ec\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \uc801\uc808\ud788 \ucc98\ub9ac\ud558\uae30 \uc704\ud574 WKNavigationDelegate \ud504\ub85c\ud1a0\ucf5c\uc744 \ud65c\uc6a9\ud558\uc5ec \uc6f9 \ubdf0\uc758 \ub124\ube44\uac8c\uc774\uc158 \uc774\ubca4\ud2b8\ub97c \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
    \n        \n        class Coordinator: NSObject, WKNavigationDelegate {\n            var parent: WebView\n            \n            init(parent: WebView) {\n                self.parent = parent\n            }\n            \n            func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {\n                print(\"Error: \\(error.localizedDescription)\")\n            }\n        }\n        <\/code>\n    <\/pre>\n
    8. \ub9c8\ubb34\ub9ac<\/h2>\n
    \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 SwiftUI\ub97c \ube44\ub86f\ud55c \uc544\uc774\ud3f0 \uc571 \uac1c\ubc1c \uacfc\uc815\uacfc WKWebView\ub97c \ud1b5\ud574 \uac04\ub2e8\ud55c \uc6f9 \ube0c\ub77c\uc6b0\uc800\ub97c \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uc558\uc2b5\ub2c8\ub2e4. SwiftUI\uc640 WKWebView\ub97c \ud65c\uc6a9\ud558\uba74 \ubcf5\uc7a1\ud55c UI\ub3c4 \uc27d\uac8c \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ucd94\ud6c4 \ub354 \ubcf5\uc7a1\ud55c \uae30\ub2a5\uc774\ub098 \ub808\uc774\uc544\uc6c3\uc744 \ucd94\uac00\ud558\uc5ec \uc790\uc2e0\uc758 \uc6f9 \ube0c\ub77c\uc6b0\uc800\ub97c \uac1c\uc120\ud574\ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4. \uc9c8\ubb38\uc774\ub098 \uc758\uacac\uc774 \uc788\uc73c\uc2dc\ub2e4\uba74 \ub313\uae00\ub85c \ub0a8\uaca8\uc8fc\uc138\uc694!<\/p>\n
    9. \ub2e4\uc74c \ub2e8\uacc4<\/h2>\n
    \uae30\ubcf8\uc801\uc778 \uc6f9 \ube0c\ub77c\uc6b0\uc800\ub97c \ub9cc\ub4e0 \ud6c4\uc5d0\ub294 \ucd94\uac00 \uae30\ub2a5\uc744 \uace0\ub824\ud574\ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 \ubd81\ub9c8\ud06c \uae30\ub2a5, \uc0c8 \ucc3d \uc5f4\uae30, \ub4a4\ub85c\uac00\uae30, \uc55e\uc73c\ub85c \uac00\uae30 \ubc84\ud2bc \ub4f1\uc744 \uad6c\ud604\ud574\ubcf4\uace0, \ub2e4\uc591\ud55c API\uc640 \ub124\uc774\ud2f0\ube0c \uae30\ub2a5\uc744 \uc5f0\ub3d9\ud558\uc5ec \ub354 \ubc1c\uc804\ub41c \uc571\uc744 \ub9cc\ub4e4\uc5b4 \ubcf4\uc138\uc694. \uc5f0\uc2b5\uc744 \ud1b5\ud574 \uc810\ucc28\uc801\uc73c\ub85c \uc571 \uac1c\ubc1c \ub2a5\ub825\uc744 \ud0a4\uc6cc \ub098\uac08 \uc218 \uc788\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n