#window

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

하루 전 · Estre 님의 답변 업데이트

윈도우 개발자 노트북 이정도는 괜찮을까요?

모델명 : LG 그램 15ZB995 ✅️CPU : 인텔 10세대 코멧레이크 코어 i5 10210U ✅️RAM : DDR4 - 16G ✅️HDD : SSD512G ✅️VGA : Intel UHD Graphics ✅️DISPLAY : 15.6D인치 FHD LED(1920X1080) ✅️OS : Window 11 pro 대용량 트래픽 공부하고싶은데 현재 노트북을 8기가짜리로 쓰고있어서 새로 사려고합니다 맥북은 사고싶은데 취준중이라 금전적으로 힘들어서 나중에 취업후 사려고합니다 지금 당장은 웹이랑 안드로이드만 개발예정이라 저렴하게 살 수 있는걸로 3년간 쓰고싶습니다 다들 32기가에 i7를 추천하던데 이유가 뭔지 알 수 있을까요? 도커도 쓰긴 해야하는데... 도커쓰려면 다들 좋은거 쓰라고 하더라구요ㅠㅠ

개발자

#노트북사양

#노트북

답변 1

댓글 0

조회 23

13일 전 · 최범준 님의 질문

MacBook에서 Windows Docker 서버 접속 시 sudo가 필요한데 원인이 뭘까요?

문제 현재 Windows 데스크톱과 MacBook을 사용 중이며, 두 기기는 동일한 로컬 네트워크에 연결되어 있습니다. - 데스크톱(Windows): 유선 랜(Ethernet)으로 연결 - MacBook: Wi-Fi로 연결 Windows 데스크톱에서 Docker를 이용해 로컬 웹 서버(포트 9000)를 실행 중입니다. 컨테이너는 -p 9000:9000 옵션으로 실행되었으며, 0.0.0.0:9000에서 요청을 받을 수 있도록 설정되어 있습니다. 데스크톱에서는 Chrome를 통해 정상적으로 웹 인터페이스에 접속할 수 있습니다. 그러나 MacBook의 Chrome에서 접속하면 페이지를 찾을 수 없다고 합니다. 이상하게도,,, Chrome을 sudo로 실행하면 페이지가 정상적으로 로드됩니다. 추가 정보 - 데스크톱(Windows)과 MacBook은 같은 서브넷에 속해 있습니다. - 웹 서버는 0.0.0.0:9000에서 요청을 받을 수 있도록 설정되어 있어, 다른 기기에서도 접근 가능해야 합니다. - MacBook에서 nc -zv <데스크톱-IP> 9000을 실행하면 포트가 열려 있음을 확인했습니다. - Python 코드에서 requests.get("http://<데스크톱-IP>:9000")을 실행하면, 일반 실행 시 실패하지만 sudo로 실행하면 정상적으로 작동합니다. - MacBook에는 단 하나의 사용자 계정만 존재하며, 해당 계정은 관리자(Admin) 권한을 가지고 있습니다. - macOS 방화벽은 비활성화되어 있으며 (/usr/libexec/ApplicationFirewall/socketfilterfw --getglobalstate로 확인), sudo pfctl -d로 pf 방화벽을 꺼도 문제가 해결되지 않았습니다. 현재까지 파악한 내용 sudo로 실행하면 정상적으로 동작하기 때문에, 현재 문제는 네트워크 연결 자체의 문제가 아니라 macOS의 보안 정책 또는 네트워크 제한과 관련된 것이 아닐까,, 생각하고 있습니다. 해결하고 싶은 질문 - 왜 Chrome을 sudo로 실행해야만 웹 서버에 접속할 수 있을까요? - 왜 일반 사용자 권한으로 실행한 Python의 requests.get() 요청이 차단되고, sudo를 사용해야만 정상적으로 동작할까요? - macOS에서 일반 사용자 프로세스의 네트워크 접근을 제한하는 정책이 있는 걸까요? 있다면 어떻게 해결할 수 있을까요? 스크립트에 모두 sudo를 붙이면 문제가 해결되긴 합니다만,, 명확한 원인이 궁금합니다. 혹시 비슷한 경험을 하신 적이 있는 분이 계시다면 조언 부탁드립니다! 혹은 힌트 키워드라도 던져주시면 감사하겠습니다!

개발자

#mac

#docker

#local-network

답변 0

댓글 0

조회 34

3달 전 · 익명 님의 질문 업데이트

ReactNative Xcode 16. RCTAppDelegate.h not find

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

개발자

#reactnative-run-ios

#xcode

#appdelegate.h

답변 0

댓글 0

조회 132

4달 전 · 익명 님의 질문

ios18 popstate 적용

