2달 전 · nexter 님의 새로운 답변
java + gradle 프로젝트에 외부 시스템의 데이터를 이용하기 위해 구조적으로 어떻게 코드를 작성해야할까요?
안녕하세요. 저는 지금 2년차 풀스택 개발자로 근무중입니다. 제목과 같이 고객사 데이터를 저희 시스템의 화면에서 활용할 수 있도록 진행하고자 하는데요, ex) 해당 시스템에서 게시물 제목으로 저희 데이터를 검색해서 입력할 수 있게 해주세요! 사실, 고객사에 api가 없는 상황이고 있다고 해도 고객의 요구로 인해 커스터마이징을 진행해야하는 상황인데.. 배포중인 다른 고객사에게 최대한 영향을 끼치지 않도록 어떤 구조로 코드를 작성하면 좋을지 또는 좋은 방법이 있을지 현직자분들의 얘기를 들어보고싶습니다..! *프론트는 javascript 사용중입니다.
개발자
#java
#javascript
#gradle
답변 1
댓글 0
조회 87
3달 전 · 김혁진 님의 새로운 답변
nextjs middleware 에서 protected route 처리 하는 방법이 궁금합니다
middleware 에서 토큰 인증에 따른 redirect 를 구현 할려고 합니다 제가 생각한 로직은 인증이 필요한 페이지는 accesstoken을 쿠키에서 받아오고 토큰이 없거나, 인증이 실패하면 login 페이지로 이동, 토큰이 만료된 경우에는 refresh 요청이후 accesstoken,refreshtoken 재발급 이후 원래 이동할려는 페이지로 이동 이렇게 생각중인데 다만 하나 걸리는게 middleware에서 refresh api 요청을 하는게 과연 올바를까? 궁금합니다 그럼에도 굳이 middleware 에서 할려는 이유는 page단 에서 처리할경우에는 결국에는 한번 그 페이지로 이동했다가 처리되는거라 깜빡이는 이슈가 생겨서 그렇습니다 보통 어떤식으로 처리하는지 궁금해요
개발자
#react
#nextjs
#프론트엔드
#middleware
#token
답변 2
댓글 0
조회 110
4달 전 · 익명 님의 질문
웹소켓 + Stomp로 채팅 기능을 구현하며
RabbitMQ를 도입하였습니다. 도입의 이유는 스프링 내장 메시지 브로커를 이용하게 되면 인메모리 기반의 동작 방식으로 인해 서버 문제 발생 시 메시지가 유실되거나 확장에도 제한이 있다고 판단하여 도입하였습니다. 현직자 분들이 보기에 이 이유가 적합한 근거가 될까요? 추가로 JMeter로 RabbitMQ를 사용했을 때와 사용하지 않았을 때의 성능을 비교했는데 사용자 100명 기준 성능도 사용하지 않았을 때가 우세했고, RabbitMQ를 사용했을 때는 오히려 아래와 같은 오류가 가끔 발생하며 메시지또한 약 90퍼센트 정도만 저장된걸 확인할 수 있었습니다. 무엇이 문제이며 해결 방안이 있을까요?? java.net.SocketException: Connection reset at java.base/sun.nio.ch.SocketChannelImpl.throwConnectionReset(SocketChannelImpl.java:394) ~[na:na] at java.base/sun.nio.ch.SocketChannelImpl.read(SocketChannelImpl.java:426) ~[na:na] at io.netty.buffer.PooledByteBuf.setBytes(PooledByteBuf.java:255) ~[netty-buffer-4.1.114.Final.jar:4.1.114.Final] at io.netty.buffer.AbstractByteBuf.writeBytes(AbstractByteBuf.java:1132) ~[netty-buffer-4.1.114.Final.jar:4.1.114.Final] at io.netty.channel.socket.nio.NioSocketChannel.doReadBytes(NioSocketChannel.java:356) ~[netty-transport-4.1.114.Final.jar:4.1.114.Final] at io.netty.channel.nio.AbstractNioByteChannel$NioByteUnsafe.read(AbstractNioByteChannel.java:151) ~[netty-transport-4.1.114.Final.jar:4.1.114.Final] at io.netty.channel.nio.NioEventLoop.processSelectedKey(NioEventLoop.java:788) ~[netty-transport-4.1.114.Final.jar:4.1.114.Final] at io.netty.channel.nio.NioEventLoop.processSelectedKeysOptimized(NioEventLoop.java:724) ~[netty-transport-4.1.114.Final.jar:4.1.114.Final] at io.netty.channel.nio.NioEventLoop.processSelectedKeys(NioEventLoop.java:650) ~[netty-transport-4.1.114.Final.jar:4.1.114.Final] at io.netty.channel.nio.NioEventLoop.run(NioEventLoop.java:562) ~[netty-transport-4.1.114.Final.jar:4.1.114.Final] at io.netty.util.concurrent.SingleThreadEventExecutor$4.run(SingleThreadEventExecutor.java:997) ~[netty-common-4.1.114.Final.jar:4.1.114.Final] at io.netty.util.internal.ThreadExecutorMap$2.run(ThreadExecutorMap.java:74) ~[netty-common-4.1.114.Final.jar:4.1.114.Final] at io.netty.util.concurrent.FastThreadLocalRunnable.run(FastThreadLocalRunnable.java:30) ~[netty-common-4.1.114.Final.jar:4.1.114.Final] at java.base/java.lang.Thread.run(Thread.java:842) ~[na:na]
개발자
#채팅
#구현
답변 0
댓글 0
조회 82
6달 전 · 익명 님의 새로운 댓글
자바스크립트의 이벤트 처리 질문
리액트로 이미지 inpainting 컴포넌트를 만들고 있습니다. 사용자가 이미지 업로드를 하면 canvas 영역에 그 이미지가 채워지고 그 이미지에 mask 영역을 칠할 수 있는 이미지 에디터 컴포넌트인데요, 궁금한게 생겨 질문드립니다. 첨부한 코드는 컴포넌트의 코드중 이미지 업로드 시 onChange 이벤트의 처리기인 handleImageUpload 함수와, handleImageUpload 함수에서 호출되는 loadImage 함수의 코드입니다. 사용자가 input 요소에 이미지를 업로드하면 onChange 이벤트가 발생해 handleImageUpload 함수가 실행되고 loadImage 함수가 실행됩니다. loadImage 함수가 실행되면 img 객체가 생성되고 img 객체의 src를 지정하죠. 그러면 브라우저는 이미지 로딩을 시작하고 이미지 로딩이 완료되면 onload 콜백함수가 실행됩니다. 저는 이 과정을 자바스크립트의 콜스택, 이벤트 루프, 태스크큐 구조에서 나타내보자면 다음과 같다고 생각했습니다. 1. 초기상태 콜스택 : [ ] 태스크큐 : [ ] 2. 사용자가 파일을 업로드 -> onChange 이벤트 발생 콜스택 : [handleImageUpload] 태스크큐 : [ ] 3. handleImageUpload 내부에서 loadImage 함수 호출 콜스택 : [handleImageUpload, loadImage] 태스크큐 : [ ] 4. loadImage 내부에서 img 객체 생성 및 src 할당 콜스택 : [handleImageUpload, loadImage] 태스크큐 : [ ] Web API : 이미지 로딩 시작 5. loadImage 함수 종료, handleImageUpload 함수 종료 콜스택 : [ ] 태스크큐 : [ ] Web API : 이미지 로딩 진행중 6. 이미지 로딩이 완료되면 Web API가 onload 콜백을 태스크큐에 추가 콜스택 : [ ] 태스크큐 : [onload] Web API : 이미지 로딩 완료 7. 이벤트 루프가 콜스택이 비어있음을 확인하고 태스크큐에서 onload 콜백을 콜스택으로 이동 콜스택 : [onload] 태스크큐 : [ ] 8. onload 콜백 실행 (캔버스에 이미지 그리기 등) 콜 스택 : [onload, drawImage, ...] 태스크큐 : [ ] 일단 이 과정이 맞나요? 만약 이게 맞다면 생기는 궁금증이 있습니다. Web API에서 이미지 로딩이 진행되는동안 loadImage 함수 및 handleImageUpload 함수가 종료되면 loadImage 함수 내에서 생성된 img 객체는 가비지 컬렉터에 의해 지워져야 하지 않나? 그렇게 img 객체가 GC에 의해 사라지면 이미지 로딩이 완료되었을 시점엔 img 객체의 onload 함수도 없어진것이니 onload 함수의 로직은 실행이 되지 않아야 하는 거 아닌가? 하는 생각이 들어 질문드립니다
개발자
#자바스크립트
#react
#frontend
답변 1
댓글 1
조회 254
7달 전 · 익명 님의 질문 업데이트
Flutter VSC 시뮬레이터 실행 에러
Flutter 스터디 중 VSC에서 에러가 발생하여 앱이 실행되지 않습니다. 현재 환경은 MacOS에서 사용하며 flutter, dart는 homebrew로 설치하였습니다. 그리고 Visual Studio Code에서 flutter 에디터를 사용하며 확장도구로 Dart, Flutter를 모두 설치하였습니다. 이후 VSC에서 flutter 실행 시 해당 에러가 발생하며 실행되지 않습니다. 매번 그런 것은 아니며 flutter, dart를 모두 삭제 후 재설치하면 잠시 재대로 동작하다가 컴퓨터를 재실행하면 다시 발생하고 있습니다. flutter doctor -v 했을 때 아무런 문제가 없고 flutter run하였을때도 잘 실행되고 있습니다. 아마 vsc와 충돌이 있는 것 같은데 도저히 해결이 되지 않습니다. 에러 1. the flutter daemon has terminated. - Dart extension 에러 2. Oops; flutter has exited unexpectedly: "FormatException: Missing extension byte (at offset 51)". 혹시 이유를 아신다면 알려주시면 감사하겠습니다.
개발자
#flutter
답변 0
댓글 0
조회 54
6달 전 · 익명 님의 질문 업데이트
Suspense, useSuspenseQuery를 이용해서 skeleton ui를 구현하는데 초기 렌더링시 화면이 덜그럭거리는 문제가 있습니다.
200ms 동안은 이전 UI를 보여주고, 그 다음부터는 skeleton ui를 보여주고 싶습니다. 하지만, 현재상황은 이렇습니다. useSuspenseQuery를 이용했을때, 처음 200ms동안 데이터가 없어서 높이가 0이 되었다가 다시 높아지면서 화면이 덜그럭거리는 문제가 있습니다. 그래서 useTransition을 이용해서 이전 UI상태를 유지하도록 했지만 지연시간이 길어졌을때는 skeleton ui가 보이질 않습니다. 제가 궁금한건 다음과 같습니다. 1. 보통 useSuspensequery를 사용해 skeleton ui를 보여줄때 초기 렌더링시 이전 데이터가 보이지 않아서 화면이 깜빡이는 문제를 어떻게 해결하나요? 2. useTransition과 skeleton ui는 같이 사용할 수 없는 건가요? 대략적인 코드는 다음과 같습니다. 각각 최상위 부모인 Search 페이지, 데이터를 불러오고 카드리스트를 업데이트하는 CardList 컴포넌트, 스켈레톤 UI의 지연을 처리하는 DeferredComponent 입니다.
개발자
#react
#suspense
#skeleton-ui
답변 3
댓글 1
추천해요 4
조회 1,635
9달 전 · 익명 님의 질문
background mode Location 질문 입니다.
안녕하세요. 선배님들 질문이 있습니다. ios Background modes에 location를 이용해서 앱을 죽이지 않고 계속 백그라운드에서 프로세서를 처리 하게 처리를 하였습니다. 하지만 최근에 확인해 보니 간헐적으로 백그라운드에서 처리가 안되는 문제를 확인 하였습니다. 테스트를 하는중인데 showsBackgroundLocationIndicator를 선언하면 location이 스캔이 계속 돌아가는거 같습니다. 혹시 자세히 아시는분 있으시면 코멘트 부탁 드립니다. 좋은 하루 되시기 바랍니다.^^ var locationManager: CLLocationManager = .init() override init() { super.init() setup() } func setup() { locationManager.delegate = self locationManager.pausesLocationUpdatesAutomatically = false locationManager.allowsBackgroundLocationUpdates = true locationManager.desiredAccuracy = kCLLocationAccuracyThreeKilometers locationManager.distanceFilter = 99999 } // end of setup func backgroundTaskStart() { isRuning = true locationManager.startUpdatingLocation() locationManager.startMonitoringSignificantLocationChanges() } // end of backgroundTaskStart
개발자
#ios
답변 0
댓글 0
조회 30
9달 전 · 노원재 님의 답변 업데이트
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
조회 554
9달 전 · 익명 님의 질문
동시성+데드락 제어를 위한 비관적 락 잠금 질문
안녕하세요 글쓰기 커뮤니티 프로젝트를 개발하는 중입니다 회원이 소설을 찜하는 기능(좋아요)을 구현 중에 있는데요 찜 객체는 아래 첨부한 코드와 같이 memberId와 novelId를 외래키로 갖습니다 동시성 이슈를 다뤄보고자 500명의 사용자가 동시에 novelId가 1인 소설을 찜하는 요청을 보낸다는 가정 하에 jmeter로 테스트를 돌려보니 동시성 이슈가 아니라 데드락 문제가 발생해서요 favoriteJDBCRepository.save(memberId, novelId); 시 novelId가 외래키라 외래키 정합성 검사 때문에 db 내부적으로 novelId가 1인 레코드에 read lock이 걸리는 것 같습니다 favorite 객체 save 시 트랜잭션 A가 novelId가 1인 레코드에 대해 read lock을 얻고, novelId가 3인 novel의 favoriteCount(찜 개수)를 +1하고자 write lock 요청 -> favorite 객체 save 시 다른 트랜잭션 B도 novelId가 1인 레코드에 대해 readlock을 얻고, novelId가 1인 novel의 favoriteCount(찜 개수)를 +1하고자 write lock 요청 -> write lock은 read lock이 전부 해제되어야 얻을 수 있음. 트랜잭션 A는 B가 read lock을 release하기를 대기하고 B도 A가 read lock을 release하기를 대기하면서 데드락 발생 일단 novelId로 novel을 비관적 락을 사용해 조회해서 favorite 객체를 생성한 뒤에 저장하는 방식으로 데드락+동시성 이슈 둘 다 해결이 되는데요(chooseFavoriteV2) 이 방법 말고도 더 좋은 대안은 없을까요??
개발자
#비관적락
#데드락
#동시성
#데이터베이스
#백엔드
답변 0
댓글 0
추천해요 1
조회 49
9달 전 · 익명 님의 새로운 답변
인텔리제이 심볼 오류 살려주세요
놀라기 금지..입니다.. 시도해본 방법으로는 • Build >> Rebuild Project • 캐시 비우고 재실행 • Gradle Refresh 왜이러는걸까요.. 정말 저한테 왜그러는건지 정말 알고싶습니다 귀찮구 힘드시더라두 한 번만 살려주세요 제발
개발자
#인텔리제이
#spring-boot
#spring-framework
#symbol-오류
#살려주세요
답변 3
댓글 0
조회 64
10달 전 · 연유 님의 질문
Devexpress schedulercontrol
schedulercontrol에서 전체적으로 배경색을 검은색으로 폰트색을 흰색으로 하려고 CustomDrawTimeCell과 CustomizeDateNavigationBarCaption를 사용해서 셀은 변경됐는데 bapcaption 이벤트 쪽은 코드 objectinfo, viewifo,handled부분에서 오류가 발생해서 변경이 안됩니다. 혹시나 아시는 분은 도움주시면 감사하겠습니다. private void schedulerControl1_CustomDrawTimeCell(object sender, DevExpress.XtraScheduler.CustomDrawObjectEventArgs e) { if (e.ObjectInfo is SchedulerViewCellBase cell) { // 셀의 배경색을 검은색으로 설정 cell.Appearance.BackColor = Color.Black; cell.Appearance.ForeColor = Color.White; // 텍스트 색상도 흰색으로 설정 e.Handled = true; // 기본 그리기 동작을 무시하고 커스텀 스타일을 적용 } } private void schedulerControl1_CustomizeDateNavigationBarCaption(object sender, DevExpress.XtraScheduler.CustomizeDateNavigationBarCaptionEventArgs e) { if (e.ObjectInfo is DevExpress.XtraScheduler.ViewInfo.SchedulerHeaderViewInfo headerViewInfo) { headerViewInfo.Appearance.BackColor = Color.Black; // 배경색을 검은색으로 설정 headerViewInfo.Appearance.ForeColor = Color.White; // 폰트 색상을 흰색으로 설정 e.Handled = true; // 기본 그리기 동작을 무시하고 커스텀 스타일을 적용 } }
개발자
#devexress
#schedulercontrol
#scheduler
답변 0
댓글 0
조회 40
10달 전 · 상현 님의 새로운 답변
next14의 next/headers의 cookies를 이용한 쿠키설정
안녕하세요 현재 데이터시각화 사이트 프로젝트를 진행중입니다. next14와 spring boot(리소스와 인증.인가)를 사용하고 있고, 카카오 소셜로그인을 하면 스프링서버에서 jwt(access 토큰)를 발급해주고 refresh 토큰은 redis를 통해 관리되고 있습니다. 받아온 토큰은 cookie를 통해 관리하고 있습니다. seo를 위해 ssr을 사용하고 있는데, ssr과정에서 데이터를 fetch를 할 때 토큰을 같이 보내고, 만약 액세스 토큰이 만료되고 리프레시 토큰이 살아있다면 응답 헤더에 새로운 액세스토큰을 보내주고 있습니다. 그런데 이때 next/headers의 cookies를 사용하여 쿠키를 세팅하는것이 안됩니다. 데이터 페치중, 혹은 ssr과정중에는 Cookies can only be modified in a Server Action or Route Handler. 라는 오류가 뜨며 cookie를 set 하거나 delete하는게 안됩니다. 이럴 경우는 어떻게 해야할까요?
개발자
#next.js
#cookie
#jwt토큰
답변 1
댓글 0
조회 174
10달 전 · 석정도 님의 질문
리액트 네이티브 릴리즈로 배포 시 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
#react-native-config
#다중환경변수
#release
답변 0
댓글 0
조회 67
10달 전 · 프레드윰 님의 새로운 답변
중국 유학생이 한국에서 Java 개발 직업을 찾으려면 어떻게 해야 하나요?
안녕하세요, 저는 중국에서 온 유학생입니다. 25년 2월에 졸업 예정입니다. 한국에서 Java 백엔드 개발자 직업을 찾고 싶습니다. 현재 개인적으로 진행한 프로젝트가 두 가지 있습니다. 프로젝트 1: Hash 해시 알고리즘을 기반으로 한 데이터베이스 라우팅 컴포넌트 프로젝트. 사용한 기술 스택: Springboot, MySQL, ThreadLocal, Mybatis, AOP 어노테이션. 프로젝트 2: 커뮤니케이션 플랫폼 시스템. 사용한 기술 스택: Springboot, Redis, Kafka, MySQL, ElasticSearch, Spring Security. 이 프로젝트들이 한국의 Java 개발 직무와 부합할까요?
개발자
#java
#springboot
#kafka
#신입-개발자
#개발자
답변 1
댓글 0
조회 96
10달 전 · 김준석 님의 새로운 댓글
Next.js 코드 가독성..
안녕하세요 프론트앤드 1년차에 다가가고 있는 신입 개발자입니다. 현재 Next14를 사용하고 있으며 코드의 가독성, 효율성을 많이 고려하면서 코드를 짜려고하는데 너무 고민이 되네요 저보다 앞서서 달려가고 있는 개발자 선배님의 생각을 듣고싶습니다 ㅠㅠ... 2가지가 궁금합니다. 먼저 첫번째 이미지처럼 Version에 관련된 파일을 저렇게 분리했을 때 저는 Version의 최상위 Layout.tsx에서 모든 것을 선언하기가.. 너무 오히려 가독성이 안좋다고 생각을 하고 있습니다 즉, 변수나 함수를 모두 최상위 Layout.tsx에서 선언 및 정의를 해두고 props로 내려주는게 이상하다고 생각을 합니다. 변수, 함수, useEffect 모두 직접 해당 변수나 함수를 컨트롤하는 부분에서 선언 및 가공을 하는게 맞다고 생각을 합니다. 최상위 Layout.tsx가 너무 무거우면 오히려 나는 VersionDataTable에 관련된 변수나 함수만 보려고 하였으나 최상위 Layout.tsx를 보고 아 이게 VersionDataTable에 필요하구나 뭐가 필요없구나, useEffect의 의존성 배열까지 고려하는것이 불필요하다고 생각을 하고 있습니다.. 근데 같이 프론트 앤드 개발하시는 분께서는 '단기적으로 절대 코드가 변하지 않는다고 생각하면 그 말씀이 맞는데 그건 아니잖아요? 우리는 계속 유지보수를 할거고 그러면 결과적으로 A에서만 사용하던 변수나 함수들을 A,B,C에서 같이 사용할 수 있게 변경하게 되면 그때 변경하면 유지보수 측면에서 너무 안좋습니다. 최상위에 모두 선언이나 정의를 해두고 props로 내려주는게 맞다 이런 형식으로 코드를 작성하면 몇개월 뒤에 코드를 수정할 때 A가서 수정했다가 C가서 수정했다가 D가서 수정하실 거에요? 바로 알아보실 수 있겠어요?' 라고 말씀을 하시더라구요.. 물론 몇개월 뒤에 코드를 보거나 하면 제가 작성한 코드인데도 저는 헷갈리는 경우가 많습니다. 그러나 최상위에 모두 선언 및 정의해둬도 마찬가지 아닌가..? 유지보수 측면에서 뭐가 안좋은거지..? 라고 생각되게 됩니다.. 선배님의 말씀을 따라가고는 싶은데 이해가 안돼서요 제가 아직 기본기가 많이 부족한 상황이라 이 상황에서 말씀드리면 이론부터 말하며 설득시키기가 부족하다고 생각하기 때문에 말씀드리면 오히려 '저는 이렇게 생각해요 틀렸는데요?' 라고 말하는 것 같아 말다툼이 될 것 같습니다. 2. 밑 사진을 보면 modalTemplate라는 폴더, ConfirmTemplate이라는 폴더가 존재하는데요 이것에 대해서 저는 사용하는 용도에 따라서 Create면 Create Create와 Update를 동시에 할 수 있는거면 BundleCreateAndUpdate 이런 형식으로 각각의 파일을 생성을 하고 문법상 공유되는 부분은 중복이 되어서 실제로 보여주는 부분을 영역으로 나눠서 BasicOptions, SelectList, VersionDetail, VersionOptions로 나누고 각각의 파일에서 사용하는 부분만 불러와서 쓰는 형식으로 코드를 작성했습니다. 그러나 이렇게 용도에 따라 구분하지 않고 최상위 Layout.tsx파일 하나만 만들고 ModalType이라는 props를 받아서 ModalType이 create, update, create&update, delete ... 등 JSX에서 삼항 연산자를 써서 처리를 할수도 있습니다. 저는 ModalType으로 처음에 구분하다보니 나는 'create' 속성일 때 어떤 형식으로 되는지 코드로 보고싶은데.. 그러면 너무 뜯어서 봐야하더라구요 그래서 용도에 맞게 파일을 만들고 거기서 form을 불러오기만해서 중복 코드를 줄이는 방식을 택했습니다.. (더 나은 코드라고 생각했습니다.) 그랬지만 선배님께서 'ModalType으로 나누는게 더 좋아요 저렇게 지으면 가독성이 너무 떨어지고 파일의 이름이 너무 길어지잖아요 이상하지 않나요?' 라고 말씀을 하시더라구요... 물론 가독성은 사람마다 다른거 알고있습니다. 그러나 ModalType으로 나누기 시작하면 한도 끝도없이 나누고 ModalType이 delete일 때만 사용하는 함수, create일 때만 사용하는 함수 등 필요없는 함수도 너무 많아져서 용도에 맞게 파일을 구분하고 거기서 중복 코드만 최대한 줄이자! 라고 생각하여 코드를 작성했는데 이 내용도 말씀드려 봤지만 '가독성' 이라는 이유 하나만으로 너무 안좋다고 합니다.. 진짜 안좋은건가요..? Next 도 그렇고 프론트 앤드 너무 어렵습니다..
개발자
#react
#next.js
#front-end
#code-review
답변 2
댓글 2
추천해요 1
조회 683
일 년 전 · 김하림 님의 답변 업데이트
React 동작 원리와 관련된 질문
아래 코드에서 handleClick 실행 시 setPending으로 "ready"로 상태가 변경되면 렌더링되고 delay이후 "done"으로 변경되면 또 렌더링 되는 건 알고있습니다. 1. 여기서 비동기함수(위에서 delay)와 관련해 batch 렌더링이 적용되지 않는 이유를 react 공문 링크나 설명 가능하신 분 계신가요? 2. handleClick의 컨텍스트에서 setPending으로 상태가 변경되고 react의 render함수가 실행되고 이후 delay함수가 실행되고 그 다음 setPending이 실행, 다시 render함수가 실행되는 과정을 실행컨텍스트 관점에서 알고싶습니다.
개발자
#javascript
#react
답변 1
댓글 1
추천해요 30
보충이 필요해요 1
조회 2,768
일 년 전 · 삭제된 사용자 님의 댓글 업데이트
안녕하세요.. 정말 이것저것 다 해봤는데 안되네요 ㅠ
안녕하세요. 리액트와 리액트 쿼리를 이용해 프로젝트를 진행 중 입니다. 저는 일단. src/hooks/useProduct.jsx 라는 커스텀 훅 을 만들었습니다. 제 계획은 1. 맨 처음 최상단 Home.jsx 에서 useProduct 라는 커스텀 훅 호출 2. 자식컴포넌트에 data를 전달 3. Search.jsx에서 받은 filter값으로 커스텀 훅 안의 query 재실행 4. 바뀐 상태는 Home.jsx 가 다시 받고 자식 컴포넌트에게 전달. 1~3까지는 콘솔찍어가면서 잘 되는데 4.는 되지 않습니다. (쿼리 데이터가 바뀌어도 4이 재 실행이 안됨..) ㅠㅠㅠㅠㅠㅠㅠ 쿼리 옵션도 줘보고 전역 상태도 만들어보고 이것저것 다 해봤는데 ㅠㅠ 혹시 아시는분 계신가요..? 어떠한 답변도 정말 감사히 받겠습니다 간략 코드첨부) Home.jsx const Home = ()=>{ const { data, error, isLoading } = useProduct(); return ( <Search /> <List data={data?.product} /> ); }; export default Home; Search.jsx const Search = () => { ```일부코드생략``` const { updateQuery } = useProduct (); const handleSubmit = () => { const searchData = { productId }; updateQuery(productId); }; } return( ```일부코드생략``` <button onClick={handleSubmit}> 조회 </button> ) } export default Search; useProduct.jsx const useProduct = () => { const [queryData, setQueryData] = useState(); const { data, error, isLoading } = useQuery({ queryKey: ["product", queryData], queryFn: () => fetchProduct(queryData), }); const updateFilters = (queryData) => { setQueryData(() => (queryData); }; return { data, error, isLoading, updateQuery , }; export default useProduct ;
개발자
#react
#react-query
#react-query-v5
답변 3
댓글 6
조회 116
일 년 전 · 익명 님의 질문 업데이트
react-query,
안녕하세요. 리액트쿼리 최신v5를 사용하면서 어려움에 처해 글을 남기게 되었습니다. 제가 만든 코드는 아래와 같습니다. Home.jsx (맨처음 데이터를 받아서 List에 뿌려주는 역할) const { data, error, isLoading } = useFilteredApartmentData(); console.log('home data',data) <List data={data.speechCommands} /> Search.jsx (사용자 검색) const { updateFilters } = useFilteredApartmentData(); //커스텀훅 const handleSubmit = (filter) => { updateFilters(filter); }; useFilteredApartmentData .jsx (훅) const useFilteredApartmentData = () => { const [filters, setFilters] = useState({ skip: 0, take: 15 }); const { data, error, isLoading } = useQuery({ queryKey: ["apartments", filters], queryFn: () => fetchFilteredApartmentData(filters), placeholderData: keepPreviousData, enabled: !!filters, }); console.log("훅안에서 새로운데이터", data); const updateFilters = (newFilters) => { console.log(newFilters); setFilters((prevFilters) => ({ ...prevFilters, ...newFilters, })); }; return { data, error, isLoading, updateFilters, }; }; export default useFilteredApartmentData; 저의 계획은 search.jsx에서 사용자의 검색을 받으면 훅의 updateFilters 를 실행시키고 useState가 바뀌니 useQuery의 재 시작과 함께 새로운 데이터를 받아 List에서 새로운 데이터를 뿌리는 것이었습니다. 그런데 console.log("훅안에서 새로운데이터", data); 이 부분도 새로운 데이터로 잘 찍히는데 문제는 Home.jsx 에서 console.log('home data',data) 이부분은 안찍히네요 결과적으로, 리스트의 변동이 없습니다. 혹시 아시는분 답변주시면 정말 감사하겠습니다 ㅠㅠ
개발자
#react
#react-query
답변 0
댓글 0
조회 78
일 년 전 · 익명 님의 새로운 댓글
라이브러리 구조 설계
안녕하세요. 현재 경력2년차 C# 언어 사용중입니다. 개발환경은 VS2019, .net Framework4.7.2 입니다. 코드의 재사용성을 높이고자 라이브러리 구조를 새로 설계하고있습니다. 사진처럼 각 솔루션을 생성하였고 그것을 기준으로 git 관리를 진행하고있습니다. 각 프로젝트는 C# 클래스 라이브러리입니다. 가장 기본이되는 common 내부에 c++ dll 이 존재하기 때문에 다른 솔루션들에서 사용시 기존프로젝트를 불러온 후 참조를 진행하고있습니다. 이 방식은 MyReleaseProject를 빌드할 경우 자동으로 c++ dll도 복사가 된다는 장점이 존재합니다. 하지만 직접 참조를 진행해야하는 프로젝트들이 점점 많아지는 단점이 존재합니다. 선배 개발자님들께서는 이럴때 어떤식으로 설계를 진행하시는지 궁금합니다.
개발자
#c#
#library
답변 1
댓글 1
추천해요 2
조회 77
일 년 전 · 익명 님의 새로운 댓글
타입스크립트 타입지정
리액트 쿼리로 OptimisticUpdate 를 구현했는데 onError 에서 context 타입 지정을 어떻게 해야할지 모르겠습니다 ㅠㅠ context : 타입 하면 오류나고, data : 타입 = context 해도 오류나고 as 를 쓰면 해결되긴 하는데 더 좋은 방법 없을까요? ㅠㅠㅠ 'use client'; import { useState } from 'react'; import { toast } from 'react-toastify'; import { usePostLikeCount } from '@/hooks'; interface LikeContextType { previousLikeCount: number; previousIsLike: boolean; } export const useOptimisticLike = ( boardId: number, initialLikeCount: number, initialIsLike: boolean, refetch: () => void ) => { const [optimisticLikeCount, setOptimisticLikeCount] = useState(initialLikeCount); const [optimisticIsLike, setOptimisticIsLike] = useState(initialIsLike); const { mutate: postMutate } = usePostLikeCount(boardId, { onMutate: async (): Promise<LikeContextType> => { setOptimisticLikeCount((prev) => optimisticIsLike ? prev - 1 : prev + 1 ); setOptimisticIsLike((prev) => !prev); return { previousLikeCount: optimisticLikeCount, previousIsLike: optimisticIsLike, }; }, onError: (err, variables, context) => { const data: LikeContextType = context; if (data) { setOptimisticLikeCount(data.previousLikeCount); setOptimisticIsLike(data.previousIsLike); } toast.error('좋아요 업데이트에 실패했습니다.'); }, onSuccess: () => { refetch(); }, }); const uploadLike = () => { postMutate(); }; return { optimisticLikeCount, optimisticIsLike, uploadLike, }; };
개발자
#react-query
#typescript
답변 1
댓글 1
조회 60
일 년 전 · 익명 님의 새로운 댓글
SpringBoot와 MySQL 도커 배포 과정에서 계속 오류가 발생합니다.
선배님들 안녕하십니까? 제목 그대로 스프링부트와 MySQL 배포 과정에서 HikariPool-1 - Exception during pool initialization. server-1 | server-1 | java.sql.SQLNonTransientConnectionException: Could not create connection to database server. Attempted reconnect 3 times. Giving up. 위와 같은 오류가 발생합니다. MySQL은 정상적으로 배포가 되어서 접근이 가능한 것을 확인했습니다. 하지만, SpringBoot의 경우, 계속 DB와 연결이 실패합니다. 아래는 SpringBoot의 application.properties 파일과 docker-compose.yml 파일입니다. 한 수 가르쳐주셨으면 합니다. 감사합니다. spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.url=${SPRING_DATASOURCE_URL} spring.datasource.username=${SPRING_DATASOURCE_USERNAME} spring.datasource.password=${SPRING_DATASOURCE_PASSWORD} spring.jpa.show-sql=true spring.jpa.hibernate.ddl-auto=update spring.jpa.properties.hibernate.format_sql=true
개발자
#오류
#스프링부트
#도커
#mysql
답변 1
댓글 3
조회 395
일 년 전 · 백승훈 님의 새로운 답변
react-query로 이미지를 가져올 때, 이미지가 깜빡거리는 문제를 해결하고 싶어요.
React 프로젝트에서 차량 데이터 목록(차량 모델 사진, 차량명, ....등)을 보여주는 웹 프로젝트를 진행하고 있습니다. 차량 데이터 목록 화면에서 react-query를 통해 가져온 데이터는 (예시 데이터) const data = [{id: number, car_name: string, model_name, car_model_image: number...}, {.....} ] 이런식으로 가져와서 map을 통해 CarCard 컴포넌트에 데이터를 props로 보내어 현재 출력하고 있습니다. 여기서 이미지 같은 경우는 백엔드에서 차량 모델 이미지를 가져오는 api를 따로 만들어놓아서, props로 전달받은 car_model_image 즉, 차량 모델 이미지의 id를 통해서 차량 모델 이미지 api에 데이터를 요청해서 이미지를 출력하고 있습니다. 이때. 페이지를 전환하거나, 한 페이지에서 아무동작을 하지 않아도 게속 이미지가 깜빡거리면서 재렌더링이 되고, 계속 무한정으로 이미지를 호출하는 문제가 발생하였습니다. map을 통해 CarCard를 호출하고 CarCard 안에서 이미지를 호출함에 따라서 계속 이미지가 깜빡깜빡 거리는 것 같은데, 컴포넌트 안에서 이미지를 호출할 때 어떻게 하면 무한정으로 이미지를 불러오지 않도록 하고 깜빡거림을 없앨 수 있을까요 ?...어떻게 해결해야 할지 감이 안 잡혀요.... //차량 목록 페이지 한 부분 ... const { data } = useGetCarList(); //useQuery를 통해 서버에서 데이터 전달받음 // const data = [{id: number, car_name: string, model_name, car_model_image: number...}, {.....} ] 이런식 .... return ( <div> data.map((data: CarData) => { return ( <Carcard ascCarData={data} key={Math.random()} handleClick={() => handleClick(data)} isActive={true} /> ); }) </div> ) //Carcard 컴포넌트 const { data: carImage } = useGetCarModeImage(ascCarData.car_model_image); // 이미지 데이터 가져오기
개발자
#react
#vite
#react-query
#typescript
#react-query-v3
답변 4
댓글 0
조회 338
일 년 전 · 짹 님의 새로운 답변
nextjs typescript 실용성
저는 원래 백엔드 개발자인데 현재 이직한곳에서 사정상 프론트 서버를 공부하면서 하나 올리게 되었습니다. 공부하면서 개발 진행중인데 잘 이해되지 않는 부분이 있어서 여쭤 봅니다. 기술 스펙은 프론트 nextjs typescript, 백엔드 springboot gradle입니다. 1. 폴더로 라우팅하는게 편해보여서 nextjs로 선택했는데 합리적인가요?? 현재는 nextjs api는 사용계획 없습니다. 2. js 보다는 그래도 미래지향적인 ts를 선택했는데 뭔가 개발하다보니 괜히 사용중인 기술에 비해 오바했다는 생각이 좀 듭니다. 쭉 진행해도 괜찮을까요?? 지금이라도 js react로 바꿔야 할지 제가 프론트적 지식이 많이 부족하여 자문을 좀 구합니다. 감사합니다.
개발자
#react
#spring-boot
#next.js
#typescript
답변 2
댓글 0
조회 199
일 년 전 · 털먹는토끼 님의 댓글 업데이트
리액트 쿼리 에러 핸들링 이슈
react query를 활용한 에러 핸들링이 안돼서 질문 올립니다... //mainpage.tsx const { data, refetch, isFetching } = FetchData(url); const handleSearch = () => { refetch(); } <QueryErrorResetBoundary> {({ reset }) => ( <ErrorBoundary onReset={reset} FallbackComponent={FallbackUI}> {resultVisible ? ( <Result searchData={searchData} isFetching={isFetching} /> ) : ( <EmptyResult /> )} </ErrorBoundary> )} </QueryErrorResetBoundary> react-error-boundary 라이브러리를 이용해 ErrorBoundary 컴포넌트를 가져왔습니다. ErrorBoundary 하위 컴포넌트 내에서 에러가 발생하면 FallbackComponent의 FallbackUI 컴포넌트가 렌더링 되도록 했습니다. //FallbackUI 컴포넌트 //에러가 발생히면 이 컴포넌트가 렌더링되어야합니다. const FallbackUI = ({ error, resetErrorBoundary }) => { return ( <div> <span>{error.message}...</span> <button onclick={resetErrorBoundary} /> 돌아가기 버튼 </div> ); }; export default FallbackUI; FallbackUI 에서 QueryErrorResetBoundary 에서 제공하는 resetErrorBoundary를 받아와 에러 발생 후 '돌아가기 버튼'을 클릭하면 쿼리오류를 처리하고 리셋해주도록 구현했습니다. //url을 파라미터값으로 받아와 api호출하는 함수 //위에 있는 mainpage.tsx 에서 사용하는 함수입니다. const FetchData = (url: string) => { const { error, data, refetch, isFetching } = useQuery({ queryKey: ["repoData"], queryFn: async () => { const res = await axios.get(url); console.log(res.data); return res.data; }, refetchOnWindowFocus: false, enabled: false, }); return { error, data, refetch, isFetching }; }; 리액트 쿼리를 이용해 api를 호출하는 함수입니다. //main.tsx const queryClient = new QueryClient({ defaultOptions: { queries: { retry: 0, throwOnError: true, }, }, }); ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <QueryClientProvider client={queryClient}> <BrowserRouter> <GlobalStyles /> <Provider store={store}> <App /> </Provider> </BrowserRouter> </QueryClientProvider> </React.StrictMode> ); 마지막으로 전역으로 에러 관리를 하도록 세팅해놨습니다. 그리고 QueryClient에 throwOnError 속성이 있어야 에러를 ErrorBoundary로 전달할 수 있다해서 추가해줬습니다. 이렇게 세팅해놨는데 에러발생하면 그냥 하얀색 화면만 나오고 fallbackUI가 나오지 않습니다... 원인이 뭘까요...ㅠㅠㅠ 혹시 몰라서 콘솔 에러코드도 올립니다.. 추가로 궁금한 점 1. useQuery 에서 반환하는 객체중 error 객체는 어떤 존재인지 궁금합니다. 2. useQuery 속성과 QueryClient 속성 모두 throwOnError : true 를 가지고 있던데 어떤 차이점인지 궁금합니다. 답변주시면 정말 감사하겠습니다!!!
개발자
#react
#react-query
#error-handler
#error-boundary
답변 1
댓글 1
조회 216
일 년 전 · 한진희 님의 질문
DLL은 어떤 과정을 통해 만들어지나요?
저도 한번은 만들어보고 싶은데 잘 모르겠네요 C++ /C 에서 사용자 정의 헤더파일(예: "name.h")은 어떻게 만드는지 아는데 동적 연결 라이브러리는 잘 모르겠네요
개발자
#c#
#dll
#c++
#c
답변 0
댓글 0
보충이 필요해요 4
조회 72
일 년 전 · 백재욱 님의 질문
백엔드 테스트 와 머신러닝 테스트가 따로 하면 잘되는데 같이 하면 오류가 발생합니다.
저희 프로젝트의 기본적인 골자는 osmd라고 하는 mxl포맷 파일을 악보 형태로 렌더링해주는 라이브러리를 사용하구요, 스트림되는 오디오를 듣고 그걸 머신러닝 파이썬 코드가 처리한 뒤 timestamp라는 값을 반환하면 그에 맞춰 악보의 현재 위치를 가리키는 cursor를 움직이는 프로젝트입니다. 또한 오디오 스트림을 넘겨받기 위해서 aws에다가 쿠렌토 미디어 서버를 만들었구요, 머신러닝 코드는 로컬에서 돌아가고 있습니다. 각기 따로 스트림을 처리했을때(stdin stdout) 잘 되는 것을 확인했습니다(https://github.com/Kurento/kurento-java 쿠렌토 서버의 구현은 이 레포를 참고해서 만들었습니다) 또한 import sys def main(): while True: line = sys.stdin.readline() if not line: break output = line.strip() + '2' print(output) if __name__ == "__main__": main() 이 예제를 활용해서 테스트해봤을 때 문제없이 작동했습니다(쿠렌토) 머신러닝 코드는 wav 파일을 버퍼 잘라서 stdin에 집어넣고 테스트해보았습니다 작동은 둘 다 문제없이 작동했지만 같이 이어서 하게되면 Failed to write data: The pipe is being closed라는 오류 로그가 찍힙니다. (요약) 1. 백엔드에서 Kurento Media Server(webrtc) 인풋 들어온거에 아무거나 붙여서 반환하는거로 테스트 해봤을 때 문제 없이 스트림 처리가 되는 것으로 확인 됨 2. 머신러닝 쪽에서 오디오 스트림 모드를 만들고 stdin으로 들어온 스트림에 대한 결과값을 stdout으로 반환하는 것이 확인 됨 3. 그렇지만 둘을 이제 갖다붙이면 위 에러 로그 발생 이유 아시는 분들은 알려주시면 감사드립니다. 두서없이 장문을 써서 이해가 안되는 부분들 말씀해주시면 설명드리겠습니다. 감사합니다.
개발자
#backend
#machinearning
답변 0
댓글 0
조회 54
일 년 전 · 익명 님의 새로운 댓글
Next.Js의 next/link, middleware 질문합니다!
안녕하세요. 회사에서 Next.js, Vercel 환경에서 개발하는 신입 프론트엔드 개발자입니다. Next.js 기술의 next/link와 middleware 기술에 대해서 궁금증이 생겨서 질문합니다!! next/link는 prefetch기능이 큰 장점으로 알고있어서 Link태그에 경로를 설정해서 미리 데이터를 받아오려고 테스트해보는데 prefetch={true} 속성값을 줘도 개발자도구에서 봤을때 미리 데이터를 받아오지 않는거같습니다 ㅠㅠ 원래 개발자 도구에는 확인이 불가능한건가요?? 그리고 next.js의 middleware는 공식문서에 구글링을 통해서 이론적인 부분은 알고있는데 어떤 경우에 사용해야할지 감이 안잡히네요. 어느 페이지에 middleware를 적용해보는게 좋을까요? 이해하기 쉽게 알려주시면 감사하겠습니다 🙏
개발자
#next.js
#react
답변 1
댓글 1
추천해요 2
조회 277
일 년 전 · 김지엽 님의 새로운 답변
"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
조회 668
일 년 전 · 김영민 님의 질문
템플릿 <<연산자 오버로딩이 궁금합니다.
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> &)': 함수 템플릿이 이미 정의되었습니다. ] 이런 오류가 발생하구요. 템플릿 타입을 <<로 어떻게 출력하나요??
개발자
#c++
#템플릿
#오버로딩
답변 0
댓글 0
보충이 필요해요 1
조회 64
일 년 전 · 안희수 님의 답변 업데이트
NextJS 14에서 JWT를 쿠키를 통해 관리하려고 하는데 서버에서 set-cookie 해주는 방식말고 route 핸들러에서 주입할수는 없나요?
안녕하세요. 최근 NextJs를 공부하며 이전 리액트 기반의 사이드 프로젝트를 NextJs로 구현해보고 있습니다. 카카오 로그인만 지원을 하고 있고, 프론트 쪽에서 카카오 인가 코드를 백엔드로 넘기면 백에서 jwt를 발급해서 응답으로 access token과 refresh token을 프론트로 넘겨주고 있습니다. 이전 프로젝트에서는 두 토큰 모두 localStorage에 저장하는 방식으로 했었는데요, 이번에는 쿠키를 이용해보려고 하고 있습니다. 다만 백엔드에서 set-cookie를 해놓지 않아서 응답으로 받은 토큰을 따로 쿠키에 저장해야하는 상황입니다. 하지만 Server Component에서는 set cookie가 안되는 것으로 알고 있습니다. <목표 구현 방식> route handler를 통해서 백엔드 api를 호출하고 그 값을 쿠키에 저장하도록 코드를 짰습니다. (/app/api/token/route.ts) return 값은 확인을 위해서 임의로 넣었습니다. 그리고 쿠키에 저장된 토큰을 통해서 서버 컴포넌트에서 이를 이용해 백엔드 api 통신을 하고 싶습니다. 하지만 서버 컴포넌트에서 쿠키를 확인하니 비어있는 쿠키인 것을 알 수 있었습니다. 얕은 지식으로 생각을 했을때, (route handler - 브라우저 혹은 서버 컴포넌트)에서 생성한 쿠키는 (백엔드 도메인 - 브라우저 혹은 서버 컴포넌트) 통신에 사용되는 쿠키와 다르기 때문이라고 생각이 들었는데 해답을 찾지 못했습니다. <질문 사항> - 백엔드 서버에서 set-cookie를 하지 않고 직접 구현할 순 없을까요? 쿠키는 forwarding이 안되나요? - 제가 생각한 구조 말고 추천하시는 토큰 관리 방식에 대해서 알려주셔도 감사하겠습니다. 아직 초보 개발자에 글도 잘 쓰지 못해 이해하시기 힘들 것 같지만, 넓으신 아량으로 지식을 나눠주신다면 정말 큰 도움이 될 것 같습니다. 긴글 읽어주셔서 감사합니다 (_ _)
개발자
#next.js
#jwt
#react
#front-end
#cookie
답변 1
댓글 0
추천해요 1
조회 1,058