오늘도 클라이밍 앱을 만들기 위해 오늘도 클라이밍을 한다.
자꾸 미뤄오던 클라이밍 앱 프로젝트에 불이 붙었다.
앱의 가장 핵심인 지도 서비스를 구현하기 위해 여기저기 찾아다닌 결과
가장 관리가 잘되고 있는 react-native-naver-map을 발견했다. 미디움에도 글써주셨는데 진짜 잘써주심!
시작해보자
💡 네이버 클라우드 플랫폼
NCP -> Naver Cloud Platform 너무 길어서 줄여서 말할 예정
NCP를 사용하기 위해선 가입을 하거나 기존 네이버 아이디와 연동을 해야한다.
-
로그인을 하고 들어가서 콘솔창을 찾아준다.
-
콘솔 -> DashBoard -> Services -> AI·NAVER API -> Maps를 찾아간다.!
-
Application 등록 버튼을 누르고
Application 이름 설정을 한 뒤 Maps에 있는Mobile Dynamic Map을 클릭해준다.
왜 모바일 Mobile Dynamic Map이냐?우린 개쩌는 React-native 개발자니깐
추가로 아래 서비스 환경 등록엔 본인이 만든 react-native 앱의 패키지 이름과 Bundle ID를 입력해주면 된다.
+Web 서비스는 아니니 URL은 패쓰!
-
그럼 이제 아래와 같이 나오게 되고 인증과 관련된 정보를 볼 수 있는 리스트가 생기고
인증정보를 클릭하면 ? 내 ClientId와 등등을 볼 수 있다
💡 앱 환경세팅
npm
npm install --save @mj-studio/react-native-naver-map
yarn
yarn add @mj-studio/react-native-naver-map
expo
npx expo install @mj-studio/react-native-naver-map
추가로 cd ios && pod install 까지 해준다.
난 먼저 IOS만 했기 떄문에 IOS를 먼저 포스팅할 예정 !
IOS
info.plist에 아까 발급 받았던 ClientId를 넣어주고 권한에 대해 설정을 해줘야한다.
<key>NMFClientId</key>
<string>발급 받은 ClientId 넣어주기</string>
<dict>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>{{usage description}}</string>
<key>NSLocationTemporaryUsageDescriptionDictionary</key>
<dict>
<key>{{your purpose key}}</key>
<string>{{usage description}}</string>
</dict>
<key>NSLocationWhenInUseUsageDescription</key>
<string>{{usage description}}</string>
</dict>
</plist>여기서 your purpose key에 뭘 넣어야할지 모르겠는 분들은 앱에서 네이버 맵을 부를 때 사용되는 키값이라고 생각하면 되기 때문에 NaverMap@@@@@같이 본인이 정해주면 된다.
그리고 지도는 앱 내 권한이 필요하기 때문에?
react-native-permissions이 필요하므로 들어가서 설치해준다.
놓치지 말아야할 점은 RN 버전이 0.72 이상일 때와 아닐때 Podfile을 수정을 요하기 떄문에 잘 보고 판단할 것!
권한
NSLocationAlwaysAndWhenInUseUsageDescription(>= iOS 11)
앱이 foreground와 background 모두에서 위치 정보에 액세스하는 것을 허용합니다.
iOS 11 이상에서는 NSLocationAlwaysUsageDescription 대신 이 키를 사용해야 합니다.NSLocationWhenInUseUsageDescription
앱이 foreground에 있을 때 (즉, 사용자가 actively하게 앱을 사용 중일 때) 위치 정보에 액세스하는 것을 허용합니다.NSLocationTemporaryUsageDescriptionDictionary(>= iOS 14)
앱이 임시로 정확한 위치 정보에 액세스할 수 있도록 허용합니다. 이는 앱이 특정 작업을 수행하는 동안에만 정확한 위치가 필요한 경우 사용됩니다.
Podfile엔 아래와 같이 추가해준다.
setup_permissions([
'LocationAccuracy',
'LocationAlways',
'LocationWhenInUse',
])추가로 난 background에서도 위치 받아오기를 원하기 때문에 xcode에서 설정을 따로 해줬다.
어디서 추가하는지 모르겠다면 xcode 우측 상단 +버튼을 눌러 Background Mode를 검색하면 나온다.
💡 화면 렌더링
import React, { useEffect } from 'react';
import { Dimensions, Platform, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useSelector } from 'react-redux';
import { NaverMapView } from '@mj-studio/react-native-naver-map';
import { request, PERMISSIONS, requestLocationAccuracy } from 'react-native-permissions';
import { UserProfileState } from '../../states/userState';
import { RootState } from '../../store';
export const HomeScreen: React.FC = () => {
useEffect(() => {
if (Platform.OS === 'ios') {
request(PERMISSIONS.IOS.LOCATION_ALWAYS).then((status) => {
console.log(`Location request status: ${status}`);
if (status === 'granted') {
requestLocationAccuracy({
purposeKey: 'NaverMapPreciseLocation', // 아까 your purpose key에 있던 키값
})
.then((accuracy) => {
console.log(`Location accuracy is: ${accuracy}`);
})
.catch((e) => {
console.error(`Location accuracy request has been failed: ${e}`);
});
}
});
}
}, []);
return (
<SafeAreaView style={{ position: 'relative' }}>
<View style={{ flex: 1, position: 'absolute', top: 0, left: 0 }}>
<NaverMapView
onInitialized={() => {
return console.log('initialized!');
}}
/>
</View>
</SafeAreaView>
);
};일단 useEffect로 권한 검사를 하고 앱화면에 올라오는 걸 기대했지만
화면에 아무것도 안나오고 내 위치, 축소, 확대 버튼만이 나왔다.
그 이유는 NaverMapView에 너비 높이 값이 지정되지 않아서 그렇다.
난 앱 시작과 동시에 auth가 있는 유저들에겐 앱 화면에 지도가 바로 렌더링이 되어야해서
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;디바이스의 너비 높이값을 바로 넣어줬다.
원하는대로 잘 나온다 !
앞으로 커스텀 할 일만 남았다 헛헛헛...
마무리
세세한 설정은 없이 일단 지도를 띄워 확인을 해야하는 상황이라 더 필요하신 분들은
아래 깃헙에서 더 정보를 얻을 수 있습니다.
react-native-naver-map
짧은 회고
좋았던 포인트는 핵심이었던 지도 띄우기에 성공했다는 것이다.
naver maps로 할까 kakao maps로 할까 고민을 정말 많이 했지만 아웃풋인 지도를 띄우기 위해서
일단 해보기로 하고 바로 띄워본게 큰 임팩트였다. 왜냐..?
하고싶은,해야할 일이 더 많아지고 다음 액션이 정해진 느낌이라서? ㅎㅎㅎ
아쉬웠던 포인트는 지도를 띄우면서 빈번히 실수들이 많았다. 예를 들어 react-native-permissions를 설치만 하고 따로 설정을 안해서 시간을 낭비했다던가 등등 이런 점이 있다.
그래도 내가 요즘 가장 좋아하는 스포츠에 기여할 수 있는 앱을 만들고 있다는 점이 너무 설레고 재미있는 것 같다.
지치지말고 화이팅 !
(+ 요즘은 그렇게 좋아하던 피파온라인4보다 앱 만들기가 더 재밌다.)
