일반적인 웹 개발의 경우, module css, tailwind css, styled-components, emotion, style-x, module css 등 정말 다양한 대체안들이 많은것으로 알고 있습니다. 리액트 네이티브도, tailwind css나, styled-components, emotion을 사용할 수 있는 것으로 알고 있는데, 현업이나 다양한 프로젝트에서도, react-native에서 제공해주는 style-sheet를 사용하는 편인가요? 보통 리액트에서, 스타일을 적용할 떄 일반적인 컴포넌트 코드와, 스타일 코드를 따로 분리해서 적용시켜주는 방식을 많이 쓰곤하는데, 리액트 네이티브는 이렇게 한 파일에 사용하는 방법밖에 없는지 이 부분도 궁금합니다!
강의에서 알려주신대로 babel.config.js 에 plugins: [ 'react-native-reanimated/plugin' ], 추가. npx react-native start --reset-cache 했지만 에러가 발생합니다. 에러는 node_modules에 @react-navigation/drawer 를 못찾는다고 하는데 왼쪽 디렉토리 보시면 해당 폴더는 있습니다. 방법이 있을까요?
강사님.. 제가 어딘가 빠트린 부분이 있는 것 같은데.. 에러도 안나서 도저히 못찾고 있습니다..ㅠㅠ 백엔드와 postgresql 서버 모두 실행중입니다.. 이런 경우 오류를 확인할 수 있는 꿀팁 같은게 있을까요?! 혹시 몰라서 깃헙 공유드립니다.. https://github.com/KMSKang/react
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) 이런 에러가 발생합니다. 강의와 동일하게 했는데 그렇습니다! 아래 질문주신분 답변에 응답이 없어서 다시 질문드리는 점 양해부탁드립니다!
안드로이드 실행시마다, 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 몇시간 찾아봤는데... 특정 기기에서는 동작하지 않는 것 같습니다. 기기를 바꾸니 동작하네요!! 정확한 이유가 궁금하긴 합니다...ㅠㅠ
안녕하세요 강사님! 알찬 수업 잘듣고 있습니다~ 다름이아닌 아직 typescript문법이 약해서 공부를 동행하며 수업을 진행중인데요 막히는부분이 하나씩 발생하여 문의드려요! 예를들어 하기 문법이 이해가안가면 어느 문서를 참고하는게 좋을까요? ㅠㅠ {...login.getTextInputProps('email')}
환경: Macbook Air M2 Sonoma VS-Code RN v0.74.1 Metro 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가 발생합니다. 질문: 왜 이런 문제가 발생하는 것이며, 어떻게 해결할 수 있을까요?
forwardRef를 사용하는 정확한 이유에 대해서 알고싶습니다! 부모 컴포넌트에서 자식 컴포넌트로 ref를 전달하고 싶을때 사용하는게 맞을까요? ref는 자식으로 전달이 불가능한 prop이고 forwardRef를 사용해서, 두번쨰 인자로 ref를 전달하는것으로 이해했는데 혹시 맞을까요!! 조금 자세한 설명을 듣고 싶습니다!
강의에 나오는것처럼 진행했을때 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를 못불러오는 문제가 있습니다.
안녕하세요 강사님 강의 내에서 구성한 Nested Navigation 구조를 참고하여 무신사(musinsa)와 같은 화면 구성을 시도해 보고 있는데 navigation 구조 설계가 생각보다 어려워서 질문 드립니다. 원하는 구조는 Bottom Tab에 따라서 Topbar Screen에 해당하는 부분에 장바구니와 알림 버튼이 들어가게 하고싶은데 아래와 같은 navigation 설계로 가능한지 질문드립니다. AuthStackNavigator AuthHomeScreen KakaoLoginScreen BottomTabNavigator HomeStack TopbarScreen HomeScreen StoreStack MypageStack ❗ 질문 작성시 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요!
맥북 m1으로 똑같이 설정을 했습니다. 그리고 npx react-native init MatzipApp으로 프로젝트를 실행하면 아래오 같은 메시지가 나옵니다. Downloading template ✔ Copying template ⠸ Processing template➤ YN0000: Retrieving https://repo.yarnpkg.com/3.6.4/packages/yarnpkg-cli/bin/yarn.js ⠙ Processing template➤ YN0000: Saving the new release in ../../../.yarn/releases/yarn-3.6.4.cjs ➤ YN0000: Done in 0s 666ms ⠼ Processing template➤ YN0000: Successfully set nodeLinker to 'node-modules' ✔ Processing template ⠸ Installing dependencieserror Installing pods failed. This doesn't affect project initialization and you can safely proceed. However, you will need to install pods manually when running iOS, follow additional steps in "Run instructions for iOS" section. ✖ Installing dependencies info 💡 To enable automatic CocoaPods installation when building for iOS you can create react-native.config.js with automaticPodsInstallation field. For more details, see https://github.com/react-native-community/cli/blob/main/docs/projects.md#projectiosautomaticpodsinstallation ✔ Initializing Git repository Run instructions for Android: • Have an Android emulator running (quickest way to get started), or a device connected. • cd "/Users/xxx/React-Project/React-Native/MatzipApp" && npx react-native run-android Run instructions for iOS: • cd "/Users/sss/React-Project/React-Native/MatzipApp/ios" • Install Cocoapods • bundle install # you need to run this only once in your project. • bundle exec pod install • cd .. • npx react-native run-ios - or - • Open MatzipApp/ios/MatzipAppcd .xcodeproj in Xcode or run "xed -b ios" • Hit the Run button Run instructions for macOS: • See https://aka.ms/ReactNativeGuideMacOS for the latest up-to-date instructions. 이런 메시지가 뜨고 npm run start로 실행을 하면 command not found메시지가 뜨면서 애뮬레이터도 실행이 안됩니다.ㅠㅠ
안녕하세요. 하단 탭 메뉴 중 즐겨찾기 탭으로 이동하여 FeedItem 선택 후 FeedDetail 화면으로 이동한 후 뒤로 가기를 누르면 즐겨찾기 탭 으로 가는게 아니라 FeedHome 탭으로 이동합니다. 즐겨찾기탭으로 돌아가게 하려면 어떻게 해야 될까요. ❗ 질문 작성시 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요!