Ios18 업데이트 이후 popstate 적용 안되는 분 계신가요???... window.addEventListener('popstate', function (event){}

개발자

#프론트엔드

#javascript

답변 0

댓글 0

조회 22

7달 전 · 익명 님의 질문

Pytorch 설치할때 오류가 많나요?

Pytorch를 공부하려고 컴퓨터에 설치했는데 그래픽카드인 3060ti와 pytorch가 지원하는 버전을 고려해서 cuda 12.1 cudnn8.9.0을 설치했습니다 하지만 파이참을 실행하니 torch가 여전히 먹통이네요 삭제하고 다시깔고 인터넷을 보고 다른것을 설치해도 여전히 window 126 모듈을 찾을 수 없다고만 뜰뿐 해결이 안 되네요 어떻게 해야할지 감이 안 옵니다

개발자

#인공지능

#pytorch

#cuda

답변 0

댓글 0

조회 24

7달 전 · 성지수 님의 새로운 답변

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

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

개발자

#환경변수주입

#모노레포

#빌드

#node.js

#react

답변 1

댓글 0

조회 73

9달 전 · devwoo 님의 새로운 댓글

in react-native cli, No Firebase App '[DEFAULT]' has been created - call firebase.initializeApp()

안녕하세요 운영체제 windows, react-native cli, android를 사용중입니다. 구글링을 해도 도저히 안나오길래 질문을 드립니다.. firebase react native auth, app 홈페이지에서는 해답이 없더라구요... 혹시 해결방법 아시는분들 계신가요 ㅠㅠ

개발자

#react-native

#react-native-cli

#firebase

답변 1

댓글 1

조회 116

10달 전 · 정창록 님의 질문

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"); }

개발자

#next.js

#fluent-ffmpeg

#mp4

답변 0

댓글 0

조회 85

10달 전 · 프레드윰 님의 새로운 답변

학부생 노트북 사양 괜찮은지 투표 부탁드립니다!

OS: Windows 11 home 화면 크기: 16인치 CPU: 인텔 코어 Ultra7 프로세서 155H 메인 메모리: 16GB(온보드) 그래픽: 내장형 인텔 Arc SSD: 512 GB + 확장 슬롯 1 무게: 1,199 g 컴퓨터 공학과 학부생 노트북 사양 이정도면 충분할까요?? 램을 32GB로 맞추고 그래픽도 NVIDIA GeForce RTX 3050 4GB Laptop GPU로 하고 싶은데 가격이 30만원 이상 차이나서 고민되네요... 투표 부탁드립니다!

투표

개발자

#노트북사양

#노트북고민

답변 1

댓글 0

보충이 필요해요 1

조회 60

10달 전 · 김민식 님의 새로운 답변

ios loading scene중

로딩씬을 두 가지 방법으로 구현해 보았습니다. 하나는 커스텀 뷰로 만든 후 vc 에서 add 하여 사용하였고 하나는 커스텀 class자체에서 window에 add 하여 사용하였습니다. 전자의 경우는 네이비게이션 바가 가려지지 않고 후자의 경우는 창 실행 시 잠깐 화면이 비추는데 제가 놓친 부분이 있을까요?

개발자

#swift

#xcode

#ios

답변 1

댓글 0

조회 58

10달 전 · 익명 님의 질문

Next.js에서 코드 스플리팅을 적용할 예정인데 궁금한 점이 있습니다.

Next.js에서 제공해주는 dynamic을 사용해서 스플리팅을 할 건데 어떤 경우에 옵션을 사용하면 좋을 까요?? ProjectCardContainer에는 react-query로 api를 비동기적으로 호출받고 있습니다. const ProjectCardContainer = dynamic( () => import('@/components/container/ProjectCardContainer') ); 위의 부분처럼 받아오거나 const ProjectCardContainer = dynamic( () => import('@/components/container/ProjectCardContainer'), { ssr: false, } ); 그리고 위의 ssr을 해체하는 경우 ssr을 해체하는 경우에는 공식문서에서 window나 외부 API같은 작업을 할 때 사용한다 하는데 여기서 말하는 외부 API가 서버에서 가져오는 API가 맞나요??

개발자

#next.js

답변 0

댓글 0

조회 72

10달 전 · 털먹는토끼 님의 댓글 업데이트

리액트 쿼리 에러 핸들링 이슈

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

조회 193

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

윈도우에서 사진이나 영상 편집 프로그램을 만들어 보고 싶은데 어디서 배울 수 있나요?

몇 년 전에 게임 개발 학원에 다니다가 그만두고 작년부터 애플리케이션 개발 쪽으로 방향을 돌려 PyQt 프레임워크나 Flutter로 개발하다가 PyQt 프레임워크는 배울만한 자료가 없어 포기하고 Flutter는 굳이 안드로이드나 iOS까지 지원하는 프레임워크로 편집 프로그램을 만들 필요는 못 느껴서 현재는 Windows App SDK와 WinUI 3 프레임워크로 개발하고 있습니다. 하지만 게임 개발은 그나마 학원에서 직접 강사한테 배워서 어떤 식으로 파일을 구성하고 개발하는지에 대해 그나마 틀은 잡혀있는데 애플리케이션 개발은 처음부터 끝까지 독학으로 공부해서 그런지 어떻게 프로젝트를 구성할지 막막하더라고요. 누구한테 물어보려고 해도 제 주위에 프로그래밍이 취미이거나 직업인 사람이 한 명도 없어서 물어 볼 수도 없고 그나마 유튜브에서 SOLID 원칙과 MVVM 패턴을 배워서 만들어 보고는 있습니다. 결론은 윈도우 애플리케이션 개발을 배울만한 곳이나 아니면 최소한 소통할 수 있는 커뮤니티가 있으면 답변 부탁드리겠습니다.

개발자

#desk

#app-dev

#window

#wpf

#winui-3

답변 1

댓글 0

조회 44

일 년 전 · lee 님의 질문

Kubernetes 클러스터 구성

안녕하세요 쿠버네티스 공부하고 있는 중에 질문드립니다. docker desktop에 있는 쿠버네티스를 사용했고 도커 데스크탑에 있는 이미지를 사용해서 간단하게 리눅스 이미지를 가지고 구성을 했습니다. docker desktop에서 window container로 변경 후 데스크탑에 있는 리눅스 이미지와 윈도우 이미지를 두 개 다 사용하여 구성을 하고 싶은데 찾아보니까 docker desktop에는 한 개의 노드만 존재하기 때문에 불가능하다고 합니다. kubeadm이나 minikube 같은 경우도 가상머신이나 실제 컴퓨터를 가지고 구성 하는 것 같은데 이럴 경우에 매니저 컨트롤러가 리눅스 기반이고 가상머신이다 보니 도커 데스크탑에 있는 이미지를 사용 못할 뿐만 아니라 윈도우 이미지를 사용 못하는 것 같은데 도커 허브에서 다운 받는 방법 말고 로컬에 있는 이미지를 사용하는 방법이 있을까요?

개발자

#kubernetes

#docker

#docker-desktop

#linux

#window

답변 0

댓글 0

조회 72

일 년 전 · 이창협 님의 질문

firebase signInWithPopup cors에러.

firebase를 이용해서 로그인눌러서 팝업창이뜨면 구글로그인을 할려고하는데요 팝업창이뜨면 아래와같이 cors 에러가 뜨더라구요. 실행엔 문제가 없지만, 해결하고싶습니다. Cross-Origin-Opener-Policy policy would block the window.closed call. 혼자서 검색해서 이것저것봐도 해결이 안됩니다. 이유가 뭘까요..

개발자

#react

#login

#firebase

답변 0

댓글 0

추천해요 1

조회 130

일 년 전 · 박하민 님의 새로운 댓글

Next14 SSR 과정에서 Authorization에 쿠키를 사용해 토큰값을 전달하면 에러가 발생합니다..

안녕하세요. 혼자서 해결해 보려고 했지만, 오랜 시간 해결하지 못해 지푸라기라도 잡는 심정으로 질문 올려봅니다.. 기존에 localstorage를 사용해 fetch로 데이터를 요청했으나 SSR 과정에서 window 사용이 불가능하기 때문에 쿠키를 사용을 계획했습니다. 로그인 -> 쿠키에 토큰값 저장 -> 데이터 요청 시 쿠키에서 토큰 값을 꺼내고 헤더 Authorization에 담아 SSR에서도 사용하려고 했습니다. next에 내장되어있는 'next/headers'가 아닌 'cookies-next'를 사용하고 있습니다. <문제 상황> 처음에는 토큰 유효 기간이 지났다(토큰 값이 들어오지 않았다)는 에러가 발생하고 곧이어 데이터를 정상적으로 받아옵니다 (제 추측으로는 SSR 과정에서 토큰 값을 인식하지 못하고 에러가 발생하고 클라이언트 단에서는 쿠키 값을 정상적으로 반영해 데이터 페칭이 진행된 것 같습니다.) <질문> 1. Suspense를 적용하지 않을 경우 에러 없이 동작하지만 next streaming이 적용되지 않습니다.. 그리고 getCookie를 통해 가져온 값이 SSR 시 적용되지 않는 이유가 궁금합니다! 2. 현재 쿠키를 사용해 SSR 시 토큰 값을 전달하려는 방법이 최선의 방법이 맞는지 궁금합니다.

개발자

#next.js

#react

답변 1

댓글 9

조회 988

일 년 전 · 김태영 님의 새로운 댓글

리액트쿼리 고수분들 도와주세요

사이드프로젝트 리팩토링을 진행하는 중에 이해가 안되는 부분이 있어 글 써봅니다. const { data, isLoading, fetchNextPage } = useInfiniteQuery( ["getProducts", sortOption, sortOrder, filterValue, categoryName], async ({ pageParam = page - 1 }) => { const response = await api.post(`/cal/v1/product/${categoryName}`, { filter: filterValue, page: pageParam, query: "", size: size, => size: size - 8 /* 변경한 부분 */ sort: [{ field: sortOption, option: sortOrder }], }); setTotalProduct(response.data.body.product.totalCount); return response.data.body.product.items; }, { refetchOnWindowFocus: false, getNextPageParam: () => page, } ); 위 코드는 인피니티 스크롤을 구현한건데요, size는 한번에 받아 올 상품의 개수 입니다. 상품을 한번에 4개 받아올때는 500ms~, 8개 = 2500ms~, 12개 = 10000ms~ 정도로 요청시간이 비정상적으로 커집니다. 사용자경험과 api요청횟수를 고려했을 때, 12개를 받아오는것이 가장 적당하다고 생각되는데 렌더링 속도가 많이 느리다고 생각되서 개선하고자 합니다. **초기렌더링 에서만 문제가 발생되고, 캐싱되어 fresh한 상태일 때는 바로 불러옵니다** 코드의 다른요소들은, 필터링. 정렬들을 위한 요소들이라 렌더링 시간에 영향을 줄 것 같지는 않은데 왜 이런 문제가 발생하는지 궁금합니다. 이 외에도 잘못작성된 부분이 있거나, 개선해야할 사항이 보이신다면 알려주시면 감사하겠습니다!!

개발자

#react

#reactquery

#infinitescroll

답변 1

댓글 3

조회 98

일 년 전 · 이충주 님의 댓글 업데이트

Oracle 21c 에서 default tablespace 지정해주는데 오류가 납니다.

안녕하세요. Oracle 21c에서 tablespace를 새로 생성하여 새로 만든 계정에 default tablespace로 지정해주려 하는데, 오류가 납니다. window cmd 창에서 sys as sysdba 로 접속했습니다. --------------------------- 오류 내용--------------------------------- SQL> ALTER USER C##SSO_USER DEFAULT TABLESPACE SSO_DB; ALTER USER C##SSO_USER DEFAULT TABLESPACE SSO_DB * 1행에 오류: ORA-65048: 플러그인할 수 있는 데이터베이스 XEPDB1에서 현재 DDL 문을 처리하는 중 오류가 발생했습니다. ORA-00959: 테이블스페이스 'SSO_DB'이(가) 존재하지 않습니다. --------------------------------------------------------------------- SELECT tablespace_name FROM DBA_TABLESPACES; 를 하면 TABLESPACE_NAME ------------------------------------------------------------ SYSTEM SYSAUX UNDOTBS1 TEMP USERS TEST_UP SSO_DB 라고 잘 뜨는데.. 왜 PDB 인 XEPDB1 에서 처리하는지 의문입니다. sys as sysdba로 접속 후 따로 PDB로 접속하진 않았거든요 이전에도 동일한 작업(tablespace 생성, 다른 계정이 default tablespace로 지정) 을 했었는데, 그땐 잘 됐거든요..

개발자

#oracle21c

#oracle

답변 1

댓글 1

조회 675

일 년 전 · 류호준 님의 답변 업데이트

도커 환경 쿼리 실행 속도 차이

3가지 도커에서 mariaDB 컨테이너를 띄위고 쿼리 성능 테스트 중 이해가 안되는 부분이 생겨 아시는 분 혹시 있나 싶어 질문올립니다 3가지 1. 기본 컴퓨터 환경 - window환경에 도커내부 mariaDB cpu memory 등 중간 2. 다른 컴퓨터 환경 - window환경에 도커내부 mariaDB cpu memory 등 가장 낮음 3. 기본 컴퓨터에서 vpn으로 연결된 환경 - linux환경에 도커내부 mariaDB cpu memory 등 가장좋음 이런 3가지 경우에서 쿼리 성능 평가시 3번이 가장 오래 걸리는 이유를 못 찾겠습니다ㅠ 쿼리는 select * from 테이블 where a and b and c 구조로 가장 기본 구조라 생각되는데 3번과 1번 2번이 2배에서 3배정도 차이가 발생하는데 혹시 추측 되는 이유가 있을까요?

개발자

#sql

#query

#mariadb

#docker

#backend

답변 1

댓글 0

추천해요 1

조회 237

일 년 전 · 김종민 님의 질문

window.open과 관련하여 질문드립니다.

안녕하세요 Flutter와 Next.js로 웹뷰를 적용시킨 앱을 운영중인데 아주 드문 케이스로 window.open이 작동하지 않습니다. 1. 앱의 경우, 일본유저의 경우에만 window.open이 실행되지 않는 현상이 발견됩니다. (국내유저는 아직 해당 현상이 발견되지 않아 일본유저에게만 발생한다 추측하고있습니다) 2. 웹의 경우, 자동완성된 url로 접근하면 window.open이 실행되지 않지만 브라우저 캐시삭제 후 다시 사이트를 접속하면 잘 동작합니다. 위의 두 케이스 모두 극히 드문 경우에 발생하며 현재 재현이 불가합니다. 혹시 위와 같은 현상이 발생하셨거나 해결방안을 알고 있으시면 답변 부탁드립니다!!

개발자

#next.js

#flutter

#webview

답변 0

댓글 0

추천해요 1

조회 206

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

(SSR 새로고침 문제)NextJS page에서 redux persist gate 설정하면 Client컴포넌트로 인식되는 문제

NextJS Pages Router에서 유저 데이터를 상태관리하기위해 redux를 사용했으나, 새로고침 시 데이터가 날라가는 문제를 해결하기 위해 persist gate를 사용했습니다. 하지만 redux persist gate를 사용하면 클라이언트 컴포넌트로 인지되는 문제가 있습니다. 궁금한 것 1) persist gate를 잘못써서 생긴 문제일까요? 아님 persist gate를 쓰면 안될까요? 2) 해결 방법으로 생각 해본 것은, "persist gate를 사용하지 않고 매 새로고침 시 저장되어있는 local storage에서 데이터를 새로 가져온다." 입니다. 3) ssr시 상태관리 새로고침 다른 방법으로 해결해본 경험 있으시면 아무렇게나 대답해주시면 감사하겠습니다!!! ----------------------------------------------- 문제의 코드 위치: https://github.com/bbookng/zippyziggy-v2/blob/main/frontend/zippy-ziggy/src/pages/_app.tsx 문제의 코드: import GlobalStyle from '@/styles/Global.style'; import useDarkMode from '@/hooks/useDarkMode'; import { media } from '@/styles/media'; import { darkTheme, lightTheme } from '@/styles/theme'; import type { AppProps } from 'next/app'; import { ThemeProvider, createGlobalStyle } from 'styled-components'; import normalize from 'styled-normalize'; import '@/styles/index.css'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import AppLayout from '@/layout/AppLayout'; import store, { persistor } from '@/core/store'; import { PersistGate } from 'redux-persist/integration/react'; import { Provider } from 'react-redux'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import 'toastify-js/src/toastify.css'; import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import DefaultHead from '@/components/Head/DefaultHead'; import Construction from './construction'; const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, // default: true }, }, }); function App({ Component, pageProps }: AppProps) { const { colorTheme, toggleTheme } = useDarkMode(); return ( <Provider store={store}> <PersistGate persistor={persistor}> <QueryClientProvider client={queryClient}> <ThemeProvider theme={colorTheme === 'dark' ? darkTheme : lightTheme}> <AppLayout toggleTheme={toggleTheme}> <Component {...pageProps} /> ... </AppLayout> </ThemeProvider> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> </PersistGate> </Provider> ); } export default App;

