묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
카카오 주소 검색 기능 401 에러
LOG a {"latitude": 37.550165, "longitude": 127.12752} LOG [AxiosError: Request failed with status code 401강의영상 잘 따라하고, REST API KEY까지 제대로 입력했는데, 위와 같은 에러가 발생합니다.import React from 'react'; import {StyleSheet, TextInput, TextInputProps, View} from 'react-native'; import Ionicons from 'react-native-vector-icons/Ionicons'; import {colors} from '@/constants'; interface SearchInputProps extends TextInputProps { onSubmit: () => void; } function SearchInput({onSubmit, ...props}: SearchInputProps) { return ( <View style={styles.container}> <TextInput style={styles.input} autoCapitalize="none" placeholderTextColor={colors.GRAY_500} returnKeyType="search" onSubmitEditing={onSubmit} clearButtonMode="while-editing" {...props} /> <Ionicons name={'search'} color={colors.GRAY_700} size={20} onPress={onSubmit} /> </View> ); } const styles = StyleSheet.create({ container: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', borderWidth: 1, borderColor: colors.GRAY_200, paddingVertical: 8, paddingHorizontal: 10, borderRadius: 5, }, input: { flex: 1, fontSize: 16, paddingVertical: 0, paddingLeft: 0, color: colors.BLACK, }, }); export default SearchInput; import axios from 'axios'; import {useEffect, useState} from 'react'; import Config from 'react-native-config'; import {LatLng} from 'react-native-maps'; type Meta = { total_count: number; pageable_count: number; is_end: boolean; same_name: { region: string[]; keyword: string; selected_region: string; }; }; export type RegionInfo = { address_name: string; category_group_code: string; category_group_name: string; category_name: string; distance: string; id: string; phone: string; place_name: string; place_url: string; road_address_name: string; x: string; y: string; }; type RegionResponse = { meta: Meta; documents: RegionInfo[]; }; function useSearchLocation(keyword: string, location: LatLng) { const [regionInfo, setRegionInfo] = useState<RegionInfo[]>([]); const [pageParam, setPageParam] = useState(1); console.log(keyword, location); useEffect(() => { (async () => { try { const {data} = await axios.get( `https://dapi.kakao.com/v2/local/search/address.json?query=${keyword}&y=${location.latitude}&x=${location.longitude}&page=${pageParam}`, { headers: { Authorization: `KakaoAK ${Config.KAKAO_REST_API_KEY}`, }, }, ); console.log('data', data); } catch (error) { console.log(error); } })(); }, [keyword, location]); return {regionInfo}; } export default useSearchLocation; GOOGLE_API_KEY=키내용들 KAKAO_REST_API_KEY=키내용들 어떤 부분이 잘못되어서 401 에러가 발생하는지 알고싶습니다.
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
캐싱관련 질문있습니다.
❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!안녕하세요 저는 현재 웹으로 다른걸 개발하고 있는데, react-query로 auth를 개발하신거 참고하려고 강의내용을 따라가던중 버그같은게 있어서 질문드립니다. 저는isLoggedIn 상태를 이런식으로 설정해보았는데요.const isLoggedIn = refreshTokenQuery.isSuccess; 예를 들어 제가 프로필 페이지에 있는데isLoggedIn ? 개인프로필 내용 보여주기 : 로그인 버튼만 보여주기인데요.저는 로그인을 oauth 로그인만 구현해둔 상태입니다(google,kakao,naver)예를들어 제 프로필페이지 isLoggedIn가 false인 상태이니 "로그인하세요" 버튼이 보일 것이고 클릭하면 bottom sheet로 올라오고 카카오 로그인 버튼을 누르면 카카오의 약관동의화면이나 아이디,비밀번호입력하는 페이지가 렌더링되겠죠그 페이지에서 브라우저 뒤로가기버튼을 클릭하여 다시 프로필페이지로 이동하면 useGetRefreshToken을 타면서 getAccessToken함수가 호출되고 디스크 캐시로 부터 받아온 data를 가져와 isSuccess 상태가 되어버리면서 isLoggedIn은 true인 상태가 되어버리고 프로필페이지 접근 인가가 되어버립니다.구글링해보니 백포워드 캐시때문에 그렇다고 하는데, 해결방안이 GetAccessToken api header에 Cache-control:no-store옵션을 주면 cache를 거부하게 만드는 방법이 있더라구요.(근데 저같은경우는 이런 옵션을 주면 getAccessToken api가 호출이 안되더라구요..) 근데 의문점은 로그아웃하면서 'auth'에 해당하는 캐싱된 쿼리들을 무효화 시켰을텐데 캐싱된 데이터를 가져온다는게 좀 이해가 안됩니다. queryclient.removequeries 도 안되더라구요.
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
ios 빌드 에러! 안드는 정상 동작
Data/meltingpot-gquvlbyucsuermbjkfmfldzpeszt/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-Codegen.build export TEMP_DIR\=/Users/kim-yongmin/Library/Developer/Xcode/DerivedData/meltingpot-gquvlbyucsuermbjkfmfldzpeszt/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-Codegen.build export TEMP_FILES_DIR\=/Users/kim-yongmin/Library/Developer/Xcode/DerivedData/meltingpot-gquvlbyucsuermbjkfmfldzpeszt/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-Codegen.build export TEMP_FILE_DIR\=/Users/kim-yongmin/Library/Developer/Xcode/DerivedData/meltingpot-gquvlbyucsuermbjkfmfldzpeszt/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-Codegen.build export TEMP_ROOT\=/Users/kim-yongmin/Library/Developer/Xcode/DerivedData/meltingpot-gquvlbyucsuermbjkfmfldzpeszt/Build/Intermediates.noindex export TEST_FRAMEWORK_SEARCH_PATHS\=\ /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Library/Frameworks\ /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator17.4.sdk/Developer/Library/Frameworks export TEST_LIBRARY_SEARCH_PATHS\=\ /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/lib export TOOLCHAINS\=com.apple.dt.toolchain.XcodeDefault export TOOLCHAIN_DIR\=/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain export TREAT_MISSING_BASELINES_AS_TEST_FAILURES\=NO export UID\=501 export UNINSTALLED_PRODUCTS_DIR\=/Users/kim-yongmin/Library/Developer/Xcode/DerivedData/meltingpot-gquvlbyucsuermbjkfmfldzpeszt/Build/Intermediates.noindex/UninstalledProducts export UNSTRIPPED_PRODUCT\=NO export USER\=kim-yongmin export USER_APPS_DIR\=/Users/kim-yongmin/Applications export USER_LIBRARY_DIR\=/Users/kim-yongmin/Library export USE_DYNAMIC_NO_PIC\=YES export USE_HEADERMAP\=YES export USE_HEADER_SYMLINKS\=NO export USE_HERMES\=true export USE_RECURSIVE_SCRIPT_INPUTS_IN_SCRIPT_PHASES\=YES export VALIDATE_DEVELOPMENT_ASSET_PATHS\=YES_ERROR export VALIDATE_PRODUCT\=NO export VALID_ARCHS\=arm64\ arm64e\ i386\ x86_64 export VERBOSE_PBXCP\=NO export VERSION_INFO_BUILDER\=kim-yongmin export VERSION_INFO_FILE\=React-Codegen_vers.c export VERSION_INFO_STRING\=\"@\(\#\)PROGRAM:React-Codegen\ \ PROJECT:Pods-\" export WRAP_ASSET_PACKS_IN_SEPARATE_DIRECTORIES\=NO export XCODE_APP_SUPPORT_DIR\=/Applications/Xcode.app/Contents/Developer/Library/Xcode export XCODE_PRODUCT_BUILD_VERSION\=15E204a export XCODE_VERSION_ACTUAL\=1530 export XCODE_VERSION_MAJOR\=1500 export XCODE_VERSION_MINOR\=1530 export XPCSERVICES_FOLDER_PATH\=/XPCServices export YACC\=yacc export arch\=undefined_arch export variant\=normal /bin/sh -c /Users/kim-yongmin/Library/Developer/Xcode/DerivedData/meltingpot-gquvlbyucsuermbjkfmfldzpeszt/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-Codegen.build/Script-46EB2E00012AD0.sh /bin/sh: /Users/kim-yongmin/Desktop/RN: No such file or directory Command PhaseScriptExecution failed with a nonzero exit code warning: Run script build phase '[CP-User] [Hermes] Replace Hermes for the right configuration, if needed' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'hermes-engine' from project 'Pods') warning: Run script build phase 'Bundle React Native code and images' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'meltingpot' from project 'meltingpot') warning: Run script build phase '[CP-User] [RN]Check rncore' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'React-Fabric' from project 'Pods') --- xcodebuild: WARNING: Using the first of multiple matching destinations: { platform:iOS Simulator, id:6467FA54-9230-43CA-9818-9D9D12368E26, OS:17.4, name:iPhone 15 } { platform:iOS Simulator, id:6467FA54-9230-43CA-9818-9D9D12368E26, OS:17.4, name:iPhone 15 } ** BUILD FAILED ** The following build commands failed: PhaseScriptExecution [CP-User]\ Generate\ Specs /Users/kim-yongmin/Library/Developer/Xcode/DerivedData/meltingpot-gquvlbyucsuermbjkfmfldzpeszt/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-Codegen.build/Script-46EB2E00012AD0.sh (in target 'React-Codegen' from project 'Pods') (1 failure)이런 에러가 발생하면서, 안드는 정상 동작하지만 ios는 정상 동작하지 않습니다. 해결 방법을 열심히 찾아봤는데 잘 모르겠습니다...!!
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
8.2에서 보이는 site안에 page파일과 7.6에서 보이는 page파일의 코드가 다른거 같습니다.
8.2에서 보이는 site안에 page파일과 7.6에서 보이는 page파일의 코드가 다른거 같습니다.깃허브에는 7.7 챕터가 따로 있던데... 혹시 그 브랜치에 site안의 page파일을 그대로 사용하면 될까요??
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
리액트 네이티브 스타일 라이브러리 사용에 대한 궁금증입니다.
일반적인 웹 개발의 경우, module css, tailwind css, styled-components, emotion, style-x, module css 등 정말 다양한 대체안들이 많은것으로 알고 있습니다.리액트 네이티브도, tailwind css나, styled-components, emotion을 사용할 수 있는 것으로 알고 있는데, 현업이나 다양한 프로젝트에서도, react-native에서 제공해주는 style-sheet를 사용하는 편인가요? 보통 리액트에서, 스타일을 적용할 떄 일반적인 컴포넌트 코드와, 스타일 코드를 따로 분리해서 적용시켜주는 방식을 많이 쓰곤하는데, 리액트 네이티브는 이렇게 한 파일에 사용하는 방법밖에 없는지 이 부분도 궁금합니다!
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
영상 재생은 되는데 영상이 안보입니다
코드 버그는 아닌데 인프런 문제인지 갑자기 선생님 강의 영상은 안보이고 재생만 됩니다.. MAC OS (Chrome,Safari 둘다 영상이 안보여요)
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
useEffect 의존성 질문
장소 등록 후 MapHomeScreen으로 돌아가는 코드입니다.useEffect의 의존성 배열이 없이 사용하셨는데어떤 이유가 있으신가요?!빈 배열이나, 의존성을 안 넣으신 이유가 궁금합니다.
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
@react-navigation/drawer 접근 에러
강의에서 알려주신대로 babel.config.js 에 plugins: ['react-native-reanimated/plugin'], 추가.npx react-native start --reset-cache했지만 에러가 발생합니다.에러는 node_modules에 @react-navigation/drawer 를 못찾는다고 하는데 왼쪽 디렉토리 보시면 해당 폴더는 있습니다.방법이 있을까요?
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
회원가입 버튼 클릭 시 아무런 반응이 없습니다..
강사님..제가 어딘가 빠트린 부분이 있는 것 같은데.. 에러도 안나서 도저히 못찾고 있습니다..ㅠㅠ백엔드와 postgresql 서버 모두 실행중입니다..이런 경우 오류를 확인할 수 있는 꿀팁 같은게 있을까요?!혹시 몰라서 깃헙 공유드립니다..https://github.com/KMSKang/react
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
marker.d.ts 에러 문제
import {LatLng, MapMarkerProps} from 'react-native-maps'; // marker props의 타입을 변경 declare module 'react-native-maps' { export interface MyMapMarkerProps extends MapMarkerProps { coordinate?: LatLng; } } Interface 'MyMapMarkerProps' incorrectly extends interface 'MapMarkerProps'.Type 'MyMapMarkerProps' is not assignable to type '{ anchor?: Point | undefined; calloutAnchor?: Point | undefined; calloutOffset?: Point | undefined; centerOffset?: Point | undefined; coordinate: LatLng; ... 22 more ...; zIndex?: number | undefined; }'.Types of property 'coordinate' are incompatible.Type 'LatLng | undefined' is not assignable to type 'LatLng'.Type 'undefined' is not assignable to type 'LatLng'.ts(2430)이런 에러가 발생합니다. 강의와 동일하게 했는데 그렇습니다! 아래 질문주신분 답변에 응답이 없어서 다시 질문드리는 점 양해부탁드립니다!
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
react-native-vector-icons 에러 관련 질문
import React, {useRef, useState} from 'react'; import {Alert, Pressable, StyleSheet, View} from 'react-native'; import MapView, { Callout, LatLng, LongPressEvent, Marker, PROVIDER_GOOGLE, } from 'react-native-maps'; import {useSafeAreaInsets} from 'react-native-safe-area-context'; import Ionicons from 'react-native-vector-icons/Ionicons'; import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; import {StackNavigationProp} from '@react-navigation/stack'; import {alerts, colors, mapNavigations} from '@/constants'; import {CompositeNavigationProp, useNavigation} from '@react-navigation/native'; import {DrawerNavigationProp} from '@react-navigation/drawer'; import {MainDrawerParamList} from '@/navigations/drawer/MainDrawerNavigator'; import {MapStackParamList} from '@/navigations/stack/MapStackNavigator'; import useUserLocation from '@/hooks/useUserLocation'; import usePermission from '@/hooks/usePermission'; import mapStyle from '@/style/mapStyle'; import CustomMarker from '@/components/CustomMarker'; type Navigation = CompositeNavigationProp< StackNavigationProp<MapStackParamList>, DrawerNavigationProp<MainDrawerParamList> >; const MapHomeScreen = () => { const inset = useSafeAreaInsets(); const navigation = useNavigation<Navigation>(); const mapRef = useRef<MapView | null>(null); const {userLocation, isUserLocationError} = useUserLocation(); const [selectLocation, setSelectLocation] = useState<LatLng | null>(); usePermission('LOCATION'); const handleLongPressMapView = ({nativeEvent}: LongPressEvent) => { setSelectLocation(nativeEvent.coordinate); }; const handlePressAddPost = () => { // if (!selectLocation) { return Alert.alert( alerts.NOT_SELECTED_LOCATION.TITLE, alerts.NOT_SELECTED_LOCATION.DESCRIPTION, ); } navigation.navigate(mapNavigations.ADD_POST, { location: selectLocation, }); // 다시 뒤로 돌아왔을때는 위치를 초기화 setSelectLocation(null); }; const handlePressUserLocation = () => { if (isUserLocationError) { // 에러 메시지 표시 return; } mapRef.current?.animateToRegion({ latitude: userLocation.latitude, longitude: userLocation.longitude, latitudeDelta: 0.0922, longitudeDelta: 0.0421, }); }; // 1. 나의 위치 구하고. (geolocation) // 2. 지도를 그곳으로 이동. return ( <> <MapView ref={mapRef} style={styles.container} provider={PROVIDER_GOOGLE} showsUserLocation followsUserLocation showsMyLocationButton={false} customMapStyle={mapStyle} onLongPress={handleLongPressMapView}> <CustomMarker color="RED" score={3} coordinate={{ latitude: 37.52016541, longitude: 127.127520372, }} /> <CustomMarker color="BLUE" coordinate={{ latitude: 37.550165411, longitude: 127.127520372, }} /> {selectLocation && ( <Callout> <Marker coordinate={selectLocation} /> </Callout> )} </MapView> <Pressable style={[styles.drawerButton, {top: inset.top || 20}]} onPress={() => navigation.openDrawer()}> <Ionicons name="menu" color={colors.WHITE} size={25} /> </Pressable> <View style={styles.buttonList}> <Pressable style={styles.mapButton} onPress={handlePressAddPost}> <MaterialIcons name="add" color={colors.WHITE} size={25} /> </Pressable> <Pressable style={styles.mapButton} onPress={handlePressUserLocation}> <MaterialIcons name="my-location" color={colors.WHITE} size={25} /> </Pressable> </View> </> ); }; const styles = StyleSheet.create({ container: { flex: 1, }, drawerButton: { position: 'absolute', left: 0, top: 20, paddingVertical: 10, paddingHorizontal: 12, backgroundColor: colors.PINK_700, borderTopRightRadius: 50, borderBottomRightRadius: 40, shadowColor: colors.BLACK, shadowOffset: {width: 1, height: 1}, shadowOpacity: 0.5, // 안드는 elevation elevation: 4, }, buttonList: { position: 'absolute', bottom: 30, right: 15, }, mapButton: { backgroundColor: colors.PINK_700, marginVertical: 5, height: 48, width: 48, alignItems: 'center', justifyContent: 'center', borderRadius: 30, shadowColor: colors.BLACK, shadowOffset: {width: 1, height: 2}, shadowOpacity: 0.5, elevation: 2, }, }); export default MapHomeScreen; 제대로 import도 한 것 같고, 실제로 안드로이드에서는 아이콘 이모지가 매우 정상적으로 보이는데 ios에서만 아이콘이 다르게 보이거나, 아예 안뜹니다. drawer 이모지도 동일하게 동작합니다. 혹시 어떻게 해결하는지에 대해 알고싶습니다! cache clean도 진행해보았습니다!!!
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
AOS 플랫폼 문제 [해결]
안드로이드 실행시마다, GooglePlay Services keeps stopping이라는 현상이 매초 간격으로 발생하고, 제대로 지도 또한 실행하지 않는 것 같습니다. 혹시 이런 문제를 해결할려면, 어떻게 해야할까요?ios는 정상적으로 실행됩니다!AOS 같은 경우 Matzip isn't responding 하면서, 로그인 회원가입도 잘 동작하지 않습니다. 아래 방법으로 진행해봐도, 제대로 동작하지 않습니다!https://stackoverflow.com/questions/50313967/google-play-services-are-updating-error-on-release-not-emulator-google-play/50327544#50327544몇시간 찾아봤는데...특정 기기에서는 동작하지 않는 것 같습니다. 기기를 바꾸니 동작하네요!! 정확한 이유가 궁금하긴 합니다...ㅠㅠ
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
문법 문의드립니다!
안녕하세요 강사님! 알찬 수업 잘듣고 있습니다~다름이아닌 아직 typescript문법이 약해서 공부를 동행하며 수업을 진행중인데요 막히는부분이 하나씩 발생하여 문의드려요! 예를들어 하기 문법이 이해가안가면 어느 문서를 참고하는게 좋을까요? ㅠㅠ{...login.getTextInputProps('email')}
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
로그인 통신 질문
import axios from 'axios'; const axiosInstance = axios.create({ // 안드는 localhost:3000이 안먹힐 수 있기에 10.0.2.2로 테스트 baseURL: 'http://10.0.2.2:3030', withCredentials: true, }); export default axiosInstance; 이럴때 안드로이드는 제대로 동작하지만, ios는 다시import axios from 'axios'; const axiosInstance = axios.create({ // 안드는 localhost:3000이 안먹힐 수 있기에 10.0.2.2로 테스트 baseURL: 'http://localhost:3030', withCredentials: true, }); export default axiosInstance; 이렇게 바꿔주어야 동작합니다. 이렇게 매번 바꿔서 체크하는게 맞을까요?
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
EncryptedStorage import 오류가 발생합니다.
환경:Macbook Air M2 SonomaVS-CodeRN v0.74.1Metro v0.80.8 문제:아래 명령어로 라이브러리 설치 및 pod install 과정은 모두 완료한 상태입니다. $ yarn add react-native-encrypted-storage$ npx pod-install ios/frontend/utils/encryptStorage.ts에서 EncryptStorage 라이브러리를 불러올 때 다음과 같은 경로로 불러와집니다. 자동완성 기준으로 불러왔으며, 라이브러리 삭제 후 재설치해도 현상은 같습니다. import EncryptedStorage from 'react-native-encrypted-storage/lib/typescript/EncryptedStorage'; 이 경로로 importing된 라이브러리를 파일 내에서 사용하면 정상적으로 메서드가 자동완성 됩니다. (따라서 코딩할 때에는 문제가 되는지 몰랐습니다)이 코드를 바탕으로 앱 실행 시 react-native-encrypted-storage모듈을 불러올 수 없다는 오류가 발생합니다.error: Error: Unable to resolve module react-native-encrypted-storage/lib/typescript/EncryptedStorage from /Users/popo/Desktop/ClipProjects/frontend/src/utils/encryptStorage.ts: react-native-encrypted-storage/lib/typescript/EncryptedStorage could not be found within the project or in these directories: node_modules 1 | import EncryptedStorage from 'react-native-encrypted-storage/lib/typescript/EncryptedStorage'; | ^ 2 | 3 | const setEncryptedStorage = async <T>(key: string, value: T) => { 4 | await EncryptedStorage.setItem(key, JSON.stringify(value)); 해당 모듈 외 문제는 없는 상황 같습니다. 서버 연결 및 응답(로그인, 회원가입에 대해)은 잘 됩니다. 시도해본 것:import EncryptedStorage from 'react-native-encrypted-storage/lib/typescript/EncryptedStorage';를import EncryptedStorage from 'react-native-encrypted-storage'; 로 바꿔 실행해봤는데, 컴파일 오류는 발생하지 않고 로그인 및 회원가입 시점에 eject가 발생합니다. 질문: 왜 이런 문제가 발생하는 것이며, 어떻게 해결할 수 있을까요?
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
forwardRef를 사용하는 정확한 이유에 대해서 알고싶습니다!
forwardRef를 사용하는 정확한 이유에 대해서 알고싶습니다! 부모 컴포넌트에서 자식 컴포넌트로 ref를 전달하고 싶을때 사용하는게 맞을까요?ref는 자식으로 전달이 불가능한 prop이고 forwardRef를 사용해서, 두번쨰 인자로 ref를 전달하는것으로 이해했는데 혹시 맞을까요!!조금 자세한 설명을 듣고 싶습니다!
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
createDrawerNavigator를 위로 빼주는 이유에 대해서 알고싶습니다.
createDrawerNavigator를 위로 빼주는 이유에 대해서 알고싶습니다. 왜 function 위로 올리는지 이유에 대해서 궁금합니다!! 공식문서에서 그렇게 나와있기 떄문인가요!?
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
changer라는 컴포넌트를 사용하는 이유
HeaderBgChanger라는 컴포넌트는 단순히 서버 컴포넌트에서 react hook을 사용할 수 없기 때문에 만드는 컴포넌트인지 궁금합니다.또 이렇게 컴포넌트를 만들 경우에 렌더링 될 때 영향을 주는 부분은 없는지 궁금합니다.
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
pressed? 적용 후 버튼 클릭해도 색상이 변하지 않는 경우 [해결 방법]
프로젝트 재실행하면 되네요!! 참고하시길...npx react-native start --reset-cache
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
marker.d.ts 관련
강의에 나오는것처럼 진행했을때 import {LatLng, MapMarkerProps} from 'react-native-maps'; declare module 'react-native-maps' { export interface MyMapMarkerProps extends MapMarkerProps { coordinate?: LatLng; } } 'MyMapMarkerProps' 인터페이스가 'MapMarkerProps' 인터페이스를 잘못 확장합니다.'MyMapMarkerProps' 형식은 '{ anchor?: Point | undefined; calloutAnchor?: Point | undefined; calloutOffset?: Point | undefined; centerOffset?: Point | undefined; coordinate: LatLng; ... 22 more ...; zIndex?: number | undefined; }' 형식에 할당할 수 없습니다.'coordinate' 속성의 형식이 호환되지 않습니다.'LatLng | undefined' 형식은 'LatLng' 형식에 할당할 수 없습니다.'undefined' 형식은 'LatLng' 형식에 할당할 수 없습니다.ts(2430)⚠ Error (TS2430) | MyMapMarkerProps 인터페이스가 MapMarkerProps 인터페이스를 잘못 확장합니다. MyMapMarkerProps 형식은 { anchor?: Point | undefined; calloutAnchor?: Point | undefined; calloutOffset?: Point | undefined; centerOffset?: Point | undefined; coordinate: LatLng; ... 22 more ...; zIndex?: number | undefined; } 형식에 할당할 수 없습니다.동일하게 ?을 넣을 수없는 에러가 생겨서 import {LatLng, MapMarkerProps} from 'react-native-maps'; declare module 'react-native-maps' { export interface MyMapMarkerProps extends Partial<MapMarkerProps> { coordinate?: LatLng; } } 우선 아래와 같이 처리해 보았습니다만 CustomMarker.tsx에서 MyMapMarkerProps를 못불러오는 문제가 있습니다.