#reactnative

React Native 프로젝트 백엔드 언어는 어떤 것이 좋을까요?

백엔드 희망하고 있는 대학생입니다. 동기들과 프로젝트를 진행하려는데 프론트 쪽 프레임워크는 React Native로 결정되었고 백엔드 언어를 정하려고 합니다. 대부분 경험이 많이 없어 저희 상황에 적합한 언어를 선택하려고 합니다. 앱을 만들되 추후 AI기능을 도입할 예정이라서, 여러가지 안을 고민하고 있습니다. ReactNative가 Node.js와 호환이 잘 된다고 알고 있어서, Node.js+python으로 해야할지, 팀원들에게 익숙한 java+python으로 해야할지, python(Django or Flask)만을 이용해서 백엔드 업무를 할 수 있는지 아니면 다른 방식을 추천해주실 수 있는지 궁금합니다! 또한 대부분 현업에서는 ReactNative로 개발을 할 때 백엔드 언어를 어떻게 설정하는 지도 궁금합니다! 조언, 답변해주시면 모두 감사드립니다!!

ReactNative Xcode 16. RCTAppDelegate.h not find

안녕하세요? 에러로 고통받다가 커리어리에 남겨봅니다. ReactNative 프로젝트로 테스트플라이트 배포상태에서 3주가 지나 지난주 Xcode 16으로 업데이트 되었는데요. 그 뒤 ios 버전, 라이브러리 버전 문제는 해결했는데. Xcode 에서 build /ios/프로젝트명/AppDelegate.h 파일에서 #import <RCTAppDelegate.h> 파일을 찾을 수 없다고 나옵니다. 사양 1. M2, Sequoia 2. react-native : 0.74.3 3. Xcode 16.1 문제 해결을 위해 시도한 방법 입니다. 1. #import <React/RCTAppDelegate.h> 바꿔봄 2. #import "AppDelegate.h" 바꿔봄 3. node_module/react-native/React/Base/에서 헤더파일 찾아봄 -> 없음 4. node_module/react-native/ReactCommon/에서 헤더파일 찾아봄 -> 없음 5. 대체할 수 있는 방법 찾아봄 GPT에서 제안한 방법으로 수정 -> 결과 : 파일 찾을 수 없음 #import <UIKit/UIKit.h> #import <React/RCTBridgeDelegate.h> @interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate> @property (nonatomic, strong) UIWindow *window; @end 6. Xcode에서 경로를 추가해봄 -> 결과 : 파일 찾을 수 없음 6-1. Xcode > BuildSetting > search header 에 경로를 추가했습니다. "$(SRCROOT)/../node_modules/react-native/React", "$(SRCROOT)/../node_modules/react-native/ReactCommon", "$(SRCROOT)/../node_modules/react-native/ReactCommon/cxxreact", "$(SRCROOT)/../node_modules/react-native/Libraries", 6-2. Xcode > BuildSetting > Frame search header에 경로를 추가했습니다. "$(inherited)", "$(SRCROOT)/../node_modules/react-native/React", "$(SRCROOT)/../node_modules/react-native/ReactCommon", 7. pod 재설치, react-native 재설치, 캐시 삭제 및 라이브러리 업데이트 등.. pod.lock, Podfile, node_module, build 파일, DerivedData 폴더 삭제 후 전부 재설치. pod install --repo-update 헤르메스 사용 설정 및 use_frameworks! :linkage => :static 설정 확인. 8. react-native 최신버전(0.76.3)으로 재설치 참고 사이트 및 GPT, Monica 질의응답 공유 링크 https://github.com/facebook/react-native/issues/36611 https://stackoverflow.com/questions/75822104/rctappdelegate-h-file-not-found https://chatgpt.com/share/674e6dcf-89f8-800f-b0e6-4fa2fe58419b https://monica.im/share/chat?shareId=CQ18cvvPvsMc0r3U ** 유의미한 정보를 주신분께 감사의 마음으로 많지는 않지만 스타벅스 커피쿠폰을 드립니다 살려주세요..

ReactNative ios build 에러 3일째 해결을 못했습니다.