개발자

#next.js

#persis

#redux

답변 1

댓글 0

조회 533

25일 전 · 차근차근개발자 님의 새로운 댓글

제발 살려주세요ㅜㅜ 실무에서 코드 관리 어떻게 하나요??

안녕하세요! 신입 프론트엔드 개발자로 스타트업에 취업한지 2일차된 신입입니다ㅠㅠ 사수도 없고, 직원도 없고, 대표님이랑 저밖에 없는 작은 규모의 이제 시작하는 스타트업 입니다.. 2년차 개발자님이 계셨는데 저 출근하는 날 퇴사하셔서 조언을 구할 곳이 없습니다ㅠㅠ 코드 관리를 어떻게 할지 보고서를 작성해서 제출해야 하는데 경력도, 실무경험도 없어서 일반적으로 코드를 어떻게 관리하는지 조언을 듣고 싶습니다... 아직 코드가 어디에 어떻게 있는지는 모르지만 최대한 검색을 통해 찾아보았습니다. 검색해본 결과 GITHUB이나 GITLAB에 저장하는 경우가 일반적인 것 같은데 보통 어디에 저장하게 되나요? Gitlab의 경우 리눅스만 사용이 가능한 것 같은데 windows를 이용할 예정이라 사용이 불가능하다고 생각하면 될까요? 앞으로 인원이 충원된다고 하더라도 3명정도의 인원이 개발을 진행할 것 같습니다. github의 경우 3명의 인원이 private 레포지토리를 사용한다고 했을 때 따로 비용 청구가 없고, Private CICD 시간과 용량에서만 유료 버전과 차이가 있는 것으로 조사했습니다. 프로젝트의 용량이나 CICD의 시간의 경우 어느정도의 양인지 가늠이 되지 않아 판단이 어렵습니다.. 일단 배포 전까지 GITHUB의 Private 레포지토리를 이용하여 협업을 진행할 계획으로 말씀드려도 될까요?

