Ryan Kim

<img src="https://cdn.inflearn.com/public/files/posts/6b69358f-5a43-466c-a201-f1ad2b240422/image.png" media-type="img" alt="image.png" title="image.png" width="396" height="75">&nbsp;&nbsp;<pre><code>import {useEffect, useState} from 'react';
import axios from 'axios';
import {LatLng} from 'react-native-maps';
import Config from 'react-native-config';

type Meta = {
 total_count: number; // 검색어에 검색된 문서 수
 pageable_count: number; // total_count 중 노출 가능한 문서 수 (최대: 45)
 is_end: boolean; // 현재 페이지가 마지막 페이지인지 여부
 same_name: {
 region: string[]; // 질의어에서 인식된 지역의 리스트
 keyword: string; // 질의어에서 지역 정보를 제외한 키워드
 selected_region: string; // 인식된 지역 리스트 중, 현재 검색에 사용된 지역 정보
 };
};

export type RegionInfo = {
 id: string; // 장소 ID
 place_name: string; // 장소명, 업체명
 category_name: string; // 카테고리 이름
 category_group_code: string; // 중요 카테고리만 그룹핑한 카테고리 그룹 코드
 category_group_name: string; // 중요 카테고리만 그룹핑한 카테고리 그룹명
 phone: string; // 전화번호
 address_name: string; // 전체 지번 주소
 road_address_name: string; // 전체 도로명 주소
 x: string; // X 좌표값, 경위도인 경우 longitude (경도)
 y: string; // Y 좌표값, 경위도인 경우 latitude (위도)
 place_url: string; // 장소 상세페이지 URL
 distance: string; // 중심좌표까지의 거리 (단, x,y 파라미터를 준 경우에만 존재)
};

type RegionResposne = {
 meta: Meta;
 documents: RegionInfo[];
};

function useSearchLocation(keyword: string, location: LatLng) {
 const [regionInfo, setRegionInfo] = useState<RegionInfo[]>([]);
 const [pageParam, setPageParam] = useState(1);

 useEffect(() => {
 (async () => {
 console.log('kakao : ' + Config.KAKAO_REST_API_KEY);
 console.log('google : ' + Config.GOOGLE_API_KEY);

 console.log(location.latitude, location.longitude);
 console.log(
 `https://dapi.kakao.com/v2/local/search/keyword.json?query=${keyword}&y=${location.latitude}&x=${location.longitude}&page=${pageParam}`,
 );
 try {
 const {data} = await axios.get<RegionResposne>(
 `https://dapi.kakao.com/v2/local/search/keyword.json?query=${keyword}&y=${location.latitude}&x=${location.longitude}&page=${pageParam}`,
 {
 headers: {
 Authorization: `KakaoAK ${Config.KAKAO_REST_API_KEY}`,
 },
 },
 );

 setRegionInfo(data.documents);
 } catch (error) {
 if (axios.isAxiosError(error)) {
 if (error.response) {
 console.error(error.response.data);
 console.error(error.response.status);
 console.error(error.response.headers);
 } else if (error.request) {
 console.error(error.request);
 } else {
 console.error(error.message);
 }
 } else {
 console.error(error);
 }
 }
 })();
 }, [keyword, location, pageParam]);

 return {regionInfo};
}

export default useSearchLocation;
</code></pre>저도 같은 버그 있었고, 해결한 방법 공유합니다&nbsp;&nbsp;&nbsp;<h3>1. Reset iOS Simulator</h3>If you are using an iOS simulator, you can reset it to clear the cache:<ul><li>Open the ios Siumulator</li><li>In the top menu, go to Device > Erase All Content and Settings....</li><li>Confirm the action to reset the simulator.</li></ul>&nbsp;&nbsp;<h3>2. Remove and Reinstall <code>react-native-config</code></h3>If the issue persists, consider removing and reinstalling <code>react-native-config</code>:&nbsp;<pre><code>npm uninstall react-native-config
npm install react-native-config --save</code></pre>&nbsp;<pre><code>cd ios
xcodebuild clean
cd ..
npx pod-install
npx react-native run-ios</code></pre>&nbsp;싹 밀어버리고 다시 빌드하니까 잘 되네요, simulator, xcode 캐시 문제인것 같습니다

카카오 주소 검색 기능 401 에러

질문 올린 후 조금 더 찾아보면서 해결은 했는데, 깔끔하게 해결했다는 느낌은 안드네요. 그래도 같은 문제를 겪으실 분들을 위해 공유합니다.관련 이슈: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/react-native-maps/react-native-maps/issues/3098">https://github.com/react-native-maps/react-native-maps/issues/3098</a>해결 방법: Marker 의 <code>tracksViewChanges</code> 옵션을 <code>false</code> 로 설정한다.<pre><code>const CustomMarker = ({
 coordinate,
 color,
 score = 5,
 ...props
}: CustomMarkerProps) => {
 console.log('custom marker');
 const markerView = (
 <View style={styles.container}>
 <View style={[styles.marker, {backgroundColor: colorHex[color]}]}>
 <View style={[styles.eye, styles.leftEye]} />
 <View style={[styles.eye, styles.rightEye]} />
 {score < 3 && <View style={[styles.mouth, styles.bad]} />}
 {score === 3 && <View style={[styles.soso]} />}
 {score > 3 && <View style={[styles.mouth, styles.good]} />}
 </View>
 </View>
 );

 return coordinate ? (
 <Marker coordinate={coordinate} tracksViewChanges={false} {...props}>
 {markerView}
 </Marker>
 ) : (
 markerView
 );
};</code></pre>+그냥 false 로 설정하는게 너무 껄끄러워서 조금 더 알아본 정보 입니다.<ul><li>tracksViewChanges 옵션이란?</li><li>만약 기획 요구사항으로 인해 true 로 해야할 경우에는 어떻게 대응?</li><li>내 코드에는 리렌더링될 만한 부분이 없는데, 깜빡거리는 이유 (추측)</li></ul><a target="_blank" rel="noopener noreferrer nofollow" href="https://chatgpt.com/share/08d501cb-be8b-4fc8-b69a-ebd09febe412">https://chatgpt.com/share/08d501cb-be8b-4fc8-b69a-ebd09febe412</a>

Ryan Kim

Posts