iOS/swift

02. [iOS/swift] webview 예제

drizzle0925 2021. 6. 1. 23:00
728x90

새 프로젝트 생성

create a new Xcode project를 클릭

 

 

프로젝트 템플릿 선택

iOS 선택 > App 선택 > Next 클릭

 

 

Product Name, Organization Identifier에 내용을 작성한다.

Interface : StoryBoard

Language: Swift로 선택한다.

Next 클릭한다.

New Folder 클릭

webview라는 이름의 폴더 작성 > Create 클릭한다.

폴더가 생성되었으면 Create를 클릭한다.

 

 

빨간색 동그라미를 클릭 > 디바이스를 아이폰 8 plus(원하는 기종을 선택하면 된다)  선택한다.

 

좌측에  View Controller Scene을 클릭하면 우측에 메뉴가 보인다

 

빨간색 동그라미 클릭

 

 검색창에  web이라고 치고  2가지가 나오면 WebKit View를 선택한다.

 

드래그해서 가운데로 위치시킨다.

 

 

회색 부분을 화면이 덮이도록 넓혀준다 > 빨간색 동그라미 클릭한다.

 

 

빨간 동그라미 안의 상하좌우 바를 클릭 > Add 4 Constraints를 클릭 

 

빨간 동그라미 클릭

 

Assistant 클릭

 

왼쪽에 코드를 입력할 수 있는 창이 생김

코딩의 편의를 위해 Assistant 활성화

 

Main.storyboard의 회색 창에서 컨트롤 키를 눌러서 드래그 > class ViewController:UIViewController {

아래에 놓으면 아래와 같은 창이 생성된다.

 

WebViewMain이라고 입력 >  Connect 클릭

 

Connect를 누르면 아래 코드가 자동으로 추가된다.

@IBOutlet weak var WebViewMain: WKWebView!

 

추가된 코드 옆에 빨갠색으로 경고창을 없애기 아래 코드를 입력

WebKit을 사용하기 위해서는 WebKit라이브러리를 추가해줘야 한다.

import WebKit

 

 

필요한 내용을 코딩

1. url string을 준비한다.

let urlString = "https://www.google.com"

2. url string을 URL(을 거쳐) > URLRequest로 만들기

if let url = URL(string:urlString) { //unwarping 과정
    let urlReq = URLRequest(url:url)
}

3. reuquest내용을 webview에 load 한다

WebViewMain.load(urlReq)

 

viewController.swift 최종 코드

//
//  ViewController.swift
//  webview
//
//  Created by pples on 2021/06/01.
//

import UIKit
import WebKit

class ViewController: UIViewController {
    @IBOutlet weak var WebViewMain: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        // 1. url string을 준비한다.
        // 2. url string을 URL(을 거쳐) > URLRequest로 만들기
        // 3. reuquest내용을 webview에 load한다
        
        let urlString = "https://www.google.com"
        if let url = URL(string:urlString) { //unwarping 과정
            let urlReq = URLRequest(url:url)
            WebViewMain.load(urlReq)
        }
    }
}

 

빨간 동그라미를 클릭하여 Simulator를 실행한다.

 

 

 https://www.google.com 이 정상적으로 출력되는 것을 확인할 수 있다.

728x90