개발자

#git

#github

#gitlab

#버전관리

답변 2

댓글 2

조회 325

일 년 전 · 거니 님의 답변 업데이트

react-router-dom v6에서 useNavigate의 replace:true속성과 window.location.replace()의 차이점

window.performance.getEntriesByType("navigation")[0]의 type이 back_forward인 경우에 뒤로가기로 진입했다는걸 파악하고 있었는데 페이지 이동시에 useNavigate의 replace:true 속성일 때는 해당 옵션이 안나오고 location.replace로 이동시에만 해당 옵션값으로 판별이 가능한데 두개 차이점이 존재하는걸까요,,?

개발자

#react

#react-router-dom

#location

답변 1

댓글 0

조회 411

일 년 전 · 익명 님의 질문

ububtu 22.04 소리안남

안녕하세요, windows를 사용하던 도중, ubuntu로 듀얼부팅을 진행하였습니다. 그런데 소리가 나지 않습니다. 구글링하여 나온 웬만한 방법을 시도해보았지만 되지않았습니다. 혹시 비슷한 문제를 겪으신 분이 있으면 도움 주시면 감사하겠습니다.

개발자

#ubuntu

답변 0

댓글 0

조회 186

일 년 전 · 익명 님의 질문

VM에 VPN(Wireguard)을 통한 접속 방법

