172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
로그아웃 버튼을 클릭하면 Error: ENOENT: no such file or directory, stat '/Users/user/Documents/code/MatzipApp/server/uploads/index.html' 이런 에러가 나오고있어서 uploads폴더에 Index.html파일을 추가하니까 에러는 안나오는데 index.html에 아무것도 안작성해도되나요?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
r - reload the app d - open developer menu i - run on iOS a - run on Android info Opening the app on Android... info JS server already running. info Launching emulator... info Installing the app... > Task :gradle-plugin:compileKotlin UP-TO-DATE > Task :gradle-plugin:compileJava NO-SOURCE > Task :gradle-plugin:pluginDescriptors UP-TO-DATE > Task :gradle-plugin:processResources UP-TO-DATE > Task :gradle-plugin:classes UP-TO-DATE > Task :gradle-plugin:jar UP-TO-DATE > Task :gradle-plugin:inspectClassesForKotlinIC UP-TO-DATE > Task :app:buildCodegenCLI SKIPPED > Task :app:generateCodegenSchemaFromJavaScript SKIPPED > Task :app:generateCodegenArtifactsFromSchema SKIPPED > Task :app:generatePackageList > Task :app:preBuild > Task :app:preDebugBuild > Task :app:compileDebugAidl NO-SOURCE > Task :app:compileDebugRenderscript NO-SOURCE > Task :app:generateDebugBuildConfig UP-TO-DATE > Task :app:javaPreCompileDebug UP-TO-DATE > Task :app:checkDebugAarMetadata UP-TO-DATE > Task :app:generateDebugResValues UP-TO-DATE > Task :app:mapDebugSourceSetPaths UP-TO-DATE > Task :app:generateDebugResources UP-TO-DATE > Task :app:mergeDebugResources UP-TO-DATE > Task :app:createDebugCompatibleScreenManifests UP-TO-DATE > Task :app:extractDeepLinksDebug UP-TO-DATE > Task :app:processDebugMainManifest UP-TO-DATE > Task :app:processDebugManifest UP-TO-DATE > Task :app:processDebugManifestForPackage UP-TO-DATE > Task :app:processDebugResources UP-TO-DATE > Task :app:compileDebugJavaWithJavac UP-TO-DATE > Task :app:mergeDebugShaders UP-TO-DATE > Task :app:compileDebugShaders NO-SOURCE > Task :app:generateDebugAssets UP-TO-DATE > Task :app:mergeDebugAssets UP-TO-DATE > Task :app:compressDebugAssets UP-TO-DATE > Task :app:processDebugJavaRes NO-SOURCE > Task :app:mergeDebugJavaResource UP-TO-DATE > Task :app:checkDebugDuplicateClasses UP-TO-DATE > Task :app:desugarDebugFileDependencies UP-TO-DATE > Task :app:mergeExtDexDebug UP-TO-DATE > Task :app:mergeLibDexDebug UP-TO-DATE > Task :app:dexBuilderDebug UP-TO-DATE > Task :app:mergeProjectDexDebug UP-TO-DATE > Task :app:mergeDebugJniLibFolders UP-TO-DATE > Task :app:mergeDebugNativeLibs UP-TO-DATE > Task :app:stripDebugDebugSymbols UP-TO-DATE > Task :app:validateSigningDebug UP-TO-DATE > Task :app:writeDebugAppMetadata UP-TO-DATE > Task :app:writeDebugSigningConfigVersions UP-TO-DATE > Task :app:packageDebug UP-TO-DATE > Task :app:createDebugApkListingFileRedirect UP-TO-DATE > Task :app:installDebug FAILED 38 actionable tasks: 2 executed, 36 up-to-date info 💡 Tip: Make sure that you have set up your development environment correctly, by running react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:installDebug'. > com.android.builder.testing.api.DeviceException: No connected devices! * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. * Get more help at https://help.gradle.org BUILD FAILED in 5s info Run CLI with --verbose flag for more details.| 후 실행이 안됩니다.. 어떻게 해야되나요?
미해결
배달앱 클론코딩 [with React Native]
현재 세팅을 모두 완료한 상태에서 `npm run android --reset-cache`를 했을 때, 실패를 하게 됩니다. ./gradlew clean으로 설정을 마무리 했을 때 같은 문제가 발생합니다. 현재 T-map 설치 sdk 버전은 com.skt.Tmap_1.76.jar입니다. rn 버전은 0.74입니다. 아래와 같이 세팅은 모두 마친 상태에서 다음과 같이 에러가 발생하고 있습니다. github commit : https://github.com/kd02109/react-native-delivery/commit/590f740f6fae2f42499c6c20af7e7e775cb76ab0 Error log Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0. You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins. For more on this, please refer to https://docs.gradle.org/8.6/userguide/command_line_interface.html#sec:command_line_warnings in the Gradle documentation. 203 actionable tasks: 199 executed, 4 up-to-date info 💡 Tip: Make sure that you have set up your development environment correctly, by running npx react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor Note: Some input files use or override a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: Some input files use or override a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: C:\Users\-\Desktop\Github\ReactnativeDelivery\node_modules\react-native-image-resizer\android\src\main\java\fr\bamlab\rnimageresizer\ImageResizerModule.java uses or overrides a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: Some input files use or override a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: C:\Users\-\Desktop\Github\ReactnativeDelivery\node_modules\react-native-permissions\android\src\main\java\com\zoontek\rnpermissions\RNPermissionsPackage.java uses or overrides a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: Some input files use or override a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: Some input files use unchecked or unsafe operations. Note: Recompile with -Xlint:unchecked for details. Note: C:\Users\-\Desktop\Github\ReactnativeDelivery\node_modules\react-native-safe-area-context\android\src\paper\java\com\th3rdwave\safeareacontext\NativeSafeAreaContextSpec.java uses or overrides a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: C:\Users\-\Desktop\Github\ReactnativeDelivery\node_modules\react-native-screens\android\src\paper\java\com\swmansion\rnscreens\NativeScreensModuleSpec.java uses or overrides a deprecated API. Note: Recompile with -Xlint:deprecation for details. e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:25:35 Unexpected tokens (use ';' to separate expressions on the same line) e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:26:111 Expecting ')' e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:49:1 Expecting a top level declaration e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:14:12 Unresolved reference: microsoft e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:22:13 Unresolved reference: PackageList e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:25:17 Unresolved reference: add e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:25:21 Unresolved reference: TMapPackage e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:26:17 Unresolved reference: add e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:26:21 Unresolved reference: CodePush e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:26:49 Unresolved reference: CodePushDeploymentKey e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:30:9 'getJSMainModuleName' overrides nothing e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:32:9 'getUseDeveloperSupport' overrides nothing e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:34:9 'isNewArchEnabled' overrides nothing e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:35:9 'isHermesEnabled' overrides nothing e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:38:3 Modifier 'override' is not applicable to 'top level property without backing field or delegate' e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:39:33 Unresolved reference: applicationContext e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:39:53 Unresolved reference: reactNativeHost e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:41:3 Modifier 'override' is not applicable to 'top level function' e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:42:5 No supertypes are accessible in this context e: file:///C:/Users/-/Desktop/Github/ReactnativeDelivery/android/app/src/main/java/com/reactnativedelivery/MainApplication.kt:43:19 'this' is not defined in this context FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:compileDebugKotlin'. > A failure occurred while executing org.jetbrains.kotlin.compilerRunner.GradleCompilerRunnerWithWorkers$GradleKotlinCompilerWorkAction > Compilation error. See log for more details 어떤 방식으로 해결을 해야 할까요? 해당 세팅 방식은 제로초님의 repo중 https://github.com/ZeroCho/food-delivery-app/tree/master/rn73 을 참고했습니다. 출발 지점을 클릭하게 되면 해당 openNavi 자체 모듈을 찾아서 실행할 수 없다는 에러가 발생하고 있는 상황입니다. andoroid에서 add package, T-map api 가이드를 모두 진행하고 키도 도입한 상황에서 실행이 되지 않고 있습니다..
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요 강사님. 강의 잘 듣고 있습니다. :) 강의 진행 중 구글맵을 띄우는 과정에서 ERROR react-native-maps: AirGoogleMaps dir must be added to your xCode project to support GoogleMaps on iOS. 라는 오류가 발생하는데요, 이 때문에 구글맵이 보이지 않아서 진행이 어려운 상태 입니다. 앞서 해당 강의에서 8분 가량 설명 해주신 부분은 모두 진행 하였는데요, 어떻게 하면 구글 맵을 띄울 수 있을까요?ㅜㅜ
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세여 강사님 강의 잘 듣고 있습니다. 다름이 아니라 회원가입 및 로그인 api 요청 성공시 onSuccess 함수 로직에 있는 queryClient.refetchQueries({ queryKey: [queryKeys.AUTH, queryKeys.GET_ACCESS_TOKEN], }); 이 코드로 getAccessToken ( /auth/refresh ) api 를 요청하고 있습니다. 여기서 문제는 getAccessToken 요청시 401 error 가 발생하고 있습니다. DB 에 회원가입으로 생성된 유저 데이터는 잘 생성된 상태이고 오타는 없어보입니다. ㅠㅠ 도와주세여 아래 이미지는 log 이미지입니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
import React, {ReactNode} from 'react'; import { Pressable, StyleSheet, Text, PressableProps, Dimensions, View, StyleProp, ViewStyle, TextStyle, } from 'react-native'; import {colors} from '../../constants'; import useThemeStore from '@/store/useThemeStore'; import {ThemeMode} from '@/types/common'; interface CustomButtonProps extends PressableProps { label: string; variant?: 'filled' | 'outlined'; size?: 'large' | 'medium'; inValid?: boolean; style?: StyleProp<ViewStyle>; textStyle?: StyleProp<TextStyle>; icon?: ReactNode; } const deviceHeight = Dimensions.get('screen').height; function CustomButton({ label, variant = 'filled', size = 'large', inValid = false, style = null, textStyle = null, icon = null, ...props }: CustomButtonProps) { const {theme} = useThemeStore(); const styles = styling(theme); // 여기서는 제대로 출력이 됩니다. 값이 제대로 읽힙니다. console.log(colors[theme].PINK_700); return ( <Pressable disabled={inValid} style={({pressed}) => [ styles.container, pressed ? styles[`${variant}Pressed`] : styles[variant], inValid && styles.inValid, style, ]} {...props}> <View style={styles[size]}> {icon} <Text style={[styles.text, styles[`${variant}Text`], textStyle]}> {label} </Text> </View> </Pressable> ); } const styling = (theme: ThemeMode) => StyleSheet.create({ container: { borderRadius: 3, justifyContent: 'center', flexDirection: 'row', }, inValid: { opacity: 0.5, }, filled: { backgroundColor: colors[theme].PINK_700, }, outlined: { borderColor: colors[theme].PINK_700, borderWidth: 1, }, filledPressed: { backgroundColor: colors[theme].PINK_500, }, outlinedPressed: { borderColor: colors[theme].PINK_700, borderWidth: 1, opacity: 0.5, }, large: { width: '100%', paddingVertical: deviceHeight > 700 ? 15 : 10, alignItems: 'center', justifyContent: 'center', flexDirection: 'row', gap: 5, }, medium: { width: '50%', paddingVertical: deviceHeight > 700 ? 12 : 8, alignItems: 'center', justifyContent: 'center', flexDirection: 'row', gap: 5, }, text: { fontSize: 16, fontWeight: '700', }, filledText: { color: colors[theme].WHITE, }, outlinedText: { color: colors[theme].PINK_700, }, }); export default CustomButton; console.log(colors[theme].PINK_700); 이렇게 출력할 경우, 제대로 아래와 같이 출력이 됩니다만 스타일은 제대로 읽어오지 않습니다. 이 부분에 대해서 알고 싶습니다. BUNDLE ./index.js LOG Running "MatzipApp" with {"rootTag":171,"initialProps":{"concurrentRoot":false}} LOG light LOG #C63B64 LOG #C63B64 LOG #C63B64 ERROR TypeError: Cannot read property 'PINK_700' of undefined This error is located at: in CustomButton (created by ErrorBoundary) in RCTView (created by View) in View (created by ErrorBoundary) in ErrorBoundary (created by RetryErrorBoundary) in RetryErrorBoundary (created by RootNavigator) in RootNavigator (created by App) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by App) in _QueryClientProvider (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in MatzipApp(RootComponent), js engine: hermes ERROR TypeError: Cannot read property 'WHITE' of undefined This error is located at: in RetryErrorBoundary (created by RootNavigator) in RootNavigator (created by App) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by App) in _QueryClientProvider (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in MatzipApp(RootComponent), js engine: hermes ERROR TypeError: Cannot read property 'WHITE' of undefined This error is located at: in RetryErrorBoundary (created by RootNavigator) in RootNavigator (created by App) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by App) in _QueryClientProvider (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in MatzipApp(RootComponent), js engine: hermes ERROR TypeError: Cannot read property 'WHITE' of undefined https://github.com/dydals3440/MatZip 좀더 정확히 판단을 위하여 제가 커밋한 레포 남겨드립니다!!!
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
[Nest] 27666 - 2024. 05. 23. 오후 12:23:25 ERROR [ExceptionsHandler] ENOENT: no such file or directory, stat '/Users/제이름/MatzipApp/server/uploads/index.html'Error: ENOENT: no such file or directory, stat '/Users/제이름/MatzipApp/server/uploads/index.html' 아까 올린 문제는 제가 지역을 잘못봐서 .env 파일에서 수정해서 해결했습니다. 다시 실행해보니 이번엔 저런 오류가 뜨는데욥실제로 저런 디렉토리랑 파일이 서버 하위에 없긴 합니다.. 구글링해도 도저히 답이 안나와서 다시 한번 질문 드립니다!
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
기존에 있는 문제는 해결됐습니다! (개인정보가 있어서 삭제합니다ㅜㅜ)
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
일단 회원가입시 400 에러가 발생 합니다 ! 리퀘스트 인터셉터 에러 내용 {"adapter": ["xhr", "http", "fetch"], "baseURL": "http://localhost:3030", "data": {"email": "ajrfysd@naver.com", "password": "gsas22sgda"}, "env": {"Blob": [Function Blob], "FormData": [Function FormData]}, "headers": {"Accept": "application/json, text/plain, */*"}, "maxBodyLength": -1, "maxContentLength": -1, "method": "post", "timeout": 0, "transformRequest": [[Function transformRequest]], "transformResponse": [[Function transformResponse]], "transitional": {"clarifyTimeoutError": false, "forcedJSONParsing": true, "silentJSONParsing": true}, "url": "/auth/signup", "validateStatus": [Function validateStatus], "withCredentials": true, "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN"} 리스폰스 인터셉터 [AxiosError: Request failed with status code 400] email, password로그도 잘 찍히고 하는데 왜 400이 발생하는지 모르겠습니다..ㅠㅠ 서버쪽 같기도 한데 잘 모르겠네요.. postgresql에 테이블도 잘 생성 되어 있고 npm run start:dev Application] Nest application successfully started +2ms http://localhost:3030 크롬에서 3030 으로 요청시 로그에 내줄 index.html 없다고 하는거 보니 작동 하는것 같긴 한데... 이상하게 Postman 에서는 couldnot send 나오고... /auth/signup도 마찬가지고... 다른 부분은 confirmPassword를 제가 rePassword로 바꾸었는데 보내는 쪽에서도 비밀번호확인은 안보내는것 같고 받는 쪽에서도 아예 안받는것 같은데.. 혹시 위 내용으로 추측 가능한 부분이 있을까요??
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
const postLogin = async ({ email, password, }: RequestUser): Promise<ResponseToken> => { console.log('postLogin'); const {data} = await axiosInstance.post('/auth/signin', {email, password}); console.log('data', data); return data; }; 회원가입에서 오류가 발생해서 db를 봤는데 db에 데이터는 들어가 있습니다. 그래서 로그인을 진행해 봤는데 로그인이 되질 않아 postLogin에 console을 찍어 보았더니 axios post 에서 아무런 값도 받아오질 못하고 있었습니다. 오류 코드는 뜨지 않구요. 시뮬레이터를 껏다 켜보기도 하고 서버를 껏다 켜보기도 했는데 이제는 회원가입 시 db에 저장도 되질 않습니다. 환경은 윈도우/안드로이드 입니다. https://github.com/ghgfhfg2/react-native-base
미해결
iOS/Android 앱 개발을 위한 실전 React Native - Basic
제목 그대로 강의 자료로 완성된 소스코드는 따로 없는지 문의 드립니다 다른 강의들은 다 주던대
미해결
배달앱 클론코딩 [with React Native]
save it under ios folder as "Config.xcconfig" with the following content: #include? "tmp.xcconfig" ios폴더 들어가셔서 Config.xcconfig라는 새파일 만드시고 위 코드 넣으시면 동작합니다. 출처: https://www.npmjs.com/package/react-native-config
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
해결했습니다!
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안드로이드 기기에서, 테마에 해당하는 색상을 못읽는 에러가 발생합니다!! iOS 같은 경우는 정상적으로 다크모드가 잘 동작합니다!!! 어떤 부분이 문제인지 알고 싶습니다. https://github.com/dydals3440/MatZip
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
해당 강좌 그대로 진행하다가, 의존성 배열 문제로 인해 무한 렌더링이 발생했습니다. 강사님의 깃허브 코드를 바탕으로, 강좌와 다르게 전역 상태로 관리를 진행하여 해결을 하긴 했습니다. 어떠한 문제로 인해, 무한 렌더링이 발생되고, 이럴 경우에 어떤 방식으로 접근해서 해결하는지에 대한 접근 방식에 대해 알고 싶습니다!!! web과 다르게 RN은 디버깅하기가 생각보다 쉽지않네요... ㅠㅠ
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
import {useEffect, useState} from 'react'; import {queryKeys, storageKeys} from '@/constants'; import type {Marker} from '@/types'; import {getEncryptedStorage, setEncryptedStorage} from '@/utils'; import queryClient from '@/api/query-client'; const initialFilters = { RED: true, YELLOW: true, GREEN: true, BLUE: true, PURPLE: true, '1': true, '2': true, '3': true, '4': true, '5': true, }; function useMarkerFilterStorage() { const [filterItems, setFilterItems] = useState<Record<string, boolean>>(initialFilters); const set = async (items: Record<string, boolean>) => { queryClient.invalidateQueries({ queryKey: [queryKeys.MARKER, queryKeys.GET_MARKERS], }); await setEncryptedStorage(storageKeys.MARKER_FILTER, items); setFilterItems(items); }; const transformFilteredMarker = (markers: Marker[]) => { return markers.filter(marker => { return ( filterItems[marker.color] === true && filterItems[String(marker.score)] === true ); }); }; useEffect(() => { (async () => { const storedData = (await getEncryptedStorage(storageKeys.MARKER_FILTER)) ?? initialFilters; setFilterItems(storedData); })(); }, [filterItems]); return {set, items: filterItems, transformFilteredMarker}; } export default useMarkerFilterStorage; 의도대로 items의 값을 set으로 변경하면 필터링이 정상적으로 동작하지만 무한렌더링이 발생합니다. 무한 렌더링을 막기 위해 의존성 배열을 지우고 쿼리키를 무효화하는 방법등 많은 시도를 해봤지만 제대로 동작하지 않네요. 혹시 현재 진행된 강의에서 무한 렌더링을 해결할 수 있는 방법이 있을까요?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
다크모드를 어떻게 적용시킬까 고민하다가, 찾아보니 theme이라는 프로퍼티를 사용해서 아래와 같이 코드를 작성하면 다크모드가 적용이 됩니다!! import {colors} from '@/constants'; import useThemeStore from '@/store/useThemeStore'; import {ThemeMode} from '@/types/common'; import React from 'react'; import { StyleSheet, View, Modal, SafeAreaView, Pressable, Text, } from 'react-native'; import DatePicker from 'react-native-date-picker'; interface DatePickerOptionProps { isVisible: boolean; date: Date; onChangeDate: (date: Date) => void; onConfirmDate: () => void; } const DatePickerOption = ({ isVisible, date, onChangeDate, onConfirmDate, }: DatePickerOptionProps) => { const {theme} = useThemeStore(); const styles = styling(theme); return ( <Modal visible={isVisible} transparent animationType="slide"> <SafeAreaView style={styles.optionBackground}> <View style={styles.optionContainer}> <View style={styles.pickerContainer}> <DatePicker mode="date" date={date} onDateChange={onChangeDate} locale="ko" theme={theme === 'dark' ? 'dark' : 'light'} /> </View> </View> <View style={styles.optionContainer}> <Pressable style={styles.optionButton} onPress={onConfirmDate}> <Text style={styles.optionText}>확인</Text> </Pressable> </View> </SafeAreaView> </Modal> ); }; const styling = (theme: ThemeMode) => StyleSheet.create({ pickerContainer: { alignItems: 'center', }, optionBackground: { flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0, 0, 0 / 0.5)', }, optionContainer: { borderRadius: 15, marginHorizontal: 10, marginBottom: 10, backgroundColor: colors[theme].GRAY_100, overflow: 'hidden', }, optionButton: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', height: 50, gap: 5, }, optionText: { color: colors[theme].BLUE_500, fontSize: 17, fontWeight: '500', }, }); export default DatePickerOption;
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
버그나 에러 질문은 아니구요! react native date picker 패키지를 이용해 DatePicker를 구현하는 단계있는데요, textColor prop을 타이핑할 때 자동완성이 안되어 찾아보니 올해 3월 23일에 릴리즈한 5.0.0에서 제거되었네요. https://github.com/henninghall/react-native-date-picker/releases/tag/5.0.0 대신 theme을 사용하라고 하는데, 기본값인 auto를 쓰거나 혹은 light로 설정하면 강의와 같이 text가 검은색으로 잘 나옵니다. 강의 들으시다가 저처럼 띠용하시는 분 계실까봐 참고차 남겨놓습니다! 좋은 강의 감사드립니다!
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
강사님! 저의 문제점이 다른 질문자들의 내용과 같은 상황이라 질문과 답변 내용을 참고하여 오류를 찾아보았는데 여전히 회원가입과 로그인버튼이 제대로 동작하지 않습니다. 서버도 켜놓았고 로그를 출력했으때 data값이 출력은 됩니다. 코드 확인 해주실수 있을까요? 한참 찾아보는데 문제가 어떤건지 못찾고있습니다. https://github.com/happyssun/FoodsMap
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
계정 버튼을 누르고 클릭했을 떄, 강사님 처럼 인증서 부분이 뜨지 않는데, 멤버십을 구입해야지 가능한것일까요?
