모니터에 특정 pixel에 색상을 확인하고 설정해 놓은 색이 나오면 색을 인식하여 클릭 이벤트가 동작하는 예제입니다. 알아야 하는 내용 1. 특정 pixel 에 좌표를 알아야 한다. 2. 특정 pixel 의 색상을 알아야 한다. 3. 마우스 click event 가 발생해야 한다. 4. 주기적으로 특정 좌표의 색을 확인할수 있어야 한다. 위의 기능을 하나씩 확인해 보도록 하겠습니다. 설치해야 하는 package 는 Pillow pyautogui 2가지 입니다. https://pyautogui.readthedocs.io/en/latest/ https://pillow.readthedocs.io/en/stable/installation.html 실행 소스는 아래와 같다. import pyautogui # 현재 스크린의 사이즈를 확인한다. screenWidth , screenHeight = pyautogui . size () print ( screenWidth , screenHeight ) # 현재 스크린을 저장한다. im = pyautogui . screenshot () # 특정 영을만 저장할수도 있다. #im = pyautogui.screenshot(region=(0,0, 300, 400)) # 현재 마우스의 좌표를 구한다. cmpos = pyautogui . position () # 현재 좌표의 RGB 값을 구한다. rgb = im . getpixel ( cmpos ) # 무슨 색인지 출력한다. print ( rgb ) # 마...
어제 윈도우 업데이트를 하였다. 그냥 늘 하던 거라. 그냥 업데이트 하였다. 그 결과 vscode 에서 wsl 환경으로 세팅한 개발환겨이 열리지 않는다. 이게 세팅하고 운영하기 편해서 그냥 사용했는데 이런 문제가 발생할줄 몰랐다. vscode 의 문제인지 아니면 내컴만 문제인지 모르겠다. docker 를 이용해서 구성하는 방법도 있지만 이게 더 간단한 방법이고 ( 나에게는) 쉬워서 사용했는데 솔루션을 변경할 필요가 있는것 같다. 아~~~ 아마도 업데이트로 인하여 VS code server 를 다시 설치해야 하는 이슈가 발생한 것 같다. 당연히 vscode 프로그램에서는 그냥 timeout issue 가 발생할 수 있을 것으로 예상된다. 왜 평상시 같은 경우 서버에서 code server 를 받는 일이 많지 않지만 윈도우 업데이트의 영향을 받을 경우 모든 WSL 환경의 vscode project 는 무조건 code server 를 다운로드 받아서 다시 설치해야 하는 이슈가 있기 때문에 해당 서버가 맛탱이가 갈거라 예상된다. 돈주는 회원부터 사탕을 드릴거고 무료사용자들은 돈주고 사용하는 회원처리한 후 줄서서 다운로드 받아야 정상적으로 vscode 가 동작할 것이라 예상된다. 위에 있는 내용은 terminal 에서 wsl 접근하여 프로젝트에 code . 을 실행한 화면이다. 5% 에서 그냥 멈춘다. code . 이 뭔지 알고 싶으면 아래 링크를 들어가 보시면 된다. https://docs.microsoft.com/ko-kr/windows/wsl/tutorials/wsl-vscode
전면 개정 안내 (2026-07-24) 2021년의 Create React App과 Socket.IO 3.x 예제를 Vite, React, Socket.IO 4.x 기준으로 다시 작성했습니다. CORS 설정뿐 아니라 이벤트 리스너 중복, React Strict Mode, 재연결 상태까지 함께 다룹니다. React 개발 서버와 Socket.IO 서버를 서로 다른 포트로 실행하면 브라우저 기준으로 출처(origin)가 달라집니다. text React: http://localhost:5173 Socket.IO: http://localhost:4001 출처는 프로토콜, 호스트, 포트의 조합입니다. 포트 하나만 달라도 교차 출처 요청이므로 Socket.IO 서버가 React 개발 서버를 명시적으로 허용해야 합니다. 하지만 CORS만 고친다고 React 연동이 완성되는 것은 아닙니다. 컴포넌트가 다시 마운트될 때 리스너를 중복 등록하지 않도록 정리하고, 연결 끊김과 재연결을 UI에 표시해야 합니다. 이번 글에서는 1초마다 서버 시간을 보내는 작은 예제로 이 전체 흐름을 구현합니다. 완성 구조 text react-socketio-example/ ├─ server/ │ ├─ package.json │ └─ server.js └─ client/ ├─ .env.development └─ src/ ├─ App.jsx ├─ App.css └─ socket.js 구성 요소 역할 Socket.IO 서버 연결마다 타이머 생성, clock:tick 전송 CORS 허용 목록 React 개발 서버의 정확한 origin만 허용 socket.js Socket.IO 클라이언트 인스턴스를 한곳에서 생성 App.jsx 연결 상태와 이벤트를 React 상태로 반영 useEffect 정리 함수 등록한 리스너 제거와 연결 종료 1. Socket.IO 서버 만들기 먼저...
댓글
댓글 쓰기