SwiftUI 에서 CoreLocation 사용

이 전 블러그에서 텍스트 필드에서 입력받은 도시의 날씨를 표현하는 앱을 구현하였다. 이미지 location.fill 위치에 버튼을 추가하고 CoreLocation을 이용해 현재 좌표에 대한 날씨를 조회하도록 기능을 추가해 보자. 

이 보다 먼저 ContentView의 body에서 상단 바와 날씨 정보를 보여주는 위젯을 Extract Subview를 이용해 두 영역을 하위 뷰로 분리한다. 

위의 그림처럼 분리하고자 하는 VStack에 커서를 두고 ⌘ 누르고 마우스의 왼쪽키를 클릭하면 메뉴바가 나오는데 여기서 Extract Subview를 통해서 쉽게 분리할 수 있다. 뷰는 아래와 같은 구조를 가진다. 

struct ContentView: View {
	...
    var body: some View {
        ZStack {
        	...
            }
            VStack {
                //SearchBar 영역
                WeatherSearchBar(viewModel: viewModel)
                //날씨 위젯
                if viewModel.isLoading == false {
                    WeatherWidget(viewModel: viewModel)
                }
                // 위젯을 위로 올리기 위해 스페이서 설정
                Spacer()
            }
        }
    }
}

struct WeatherWidget: View {
    @ObservedObject var viewModel : WeatherViewModel
    var body: some View {
      ...
    }
}

struct WeatherSearchBar: View {
    @ObservedObject var viewModel : WeatherViewModel
    @State private var searchTerm = ""
    var body: some View {
 		...
    }
}

 

LocationService 클래스

CoreLocation 프레임워크를 사용해 현재 위치를 가져오기 위해서는 info.plist에 'Privacy - Location When In Use Usage Description'

를 추가해 해당 앱이 위치정보를 요청할 경우 사용자에게 이를 승인받기 위한 문구를 추가한다. 

 

LocationService는 CLLocationManager를 생성하고 해당 객체의 delegate 프로토콜을 구현해 CLLocationManager의 delegate로 설정한다. 로케이션 매니저에 위치정보를 요청한 경우 locationManager(_manager:didUpdateLocations locations:) delegate 함수를 통해서 위치 정보를 가져올 수 있다. LocationService는 LocationServiceDelegate를 통해서 이를 다른 클래스에 전달하는 대신 위치 정보 요청 시 completionHandler를 등록해 이를 통해 위치 정보를 전달하도록 구현해 구현을 간결하게 한다. 

이를 아래와 같이 구현할 수 있다. 

 

LocationService.swift

import Foundation
import CoreLocation
class LocationService : NSObject, CLLocationManagerDelegate {
    private let manager = CLLocationManager()
    var completionHandler: ((CLLocationCoordinate2D) -> (Void))?
    
    override init() {
        super.init()
        //CLLocationManager의 delegate 설정
        manager.delegate = self
        //manager.desiredAccuracy = kCLLocationAccuracyBest
        //위치 정보 승인 요청
        manager.requestWhenInUseAuthorization()
    }
    
    //위치 정보 요청 - 정보 요청이 성공하면 실행될 completionHandler를 등록
    func requestLocation(completion: @escaping ((CLLocationCoordinate2D) -> (Void))) {
        completionHandler = completion
        manager.requestLocation()
        
    }
    //위치 정보는 주기적으로 업데이트 되므로 이를 중단하기 위한 함수
    func stopUpdatingLocation() {
        manager.stopUpdatingHeading()
    }
    
    //위치 정보가 업데이트 될 때 호출되는 delegate 함수
    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        guard let location = locations.last else {
            return
        }
        //requestLocation 에서 등록한 completion handler를 통해 위치 정보를 전달
        if let completion = self.completionHandler {
            completion(location.coordinate)
        }
        //위치 정보 업데이트 중단
        manager.stopUpdatingLocation()
    }
    
    func locationManager(_ manager: CLLocationManager, didFailWithError error: Error) {
        print(error)
    }
}