안녕하세요. 제발 도움 부탁드리겠습니다. *** 제가 궁극적으로 하고 싶은 것 : 외부에서 노트북으로, 저희 집 데스크톱에 VM으로 띄워 놓은 서버에 VPN을 통해서 접속 (네트워크 지식이 부족하여, 어느 부분이 빠졌는지, 뭘 고려해야하는지, 뭘 알아야하는지... 등 조언과 훈수 부탁드립니다. 구체적인 방법을 알려주시면 가장 좋고요ㅠ) 현재 저의 상태입니다. 1. LG 유플러스 인터넷 사용, 집에 있는 데스크톱에 랜선을 꽂아서 인터넷 사용중 (IP : 192.168.219.102) 2. VMware - Bridged 방식으로 VM 서버(Ubuntu 22.04) 하나를 띄워 놓음 (IP : 192.168.219.201) 3. 위의 VM 서버에 Wireguard VPN을 설치 (VPN 서버 + 개인용 웹서버로 사용하기 위해) 4. https://jjeongil.tistory.com/2062 블로그를 보며 VPN 서버 구축을 함 5. Wireguard 설정 ㅇ 서버측 wireguard 설정(VM) [Interface] Address = 192.168.219.1/24 SaveConfig = true PostUp = iptables -A FORWARD -i %i -j ACCEPT; iptables -t nat -A POSTROUTING -o ens33 -j MASQUERADE PostDown = iptables -D FORWARD -i %i -j ACCEPT; iptables -t nat -D POSTROUTING -o ens33 -j MASQUERADE ListenPort = 51820 PrivateKey = xxxxxxxxxx= [Peer] PublicKey = xxxxxxxxxx= AllowedIPs = 192.168.219.202/32 ------------------------------------------------------------- ㅇ 클라이언트쪽 wireguard 설정(노트북) [Interface] PrivateKey = xxxxxxxxxx= Address = 192.168.219.202/24 [Peer] PublicKey = xxxxxxxxxx= AllowedIPs = 0.0.0.0/0 Endpoint = 192.168.219.201:51820 ============================================================= [ 로그 ] 2023-09-22 16:18:28.666678: [TUN] [srm-pjt-vm-server] Starting WireGuard/0.5.3 (Windows 10.0.22621; amd64) 2023-09-22 16:18:28.667384: [TUN] [srm-pjt-vm-server] Watching network interfaces 2023-09-22 16:18:28.669947: [TUN] [srm-pjt-vm-server] Resolving DNS names 2023-09-22 16:18:28.669947: [TUN] [srm-pjt-vm-server] Creating network adapter 2023-09-22 16:18:28.750000: [TUN] [srm-pjt-vm-server] Using existing driver 0.10 2023-09-22 16:18:28.762403: [TUN] [srm-pjt-vm-server] Creating adapter 2023-09-22 16:18:28.967072: [TUN] [srm-pjt-vm-server] Using WireGuardNT/0.10 2023-09-22 16:18:28.967588: [TUN] [srm-pjt-vm-server] Enabling firewall rules 2023-09-22 16:18:28.938662: [TUN] [srm-pjt-vm-server] Interface created 2023-09-22 16:18:28.972410: [TUN] [srm-pjt-vm-server] Dropping privileges 2023-09-22 16:18:28.972410: [TUN] [srm-pjt-vm-server] Setting interface configuration 2023-09-22 16:18:28.972932: [TUN] [srm-pjt-vm-server] Peer 1 created 2023-09-22 16:18:28.974501: [TUN] [srm-pjt-vm-server] Monitoring MTU of default v4 routes 2023-09-22 16:18:28.974501: [TUN] [srm-pjt-vm-server] Interface up 2023-09-22 16:18:28.977259: [TUN] [srm-pjt-vm-server] Setting device v4 addresses 2023-09-22 16:18:28.995686: [TUN] [srm-pjt-vm-server] Monitoring MTU of default v6 routes 2023-09-22 16:18:29.023405: [TUN] [srm-pjt-vm-server] Setting device v6 addresses 2023-09-22 16:18:29.072431: [TUN] [srm-pjt-vm-server] Startup complete 2023-09-22 16:18:29.070847: [TUN] [srm-pjt-vm-server] Sending handshake initiation to peer 1 (192.168.219.201:51820) 2023-09-22 16:18:34.106156: [TUN] [srm-pjt-vm-server] Handshake for peer 1 (192.168.219.201:51820) did not complete after 5 seconds, retrying (try 2) 2023-09-22 16:18:34.106156: [TUN] [srm-pjt-vm-server] Sending handshake initiation to peer 1 (192.168.219.201:51820) 2023-09-22 16:18:39.107654: [TUN] [srm-pjt-vm-server] Sending handshake initiation to peer 1 (192.168.219.201:51820) 2023-09-22 16:18:44.115294: [TUN] [srm-pjt-vm-server] Sending handshake initiation to peer 1 (192.168.219.201:51820) 2023-09-22 16:18:49.267198: [TUN] [srm-pjt-vm-server] Handshake for peer 1 (192.168.219.201:51820) did not complete after 5 seconds, retrying (try 2) 2023-09-22 16:18:49.267198: [TUN] [srm-pjt-vm-server] Sending handshake initiation to peer 1 (192.168.219.201:51820) 2023-09-22 16:18:54.340284: [TUN] [srm-pjt-vm-server] Handshake for peer 1 (192.168.219.201:51820) did not complete after 5 seconds, retrying (try 2) 2023-09-22 16:18:54.340284: [TUN] [srm-pjt-vm-server] Sending handshake initiation to peer 1 (192.168.219.201:51820) 2023-09-22 16:18:59.355253: [TUN] [srm-pjt-vm-server] Sending handshake initiation to peer 1 (192.168.219.201:51820) 2023-09-22 16:19:04.414034: [TUN] [srm-pjt-vm-server] Handshake for peer 1 (192.168.219.201:51820) did not complete after 5 seconds, retrying (try 2) 2023-09-22 16:19:04.414034: [TUN] [srm-pjt-vm-server] Sending handshake initiation to peer 1 (192.168.219.201:51820) 2023-09-22 16:19:07.916126: [TUN] [srm-pjt-vm-server] Shutting down 2023-09-22 16:19:07.922350: [MGR] [srm-pjt-vm-server] Tunnel service tracker finished

