#npm

질문 10
해시태그 없이 키워드만 일치하는 질문은 개수에 포함되지 않아요.

2일 전 · 익명 님의 질문 업데이트

vscode 메모리, 디스크 터짐 방안

https://www.compuzone.co.kr/product/product_detail.htm?ProductNo=1163545 안녕하세요! 위 링크의 데스크탑을 사용하고있는데, 따로 스펙을 추가하진 않았습니다. vscode로 개발중인데 pnpm run dev하고나서 컨트롤 c하면 로컬이 꺼지잖아요? 이때 메모리가 8000mb까지 올라가고 디스크도 95%까지 올라갑니다 ㅠㅠ 메모리가 한 번 올라가면 디스크가 터지려고 그래여.. 확장프로그램 다 끄고 pnpm run dev+ 컨트롤 c 했다하면 이럽니다... 그래서 제품사양이 문제인 건지, 만약 그렇다면 메모리만 더 추가하면 되는 건지 모르겠습니다. 구글링해도 모르겠어서 답답한 마음에 이렇게라도 질문 드려봅니다......... (참고로 next, storybook, eslint, 프리티어 등 사용하고 있어요 )

개발자

#프론트엔드개발자

#컴퓨터

#사양

#vscode

#react

답변 0

댓글 0

조회 24

6달 전 · 노원재 님의 답변 업데이트

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

개발자

#reactnative

#xcode

#reactnative-run-ios

답변 1

댓글 0

조회 428

10달 전 · 익명 님의 질문

모노레포 프로젝트에서 tailwind intellisense

최근 시작한 프로젝트에 pnpm + turborepo 구성으로 모노레포 구조를 도입하여 진행중에 있습니다. packages/tailwind-config 에 tailwind에 대한 패키지를 구성하고, 다른 프로젝트에서 해당 패키지를 import해 사용중입니다. 이 때, tailwind css가 정상적으로 적용은 되나, tailwind intellisense 익스텐션이 작동을 안하는 문제가 있습니다만, 혹시 해결 방법이 있을까요 ?

개발자

#next

#tailwindcss

#monorepo

답변 0

댓글 0

조회 107

10달 전 · 남 재민 님의 새로운 답변

리액트 개발자님들 도와주세여

안녕하세요 웹퍼블리셔로 일을 하고 있는데 요즘 하도 리액트 뷰를 원하는곳이 많아서 리액트 공부를 하거있슺니다 깃 데스크 탑으로 커밋하는데 집에서 할때랑 회사에서 할때랑 package lock json 셋팅이 달라져서 그런지 npm start가 안되는데 레포지를 회사랑 집 각각 해둬야하는걸까여??

개발자

#react

#웹퍼블리셔

#리액트

#프론트엔드

답변 4

댓글 0

조회 667

10달 전 · 포크코딩 님의 새로운 답변

Next dev server가 자꾸 chunks error로 터집니다

안녕하세요. Next에서 npm run dev로 실행시키고 작업물을 저장하다보면 몇번 수정을 안했는데도 다음과 같은 에러창으로 인해 서버가 터집니다. ㅠㅠㅠ 저장 혹은 새로고침을 하면 웹에 Internal server error 뜨고 터미널에는 사진과 같은 에러들이 나열됩니다. .next에 있는 작업하고 있는 해당 페이지 폴더 경로들만 뜨며 몇일째 비슷한 문제를 겪으신 분들의 방법을 따라했는데 해결이 안되고 있습니다 ㅠ 챗 지피티가 알려준 방법도 안되더라고요 ㅠㅠ 도와주세요 시도한 방법 : 1. node, npm관련 캐시파일 모두 삭제 후 최신lts버전업그레이드 2. next 폴더 삭제 후 다시 빌드 3. 드라이브 공간확보 4. 폴더 읽기전용 권한 변경 ( next 다시 빌드하니까 초기화 ...) 5. 자동 빌드 (auto save) 확장팩 깔기 아래에 에러 캡쳐사진과 현재 package 첨부합니다..

개발자

#next.js

#front-end

#frontend

#server

답변 1

댓글 0

보충이 필요해요 1

조회 93

10달 전 · 김인후 님의 새로운 댓글

React Tuborepo 배포는 어떻게 하면 좋을까요?

