#node

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 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 **** ************************** 이런 로그가 뜨고 있습니다.

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

Next.js 에서 fluent-ffmpeg 사용 시 에러 해결 가능할까요?

Next.js 에서 puppeteer를 사용해서 특정 url에 접속하여 애니메이션을 png로 100장 정도 캡처하여 생성하고, fluent-ffmpeg를 사용해서 해당 png 이미지들을 mp4 영상으로 만들려고 하는데요. yarn add puppeteer fluent-ffmpeg @ffmpeg-installer/ffmpeg yarn add --dev @types/fluent-ffmpeg 위와 같이 라이브러리들을 설치했구요. 아래 page.tsx 파일에서 코드를 구현했는데요. dev로 실행해서 해당 페이지에 접속을 하면 아래와 같은 에러가 발생하는데요. 해결이 가능할까요?? 다른 라이브러리를 써야할지 구현한 코드가 문제가 있는지 모르겠네요. 도움 부탁드립니다!! # 에러 코드 # 1 of 1 error Next.js (14.2.3) Server Error Error: Cannot find module '/Users/.../animation-capture/node_modules/@ffmpeg-installer/darwin-arm64/package.json' This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack webpackEmptyContext file:///Users/.../animation-capture/.next/server/app/capture/page.js (22:10) eval node_modules/@ffmpeg-installer/ffmpeg/index.js (40:27) (rsc)/./node_modules/@ffmpeg-installer/ffmpeg/index.js file:///Users/.../animation-capture/.next/server/vendor-chunks/@ffmpeg-installer.js (20:1) Next.js eval /./src/app/capture/page.tsx (rsc)/./src/app/capture/page.tsx file:///Users/.../animation-capture/.next/server/app/capture/page.js (286:1) Next.js # 코드 구현부 # import { NextApiRequest, NextApiResponse } from 'next'; import puppeteer from 'puppeteer'; import fs from 'fs'; import path from 'path'; import ffmpeg from 'fluent-ffmpeg'; import ffmpegInstaller from '@ffmpeg-installer/ffmpeg'; ffmpeg.setFfmpegPath(ffmpegInstaller.path); .... 중략.... const outputFilePath = path.resolve("./screenshots/video.mp4"); ffmpeg() .addInput(`${folderPath}/screenshot-%d.png`) .inputFPS(10) .output(outputFilePath) .on("end", () => { res.status(200).send(`Video created successfully at ${outputFilePath}`); }) .on("error", (err) => { console.error("Error generating video:", err); res.status(500).send("Failed to generate video"); }) .run(); } catch (error) { console.error("Error capturing screenshots:", error); res.status(500).send("Failed to capture screenshots"); }

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

documentFragment를 활용하여 리팩토링 하였지만 오히려 속도가 더 느려졌네요. 원인이 궁금합니다.

<select></select> <select></select> <select></select> ... var targetArr = document.querySelectorAll("select"); var optionArr = [ {CODE_NAME: "one", CODE_ID: 1}, {CODE_NAME: "two", CODE_ID: 2}, ... ]; 이런 환경에서 optionArr을 가지고 모든 select에 option을 넣어주려고 합니다. 기존 소스 : targetArr.forEach(function(target) { optionArr.forEach(function(item) { var option = document.createElement("option") option.setAttribute("value", item.CODE_ID); option.innerText = item.CODE_NAME; target.append(option); }); }); 변경 소스 : var fragment = document.createDocumentFragment(); var option = document.createElement("option"); optionArr.forEach(function(item) { var cloneOption = option.cloneNode(); cloneOption.setAttribute("value", item.CODE_ID); cloneOption.innerText = item.CODE_NAME; fragment.append(cloneOption); }); targetArr.forEach(function(target) { target.append(fragment.cloneNode(true)); }); 이렇게 O(nm)으로 동작하던 기존 소스를 O(n)으로 변경하였고 더하여 직접 DOM을 조작하기 보다 documentFragment를 활용하였으니 더 빨라질 것으로 예상하였으나 더욱 느리게 나오더라구요. cloneNode가 문제인 건지... 이유를 모르겠습니다. 알려주시면 감사하겠습니다.

ESLINT 어떤 것을 수정해야 내용처럼 fix 되는 현상을 막을 수 있을까요?

안녕하세요~ eslint, prettier에서 제가 무엇을 잘못했는지 계속 아래처럼 코드가 수정되고 있습니다. const res = (await request) < User > (context, `/users/${id}`); 어떻게 하면 고칠 수 있을까요? 1. (await request) 소괄호 제거 2. < User > 제너릭 사이 공백 제거 결론: const res = await request<User>(context, `/users/${id}`) 로 만들고 싶습니다.. 아래는 eslint 적용한 내용 입니다. ``` //eslint.config.js module.exports = { env: { browser: true, es2021: true, }, extends: [ 'plugin:react/recommended', 'airbnb', 'plugin:storybook/recommended', ], parser: '@typescript-eslint/parser', parserOptions: { project: ['./tsconfig.json'], ecmaVersion: 2018, sourceType: 'module', createDefaultProgram: true, }, plugins: ['react', '@typescript-eslint', 'prettier', 'import'], rules: { 'react/react-in-jsx-scope': 'off', 'react/jsx-props-no-spreading': 'off', 'import/prefer-default-export': 'off', 'implicit-arrow-linebreak': 'off', 'react/jsx-filename-extension': [ 2, { extensions: ['.js', '.jsx', '.ts', '.tsx'], }, ], 'object-curly-newline': [ 'error', { ObjectPattern: { multiline: true, minProperties: 2, }, ImportDeclaration: 'never', ExportDeclaration: { multiline: true, minProperties: 3, }, }, ], 'import/extensions': [ 'error', 'ignorePackages', { js: 'never', mjs: 'never', jsx: 'never', ts: 'never', tsx: 'never', }, ], 'import/order': [ 'error', { alphabetize: { order: 'asc', }, groups: [ 'builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type', ], }, ], 'import/no-unresolved': 'off', }, settings: { 'import/resolver': { typescript: { alwaysTryTypes: true, }, node: { paths: ['src'], }, }, }, }; ```