개발자

#network

#ubuntu

#vpn

#wireguard

#vm

답변 0

댓글 0

조회 353

일 년 전 · joanne 님의 답변 업데이트

queryString에 관하여

http://test.com?auth=true&data={"endPoint":"/auth","data":"{"email":"test@test.com","name":"홍길동"}"} const query = queryString.parse(window.location.search); query 사용해서 data안에 객체로 되어있는 정보들 중 data안에 email 정보(test@test.com)을 뽑아오려면 어떻게해야하나요? const query = queryString.parse(window.location.search); console.log('query.data',query.data) //query.data까지는 뽑히는데 console.log('query.data.data', query.data.data) //undefined 그래서 const parsedData = JSON.parse(query?.data); //JSON형식 const email = parsedData.data.email; //test@test.com 정보가 뽑혔어요! 하지만 query?.data에서 에러가 납니다. **error 메세지 No overload matches this call. Overload 1 of 2, '(text: string, reviver?: ((this: any, key: string, value: any) => any) | undefined): unknown', gave the following error. Argument of type 'string | (string | null)[] | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'. Overload 2 of 2, '(text: string, reviver?: ((this: any, key: string, value: any) => any) | undefined): any', gave the following error. Argument of type 'string | (string | null)[] | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'. query?.data에서 위와 같은 에러가 납니다.. query?.data의 type은 JSON형식 아니고 string입니다. console.log(query?.data) // {"endpoint":"/auth","data":{"email":"test@test.com","name":"홍길동"}} string에서 email을 뽑아야할까요?.. JSON형식으로 가져올순 없을까요? 에러 원인 및 피드백 부탁드립니다.