안녕하세요! 저는 기존 ecs의 블루/그린 배포와 s3 cloudfront cache 배포 등을 이용한 모놀리스 형식의 구조에서 tuborepo, pnpm의 모노레포 환경으로 마이그레이션 중입니다. ECS로 배포한 서비스는 약 2~3개 S3 Cloudfront로 배포된 서비스는 3개 정도 존재하는데요, 이 경우에 보통 어떤 식으로 터보레포 환경에서 배포 ci/cd를 구축하시는 지 궁금합니다. 관련 아티클도 찾아보고 있는데 vercel이나 aws amplify로 구축한 것 제외하고 큰 규모의 서비스에서의 ci/cd에 대한 따로 정보가 없는 것 같아서요. 혹시 위와 같은 구축 경험이 있으신 분 있다면 조언 부탁드립니다...😭

개발자

#react

#monorepo

#cicd

#deploy

#next.js

답변 1

댓글 2

추천해요 1

조회 197

일 년 전 · 차예솔 님의 질문 업데이트

Next.js TDD 어떻게 하고 계신가요?

안녕하세요! 전 직장까지는 AI 서비스기획/개발을 주로 하였으나, 현재 이직 후에는 Next.js를 활용한 프론트를 주로 개발하고 있는데요..! 그러다보니 Next.js(+TypeScript) 프론트 작업시, TDD 트렌드에 대해 잘 몰라 질문드리고자 이렇게 투표를 만들어보게 됐습니다. :D 각 회사/본인의 팀에서는 TDD를 어떻게 적용하고 계신지(Unit Test / 통합테스트) 감사하겠습니다.🙏 의견으로 상세히 설명해주시면 더더더더 감사합니다.😇 npm trends를 조회해보기도 했지만, 이미 시장 장악력의 의한 수치이거나 이미 CRA시 자동으로 들어가 있는 Jest와 같이 사용하지도 않는데 다운만되는 경우가 모두 포함된 경우라고 생각하니 진정한 의미에서의 Trend라고는 생각이 안되더라구요. 커리어리를 통해 함께 TDD Trends를 알아갈 수 있도록 함께해주시면 정말정말 감사하겠습니다 :)! 중복 투표 기능도 없고, 5개 이상 보기를 만들 수 없어서 ㅠㅜ 투표 기능이 참 아쉽습니다만.. 그래도 한 번 의견 주시면 감사하겠습니다! (커리어리 개발자님들 투표기능 업그레이드 부탁드려요!)

투표

개발자

#tdd

#next.js

#unittest

#unit-test

#통합테스트

답변 0

댓글 0

조회 152

일 년 전 · 김지엽 님의 새로운 답변

"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.

개발자

#react

#react-native

#안드로이드

#android-studio

#android

답변 1

댓글 0

조회 634

일 년 전 · 소지우 님의 답변 업데이트

package.json 파일에 대해 질문있습니다.

프론트엔드 공부하고 있는 초보자입니다. 공부를 하다 몇가지 궁금한점이 있어 질문을 드립니다. 1. 처음에 html, css, js 파일로만 만들어 코드 작성을 하고 필요한 패키지들은 cnd 코드를 복붙해서 이렇게 사용을 했었는데 npm init -y 이 명령어를 작성하는 이유는 무엇인가요? 2. npm install 로 패키지를 설치하면 node_modules폴더가 생성되는데 이 폴더는 설치된 패키지 관련 폴더들이 들어있는건가요? 3. package.json에서 설치한 패키지를 사용할때 아래 이미지 처럼 코드를 수정해서 npm run 명령어를 이용해서 실행을 하던데 경로를 작성을 한건가요? 첫번째 이미지는 parcel ./index.html 을 작성했고 두번째는 sass인데 sass는 styles/main.scss 로 했는데 inex.html로 할지 main.scss로 할지 이건 어떻게 알 수있나요? 그리고 두번째 이미지에서 "node-sass": "node-sass" 이건 뭔지도 알고싶습니다. 초보자라 어려운 설명보다 정말정말 쉽게 설명해주시면 너무 감사드리겠습니다.

개발자

#프론트엔드

#package.json

#npm

#초보-공부

답변 2

댓글 1

조회 121

일 년 전 · 안희수 님의 답변 업데이트

npm과 package.json에 대해 질문있습니다.