마이크로 프론트 구현(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 로 바꿨습니다.

안녕하세요 취준생 부트캠프 관련 질문이 있습니다.

컴공 전공생 이번에 졸업합니다 분야 : 백엔드 , si도 상관없습니다. 자격증 : 정보처리기사 한개 목표 : 일단은 중하급 회사부터 가고싶습니다 . 수준 : 간단한 프로젝트 정도만 가능 , 백준 솔브드는 실버 정도 제가 찾아본 부트캠프가 1) 구름톤 1기 웹 백엔드 부트캠프 https://kdt.goorm.io/?utm_source=google&utm_medium=cpc&utm_campaign=basic&utm_term=%EC%BD%94%EB%94%A9%20%EB%B6%80%ED%8A%B8%20%EC%BA%A0%ED%94%84%20%ED%9B%84%EA%B8%B0&gclid=CjwKCAiAkp6tBhB5EiwANTCx1Bz8Ug4C8XGtv25c6OfhNX3x6Mwz30Umt62_DVM-NYbpwXqh_DGWlRoCwusQAvD_BwE 2) 프로그래머스 (React . node) 하는 부트 랑 https://school.programmers.co.kr/learn/courses/20814/20814-2%EA%B8%B0-k-digital-training-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-%ED%95%A8%EA%BB%98%ED%95%98%EB%8A%94-%EC%9B%B9-%ED%92%80-%EC%82%AC%EC%9D%B4%ED%81%B4-%EA%B0%9C%EB%B0%9Creact-nodejs?utm_campaign=school_20814_main&utm_content=20814_txt&utm_medium=AD&utm_source=boottent 3) 네이버 클라우드 캠프 ( 백엔드 + 데브옵스 ) 인데 https://ncamp.kr/?utm_source=BootTent&utm_medium=231201_Ncamp_Devops_BootTent_TitleTag_AD&utm_campaign=231201_Ncamp_Devops_12_19.29_Open_BootTent_Title_AD&utm_id=231201_Ncamp_Devops_BootTent_TitleTag_AD 커리큘럼이 좋은건지 아닌건지 구분이 안가서 궁금합니다.

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.

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

모노레포 프로젝트 환경 및 요구사항 - 프로젝트는 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 * 프로젝트의 중요 정보는 제외했습니다.

템플릿 <<연산자 오버로딩이 궁금합니다.

template<typename E > class Node { public: Node() : next(nullptr), prev(nullptr) {} bool operator<(Node N) { return N.data < data; } bool operator>(Node N) { return N.data > data; } template<typename E> friend ostream& operator<<(ostream& os, const Node<E>& N) { os << N.data; return os; } private: E data; Node<E>* next; Node<E>* prev; friend class LinkedList<E>; }; 다른print 함수{cout<<Node객체.data} 이렇게 E타입의 data를 <<로 출력해야 하는데 [ C2679 이항 '<<': 오른쪽 피연산자로 'const E' 형식을 사용하는 연산자가 없거나 허용되는 변환이 없습니다. ] ​ 자꾸 위와 같은 오류가 뜹니다... 그래서 template<typename E>를 연산자 오버로딩 앞에 붙여봐도 ​ [ C2995 'std::ostream &operator <<(std::ostream &,const Node<E> &)': 함수 템플릿이 이미 정의되었습니다. ] 이런 오류가 발생하구요. 템플릿 타입을 <<로 어떻게 출력하나요??

[node.js] 세션을 이용한 로그인 구현 중 브라우저 쿠키의 maxAge 초기화 안 되는 문제 발생