시뮬레이션을 실행하려고 해도 스크립트 문제, iPhone 버전 범위 문제, 시뮬레이터 문제가 계속 발생합니다. 어떤 도움이라도 감사합니다. ReactNative를 처음 접했습니다. 저희 팀에서 저를 도울 수 있는 사람이 없습니다. #프로젝트 환경 mac M2 ruby -v ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin23] node -v v20.10.0 pod --version 1.15.2 package.json { "name": "labts", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-native-community/async-storage": "^1.12.1", "@react-native-community/cli": "13.6.9", "@react-navigation/bottom-tabs": "^6.6.0", "@react-navigation/native": "^6.1.17", "@react-navigation/native-stack": "^6.10.0", "@tanstack/react-query": "^5.51.5", "@types/react-native-vector-icons": "^6.4.18", "axios": "^1.7.2", "date-fns": "^3.6.0", "immer": "^10.1.1", "react": "18.2.0", "react-native": "0.74.3", "react-native-calendars": "^1.1305.0", "react-native-date-picker": "^5.0.4", "react-native-dotenv": "^3.4.11", "react-native-get-random-values": "^1.11.0", "react-native-image-crop-picker": "^0.41.2", "react-native-image-zoom-viewer": "^3.0.1", "react-native-paper": "^5.12.3", "react-native-permissions": "^4.1.5", "react-native-safe-area-context": "^4.10.8", "react-native-screens": "^3.32.0", "react-native-splash-screen": "^3.3.0", "react-native-tab-view": "^3.5.2", "react-native-vector-icons": "^10.1.0", "react-native-vision-camera": "^4.5.1", "uuid": "^10.0.0", "yarn": "^1.22.22" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.74.85", "@react-native/eslint-config": "0.74.85", "@react-native/metro-config": "0.74.85", "@react-native/typescript-config": "0.74.85", "@types/react": "^18.2.6", "@types/react-native-dotenv": "^0.2.2", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "babel-plugin-module-resolver": "^5.0.2", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "18.2.0", "typescript": "5.0.4" }, "engines": { "node": ">=18" } } PodFile require Pod::Executable.execute_command('node', ['-p', 'require.resolve( "react-native/scripts/react_native_pods.rb", {paths: [process.argv[1]]}, )', __dir__]).strip platform :ios, '12.0' use_frameworks! #use_modular_headers! prepare_react_native_project! linkage = ENV['USE_FRAMEWORKS'] if linkage != nil Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green use_frameworks! :linkage => linkage.to_sym end target 'nexlabts' do config = use_native_modules! use_react_native!( :path => config[:reactNativePath], # An absolute path to your application root. :app_path => "#{Pod::Config.instance.installation_root}/.." ) target 'nexlabtsTests' do inherit! :complete # Pods for testing end post_install do |installer| # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 react_native_post_install( installer, config[:reactNativePath], :mac_catalyst_enabled => false, # :ccache_enabled => true ) end end 제가 아래 에러 3가지에 대해 제가 해본 방법들입니다. 1. node 재설치 node_module 폴더 삭제, package-rock.json 삭제 후 재설치 npm install --legacy-peer-deps yarn install 2. Xcode가 node 읽을 수 있도록 설정 sudo ln -s "$(which node)" /usr/local/bin/node 3. Podfile 내 platform 설정 수정 platform :ios, '12.0' or platform :ios, '14.0' 4. Pods 재설치 rm -rf ~/Library/Developer/Xcode/DerivedData or rm -rf ~/Library/Developer/Xcode/DerivedData/* rm -rf Pods rm Podfile.lock pod install --repo-update Xcode \> Product \> Clean Build Folder. cd ./ios pod cache clean -all pod install --repo-update cd ../ npx react-native run-ios --no-packager --simulator="iPhone 15" or npx react-native run-ios --simulator="iPhone 15" or yarn start > i(run ios) Err 1. cocoaPods 설치할 때 [!] CocoaPods could not find compatible versions for pod "React-RuntimeHermes": In Podfile: React-RuntimeHermes (from ../node_modules/react-native/ReactCommon/react/runtime) Specs satisfying the React-RuntimeHermes (from ../node_modules/react-native/ReactCommon/react/runtime) dependency were found, but they required a higher minimum deployment target. Err2. iOS 실행할때 run-ios --no-packager --simulator="iPhone 15" Build description signature: fc1341421f84b87c5245d346c2c17b66 Build description path: /Users/nowonjae/Library/Developer/Xcode/DerivedData/nexlabts-argvodqcybjfcybstpulfpghnzvm/Build/Intermediates.noindex/XCBuildData/fc1341421f84b87c5245d346c2c17b66.xcbuilddata /Users/nowonjae/Desktop/project/NeXLabRN/ios/nexlabts.xcodeproj:1:1: error: Unable to open base configuration reference file '/Users/nowonjae/Desktop/project/NeXLabRN/ios/Pods/Target Support Files/Pods-nexlabts/Pods-nexlabts.release.xcconfig'. (in target 'nexlabts' from project 'nexlabts') warning: Unable to read contents of XCFileList '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Unable to read contents of XCFileList '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-input-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') 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 'nexlabts' from project 'nexlabts') warning: Run script build phase '[CP] Embed Pods Frameworks' 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 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-input-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Run script build phase '[CP] Copy Pods Resources' 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 'nexlabts' from project 'nexlabts') --- xcodebuild: WARNING: Using the first of multiple matching destinations: { platform:iOS Simulator, id:B5AA2E84-4F83-4749-A986-A1FCE5E398A3, OS:17.5, name:iPhone 15 } { platform:iOS Simulator, id:B5AA2E84-4F83-4749-A986-A1FCE5E398A3, OS:17.5, name:iPhone 15 } ** BUILD FAILED ** ] Err3. Xcode 로 Build 할때 (Any iOS Simulator Device (arm64, x86_64)) Command PhaseScriptExecution failed with a nonzero exit code