안녕하세요 코딩 공부를 하고 있는 초보자 입니다 공부를 하다가 npm에 대해 궁금한점이 있어 질문을 드립니다. 1. npm init -y 이러한 명렁어를 작성하던데 이건 무슨 명령어인지 쉽게 설명부탁드리겠습니다. 다양한 라이브러리? 뭐 이러한 것들을 사용하기 위해 사용하는 건가요? 2. 설치를 하면 package.json 이라는 파일이 생성되는데 이건 어떤 파일인지 궁금합니다. 3. package.json 안에 보면 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "node-sass": "node-sass", "sass": "node-sass styles/main.scss dest/style.css" }, 이러한 코드가 나오고 npm run node-sass 이러한 명령어도 사용하는데 이건 뭔지 궁금합니다. 지금까지는 html, css, js 를 공부할때 어떠한 것을 설치하지않고 그냥 각 파일만 만들어 코드작성을 한것뿐인데 이러한 것들을 설치하거나 하는 이유도 궁금합니다. 아무래도 초보자여서 구글링을 해서 찾아보고 하지만 설명들이 너무 어렵거나 헷갈려서 쉽게 알려주시면 감사하겠습니다.

개발자

#프론트엔드

#npm

#package.json

#초보-공부

답변 1

댓글 0

조회 88

일 년 전 · KKamJang 님의 질문

리액트 네이티브 '안드로이드 에뮬레이터'가 데스크탑에서는 자동 실행

리액트 네이티브 프로젝트를 진행중입니다. 데스크탑으로 진행해왔고, 데스크탑에서는 별도의 에뮬레이터 실행 없이 자동으로 에뮬레이터가 실행되고 있었습니다. (즉, npm start > a 만 하면 프로젝트가 실행됩니다.) 최근에 노트북으로 접속할 일이 생겨 노트북으로는 처음 접속 해보니 먼저 에뮬레이터를 켜주고, 프로젝트를 실행해야 했습니다. (즉, emulator -avd 기기이름 > npm start > a 로 1개의 명령어가 늘었습니다.) 어떤 차이가 있는 걸까요? 참고할 영상 첨부드립니다. https://youtu.be/v1nLlhOX4fo?si=JHDFxaGL3GxUOEg5

개발자

#react-native

#android

#emulator

#react

#android-studio

답변 0

댓글 0

조회 76

일 년 전 · 허형준 님의 새로운 답변

리액트 네이티브 라이브러리가 안 돼요

gradient랑 fontawsome도 그렇고 대부분의 npm install 해야하는 라이브러리들이 안 돼요... install하고 import를 해줘도 안드로이드 에뮬레이터에서 Render Error requireNativeComponent: "(추가하려는것)" was not found in the UIManager라고 뜨네요 밑에 문제가 있는거 알려주는 source 부분에서는 node_modules\invariant\browser.js 여기를 가르키는데 또 그 파일 찾아가서 코드를 봐보면 어디가 잘못된건지 모르겠어요 혹시 몰라서 적자면 밑에 코드 부분이 잘못됐다고 나와요

개발자

#react-native

#리액트네이티브

#render_error

답변 1

댓글 0

조회 55

일 년 전 · 백승훈 님의 새로운 댓글

제발 도와주세요 ㅠㅠ koyeb 배포

koyeb으로 배포하려고 하는데 자꾸 이런 오류가 뜹니다 ㅠㅠㅠ npm 버전 10.5.0, node 버전 20.11.1으로 최신을 유지하고 있는데 왜 자꾸 뜨는 걸까요 ... 제발 도와주세요 선생님들 ㅜㅜㅜ !!

개발자

#koyeb

#배포

답변 1

댓글 2

조회 112

일 년 전 · 권규리 님의 질문 업데이트

깃허브 배포에 관하여

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

개발자

#배포

답변 0

댓글 0

조회 73

일 년 전 · 익명 님의 질문 업데이트

라이브러리 배포중 궁금한 것이 있습니다.

package.json에서 "main": "./src/index.ts"로 설정하면 ./src/index.ts가 같이 npm에 배포됩니다. 하지만 사진에서 보시는 toss의 slash 라이브러리는 ./src/index.ts가 같이 배포되지 않습니다. 어떤 차이가 있는걸까요? https://github.com/toss/slash/blob/7c8d8a3/packages/react/react/package.json

개발자

#라이브러리

#package.json

#npm

답변 0

댓글 0

조회 36

일 년 전 · 포크코딩 님의 답변 업데이트

Nextjs dev mode에서 실시간으로 ESLint 경고를 띄울순 없나요?