Node.js(v18.17.0) + TypeScript로 개발을 진행하고 있습니다. express 로 서버를 구축했고, express-session , session-file-store 라이브러리를 사용해서 로그인 기능을 구현했습니다. 제가 원하는 것은 세션 만료 시간을 연장하는 기능을 만드는 것인데... 서버에서는 세션 쿠키 만료 시간이 재설정(초기화)가 되는데 브라우저에 저장된 쿠키 만료 시간은 그대로인 상태라 연장이 되지 않습니다. 처음 제 코드는 이렇습니다. ```ts export const extendSession = async (req: Request, res: Response) => { req.session.resetMaxAge(); res.json({ success: true, message: '세션 연장 성공', expiredTime: req.session.cookie.expires.getTime(), }); }; ``` 이런 식으로 resetMaxAge() 함수를 통해서 만료 시간을 연장할 수 있을거라 생각했습니다. (트라이캐치문은 생략하였습니다.) 콘솔에 값을 확인해봤을 때에도 연장이 잘 된 것으로 보이는데 브라우저에 저장된 쿠키의 만료 시간을 확인해보면 최초의 쿠키 값 그대로였습니다. 이를 해결하기 위해서 만료 시간을 따로 정해서 줘보기도 했습니다. `req.session.cookie.maxAge = 3600000;` 하지만 마찬가지로 세션 쿠키의 만료 시간은 바뀌지만 브라우저에 저장된 쿠키의 expires가 변하지 않았습니다. 따로 헤더를 줘보아도 새로운 쿠키가 생성될 뿐 해결책이 되지 않았습니다. `res.setHeader('Set-Cookie', 'Max-Age=3600000')` express-session 미들웨어가 자동으로 set-cookie 헤더를 설정해주어서 제가 여기에 어떻게 접근할 수 있을지 모르겠습니다. 브라우저의 쿠키가 초기화 적용을 받지 못하는 것이 문제인 것 같은데... 원인은 대충 알 것 같으면서 해결책을 모르겠습니다. session 설정은 이렇습니다! ```ts app.use( session({ secret: process.env.SESSION_SECRET_KEY, resave: false, saveUninitialized: false, cookie: { sameSite: 'lax', secure: false, httpOnly: true, maxAge: 1000 * 60 * 5, }, store: new FileStore({ reapInterval: 3000, }), }), ); ```

next.js 특정 페이지에 컴포넌트 미출력 기능 구현 이슈(use client 사용)

로그인페이지(/user-page)에서 footer컴포넌트를 안띄우는 기능을 구현하고 싶어 footer 컴포넌트를 csr 방식으로 사용하도록 'use client' 줬습니다. 근데 error ReferenceError: window is not defined 라는 에러가 뜨면서 적용이 안되네요ㅠㅠ nextjs는 ssr이니까 window에 접근하기 위해선 'use client'를 주면 된다고 들었는데 왜 안되는걸까요?? 찾아보니까 useEffect 쓰라해서 useEffect도 써봤는데 에러가 뜨진않지만 여전히 적용안되더라구요. 문제점 알려주시면 감사하겠습니다ㅠㅠㅠ <footer.tsx 파일> 'use client' import React, { useEffect } from 'react' import style from '../styles/footer.module.scss' const Footer = () => {     if (window.location.pathname === '/user-page') return null return ( -생략- ) } <루트 layout.tsx 파일> 'use client' export default function RootLayout({     children, }: {     children: React.ReactNode }) {   return (         <html lang="ko">             <body className={inter.className}>                 <div className="wrap bg-white">                     <Header />                     {children}                     <Footer />               </div>             </body>         </html>     ) }

mediasoup를 ELB 환경에 적용하여 배

안녕하세요 mediasoup를 이용해서 웹개발 프로젝트를 진행중인 백엔드 개발자 (초보자/갓 배우는중) 입니다. 말그대로 1:N 화상채팅이 포함된 기능을 구현중인데, mediasoup가 ELB배포환경에서 작동하고 있지않아서 여기에 질문올려봅니다ㅜㅠ 아래, 시도해본것과 상황 등을 정리해본 내용을 첨부합니다! 제가 뭘 더 확인해볼수있을까요ㅜㅠㅠ?? 답변주시면 정말감사합니다!! (현재 nodejs로 express이용해서 백서버 구성하고있습니다!) -------------------------------------------------------------------------------- [상황] -> 1:N 화상통화 구현을 위하여 mediasoup를 이용 -> local에서 잘 작동 -> docker 로 local에서 돌리면 잘 작동 (announceIP를 도커 기본 IP "127.17.0.1"로 작동) -> front-vercel배포, server-local 잘 작동 -> server에서 비디오와 오디오를 보내주고 있지 않는 상황 [예상하고있는 문제] -> mediasoup는 연결이 완료되면 2000-2020 포트로 video를 보내주는데, 이부분 포트가 안열리는게 아닐까? -> announceIP에 적절한 IP를 넣지 않아서 안열리는게 아닐까? [배포환경] alb application loadbalance + docker [열어본 port 2000-2100; 2000-2100/udp] - EC2 - Elastic beanstalk 리스너 - proxy (nginx) - docker [시도해본 예상 announce Ip] - EC2 publicIP - dockerIp [mediasoup 공식문서] https://mediasoup.org/documentation/ [참고한 mediasoup영상 및 깃헙] => 유트브 https://www.youtube.com/watch?v=oCzq82xVnkU => 깃허브 https://github.com/jamalag/mediasoup3 [현재 깃허브] https://github.com/4simsimhae/Back - mediasoup4 branch 입니다! [배포된 server 링크] https://simsimhae.store/ [mediasoup test URL] https://simsimhae.store/sfu/:roomId (같은 roomId면 화면이 공유되어야합니다)

next.js 12version setting (npx create-next-app@12 my-next-app) 12버전이 설치되지 않는 이유