Expo vs bare ReactNative

리액트네이티브로 개발할 때 expo와 bare 중 어떤걸 사용하시나요?

ReactNative 네비게이션 뒤로갔을 때 감지

안녕하세요! RN으로 앱 개발 공부를 시작한 학생입니다. 개발 도중 해결이 어려운 문제가 있어서 고수님들의 도움을 받고자 글을 남깁니다. 문제는 다음과 같습니다. 하단 바 네비게이션을 만들었습니다. 하단 바로 이동 가능한 페이지는 페이지1부터 페이지4까지 4개입니다. 하단 바 페이지로 이동하면 해당 하단 바 아이콘의 색상이 변합니다. 모든 페이지에서 접근 가능한 페이지 5가 존재합니다. 페이지 5에서는 뒤로가기 버튼이 있고 페이지 5에서의 하단 바 아이콘은 이전 페이지에 영향을 받습니다. 예를들어 페이지1 -> 페이지5 의 경우 하단바 아이콘은 페이지1에 해당하는 아이콘의 색상이 변경됩니다. 저는 페이지1~4의 스크린 상태를 전역으로 관리해서 하단 바를 통해 다른 페이지로 이동할 때만 스크린 상태를 바꿔서 아이콘을 변경하는 식으로 작성했습니다. 문제는 만약 ios/android의 기기에서 기본적으로 있는 뒤로가기 기능을 사용했을 때 입니다.(ios의 경우 왼쪽화면을 오른쪽으로 넘기는 것) 페이지1 -> 페이지4에서 위 기능으로 이전 페이지인 페이지1로 넘어갔을 때 하단 바 아이콘은 변하지 않게 됩니다. 보통 앱 개발을 할 때는 이것을 어떻게 해결하는지 궁금합니다!

서비스 기업이 가고싶은 쌩신입...

안녕하세요 프론트엔드 쌩신입 취준생입니다 전공생이고 ReactNative로 배포한 모바일프로젝트랑 react로 사이드프로젝트 1개 팀프로젝트 1개 있어요.. 셋다 프론트입니다 Si는 조금씩 면접연락이 오는데 저는 이커머스 같은 서비스 기업이 너무 가고싶은데 연락이안오네요.. 1.서비스기업 분들이 중요시 여기는 역량이 뭘까요? 2.어떤걸 보충해야 할까요..? 3.si경력쌓고 이직하는게 답일까요..?

프론트엔드 커리어? 질문입니다

신입 프론트엔드입니다. 현 회사 React 와 ReactNative 를 쓰고 있습니다 저가 하는 역할이 프론트엔드로써 퍼블리싱도 충분히 하고 렌더링 최적화도 간간히 진행하는데요. 이 회사의 많은 프로젝트들을 유지보수 하거나 새로운 런칭할 수 있는 좋은 기회들이 많습니다. 일 복이 많은 상황인데.. 전 주로 배포 파이프라인이나 혹은 너무 복잡한 일을 자동화하는데에 머리를 쓰고있는데 이게 프론트엔드로써 경쟁력있는 행동인지.. 두렵습니다.. Next.js나 vue같은 다른 프레임워크도 넓직하게 공부하는게 옳은 길일까요?

react-native FlatList 너무 느림 현상

리액트 네이티브에서 Flatlist로 구현된 채팅 메세지가 너무 느립니다. 신기하게 안드로이드에서만 느리고 ios는 또 멀쩡하게 잘되더라구요. 짧은 메세지들은 잘되는데 메세지들이 조금만 길어지면 버벅거리는 현상이 심하더라고요. 혹시 원인을 알고 계신분 있나요? FlatList 구현자체는 몇몇개의 prop 더 해진거 말고는 공식문서 예시와 거의 동일합니다. - https://reactnative.dev/docs/flatlist

React Native run-android 실패

React Native에서 npx react-native run-android 명령어로 빌드하려고 하는데 "Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081" 에러 메시지와 함께 빌드가 실패합니다. https://reactnative.dev/docs/environment-setup macOS이며 위의 문서에 나와있는 대로 진행했고, 검색해보니 환경변수 설정을 해주어야 한다고 해서 zsh 설정파일에 추가해주었는데도 계속 같은 문제가 발생합니다. 해결방법을 아시는 분이 계실까요?

FlatList가 너무 느려요...

안녕하세요. 이미지를 무한대로 보여주는 인피니트 스크롤 형식의 피드 화면이 있는데, 이미지 컨테이너를 FlatList로 보여주고 있습니다. 그런데 너무 느리고 버벅거리는 것 같아요. 이미 https://reactnative.dev/docs/optimizing-flatlist-configuration 공식 문서의 방법대로 했는데도 버벅거림이 해결되지 않습니다. 이미지 컨테이너에는 저장하기, 좋아요, 공유하기 정도의 버튼들이랑 좋아요한 사람 프로필 이미지와 문구 정도가 있습니다. 혹시 FlatList 최적화 해보신 분 계시면 방법 공유해주실 수 있나요?