현재 Nextjs 14.1.0 버전으로 스토리북까지 포함한 템플릿 프로젝트를 만드려고 합니다. Nextjs 프로젝트는 처음인데 이전에 리액트 기반으로 했을땐 dev 모드에서 eslint warning이 실시간으로 보였는데 next에서는 보이지가 않네용.. npm run lint로 확인하는 것 말고 실시간으로 확인할 순 없을까요?

개발자

#next.js

#react

#eslint

#프론트엔드

답변 1

댓글 0

조회 204

일 년 전 · 백승훈 님의 새로운 답변

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를 생성할 수 밖에 없을 것 같은데 제가 아직 배포도 안해보고 프론트라서 제가 지금 생각하는 방식이 맞는지 잘 모르겠습니다 혹시 제가 말한게 맞나요?

개발자

#front

#deploy

#docker

#배포

답변 1

댓글 0

조회 70

일 년 전 · 티노 님의 질문

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 순서까지 똑같이 했고 다른점이 없어서 더 멘붕이에요 ㅠ 계속 첫번째 화면만 보여요... 도와주세요 ㅠ

개발자

#react

#firebase

답변 0

댓글 0

조회 120

일 년 전 · 익명 님의 질문 업데이트

react-google-recaptcha를 다루기가 너무 어려워요.

안녕하세요. 이번 프로젝트에서 reCaptcha를 사용하여 로그인을 구현을 하고 있습니다 :) 그래서 react-google-recaptcha라는 라이브러리를 활용하고 있는데, 2가지 정도의 난관이 있더라구요. 내용은 아래와 같습니다. 1. ReCAPTCHA 컴포넌트의 width값을 반응형으로 조절하기가 어렵습니다. 인라인 스타일, 상위에 래핑하여 width를 먹여도 그대로이며, ReCAPTCHA 컴포넌트의 속성인 size를 활용해도 더 나아지는 부분이 보이질 않습니다. 2. google reCaptcha에서 sitekey와 secretkey를 받고 아래와 같이 코드를 작성하였습니다. 그런데도 계속 다음과 같은 모습만 보이네요.. 잘 작동하는 key인데 말이죠. 저도 열심히 경험을 많이 쌓아서 다른 분들의 고민을 해결해주는 그런 사람이 되고 싶네요. 감사합니다 :) + 아, 참고로 개발환경은 React + Typescript + Vite입니다. 해당 라이브러리 주소 : https://www.npmjs.com/package/react-google-recaptcha

개발자

#react

#recaptcha

#google

답변 0

댓글 0

조회 208

일 년 전 · 김인섭 님의 새로운 댓글

[node.js]npm start 했는데 throw e 이 부분에서 에러가 떠요 ㅠㅠ

안녕하세요 제가 인프런에서 20년도에 올려두신 깃을 클론하여 npm install을 했습니다. 그런데 아래와 같은 오류가 자꾸 뜹니다 ㅠㅠ 이 오류가 제가 사용하고 있는 node의 버전이 너무 최신 버전이라 그런 것일까요? 해결 방법을 부탁드립니다 ㅠㅠㅠㅠㅠ

개발자

#node.js

#react

답변 4

댓글 17

추천해요 3

조회 297

일 년 전 · 김주호 님의 새로운 답변

깃 관련 질문입니다. (초기 세팅, 중간 합류, 브랜치)