현재 회사에서 사용하는 next.js 12버전으로 기술 학습을 하려합니다. 그러나 아래와 같은 에러가 계속 발생하는데요, error next@14.0.4: The engine "node" is incompatible with this module. Expected version ">=18.17.0". Got "16.14.2" error Found incompatible module. info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command. 12버전으로 설치하려는데 자꾸 14버전이 설치가 되면서 node version 에러가 뜨고 있습니다.. 저는 node 16.14.2를 사용중이며, 사측도 동일하게 해당 버전을 사용중입니다. 초기 세팅과정에서 next.js 12버전으로 세팅이 안된다고 판단하고, next.js 12로 다운그레이드 하려면 14버전으로 설치 후에, 다운그레이드를 시도해보았으나 "Detected next.config.js, no exported configuration found" 터미널에 해당 에러가 발생되었습니다. 제가 너무 답답한 부분을 요약하겠습니다. 1. next.js 12버전 초기 세팅이 안된다고 판단. 이후 next.js 최신 14버전 설치 ➡️ 실행하면 잘 작동함. 2. 최신 14버전에서 12버전으로 버전을 낮추고 실행하면 next.config.js에서 문제가 발생함 혹시 최근에 next.js 12버전으로 초기세팅 되신 분이 계실까요..😢

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'); 의 차이도 궁금합니다.

createRoot를 import하는데 에러메시지가 표시됩니다

create-react-app을 사용해서 앱을 만들고 있습니다. React 18로 업데이트하고 최상위 index 파일을 다음과 같이 수정했는데 // index.js import React from 'react'; import ReactDOM from 'react-dom'; import { createRoot } from 'react-dom/client'; import App from './App'; const rootNode = document.getElementById('root'); const root = ReactDOM.createRoot(rootNode); root.render( <React.StrictMode> <App /> </React.StrictMode> ); "Warning: You are importing createRoot from 'react-dom' which is not supported. You should instead import it from 'react-dom/client'"라는 에러메시지가 표시됩니다. createRoot를 사용하도록 수정하는 게 아닐까요? 대안이나 해결방법이 있을까요?

nextjs에서 랜더링 시점 바꾸기