개발자

#react

#json

#querystring

#parse

#stringify?

답변 2

댓글 0

조회 86

2년 전 · 익명 님의 질문

한글 인코딩을 했는데 에러가 계속나요

error: unmappable character (0xEB) for encoding x-windows-949 import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; public class Love2 { public static void main(String[] arge){ String url = "jdbc:mysql://localhost:3306/mysql?useUnicode=true&characterEncoding=utf8"; String username = "root"; String password = "1234"; try { Connection connection = DriverManager.getConnection(url, username, password); System.out.println("데이터베이스에 연결되었습니다."); // 여기에서 SQL 쿼리를 실행하여 데이터를 관리합니다. connection.close(); } catch (SQLException e) { e.printStackTrace(); } } } 어떻게 오류가 있을까요

개발자

#jdbc

답변 0

댓글 0

조회 54

2년 전 · 익명 님의 질문

gpu 1개로 cuda,cudnn 버전을 wsl2와 window10에서, 각각 다른 버전을 사용할수 있나요?

집에있는 pc의 운영체제는 window10, gpu는 gtx1070 1개이고, wsl2를 설치해서 ubuntu20.04를 사용하고 있는데, window10 에는 cuda 10.1, cudnn 7.6.4 를 사용하고 있는데, wsl2에서도 gpu를 쓰려고 하는데,cuda 11.2, cudnn 8.1을 쓰고 싶은데, 1대의 gpu로 window10과 wsl2에서 다른 버전으로 각각 사용할수 있을까요? * tensorflow 사용중

개발자

#cuda

답변 0

댓글 0

조회 14

일 년 전 · 털먹는토끼 님의 새로운 댓글

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>     ) }

개발자

#next.js

답변 3

댓글 3

조회 367

2년 전 · 박예진 님의 질문 업데이트

채팅 새로고침시 연결 끊기는 문제

안녕하세요. 현재 Websocket과 stompjs v6.0.0을 활용해 채팅을 구현했습니다. roomId로 여러 채팅방을 만들 수 있게 구현했고, 현재 새로고침을 하지 않는 이상 잘 돌아갑니다. 그러나, 새로고침 할 시에는 바로 연결이 끊겨 이전의 채팅 내역도 보이지 않고, 연결, 구독 내역이 사라집니다 ... 어떻게 reconnect 해야할까요? 단순히 채팅 페이지에서 useEffect로 connect를 다시 하니 이미 연결 구독이 된 상태라고 뜨더라구요 .... ㅠㅠ (고민글을 올렸을 때 채팅방이 생성되고, 연결 구독이 됩니다. 채팅 시작 버튼을 눌렀을 경우에는 본인이 연결 구독이 되어 1대 1로 상대방과 채팅이 시작되는 구조입니다. ) import { CompatClient, Stomp } from "@stomp/stompjs"; import { createContext, useContext, useMemo, useRef } from "react"; import { useSetRecoilState } from "recoil"; import { messageState } from "../../states/chatting"; import audio from "../../assets/audios/chatting.mp3"; const ChatContext = createContext( {} as { connect: (roomId: number) => void; disconnect: () => void; send: (roomId: number, message: string) => void; }, ); export const useChatContext = () => useContext(ChatContext); export function ChatProvider({ children }: any) { const setMessages = useSetRecoilState(messageState); const token = localStorage.getItem("accessToken"); // 채팅 연결 구독 const client = useRef<CompatClient>(); const connect = (roomId: number) => { client.current = Stomp.over(() => { const sock = new WebSocket("wss://m-ssaem.com:8080/stomp/chat"); return sock; }); client.current.connect( { token: token, }, () => { client.current && client.current.subscribe( `/sub/chat/room/${roomId}`, (message) => onMessageReceived(message, roomId), { token: token!, }, ); }, ); return client; }; const onMessageReceived = (message: any, roomId: number) => { const audioElement = new Audio(audio); audioElement.play(); setMessages((prevMessages) => { const updatedMessages = { ...prevMessages, [roomId]: [...(prevMessages[roomId] || []), JSON.parse(message.body)], }; return updatedMessages; }); }; // 채팅 나가기 const disconnect = () => { if (client.current) { client.current.disconnect(() => { window.location.reload(); }); } }; // 채팅 보내기 const send = (roomId: number, message: string) => { if (client.current) { client.current.send( `/pub/chat/message`, { token: token, }, JSON.stringify({ roomId: roomId, message: message, type: "TALK", }), ); } }; const handlers = useMemo(() => ({ connect, disconnect, send }), []); return ( <ChatContext.Provider value={handlers}>{children}</ChatContext.Provider> ); } ----------이 부분은 connect 하는 부분입니다 --------- const { connect } = useChatContext(); const chatRoomId = worryBoard && worryBoard.chatRoomId; const handleStartChatting = () => { navigate(`/chatting`); connect(chatRoomId!!); }; ------------ 채팅 페이지는 따로 있습니다 --------------

개발자

#websocket

#stompjs

#채팅

#chatting

#react

답변 0

댓글 0

조회 326