깃을 사용해본 적이 없는 상태로 취업을 했는데.. 정말 기초적인 부분만 따로 공부를 했고, 조만간 업무 투입한다고 하셔서 질문 드립니다.. 예를 들어서 1. 브랜치가 main , A, B 이렇게 3개가 존재한다고 할 때, A에서 C브랜치를 생성해서 개발하라고 하시는데 뜻이 뭔지 잘 모르겠습니다. A 브랜치를 checkout해서 pull로 당긴 다음에 브랜치를 생성하라는걸로 이해가 됐는데 맞나요..? 2. 프로젝트 중간에 투입하는거라 깃에 개발 환경이 정리되어 있습니다. ReadMe 파일이 제대로 정리가 안되어있어서 하나하나 라이브러리를 받아야하는지 모르겠습니다. 예를 들어서 프로젝트 환경 파일 (package.json) 내부에 react, node 등등의 라이브러리나 개발을 도와주는 라이브러리가 정말 많습니다. 이 많은걸 손수 타이핑해서 install하는건 개발자들이 하는 방법은 아닌거 같아서요. package.json을 복붙해서 npm install 해주는 방식을 쓰니까 자동으로 modlue안에 install되는거 같긴한데.. 제가 궁금한건 다 되는게 아닌거 같습니다. WRAN이 뜨더라고요.. react나 다른 next같은 다른 몇 개는 오류가 뜨는거 같습니다. 뭔가 상식적으로 코드를 가져온거지, 라이브러리를 install한건 아니기 때문에 이게 동작을 안하는게 당연한거 같기도 하고.. 그렇다면 정말 그 많은 라이브러리를 손수 install 해줘야하는건지 잘 모르겠네요..ㅜ 보통 진행중인 프로젝트에 투입하면 초기 설정을 어떻게 하나요? 3. 첫 번째 질문과 같이 브랜치를 생성을 하면.. 제가 이해한게 맞다면 A브랜치를 기준으로 생성된 브랜치이니까 저의 개발 환경을 A브랜치의 모든 파일을 가지고 있는 상태에서 시작하나요? 그러니까. A브랜치에 있는 무수히 많은 파일들 위에 저의 폴더나 파일들을 따로 만들어서 사용하고 커밋하면 되는걸까요..? 여기까지가 질문입니다 ㅜ 혹여나 잘못해서 모든게 날라가버릴까봐 섣불리 뭔가를 할 수가 없는거 같아서 공부를 하고 있긴한데 당장 진행해야 될 것들이 많아서 이렇게 질문 남깁니다 ㅠㅠ

개발자

#git

#github

#react

#vscode

답변 4

댓글 1

추천해요 1

조회 214

일 년 전 · 익명 님의 질문

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

#xcode

#build

답변 0

댓글 0

조회 309

일 년 전 · 너굴이 님의 새로운 댓글

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 스크립트도 참고로 올려봅니다.

개발자

#reat

#nginx

#docker

답변 2

댓글 2

조회 488

일 년 전 · 훈쓰 님의 질문 업데이트

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에서는 복사가 되지않습니다 ㅜㅜ

개발자

#nest.js

답변 0

댓글 0

조회 265

일 년 전 · 이상원 님의 새로운 댓글

Next dev server가 자꾸 터집니다 ㅠㅠ

안녕하세요. 이번엔 Next에서 dev server가 자꾸 말썽입니다. npm run dev를 통해서 dev server를 열어 두고, 실시간으로 작업물을 저장하면 변경점을 빠르게 컴파일을 통해 확인하면서 작업하던 가운데 어느 순간부터 컴파일이 계속 더져지게 됩니다. 터미널에서는 계속 waiting이 뜨게 되고, 브라우저를 새로고침하면 Internal server error가 검은색 화면에 흰색 글씨로 보이며, 터미널에는 다음과 같은 에러들이 나열됩니다. 아마 .next 에서 생기는 것을 보니 빌드 폴더를 생성할 때 마다 이러는 것 같은데, next에서는 build 폴더를 따로 같이 가지고 가면서 개발 서버로 작업을 하면 안되는지 모르겠습니다. 비슷한 경험을 하신 분의 블로그에서는 운영체제가 무슨 문제가 생겨서 한번 밀어야지 해결됐다고 하시는데, 그렇게 까지 리소스를 낭비하기가 싫네요 ㅠㅠ. 비슷한 경험을 겪으셨다면 해결 방법을 요청드리고 싶습니다!

개발자

#next.js

#error

#500

답변 3

댓글 3

조회 853

일 년 전 · 삭제된 사용자 님의 댓글 업데이트

vue.js 환경설정 너무 어려워요..

vue-cli 이용해서 하고 있는 기초개발자입니다. 지금까지는 python으로만 환경설정해서 쉬웠는데.. vue-cli 프로젝트환경설정 너무 안되는데 이게 제가 잘못하는건지.. 예를들어 인터넷에 게시판 프로젝트 잘된게 있어서 가져오면,,, npm 패키지 의존성때문에 계속 에러뜨고,,, babel? cache-loader 등등 계쏙 에러가 뜨는데.. 궁금한게 원래 vue.js 프로젝트 vue-cli로 하면 이렇게 어렵나요? 다들 연습하시거나 공부하실때는 어떤 환경을 사용하시나요?

개발자

#vue.js

답변 3

댓글 1

조회 232

2년 전 · 서동근 님의 새로운 댓글

회사에서 앱 개발 하시는 분들! 알림 기능 구현 방법 어떻게 하시나요?

