41. 스파르타 코딩 클럽 - 킥보드 대여 앱 만들기 (3)

  🧑‍💻  숙련 주차 팀 프로젝트

오늘은 팀 프로젝트 3일 차이다.

오늘 구현할 내용으로는 AddViewController에 Kakao map API를 사용하여 지도 띄워보기,

킥보드 등록 로직 구현이다.

---

  ⚠️  Kakao MAP API

먼저 카카오 맵 API를 사용하기 위해서는 준비 과정이 필요하다.

카카오계정

 

[ 1. kakao developers에서 애플리케이션 추가하기 ] 

 

아래 부분에 앱 이름, 회사명, 카테고리를 선택하고 저장을 눌러준다.

앱 아이콘은 생략 가능하다.

 

 

[ 2. 애플리케이션 선택 → 앱설정 → 플랫폼에서 번들 ID 등록하기 ]

 

- 내 프로젝트의 번들 ID는 Xcode내 General → Identity에서 확인할 수 있다.

 

 

[ 3. Xcode에 앱 키 등록하기 ]

 

- 앱 키 확인은 앱설정 → 앱 키에서 확인 가능하다

 

확인한 앱 키를 Xcode의 Info.plist에 추가한다.

Key는 KAKAO_APP_KEY이고 Value에 본인의 네이티브 앱 키 부분의 값을 입력하면 된다.

 

 

[ 4. SDK 설치하기 ]

SDK는 2가지 방법이 있는데 Cocoapods과 SwiftPackage Manager 방법이 있다.

나는 그중 SwiftPackage Manager 방법으로 설치하였다.

 

Xcode 프로젝트에서 File > Add Package Dependencies 메뉴를 선택하고

 

검색창에 https://github.com/kakao-mapsSDK/KakaoMapsSDK-SPM.git을 입력한 뒤 Add Package를 클릭한다.

GitHub - kakao-mapsSDK/KakaoMapsSDK-SPM: KakaoMaps SDK for iOS

 

 

설치하면 위와 같이 Package DEpendencies에 추가되고, MAP API를 사용할 VC에서

import KakaoMapsSDK

 

가 뜬다면 준비 과정은 완료이다.

 

여기까지 작성하고 카카오 API를 사용해서 지도를 구현해 보려고 코드를 작성해보고 있었는데

정말 거짓말 안 하고 1시간 문서를 읽어도 모르겠어서

튜터님께 찾아가서 또 1시간을 같이 구현해 본 결과

 

카카오 API 대신 네이버 API를 이용하기로 했다.

카카오 API는 지도를 ViewController로 응답을 주고 네이버 API는 View로 응답을 주기 때문에

네이버 API가 훨씬 사용성이 좋아서 변경하기로 했다.

---

  ♻️  네이버 API

[ 1. 네이버 클라우드 플랫폼 가입하기 ]

해당 화면에서 Application 등록 버튼을 눌러준다.

[ 2. Application 등록하기 ]

Application 이름을 작성하고, API를 Dynamic Map 선택해준다.

IOS Bundle ID를 내 프로젝트의 Bundle ID 를 작성해주고 등록 버튼을 눌러준다.

 

[ 3. API KEY 확인하기 ]

 

 

[ 4. Swift Package Manager를 사용한 의존성 추가 ]

 

앱 프로젝트의 Package Dependencies에서 + 버튼을 누릅니다.

패키지 관리 창의 URL 검색란에 https://github.com/navermaps/SPM-NMapsMap을 입력하면

나타나는 spm-nmapsmap 패키지를 추가합니다.

3.16.1 이하 버전은 CocoaPods를 이용하면 된다.

 

[ 5. 의존성 추가 확인 ]

 

사진과 같이 NMapsGeometry와 NMapsMap가 추가되고,

구현할 코드에서 import NMapMap이 작성되면 잘 추가된 것이다.

import NMapsMap

 

 

[ 6. Info.plist에 지정 ]

Info.plist에 Client ID를 작성하고 나면 준비가 완료된다.

---

  ♻️  네이버 API를 사용해서 화면에 지도 표시하기

 

네이버 API를 이용하니까 카카오 API를 사용했을 때보다 훨씬 빠르게 지도를 화면에 표시할 수 있었다.

 

사용한 코드는 아래와 같다.

import NMapsMap

override func viewDidLoad() {
        super.viewDidLoad()
        let mapView = NMFMapView(frame: view.frame)
        view.addSubview(mapView)
    }

 

NMFMapView를 생성하고

view에 addSubview(mapView) 를 추가하면 끝이다.