안녕하세요! nextjs 프로젝트 진행중에 궁금증이 생겼습니다. 현재 Sidebar 컴포넌트에서 카카오맵이 불러와져야 작업을 할 수 있는 상태입니다. 카카오 맵은 children 에서 랜더링되기 때문에 아래와 같이 코드작성시, Sidebar 랜더링 시점에 kakao is not defined 라는 오류가 뜹니다. 혹시 Sidebar를 좀 늦게 랜더링 할 수 있을까요? export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body className={inter.className}> <div id="login-modal" /> <section className="flex h-screen"> <nav className=" h-full bg-slate-100"> <Sidebar /> </nav> {children} </section> </body> <Script src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${APIKEY}&libraries=services,clusterer`} strategy="beforeInteractive" /> </html> ); }

micro repo 세팅하면서 격은 문제(같은 문제 격는 분들 댁글)

이번 프로젝트에서 하나의 레포지토리에서 client, server, admin, common 4가지 패키지를 만들었습니다. client, server, admin은 common을 의존하도록 모노레포로 만들었고, client는 admin을 의존할 수 있게 micro로 만들었습니다. 간단한 패키지 설명: - client: 메뉴 헤더 등 구현, 페이지는 admin을 remote 해서 사용, React로 구현 - admin: 페이지에 나오는 콘텐츠의 전반적인 부분이 컴포넌트로 되어있음, React로 구현 - server: Node.js로 되어있고 실제 Spring 서버에서 준 데이터를 포맷하는 형태 - common: 공통 컴포넌트, 라벨 등 문제1: 다른 프로젝트에서 expose 되어있는 Next.js 프로젝트(scss로 스타일 구현)를 client에서 사용할 때 의존성 관련 오류가 생깁니다. client의 package.json에서 peerDependencies로 next를 설정해줘야 하는지, 양쪽 패키지(다른 프로젝트와 client)에서 Next.js와 React를 share 설정을 해야 되는지 잘 모르겠습니다. 여러 방법으로 시도는 해봤지만 의존성 오류나 Next.js에서 훅을 사용 못하는 오류 때문에 해결하지 못하고 있습니다. 문제2: 빌드 최적화를 위해 트리쉐이킹이나 코드 스플리팅을 해야 합니다. 웹팩에서 아래와 같이 코드 스플리팅을 하면 청크 파일 이름이 겹치기 때문에 filename을 해시값으로 설정해야 합니다. 여기서 문제가 생기는데, micro의 client처럼 remote 하는 부분에서 remote.js, app.js 청크가 필요하기 때문에 이름이 해시값으로 바뀌면 해당 청크를 찾을 수 없습니다. 또한 ModuleFederationPlugin이 빌드 시 자동으로 코드 스플리팅을 해준다는 이야기도 있는데, 이 부분은 정확하지 않습니다. 저와 같은 문제를 격고 있거나 해결하신 분들 같이 나눴으면 합니다.

프론트엔드 개발자를 지망하는 취준생인데 이력서에 뭐가 부족한 것일까요?

5월 19일에 국비 부트캠프를 수료한 후 현재까지 5개월 동안 구직 활동을 하고 있는 취준생입니다. 현재까지 100군데 넘게 스타트업, 중소, 중견, 대기업 가리지 않고 다 지원했는데 면접은 커녕 서류 통과가 되는 곳이 한 군데도 없습니다. 취업에 먼저 성공했던 동료 취준생과 디스코드의 개발자 커뮤니티를 통해 이력서를 수정하고 있는데 현재 맞게 진행되고 있는지 긴가민가 합니다. 그래서 여기 계시는 현직자 분들한테 피드백 요청드리고자 합니다. 가감없는 솔직한 평가 부탁 드리겠습니다. 1. 이력서 제목: '이력서 | 안녕하세요, 정연준입니다!' -부족해도 멈추지 않는 개발자 -아는 것과 모르는 것을 구분할 줄 아는 개발자 2. 자기 소개: `안녕하세요, 신입 React 프론트엔드 개발자 정연준입니다. -시행 착오를 통해 성장해나갑니다. -잘하는 것과 부족한 것을 구분하여 잘하는 것을 부각시키고, 부족한 것을 채울려고 노력하는 개발자가 될려고 합니다. -좋은 서비스와 더불어 사용자가 편하게 이용할 수 있는 서비스를 만드는 것을 목표로 하고 있습니다. ` 3. 개발 직무: 프론트엔드 개발자 4. 프로젝트: -기간: 2023.04.17 ~ 2023.05.19 -서비스 제목: One-Line -한 줄 요약: AI모델이 사용자가 작성한 게시글을 한 줄 요약 및 제목 생성 -프로젝트 종류: 팀 프로젝트 -역할: 프론트엔드 파트(메인 페이지 게시글 목록 전체 조회, 인증 페이지 구현) *메인페이지 게시글 목록 전체 조회 1) Trending 섹션 2) Recent Posts 섹션 *메인 헤더(Global Navigation 메뉴) *인증 페이지에 Firebase Authentication 기능 적용 5. 교육 이력: -기간: 2022.11.28 ~ 2023.05.19 -주관 기관: 엘리스 -교육 프로그램 이름: 엘리스 AI트랙 6기 -학습한 기술 스택: React, Express.js, MongoDB, HTML5, CSS3, JavaScript, GitLab, Python, MySQL, TensorFlow, Pandas, Node.js -세부 사항 *JavaScript 1) JavaScript 기초 2) 싱글 스레드, Event, Promise 개념 숙지 *React 1) React 기초 *Express.js 1) Express.js 기초 *MongoDB + Mongoose 1) DBMS 기초 2) MongoDB, Mongoose 기초 *데이터 분석 1) Python, SQL 기초 2) Pandas 기초 *인공지능 1) 데이터 과학 기초 2) 이미지 처리 기초 6. 링크 -프로젝트 링크: https://10team.vercel.app/ -프로젝트 시연 영상: https://drive.google.com/file/d/16Qni0swyC8HbAY2iqnEy5QWze9ianjln/view?usp=sharing -개인 블로그: https://chadolbaegi128.tistory.com/

mongoDB Data API 사용시에 string 날짜를 Date 타입으로 insert 하는 방법?

안녕하세요 해결책이 도저히 떠오르지 않아 커리어리에 질문을 올립니다.. nodejs, axios를 사용해서 mongoDB Data API 요청을 하고 있습니다. 다음과 같은 데이터 타입을 insert 하려고하는데 문제가 있습니다. 데이터 타입 예시 { collection: 'myCollection', database: MONGODB_DATABASE, dataSource: MONGODB_DATA_SOURCE, documents: myDocuments.map((doc) => ({ ...doc, insertedAt: new Date(), })), }; new Date()로 보낸 insertedAt 값을 mongDB에서 확인하면 Date 타입이 아닌 string값으로 저장됩니다. axios가 요청할 때 Date를 string으로 파싱해서 그런 것 같은데 Date타입 자체로 몽고DB에 저장할 수 있는 방법이 없을까요? 이것 때문에 다 구현해놓고 시간을 엄청 사용하는 중입니다.. 해결해 보신분 답변 부탁드립니다!

[사이드 프로젝트] 패션 이커머스 플랫폼 '푸츠(PUTS)' 앱 개발팀 모집

프로젝트 소개: ‘푸츠(PUTS)_Pick Up The Style!’서비스는 패션 디자이너 브랜드를 중심으로 BM특허까지 보유한 혁신적인 패션 커머스 플랫폼서비스 입니다. 데모버전까지 외주개발을 통해 개발이 완료되었지만 현시점에서 리뉴얼하여 새롭게 런칭버전을 개발하고자 역량있는 팀원을 모집합니다. <참고> 본 서비스의 시장성은 2024년 약 19조 5천억원(캐주얼) 정도의 시장성을 예상하고 있으며 연간 약 3.5%씩 지속적으로 성장 중에 있습니다. 3-5년이내 시장의 10%이상 점유를 목표하고 있으며 시장을 장악 가능한 비즈니스 모델과 마케팅 능력을 보유하고 있습니다. (참조: https://global.fashionseoul.com/2023-11-10/Korean-Fashion-Market-Size-Anticipated-Highest-Growth-Ever) 우리는 패션과 기술을 접목해 사용자와 소비자에게 최상의 쇼핑 경험과 정보 공유, 소득을 제공하는 서비스로 패션산업의 큰 파도를 함께 일으킬 분들을 모집합니다. 사이드 프로젝트 형태로 진행되며, 유연한 근무 환경에서 협업을 지향합니다. 3-5년이내 엑싯을 목표로 진행됨으로 임금지급 방식이 아닌 지분분배 방식으로 진행됩니다. 프로젝트 완료시 파트별 기여도에 따라 지분설정이 되며 관련 내용은 프로젝트 진행 전 협의를 통해 산정하여 계약진행 예정.(급여를 제공 받고자 하시는 분은 정중히 사양합니다.) 모집 직군: 1. 프론트엔드 개발자 (1~2명) o 주요 업무: 모바일 앱 UI/UX 구현, 웹 랜딩페이지, 사용자 인터페이스, 어드민 프론트엔드 개발 o 기술 스택: React Native 또는 Flutter, JavaScript/TypeScript, HTML/CSS o 우대 사항: 모바일 퍼포먼스 최적화 경험, 패션 커머스 개발 경험 2. 백엔드 개발자 (1~2명) o 주요 업무: 서버 및 데이터베이스 설계, API 개발, 어드민 백엔드 개발 o 기술 스택: Node.js, Django, AWS, PostgreSQL, RESTful API o 우대 사항: 대용량 트래픽 처리 경험, 보안 및 결제 시스템 개발, 이커머스 어드민개발 경험, 포인트관리 및 쿠폰설정 관리 등 3. UI/UX 디자이너 (1명) / 대표자와 함께 진행 또는 대표자가 진행 o 주요 업무: 모바일 앱 디자인, 사용자 경험 설계 o 필수 스킬: Figma 또는 Photoshop, Illustrator o 우대 사항: 패션 브랜드 디자인 경험, 사용성 테스트 및 피드백 반영 경험 근무 형태: • 프로젝트 기반 협업 (파트타임 가능) • 원격 근무 가능 (주 1회 온라인 미팅) • 유연한 일정과 주도적인 업무 환경 우대 사항: • 사이드 프로젝트 경험 • 패션, 커머스에 대한 관심과 열정 • 스타트업 문화에 익숙한 분 • 책임감 강하신 분 지원 방법: • 이력서와 포트폴리오를 [dcode00@naver.com]로 제출 • 지원 시 사이드 프로젝트 경험 및 참여 가능 시간을 명시해 주세요. 문의: • 이메일: [dcode00@naver.com] • 카카오톡/오픈채팅방: [https://open.kakao.com/o/gi5ixgVe] • 회사주소: 경기도 안산시 상록구 한양대학로55 제2과학기술관 지하2층 B210호 (한양대학교 에리카캠퍼스 소재) 지원 마감일: [채용 완료시까지] 로켓펀치 참여링크 https://www.rocketpunch.com/jobs/139647 문의: • 이메일: [dcode00@naver.com] • 카카오톡/오픈채팅방: [https://open.kakao.com/o/gi5ixgVe]

자바스크립트 협업시 궁금한 점이 있습니다!

자바스크립트로 프론트 1명과 백엔드 1명이 협업으로 토이프로젝트를 한다고 가정했을때요, (포폴용 협업 플젝 느낌..) nodejs랑 express로 port 설정해서 app.use() 같은 작업은 백엔드가 하는건가요..? 혼자 프로젝트를 하면서 프론트부터 nodejs 까지 다 만지다보니.. 뭔가 좀 구분하는게 어렵습니다.. 예를들어, router.js 파일에는 app.route("/board").get(function).post(function2); 이런 코드가 있고 controller.js 파일에는 const renderBoard = () => { return res.render("board"); }; 이렇게 board를 render 해주는 코드가 있다고 치면요.. renderBoard 함수는 말 그대로 board라는 템플릿을 화면에 뿌려주는거니까 프론트 개발자가 작업하고 app.route ~ 코드는 서버와 통신하는거니까 백엔드가 작성하는건가요?? 그래서 협업할 땐, 프론트 왈: "야 /board get 할때 함수 이름 function이고, post 할땐 function2다" 아니면 반대로, 백엔드 왈: "야 /board get함수 이름 function 이고 post는 function2 니까 헷갈리지 말고 짜라!" 라고 말하는건가요... 죄송합니다.. 말로 설명하면 깔끔할 것 같은데 글로 쓰니까 좀 이상하네요... restful api가 결국엔 서버와 통신을 하기 위한건데.. 만약, route하는 코드부터 get, post할 때 작동할 function 까지 전부 백엔드가 작업하는거라면, 프론트는 html, css + 동적웹을 위한 js를 해주면 되는건가요? 제가 배운거로는.. pug같은거 사용해서 템플릿 뿌려준다거나, scss를 적용한다거나.. 물론 이때 필요한 npm 사용법이나, package.json 설정법 등은 프론트가 해야겠죠!! 아직 협업 경험이 없다보니.. 실제로 협업을 하게되면 어떻게 업무를 나누는지 궁금합니다. 글이 좀 두서없네요. 아으.. 근데 이 뭔가 가려운 부분을 긁어주고싶습니다ㅜㅜ 선배님들 조언 부탁드립니다.. 답변 미리 감사드립니다!!!

next.js getServerSideProps 관련해서 질문드립니다.

1. getServersideProps(serverless function)는 동적인 컨텐츠를 제공해야하기 때문에 정적인 콘텐츠를 전달해주는 cdn를 거칠 수 없다고 알고 있습니다. 그래서 vercel origin 서버까지 통신을 거쳐서 콘텐츠를 전달 받기 때문에 TTFB가 느릴 것 같다고 생각했는데 여기까지 맞는 생각인가요? 2. next.js v13에서 edge(cdn)에서 동적인 콘텐츠를 받아올 수 있게 하기 위해 세그먼트 런타임 옵션(https://beta.nextjs.org/docs/rendering/edge-and-nodejs-runtimes#segment-runtime-option)을 통해 nodejs 대신 edge runtime으로 설정해주면 serverless function이 edge function이 되는건가요? 3. 커리어리 홈화면을 보니 getServersideProps를 사용하고 있고 pre-rendering는 간단한 골격만 하고 pre-fetch는 안해주고 있는것 같은데, 새로고침 했을때 TTFB를 300ms 정도로 유지할 수 있는건지가 궁금합니다! 저는 프로젝트 규모가 크지않은데도 불구하고 가끔씩 새로고침을 하면 TTFB가 1초이상 걸릴 때도 있거든요.. 어떻게 적용했는지 알려주신다면 큰 도움이 될 것 같습니다! 🙇🏻‍♂️

WSL 주피터노트북 실행시 메시지 원인

ipped non-installed server(s): bash-language-server, dockerfile-language-server-nodejs, javascript-typescript-langserver, jedi-language-server, julia-language-server, pyright, python-language-server, python-lsp-server, r-languageserver, sql-language-server, texlab, typescript-language-server, unified-language-server, vscode-css-languageserver-bin, vscode-html-languageserver-bin, vscode-json-languageserver-bin, yaml-language-server 라는 메시지가 wsl 주피터 실행시 자꾸뜨는데 원인이뭔지모르겠어요ㅠㅠ 커널이자꾸죽는이유와도 연관있을까요

Java Spring vs Node.js

안녕하세요 서울 수도권 대학교 3학년 재학중이며 내년 4학년 재학 이전 기업 인턴을 희망하고 있는 학생입니다. 최근 클라우드 네이티브에 관심이 생겨 관련 국비지원교육을 수료하고 CKA 자격증을 취득한 상태입니다. 또한 최종적으로는 백엔드 개발자가 아닌 클라우드 엔지니어로 커리어의 목표로 설정하고자 합니다. 더 정확하게는 백엔드 개발자로 시니어 개발 경험을 쌓고 MSA를 이해하고 최종적으로는 SE, 클라우드 엔지니어 분야로 경험을 쌓고 싶습니다. 또한 이러한 상황에서 내년 상반기 및 졸업 이후의 진로에 도움이 될 수 있도록, 이력서를 작성하고 미리 자기소개서를 작성하려고 합니다. 중학교 시절부터 컴퓨터에 관한 공부와 사이드 프로젝트로 여러 경험을 해오며 해당 글의 제목의 논제를 여러번 접하고 저 스스로도 많은 고민을 해온 상태입니다. 이전까지 군을 제외하고 3년동안 Express.js와 NoSQL을 위주로 다양한 초기 창업 팀에서 여러 종류의 프로젝트들을 진행해왔으며 FE, AI Serving 서버의 경우 ChatGPT를 활용한다면 초보적인 수준으로 개발이 가능합니다. 하지만 곧 취업 시장에 뛰어들 시기가 되니 많이 부족한 스스로보다는 여러 개발자 선배님들의 의견을 여쭈어보고자 해당 글을 작성하게 되었습니다. Java Spring에 대해 현재 제가 접한 정보는 다음과 같습니다 - 기존의 시스템을 변경하기 어려운 (중견기업 이상, 금융권) 등의 기업에서는 기존 Java Spring을 활용하는 것이 유리하며, 개발자에 대한 수요도 더 높다 - 대규모 시스템을 관리하고 개발하기 적합하다 - 규모가 큰 기업의 시스템은 다른 프레임워크로 변경되기 어렵다 Node.js에 대해 현재 제가 접한 정보는 다음과 같습니다 - Nest.js와 Typescript로 Node.js 프레임워크들의 문제를 해결했지만 아직 안정성이 떨어지며 개발자가 별도로 Spring에서의 기능들을 구현해야 한다 - MSA 형태의 서비스를 개발하는 기업에서는 Node.js 프레임워크에 대한 수요가 높다 - 스타트업과 같이 신사업을 Agile하게 개발하는 기업에서는 Node.js를 활용하는 것이 유리하다 하지만 커뮤니티 (검증되지 않았습니다) 등의 의견으로는 '이름있는 기업을 목표로 한다면 Node.js를 커리어의 시작으로 가져간다면 불리하다', 'Java Spring은 대기업, Node.js는 스타트업'과 같은 의견이 많아 프레임워크와 언어는 도구일 뿐이지만 더 효율적인 도구를 선택하고자 하는 마음에 아래와 같은 질문을 드리고자 합니다. 1. 현재 공고를 조사해봤을 때 Java Spring보다는 적지만 인지도가 높은 곳과 비교적 낮은 곳의 Node.js (Express.js, Nest.js)의 인턴 공고가 존재했습니다. 추후 커리어를 위해 꼭 중견기업 이상이 아니더라도 해당 기업에서 활동하는 것이 좋을까요? 2. Node.js를 선호하는 이유는 '시간', '취향'입니다. Node.js관련 경험들이 비교적 많으며 (+스크립트형 언어) 코드 스타일이 Java에 비해서 저와 더 잘 맞는다고 느꼈습니다. 또한 새로운 프레임워크를 배우고 적용하는데의 시간이 부족하다는 생각이 듭니다. 해당 이유들이 현 취업시장에서 Java Spring을 선택하지 않는 이유가 되기에는 비합리적일까요? 3. 개인적으로 어떠한 서비스를 개발하는데에 있어 처음부터 제작하고 배포까지 경험해보고자 합니다. 따라서 스스로 스타트업, 혹은 중견기업 이상의 신사업 팀이 더 맞는다고 생각하지만 연차가 쌓이며 저 스스로가 더 큰 시스템과 기업이 아니라 초기 스타트업에 머물게 될 것이라는 불안감이 존재합니다. 더 정확하게 말씀드리자면 더 좋은 기업으로의 이직 자체가 추후 불가능해질 수 있다는 불안감이 있습니다. 해당 부분에 대해서 어떻게 생각하시나요? 3. 앞으로의 Serverless, MSA의 관점에 대해서 어떻게 생각하시나요? 만약 최종적으로 클라우드 엔지니어를 희망한다면 Java Spring 혹은 Node.js 중 어떤 프레임워크가 더 트렌디해질 것이라고 생각하시나요? 4. 만약 Java Spring을 배우는 것이 더 전략적이라면 현재 진행하고 있는 스타트업 프로젝트의 서버를 Node.js에서 Spring으로 변경하는 것이 좋을까요? 물론 연차가 쌓이고 더 깊은 지식을 쌓아나가면 언어, 프레임워크 모두를 잘 다룰 수 있게 되겠지만 '한국에서 Node.js는 불리하다'는 의견을 계속 접하게 되니 불안감이 생겨 '신입 개발자로 어떤 역량을 가져야 할까'하는 고민으로 이 글을 작성하게 되었습니다. 부족한 점이 많지만 너그럽게 봐주시면 정말 감사하겠습니다. 소중한 시간 내주셔서 정말 감사합니다!

mongoose 참조 관련 질문입니다. (수정)

nodejs, mongoose, mongodb 그리고 데이터 확인용으로 mongodbCompass를 사용중임을 알립니다. 현재 A,B 컬렉션이 있고, A 가 B를 참조하고 있습니다. B컬렉션에서 데이터를 삭제하면 B컬렉션에서 삭제되고 로그를 찍어보면 정상적으로 A컬렉션에서도 참조하고 있는 B 데이터가 빠지는 걸 확인했는데 mongodb Compass에서는 바뀌지 않습니다. 원래 mongodb compass에서 느리게 처리되는 건지 살짝 멘붕이 와서 질문드립니다.. -------------------------------- 현재까지 실험결과 B컬렉션 데이터 2개 추가 시 -> A 컬렉션에 대해 findById 결과 --> B 데이터 2개 추가 -> A 컬렉션에 대해 findOne({_id:_id}) 결과 --> B 데이터 2개 추가 B컬렉션에 대해 데이터 1개 삭제시 -> A 컬렉션에 대해 findById 결과 --> B 데이터 1개 , (1개 삭제) -> A 컬렉션에 대해 findOne({_id:_id}) 결과 --> B 데이터 2개 (삭제 x) -> mongoCompass -> B 데이터 1개 , A가 참조하는 B 데이터 2개 (삭제 x) 추가로 B컬렉션 데이터 1개 추가 시 -> A 컬렉션에 대해 findById 결과 --> B 데이터 2개 , (1개 추가) -> A 컬렉션에 대해 findOne({_id:_id}) 결과 --> B 데이터 2개 (이전 1개 삭제후 새로운 참조 데이터 추가 됨 ) -> mongoCompass -> B 데이터 2개 , A가 참조하는 B 데이터 2개 (이전 1개 삭제후 새로운 참조 데이터 추가 됨) stackoverflow 와 mongoose 공식문서를 참고했습니다만 이유는 잘 모르겠습니다.. 코드도 같이 첨부하겠습니다.

카페24 웹호스팅 중 cors에러 관련 질문입니다.

정부 지원사업으로 3개월짜리 인턴십 진행중인 신입개발자 입니다. 현재 회사에는 시니어 개발자나 선임 개발자가 없어서 정말 초짜 백엔드 1명, 프론트 1명이서 프로젝트르 진행중입니다. node.js - react로 구현한 웹페이지를 카페24 웹호스팅을 통해 배포중입니다. (호스팅 : node.js 호스팅 일반형 / 도메인: htcoummunity.cafe24app.com) 배포된 웹페이지를 테스트 도중 cors에러를 만났습니다. 상황= 로그인 버튼을 누르면 로그인 정보를 체크하는 API가 cors에러로 인해 응답을 받아오지 못하고 있습니다.(모든 api가 안됩니다.) 에러메세지= Access to fetch at 'http://localhost:8001/api/signup/checkuser' from origin 'http://htcoummunity.cafe24app.com' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`. POST http://localhost:8001/api/signup/loginEmail net::ERR_FAILED 자체적인 분석으로는 'http://htcoummunity.cafe24app.com' 가 public IP이기 때문에 로컬호스트로 요청하는 api는 리소스의 Private 수준이 더 높기때문에 cors정책에 의해 막힌 것이라고 해석했습니다. 하지만 적절한 해결책은 찾지 못하고 있습니다. Proxy설정까지는 시도해봤지만 문제가 해결되지는 않았습니다. 인턴십이 이제 3일정도 남아서 배포만이라도 깔끔하게 마무리하고 싶은데 해결이 되지 않고 있습니다. 부디 해결책을 제시해주시면 감사하겠습니다!