#build

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

react-native xcode build시 발생 에러

``` ld: warning: ignoring file '/Users/heejinroh/Library/Developer/Xcode/DerivedData/OkCeo-abydistjrfwgsufmyimbpydzjpqj/Build/Products/Debug-iphonesimulator/Flipper-Folly/libFlipper-Folly.a[3](Assume.o)': found architecture 'arm64', required architecture 'x86_64' ld: warning: ignoring file '/Users/heejinroh/Library/Developer/Xcode/DerivedData/OkCeo-abydistjrfwgsufmyimbpydzjpqj/Build/Products/Debug-iphonesimulator/Flipper-Folly/libFlipper-Folly.a[2](Addr2Line.o)': found architecture 'arm64', required architecture 'x86_64' ld: Undefined symbols: _OBJC_CLASS_$_RCTBridge, referenced from: in AppDelegate.o _OBJC_CLASS_$_RCTBundleURLProvider, referenced from: in AppDelegate.o _OBJC_CLASS_$_RNKakaoLogins, referenced from: in AppDelegate.o _RCTAppSetupDefaultRootView, referenced from: -[AppDelegate application:didFinishLaunchingWithOptions:] in AppDelegate.o _RCTAppSetupPrepareApp, referenced from: -[AppDelegate application:didFinishLaunchingWithOptions:] in AppDelegate.o clang: error: linker command failed with exit code 1 (use -v to see invocation) ``` xcode 14 버전으로 생성된 프로젝트를 xcode 15버전으로 진행하여 실행했는데 빌드단계에서 에러가 계속 발생해서 혹시 도움좀 주실수있을까요? System: OS: macOS 14.0 CPU: (12) arm64 Apple M2 Pro Memory: 647.83 MB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v18.17.1/bin/yarn npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm Watchman: 2023.09.25.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /Users/heejinroh/.rvm/gems/ruby-3.2.1/bin/pod SDKs: iOS SDK: Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0 Android SDK: Not Found IDEs: Android Studio: 2022.3 AI-223.8836.35.2231.10671973 Xcode: 15.0.1/15A507 - /usr/bin/xcodebuild Languages: Java: 11.0.11 - /Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.8 => 0.70.8 react-native-macos: Not Found npmGlobalPackages: *react-native*: Not Found

"react-native doctor"에서 에러 반복 (Adb, Android Studio)

"npx react-native doctor"를 실행하여 문제를 찾고, F(fix)를 눌러 에러 해결을 진행하였습니다. ---------------------------------------------------------- Common ✓ Node.js - Required to execute JavaScript code ✓ npm - Required to install NPM dependencies ● Metro - Metro Bundler is not running Android ✖ Adb - No devices and/or emulators connected. Please create emulator with Android Studio or connect Android device. ✓ JDK - Required to compile Java code ✖ Android Studio - Required for building and installing your app on Android ✓ ANDROID_HOME - Environment variable that points to your Android SDK installation ✓ Android SDK - Required for building and installing your app on Android Errors: 2 Warnings: 1 Attempting to fix 3 issues... Common ✖ Metro Could not start the bundler. Please run "npx react-native start" command manually. Android ✖ Adb √ Select the device / emulator you want to use » Emulator s24u (disconnected) ✔ Adb ✔ Android Studio installed successfully in "C:\Users\OOO\AppData\Local\Android". ---------------------------------------------- 그러나 여전히 에뮬레이터는 작동하지 않으며, 다시 "npx react-native doctor"를 실행하면 다시 같은 오류가 발생합니다. --------------------------------------------- Common ✓ Node.js - Required to execute JavaScript code ✓ npm - Required to install NPM dependencies ● Metro - Metro Bundler is not running Android ✖ Adb - No devices and/or emulators connected. Please create emulator with Android Studio or connect Android device. ✓ JDK - Required to compile Java code ✖ Android Studio - Required for building and installing your app on Android ✓ ANDROID_HOME - Environment variable that points to your Android SDK installation ✓ Android SDK - Required for building and installing your app on Android Errors: 2 Warnings: 1 Usage › Press f to try to fix issues. › Press e to try to fix errors. › Press w to try to fix warnings. › Press Enter to exit.

리액트 네이티브 릴리즈로 배포 시 build.gradle 설정대로 동작 안하는 이유가 뭔지 궁긍합니다.