URL+Extensions.swift 에 위치 좌표 값을 통해 현재 날씨 정보를 로드하기 위한 REST API를 아래와 같이 추가한다.

import Foundation
import CoreLocation
let appid = ""
let weatherURL = "https://api.openweathermap.org/data/2.5/weather?appid=\(appid)&units=metric"
extension URL {
    //도시 이름을 통해 날씨 정보를 가져오는  GET Rest API
   static func urlWith(city: String) -> URL? {
        return URL(string: "\(weatherURL)&q=\(city)")
    }
    //위치 값을 통해 날씨 정보를 가져오는  GET Rest API
    static func urlWith(coordinate : CLLocationCoordinate2D) -> URL? {
        let urlString = "\(weatherURL)&lat=\(coordinate.latitude)&lon=\(coordinate.longitude)"
        print(urlString)
        return URL(string: urlString)
    }
    
}

LocationService를 통해 WeatherViewModel은 현재 위치에 대한 정보를 가져오는 함수 fetchWeatherDataWithCurrentLocation() 함수는 아래와 같다. 

WeatherViewModel.swift

    func fetchWeatherDataWithCurrentLocation() {
        //locationService의 requestLocation 호출 
        locationService.requestLocation { coordinate in
            //좌표 값을 수신한 경우 fetchWeatherData를 통해서 api 호출
            self.fetchWeatherData(coordinate: coordinate)
        }
    }
    
    private func fetchWeatherData(coordinate: CLLocationCoordinate2D) {
        let url = URL.urlWith(coordinate: coordinate)
        guard let safeUrl = url else {
            return
        }
        load(resource: Resource<WeatherData>(url: safeUrl))
    }
    
    private func load(resource: Resource<WeatherData>) {
        isLoading = true
        URLRequest.load(resource: resource) { (result) in
            switch result {
            case .success(let weatherData) :
                self.model = weatherData
            case .failure(let error) :
                print(error)
            }
            self.isLoading = false
        }
    }

이제 뷰에서 초기화 시 뷰 모델의 fetechWeatherDataWithCurrentLocation() 함수를 호출해 현재 위치의 날씨를 표현 하도록 하고 location 아이콘을 클릭 시 현재 위치의 날씨를 보여주도록 아래와 같이 추가해준다. 

 

struct ContentView: View {
    ...
    init() {
        print("content view init")
        viewModel = WeatherViewModel()
        viewModel.fetchWeatherDataWithCurrentLocation()
    }
}


struct WeatherSearchBar: View {
    @ObservedObject var viewModel : WeatherViewModel
    //TextField에 바인딩 - TextField 의 text 값을 얻는 데 사용됨
    @State private var searchTerm = ""
    var body: some View {
        VStack {
            HStack(spacing: 16.0) {
                //현재 위치에 대한 날씨 정보 요청 버튼
                Button (action: {
                    viewModel.fetchWeatherDataWithCurrentLocation()
                }, label: {
                    Image(systemName: "location.fill")
                        .font(.headline)
                        .frame(width: 30, height: 30)
                        .foregroundColor(.white)
                        .background(
                            Circle()
                                .stroke(Color.white,  lineWidth: 3.0)
                                .shadow(color: Color.black.opacity(0.8), radius: 10, x: 10, y: 10)
                        )
                })
                
        
                ... 
                //텍스트 필드 에 입력된 도시이름으로 날씨 정보 요청 
                Button(action: {
                    viewModel.fetchWeatherData(city: searchTerm)
                }, label: {
                    Image(systemName: "magnifyingglass")
                        .font(.headline)
                        .frame(width: 30, height: 30)
                        .foregroundColor(.white)
                        .background(
                            Circle()
                                .stroke(Color.white,  lineWidth: 3.0)
                                .shadow(color: Color.black.opacity(0.8), radius: 10, x: 10, y: 10)
                        )
                })
                
                
            }.padding()
        }
    }
}

    

 

다음 글에서는 Lottie 이미지를 출력하는 LottieView를 구현하고 날씨 정보를 가져오는 동안 로딩화면을 이를 통해 표현할 수 있도록 추가해 본다.