원하는 것 (리액트 네이티브로 개발하여서 안드로이드, IOS 모든 기기에 알림 기능 탑재) 1. 회원중 특정 권한이 부여된 회원에게만 알림을 보내고 싶습니다. 2. 알림을 보내는 기능은 (자체 제작한) 앱 서비스 관리자 페이지에서 '알림 페이지'를 제작하고 그 안에서 보내고 싶습니다. (쉽게 말 해 타 서비스 도움 없이 앱 푸시 알림기능 개발 후 적용) 3. 구독료를 내야하는 서비스를 이용하고 싶지 않습니다(무료 가입 후 추후 유료 전환도 마찬가지) 4. FCM을 사용하지 않으면서 구현을 하고 싶습니다. 궁금한 것 1. IOS는 인증서를 무조건 다운받아야 하나요? 혹은 사용하는 서비스, 기능에 따라 나른가요? - 1-1. 필수로 인증서가 있어야 한다면 바꿔 말 하면 '애플 개발자'등록 시 앱 푸시 알림 기능을 기본으로 제공해 주나요? - 1-2. 그렇다면 안드로이드는 어떤식으로 진행하나요? 2. 기능 개발에 사용하시는 라이브러리가 있을까요? "npm install --save @react-native-community/push-notification-ios' 라던지 3. 회사에서 앱 개발 하시는 분들은 어떻게 진행하시는지도 궁금합니다!

개발자

#react

#ios

#android

#react-native

#mobile

답변 1

댓글 4

조회 1,386

일 년 전 · 정기윤 님의 새로운 댓글

Next.js 13 Vercel로 배포 질문

안녕하세요 이전에 사용한적 없던 Next.js를 이참에 13 버전이 나온 김에 공부를 하고 있습니다 DB의 경우 PlanetScale와 Prisma를 사용하여 같이 사용하고 있습니다 Vercel을 통해 Next.js를 배포한 상태이구요. 혼자 개발 공부용으로 하고있다보니 일단 배포DB와 개발 DB는 동일한걸 사용중입니다 npm run dev로 localhost를 접속하면 DB에 수정된 사항이 새로고침하면 바로 반영이 됩니다 (예시 : DB에 데이터가 4개가 있다가 > 6개로 변경) 하면 바로 반영이 됩니다 그러나 Vercel를 통해 배포한 페이지의 경우 동일한 DB를 사용하고 있으나 변경사항이 즉각 반영이 되지 않습니다, 항상 재 배포를 해야 그때 기준 최신화된 데이터를 가져옵니다 (예시 : DB에 배포 직전까지 데이터가 6개가 있다가 > 배포 후 4개로 변경 > 동일 DB 사용하니 당연히 이거도 반영이 되겠지? > 예상과 달리 데이터가 6개 그대로인 상황이 발생) 배포 버전에서도 DB 최신화된 사항을 그대로 반영시킬려면 어떻게 해야할까요??..

개발자

#next.js

답변 3

댓글 1

조회 797

일 년 전 · 강병진 님의 답변 업데이트

모노레포 사용시 패키지 관리

안녕하세요 모노레포 사용하다 궁금한 내용이 있어서 질문 남깁니다. 현재 npm+turborepo로 모노레포를 사용중인데요. 만약 5개의 워크스페이스 중에서 2개의 워크스페이스에서만 a라이브러리를 사용하고 나머지 3개에서는 사용하지 않는다면 각각의 워크스페이스에 라이브러리를 설치하시나요? 아니면 루트에 설치해서 관리를 하시나요?

개발자

#react

#monorepo

답변 2

댓글 0

조회 409

2년 전 · 공민수 님의 새로운 답변

Next.js 12버전으로 프로젝트 시작하기?

npx create-next-app 로 프로젝트를 시작하면 next.js 13버전으로 시작이 되더라구요!! 아직 13버전은 확실한 커뮤니티가 없어서 12 버전으로 프로젝트를 만들고 싶은데 12버전으로 설치하는 게 없더라구요! 구글링과 스택오버 플로우를 뒤져본 결과 npx create-next-app@12 cd my-new-app npm i next@12 이런식으로 하라고 해서 해봤는데 12버전으로 다운되진 않았습니다... npx말고 관련 모듈들을 직접 설치를 해야 하는 걸까요? 찾아본 관련 링크들입니다. 1. https://stackoverflow.com/questions/75470624/how-to-create-next-app-using-version-12-instead-of-version-13 2. https://github.com/vercel/next.js/discussions/35794

개발자

#next.js-13

#next.js

#next

답변 2

댓글 0

조회 2,148