안녕하세요. 현재 리액트 네이티브로 프로젝트를 진행하고 있습니다. 막바지 단계에 거의 도달해서 이제 배포 준비를 하려고 하는데요, 마지막으로 테스트를 하기 위해 stagingRelease 로 apk 를 만들어서 테스트를 하려고 하니, .env.staging 을 읽지를 못하고 있네요. 이상한건 stagingDebug 로 할 때에는 이런 문제가 없었습니다. 지금 환경변수는 루트 디렉토리에 env 폴더가 있고, 해당 폴더 내에는 3개의 환경변수 파일이 존재합니다. .env.development .env.staging .env.production 이렇게 3개 입니다. project.ext.envConfigFiles = [ productiondebug: "env/.env.production", productionrelease: "env/.env.production", developmentrelease: "env/.env.development", developmentdebug: "env/.env.development", stagingrelease: "env/.env.staging", stagingdebug: "env/.env.staging" ] 위의 코드는 제가 설정한 환경변수 매핑하는 부분입니다. 실제로 stagingrelease 로 빌드 시에 flavor 값이 stagingrelease 로 뜨는 걸 확인했습니다. node_modules 에서 react-native-config 폴더를 찾아서 dotenv.gradle 에서 찍으니까 확인이 가능하더라고요. 제가 궁금한 점은 왜 루트에서 .env 파일만을 읽어서 BuildConfig.java 에서 사용하려고 하는걸까요? .env.staging 을 참조하지 않는 이유가 궁금합니다. 아래는 dotenv.gradle 파일입니다. import java.util.regex.Matcher import java.util.regex.Pattern def getCurrentFlavor() { Gradle gradle = getGradle() def pattern = Pattern.compile("(?:.*:)*[a-z]+([A-Z][A-Za-z0-9]+)") def flavor = "" gradle.getStartParameter().getTaskNames().any { name -> Matcher matcher = pattern.matcher(name) if (matcher.find()) { flavor = matcher.group(1).toLowerCase() return true } } println "Current flavor: $flavor" return flavor } def loadDotEnv(flavor = getCurrentFlavor()) { def envFile = project.hasProperty("defaultEnvFile") ? project.defaultEnvFile : ".env" if (System.env['ENVFILE']) { envFile = System.env['ENVFILE'] } else if (System.getProperty('ENVFILE')) { envFile = System.getProperty('ENVFILE') } else if (project.hasProperty("envConfigFiles")) { project.ext.envConfigFiles.any { pair -> if (flavor.startsWith(pair.key.toLowerCase())) { envFile = pair.value return true } } } println "Reading env from: $envFile" def env = [:] File f = new File("$project.rootDir/../$envFile"); if (!f.exists()) { f = new File("$envFile"); } if (f.exists()) { println "Found env file: $f" f.eachLine { line -> def matcher = (line =~ /^\s*(?:export\s+|)([\w\d\.\-_]+)\s*=\s*['"]?(.*?)?['"]?\s*$/) if (matcher.getCount() == 1 && matcher[0].size() == 3) { env.put(matcher[0][1], matcher[0][2].replace('"', '\\"')) // 각 환경 변수 키-값 쌍 출력 println "Loaded env variable: ${matcher[0][1]} = ${matcher[0][2]}" } } } else { println("**************************") println("*** Missing .env file ****") println("**************************") } project.ext.set("env", env) } loadDotEnv() android { defaultConfig { project.env.each { k, v -> def escaped = v.replaceAll("%","\\\\u0025") buildConfigField "String", k, "\"$v\"" resValue "string", k, "\"$escaped\"" println "Set buildConfigField and resValue: $k = $v" } } } 안드로이드 스튜디오 터미널에서 ./gradlew assembleStagingRelease 명령어를 치게 될 경우, Current flavor: stagingrelease Reading env from: .env.staging ************************** *** Missing .env file **** ************************** 이런 로그가 뜨고 있습니다.

안드로이드 스튜디오에서 빌드가 안되요

plugins { id("com.android.application") kotlin("android") } android { namespace = "com.example.next" compileSdk = 33 defaultConfig { applicationId = "com.example.next" minSdk = 24 targetSdk = 33 versionCode = 1 versionName = "1.0" testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner" } buildTypes { release { isMinifyEnabled = false proguardFiles(getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro") } } compileOptions { sourceCompatibility = JavaVersion.VERSION_1_8 targetCompatibility = JavaVersion.VERSION_1_8 } } dependencies { implementation("androidx.appcompat:appcompat:1.6.1") implementation("com.google.android.material:material:1.9.0") testImplementation("junit:junit:4.13.2") androidTestImplementation("androidx.test.ext:junit:1.1.5") androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1") } 여기서 에러가 뜨는데 뭘까요 Unresolved reference: id Unresolved reference: kotlin Unresolved reference: android Unresolved reference: namespace Unresolved reference: compileSdk Unresolved reference: defaultConfig Unresolved reference: applicationId Unresolved reference: minSdk Unresolved reference: targetSdk Unresolved reference: versionCode Unresolved reference: versionName Unresolved reference: testInstrumentationRunner Unresolved reference: buildTypes Unresolved reference: release Unresolved reference: isMinifyEnabled Unresolved reference: proguardFiles Unresolved reference: getDefaultProguardFile

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 ** 유의미한 정보를 주신분께 감사의 마음으로 많지는 않지만 스타벅스 커피쿠폰을 드립니다 살려주세요..

안드로이드 블루투스 권한 요청

override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = ActivityMainBinding.inflate(layoutInflater) if (bluetoothAdapter == null) { Toast.makeText(this, "블루투스를 지원하지않는 기기입니다", Toast.LENGTH_SHORT).show() finish() } setContentView(binding.root) binding.btn3.setOnClickListener { checkBlueToothConnectPermission() } } override fun onRequestPermissionsResult( requestCode: Int, permissions: Array<String>, grantResults: IntArray ) { super.onRequestPermissionsResult(requestCode, permissions, grantResults) if (requestCode == PERMISSION_REQUEST_BLUETOOTH_CONNECT) { if (grantResults.isNotEmpty() && grantResults[0] == PackageManager.PERMISSION_GRANTED) { // 권한이 허용된 경우 처리할 코드 } else { Toast.makeText(this, "BLUETOOTH_CONNECT 권한이 필요합니다.", Toast.LENGTH_SHORT).show() } } } fun checkBlueToothConnectPermission() {//앱에서 블루투스 연결 권한이 있는지 확인하고 없는경우 권한을 요청하는데 사용됨 if (ContextCompat.checkSelfPermission(this, Manifest.permission.BLUETOOTH_CONNECT) != PackageManager.PERMISSION_GRANTED ) { if (ActivityCompat.shouldShowRequestPermissionRationale(this, Manifest.permission.BLUETOOTH_CONNECT)){ AlertDialog.Builder(this) .setTitle("권한 요청") .setMessage("블루투스 연결 권한이 필요합니다.") .setPositiveButton("확인") { _, _ -> ActivityCompat.requestPermissions( this, arrayOf(Manifest.permission.BLUETOOTH_CONNECT), PERMISSION_REQUEST_BLUETOOTH_CONNECT ) } .setNegativeButton("취소", null) .show() }else{ ActivityCompat.requestPermissions( this, arrayOf(Manifest.permission.BLUETOOTH_CONNECT), PERMISSION_REQUEST_BLUETOOTH_CONNECT ) } } } 버튼을 눌러서 권한요청을하는데 거부를 했다면 다시한번 눌렀을때 다시권한요청을 하고싶은데 어떻게 하시는지 아시는분 계신가요ㅜ 한번 거부가 되면 요청다이얼로그가 뜨지않는걸 알고 대화상자로 처리할라고하는데 대화상자도 안뜨네요 ㅜ

플러터 질문. Futuer 및 출

locate.dart를 만들어서 import 'package:geolocator/geolocator.dart'; class Locate{ Future<List<double>> location() async { List<double> m_l = []; // 위치 권한 요청 LocationPermission permission = await Geolocator.requestPermission(); // 현재 위치 가져오기 Position position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high); // 위치 정보 리스트에 추가 m_l.add(position.longitude); m_l.add(position.latitude); return m_l; // 위치 정보를 포함한 리스트 반환 } Future<List<double>> get_loc() async { // 위치 정보를 가져오기 List<double> location = await this.location(); // 수정된 부분 return location; // 위치 정보를 포함한 리스트 반환 } } 를 작성하였구요 main_screen.dart 라는 파일에서 함수를 생성해서 my_locate() async{ Locate locator = Locate(); // 위치 정보 가져오기 List<double> location = await locator.get_loc(); } @override Widget build(BuildContext context) { // 함수 실행은 //요 부분에서 return Scaffold( 이 부분 안에서 실행시킬려고 하는데 자꾸 오류가 걸리네요. 방법 알려주실 분 있나요?

Nextjs App router 동작 방식이 이해가 안됩니다.

https://nextjs.org/docs/app/building-your-application/rendering/client-components // 문서내용 Defining multiple use client entry points: You can define multiple "use client" entry points in your React Component tree. This allows you to split your application into multiple client bundles (or branches). However, "use client" doesn't need to be defined in every component that needs to be rendered on the client. Once you define the boundary, all child components and modules imported into it are considered part of the client bundle. => 클라이언트 컴포넌트의 하위 컴포넌트들은 자동으로 전부 클라이언트 컴포넌트가 됨(use-client 명시할 필요X) 으로 이해했습니다. 그런데 첨부한 코드의 동작방식이 이해가 안됩니다. 예상 1. TestComponent가 클라이언트 컴포넌트(CSR)이므로 내부에 있는 HotEventList도 클라이언트 단에서동작할 것이다. 2. TestComponent를 ‘use client’로 클라이언트 컴포넌트로 만들었다. HotEventList에서는 useState등 CSR에 필요한 요소를 추가하더라도 ‘use client’를 추가할필요가 없다. TestComponent하위에 있어서 자동으로 클라이언트 컴포넌트가 되기 때문이다. 실제 1. HotEventList는 여전히 SSR로 동작한다. 2. HotEventList에 state를 추가하면 ‘use client’를 명시하라는 에러가 발생한다. 제가 어떤 부분을 잘못 이해하고 있는걸까요?

환경변수 주입 및 빌드(모노레포)

모노레포 프로젝트 환경 및 요구사항 - 프로젝트는 front(React), back(Node), common 패키지로 구성되어 있으며, 모노레포로 되어있음 - Dockerfile 스크립트에서는 build → run 순서로 실행되도록 구현되어 있음 - 서버 배포 시에는 하나의 포트만 사용해야 하므로 back(Node)에서 front의 정적 파일(index.html)을 실행해야 함 - Docker 빌드 시, front(webpack 빌드)와 back 둘 다 build 스크립트를 실행하고, 이미지 실행 시에는 back만 run 스크립트를 실행하여 back에서 front의 정적 파일을 실행해야 함 - 환경변수는 이미지 실행 시 docker-compose.yml의 env_file 속성을 사용해 외부에서 주입해야 함(환경변수가 바뀌는 상황이 있다면 .env 파일을 수정한 후 다시 빌드해야 합니다.) 예외 상황 Docker 빌드할 때 .env 파일을 포함하지 않고 run 스크립트를 실행(이미지 실행) 시 주입하는데, front 패키지에는 run 스크립트가 존재하지 않습니다. (back에서 front의 정적 파일을 실행) 즉, 환경변수가 주입되지 않고 있음 해결 방법 첫번째는 back에서 front의 dist 파일 호출 시 환경변수 객체를 만들어 value 값을 key 값으로 치환해서 함께 넘기고, index.html의 head에서 window 객체를 활용해 값을 받는 방법 하지만 이 방법은 개발자 도구에서 환경변수 값이 노출되고, window 객체를 활용하기 때문에 새로운 브라우저를 생성할 때마다 사이드 이펙트가 발생할 수 있음 두번째는 모노레포 root 패키지에서 prerun 스크립트로 front의 build 스크립트를 실행하는 방법 스크립트 -> "prerun": "lerna run build --parallel --scope @projectname/front --stream", 이 방법은 빌드를 두 번 실행하므로 자원을 많이 소모하지만, 예외 상황이 없는 것으로 보임 질문 받은 내용 Q. 환경변수를 바꾸는 상황이 존재할까요? A. 회사의 인프라 환경에 따라 다르지만, 포트나 IP가 변경될 수 있는 상황이 있음 예를 들어, 외부 서버에 요청을 보낼 경우 그 서버의 정보가 바뀌면 설정을 변경해야 하며, 다른 서버에 요청할 때 인증 정보를 입력해야 하는데, 토큰이나 사용자 패스워드 값이 변경될 경우에도 수정이 필요함 고민되는 부분 다른 해결 방법이나 비슷한 상황이 있다면 함께 논의하고 싶습니다. ㅎㅎ *프로젝트 구조 root ├── packages │ ├── back │ │ ├── package.json │ │ ├── index.ts │ │ ├── .babelrc │ │ └── ... │ ├── common │ ├── front │ │ ├── public │ │ │ └── index.html │ │ ├── package.json │ │ ├── src │ │ │ └── index.js │ │ ├── src │ │ ├── webpack.config.js │ │ └── ... ├── package.json ├── lerna.json ├── docker-compose.yml ├── Dockerfile * 프로젝트의 중요 정보는 제외했습니다.

AWS Beanstalk 배포 하기 전에 신경써줘야 할 것이 있나요 ?

현재 nodejs로 백엔드를 구성하고 EB에 배포하는데 몇 가지 오류가 생겨서 질문 드립니다. 프로젝트 구조는 다음과 같습니다. -customer └ .gitignore └ .dockerignore └ src ( 백엔드 코드 ) └ .gitignore └ Dockerfile └ Package.json -product └ customer 와 동일 -shopping └ customer 와 동일 -proxy └ Dockerfile docker-compose.yaml 리전 ap-northeast-2(seoul region) 로컬에서 빌드하고 작동하는 거 확인 후 위 코드를 모두 압축해서 EB에 올렸습니다. EB에 올리기전에 vpc , igw, 등등 미리 생성해줘야 할 게 있나요? 추가로 .gitignore 같은 파일도 같이 올려도 되나요 ? ( 초보라서 질문의 질이 떨어질 수 있지만 고수분들의 너그러운 양해를 부탁드립니다 .ㅠㅠ ) 에러 로그를 보면 1. ELB Fail -> VPC has no internet gateway 2. Stack named 'awseb-e-33wucpgpey-stack' aborted operation. Current state: 'CREATE_FAILED' Reason: The following resource(s) failed to create: [AWSEBV2LoadBalancer, AWSEBInstanceLaunchWaitCondition] 3. LaunchWaitCondition failed. The expected number of EC2 instances were not initialized within the given time. Rebuild the environment. If this persists, contact support.

마이크로 프론트 구현(Nextjs, React)

요구사항 마이크로 프론트엔드로 A라는 프로젝트에서 B라는 프로젝트의 컴포넌트를 사용하고 싶다 프로젝트 설명 ModuleFederationPlugin 사용해서 expose remote 설정 A 프로젝트 (remote) : react, styled-component 사용 B 프로젝트 (expose) : nextjs, scss 사용 첫번째 오류 styled 이 달라서 nextjs 에서 노드가 불러와지지 않는 것 해결 : <noscript id="**next_css__DO_NOT_USE**"></noscript> → 두번째 오류 발생 오류 내용 Cannot read properties of null (reading 'parentNode') TypeError: Cannot read properties of null (reading 'parentNode') at options.insert (webpack- 두번째 오류 Nextjs 에서 expose 할 때 Page 컴포넌트에 있는 useState를 사용 못한다고함 해결 : peerDependencies 로 nextjs 추가 → 오류동일 오류 내용 TypeError: Cannot read properties of null (reading 'useState') at useState (react.development.js:1623:21) at Page (index.js:8:40) react-dom.development.js:18704 The above error occurred in the <Page> component: 참고 : https://dev.to/omher/building-react-app-with-module-federation-and-nextjsreact-1pkh 두번째 오류를 해결해야 되는데 가능한 방법인지 모르겠습니다. 아시는 분은 댁글 남겨주세요~(코드상에 보안상 문제되는 부분은 a b 로 바꿨습니다.

firebase 호스팅 첫 화면이 세팅화면만 나와요

npm run start 를 할 땐 리액트 결과가 잘 나오는데 public/index.html 파일에 root 잘 연결되어있는 거 확인하고 npm run build를 해보면 build/index.html파일이 root 가진 채로 잘나와요 그래서 잘된거라고 생각하고 firebase hosting으로 연결 쭉 하고 json 파일 내 hostring: public 부분 build 폴더 설정도 했는데 firebase deploy로 호스팅 주소를 받아 테스트를 해보면 " welcome firebase hosting seoup complete" 라는 firsebase 세팅 초기 화면만 반복해서 뜨네요.. 혹시 몰라 새로운 리액트 폴더를 만들어서 다시 연결도 해보고 npm run start로 정상결과 확인 후 다시 npm run build 하고 firsebase deploy다시 치고 할 수 있는건 전부 다 해본것같은데 추가로 여기저기 블로그와 유튜브 까지 모두 검색해봤는데 firsebase init 순서까지 똑같이 했고 다른점이 없어서 더 멘붕이에요 ㅠ 계속 첫번째 화면만 보여요... 도와주세요 ㅠ

nodejs driver로 replicaSet option 변경하기 도움 부탁드립니다.

아래 코드는 https://medium.com/@cramirez92/build-a-nodejs-cinema-microservice-and-deploying-it-with-docker-part-1-7e28e25bfa8b 여기에서 공부하다가 나온 코드입니다. getMongoUrl을 찍으면 다음과 같이 나옵니다. "mongodb://127.0.0.1:27017,127.0.0.1:27018,127.0.0.1:27019/movies" 현재는 해당 코드가 deprecated 되어서 실행이 전혀 안되서 현재버전으로 바꿔서 짜보고 싶은데 옵션 넣어주는 코드가 어떤 의미 인지 모르겠습니다. 도움주시면 정말 감사드리겠습니다. mongodb documentaion 링크도 같이 남겨드립니다. https://www.mongodb.com/docs/v6.0/replication/ https://mongodb.github.io/node-mongodb-native/4.13/index.html 추가로 const MongoClient = require('mongodb'); const {MongoClient} = require('mongodb'); 의 차이도 궁금합니다.

React + Nginx 프로젝트 Docker build 시간이 오래 걸리는 이유

React 프로젝트를 빌드했을 때와 React + Nginx 기반 프로젝트를 Dockerfile로 build시 두 작업의 시간 차이가 많이 나는 상황입니다. docker 이미지 빌드시 npm run build 커맨드 실행에 거의 모든 시간이 소모됩니다. 그래서 react 빌드 시간을 줄이기 위한 esbuild 적용, webpack 커스터마이징 및 dockerfile 최적화를 위한 dockerfile 멀티 스테이지 적용, 이미지 캐시 레이어 사용을 위한 dockerfile 스크립트 수정도 해봤습니다. 그런데도 일반 build(react 프로젝트 build 약 40초)와 docker 이미지 빌드(약 8분) 시간의 차이가 많이 나는데 차이가 많이 나는 원인을 파악하는 방법이 뭐가 있을까요?? dockerfile 스크립트도 참고로 올려봅니다.

Next.js의 Suspense VS dynamic

https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#nextdynamic Lazy Loading을 사용하기 위해서 Next.js에서는 2가지의 방법을 제공하고있습니다. 1. dynamic 2. React.lazy + Suspense 또한, Next 의 Streaming 관련글을 읽다 보니 https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#example 예제에서는 Suspense를 사용한 예제를 보여주는데 위의 예제에서는 dynamic을 사용하지 않고 Suspense를 사용한 이유가 궁금합니다. 처음 링크된 글을 읽었을때는 dynamic 함수가 React.lazy + suspense를 구현함 과 동시에 여러 옵션들을 제공하고 있어서 dynamic 함수가 더 좋다(?) 라고 생각을 하게 되었는데, dynamic과 suspense의 정확한 차이점이 궁금합니다.

Docker compose 컨테이너 구성을 어떻게 될까요?

저는 prisma nextjs postgresql을 사용하고 있습니다 Docker compose에서 컨테이너를 local용postgresql, deploy용postgresql, nextapp 이렇게 3개로 구성하려고 합니다 이렇게 해서 npm run dev로 app을 local로 실행한다고 하면 local용 postgresql과 연결되게 하고 Build를 하고 deploy된것은 deploy용postgresql과 연결되게 하려고합니다 해당 프로젝트가 포폴용이라 상관은 없지만, 정말 서비스를 진행하려고하면 서버를 늘리는 일이 일어날텐데 이런경우 위에서 생성했던 docker이미지를 이용해서 docker compose up을 할텐데요 그러면 새로운 서버가 생길때마다 local용 db를 생성할 수 밖에 없을 것 같은데 제가 아직 배포도 안해보고 프론트라서 제가 지금 생각하는 방식이 맞는지 잘 모르겠습니다 혹시 제가 말한게 맞나요?

프론트엔드 - Docker-Compose 문제

docker-compose를 세팅 중 빌드 오류가 있어 질문 드립니다. 문제의 원인이 prod 환경의 compose.yml라고 예상되어지는데 dev 환경의 compose에서는 env 파일을 정상 인식하지만 prod 환경의 compose에서는 env 파일을 인식하지 못하는 문제인데요. docker-compose 명령어를 실행할 때, .env 파일이 있는 경로에서 실행을 하고있고 docker-compose.prod.yml과 .env 파일에 정의된 변수 이름도 오탈자는 없습니다. 어떻게 해야 docker build시, prod에서는 args를 사용할 때 production.env(= multiple .env)파일을 인식하게 할 수 있을까요? 혹시 제가 놓치고 있는 부분이 있을까요? 추가로, 관련된 코드와 설정은 Stack Overflow에 업로드를 해뒀는데요, 답변 주시면 정말 감사하겠습니다! https://stackoverflow.com/questions/78857841/docker-compose-not-recognizing-environment-variables-in-next-js-application-pro

1시간 안에 네이티브로 웹사이트를 iOS 및 Android용 네이티브 모바일 앱으로 변환하세요.

비즈니스용 모바일 앱을 만드는 데 얼마나 비용이 들까요? 제 경험상, 안드로이드와 iOS 앱을 개발하려면 최소 1만 달러부터 시작합니다. 하지만 한 달에 단 35달러로 모바일 앱을 만들 수 있는 매우 효과적인 방법이 있습니다. 혼자서도 할 수 있고, 팀을 고용할 수도 있는데, 이 방법은 몇 개월이 아닌 며칠 만에, 수천 달러가 아닌 수십 달러로 가능합니다. 제가 말하는 것은 Natively입니다. 이 서비스는 어떤 웹사이트나 웹 애플리케이션도 손쉽게 네이티브 앱으로 변환해 줍니다. 귀하의 웹사이트/웹 앱이 JavaScript 프레임워크로 구축되었든, Bubble, Webflow, Wix, WordPress, Shopify와 같은 노코드 플랫폼을 활용하든, Natively는 모바일 앱으로의 전환을 매끄럽고 간단하게 만들어 줍니다. Natively의 사용은 매우 간편합니다. 사용자 친화적이고 자동화된 프로세스로 인해 기술적 전문 지식 없이도 누구나 몇 분 안에 앱을 만들 수 있습니다. Natively는 푸시 알림, 헬스 키트, 위치 추적, 카메라, 갤러리, 인앱 결제 등 다양한 네이티브 모바일 기능을 설정할 수 있게 해줍니다. 그리고 새로운 기능이 지속적으로 추가되고 있습니다. 1년 전 처음 출시된 이후로 Natively 덕분에 800개 이상의 애플리케이션이 App Store와 Google PlayMarket에서 성공적으로 자리 잡았습니다. Natively의 웹사이트, 리뷰 및 사례는 여기에서 확인하세요: https://www.buildnatively.com/ 오늘날의 디지털 시대에서 네이티브 애플리케이션을 보유하는 것은 사용자를 끌어들이고 유지하는 데 필수적이며, 비즈니스 성장에 큰 도움이 됩니다. 그래서 저는 Natively가 특히 무료로 시작할 수 있다는 점에서 꼭 시도해볼 가치가 있다고 믿습니다. 🌍

Docker compose 파일 작성시 local환경과 production환경 구분

Docker compose를 이용해서 로컬 환경과 프로덕션환경을 따로 구분해서 만들려고 합니다 그 이유는 db이름도 local환경에서 사용하는 db이름과 production에서 사용하는 db이름도 달라야하고 그 외 로컬환경과 프로덕션환경이 다른부분이 좀 있어서 구별해서 만들려고 합니다 어떻게 시작해야할지 모르겠습니다 Docker compose파일을 두개 만들어야하나요? DockerFile을 만들때 두개를 만들어서 하나는 build까지 Run하고 하나는 로컬에서 실행될꺼니까 COPY까지만 진행하도록 해야하나요? 이렇게 고민하다보니 도커를 제대로 이해하고 있는지도 모르겠습니다 ㅠㅠ

nest.js 빌드시에 static파일을 dist에 포함시키는법... ㅜㅜ

안녕하세요 ! nest.js를 통해서 nodemailer와 handlebars를 이용해서 이메일 템플릿으로 메일 발송을 작업하고있습니다 ! yarn start:dev 로 실행하면 dist에는 작성한 템플릿파일이 생성되지않아 메일이 발송을 할 수 없는 상황입니다... (직접 파일을 dist폴더에 복붙하면 발송가능..) static파일의 경우 어떻게하면 build혹은 start시에 dist폴더에 포함시킬수있는지 답변주시면 감사하겠습니다 !!!! 현재 static파일의 경로는 /src/config/email-templates 에 위치하고있습니다 ! (똑같이 /dist/config/email-templates 에 위치시키고싶음....) 또한 package.json에 복사 스크립트를 넣어서 nest build && npm run copy 혹은 nest start && npm run copy 이런식으로 실행해도 yarn build때만 실행되고 start에서는 복사가 되지않습니다 ㅜㅜ

flutter 앱 난독화 방법 중 어떤 방법이 더 효율적인가요?

Flutter 앱 개발 중인 학생입니다! 제가 판단했을 때는 앱이 어느정도 갖춰진 것 같아서, 출시를 도전하려고 합니다! 보안도 중요한지라, api key같은 중요한 정보는 디컴파일이나 리버스 엔지니어링으로부터 보호해야 한다고 하더라구요! 프로젝트 firebase-options 파일에 API-Key가 포함되어 있어서 보안 목적으로 난독화를 진행하고 싶은데요! 1. proguard 2. flutter build apk --obfuscate --split-debug-info 제가 잘 몰라서 그러는데, 위 두 방법 중 더 효율적인 방법은 무엇인가요?? 아니면 혹시 1. proguard 파일을 작성 후 2. 터미널 명령어를 이용해서 난독화를 진행하는 건가요?? .env 파일을 이용해서 api key를 숨기는 방법도 있던데, 이 방법은 난독화에 비해서는 보안에 취약한가요?? 고수분들의 도움을 받고 싶습니다!!

깃허브 배포에 관하여

안녕하세요. 사진과 같이 서버폴더와 클라이언트 폴더가 따로 있는 것은 깃허브로 배포를 어떻게 해야 하나요 ..?? 처음에 루트 디렉토리에서 npm build를 했는데 Could not find a required file. Name: index.html 이런 오류가 뜨는데 client > public > index.js가 맞는 경로인데 콘솔에서는 client를 안거치고 public에서 index.js 파일을 찾고 있어서 뜨는 것 같아요 이런 경우는 어찌 해야하는지 ....ㅠㅠ 어떻게 하면 배포가 될까요 ??🥲

신입 고졸 개발자에게 필요한 것이 궁금합니다

저는 이제 25인 된 고졸 개발자입니다 제가 부족한 부분과 더 배워야하는 것 그리고 제 기술로 취업이 가능한지 궁금합니다 제가 사용가능한 기술은 언어 : JAVA, Python, C, html, Javascript 프레임워크 : Spring, Django, Swing DB : Oracle, Mysql, hibernate, JPA 기타 : Spring Security, OOP, gradle.build(kts), Ajax, Aws, Liunx(centOs7, ubuntu) 위 내용정도 프로젝트에 사용해 보았습니다

NodeJS MongoDB driver 설치 후 Typescript build 에러 발생하는 문제

안녕하세요. Node.js 사이드 프로젝트에서 MongoDB 를 사용해보려고 합니다. 설치해서 npm run dev 를 해서 사용하는데는 문제가 없었는데 npm run build 를 하니까 갑자기 167 개의 Typescript 에러가 발생하고 있어요. 로그를 보니 tsc 명령에서 문제가 발생하고 있고 모든 에러의 위치가 node_modules/ 내부로 나오네요. 혹시 mongodb 를 typescript 와 사용하지 못하는 문제가 있는걸까요 ? 아니면 특정 버젼 혹은 @types 모듈을 설치해야 하는걸까요 ? 도와주세요 ㅠㅠ

Spring boot dependency-management 질문

build.gradle파일에서 plugins에 springframework.boot version과 io.spring.dependency-management version의 연관관계가 궁금한데요. boot 버전 2.7을 사용하고 디펜던시 버전를 최신 버전으로 사용해도 외부 라이브러리 버전은 변함이 없던데요. 디펜던시 버전은 최신 버전으로 사용해도 문제가 없는건가요?

Next.js 미들웨어

Vercel를 사용하지 않고 배포해서 Next.js (v13.4)의 미들웨어를 사용해보았는데 잘 작동하지만 공식 문서에서는 edge runtime에서만 가능하다라고 나와있는데 추후에는 vercel를 사용하지 않고 Next.js를 배포한다면 미들웨어는 사용할 수 없는건가요?! 관련 히스토리에 대해 알고 싶습니다. 감사합니다! https://nextjs.org/docs/pages/building-your-application/routing/middleware#runtime

flutter 위젯 빌드 2번 호출되는 현상

안녕하십니까 flutter로 졸업 작품 앱 개발 중인 대학생입니다! 개발 도중 widget build가 2번씩 되는 현상이 발생합니다. build 내부에서 위젯이 return 되기 이전에 특정 함수가 호출되도록 했는데, 그 함수가 2번씩 호출됩니다. 로직에는 아무런 문제가 없구요, 혹시 몰라 디버깅 로그도 찍어봤는데 역시나 2번씩 찍힙니다. 함수가 페이지를 호출하는거라 사실상 같은 페이지 2개가 호출되는 문제라 타격이 큽니다.. 비슷한 문제를 해결한 경험이 있으신 분들의 조언을 듣고 싶습니다!

Flutter 코린이 질문

안녕하세요 지금 플러터로 개발에 발을 담근 코린이 인데요 다른이아니라 Stateless나 Stateful위젯 클래스를 빌드를 하면 Widget build(BuildContext context){ return … } 이 빌드 위젯이 쓰일때가 있는데요 여기서 build가 들어가는 위젯에는 왜 ()괄호 안에 String xxx 같은 변수 타입을 지정하면 빨간줄이 뜨는지 설명 해 주실 고수님들 계실까요? 그리고 해결이 된다면 저 build위젯 안에 String xxx 로 ${xxx} 를 이용하여 재사용 할 수 있는 방법도 알려주실 수 있으신지 여쭤봅니다..!

웹 클라이언트랑 서버 따로 배포하는 방법 알려주실 분

안녕하세요. 프론트엔드 개발자를 희망하는 학생입니다. 항상 프론트만 개발했다가 MERN 스택(mongodb, express, react, nodejs) 강의를 보고 이번에 처음으로 백도 개발하게 되었습니다. 프론트만 개발했을 때는 netlify에 배포했는데 서버는 어디에 배포해야할지, 클라이언트는 그대로 netlify에 배포하고 서버는 따로 배포해도 되는 것인지, 서버 무료 배포 사이트는 어떤 것이 좋은지 궁금합니다. 따로 배포해도 된다면 방법을 알려주시면 감사하겠습니다. 참고로 클라이언트와 서버 폴더가 따로 구성되어 있습니다. App 폴더 안에 client 폴더, server 폴더 이렇게 있습니다. 사진은 server/index.js 사진인데 서버를 client/build/index.js에 연결해놨으니까 그냥 서버만 배포해도 되는지도 궁금합니다.