목록React (100)

개발 노트

정렬버튼 추가하기

1. 버튼 컴포넌트 제작 import { useButtonStore } from "@/store/useButtonStore"; const SortButton: React.FC = () => { const {activeSortButton, setActiveSortButton} = useButtonStore() const handleClick = (e: React.MouseEvent): void => { const sort = e.currentTarget.dataset.sort; if (!sort) return switch (sort) { case 'update': setActiveSortButton(sort); break; case 'farmName': setActiveSortButton(sort); br..
React 2024. 2. 26. 18:03
web-worker로 가져온 MQTT Data를 세부 컴포넌트에 적용시키기

1. 초기에 필요한 모양으로 받아온 값 처리 import { extractTime } from '@/utils/extractTime'; import { create } from 'zustand'; export type Message = { topic: string; message: string; time: string; additionalFields?: { [key: string]: any; }; }; type Store = { messages: Message[]; addMessage: (payload: Message) => void; findMessagesByTopics: (topics: string[]) => Message[]; }; export const useMqttStore = create((s..
React 2024. 2. 26. 17:58
[실패]mqtt로 받은 메세지 컴포넌트 내부에 전달

1. 컴포넌트 내부에서 messages배열을 호출하여 상황에 맞게 처리하려고 함 ->update실패 const splitTopic = message.topic.split('/'); const farmCode = splitTopic.length > 2 ? splitTopic[2] : ''; // 시간 값을 추출 const time = extractTime(message.message); const robotMilkingformState = { cpu: 0, ram: 0, hdd: 0, sql: 0, farmName: farmCode, errorState: false, errorList: true, robotCount: 0, gateCount: 0, robotMessage: '', gateMessage: '..
React 2024. 2. 23. 18:33
MQTT/web-worker 다중 컴포넌트 연동

1. Context를 사용한 전역관리 import React, { useEffect, useRef, createContext,useContext } from 'react'; import { useMqttStore } from '@/store/useMqttStore'; // 웹 워커를 공유하기 위한 컨텍스트 생성 export const WorkerContext = createContext(null); type Props ={ children:React.ReactNode; } const currentTime =new Date().toLocaleString('ko-KR', { hour12: false, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-..
React 2024. 2. 22. 18:14
[Next.js] web worker을 이용한 mqtt와 웹소켓 적용하기

mqtt https://mqtt.org/ MQTT - The Standard for IoT Messaging Why MQTT? Lightweight and Efficient MQTT clients are very small, require minimal resources so can be used on small microcontrollers. MQTT message headers are small to optimize network bandwidth. Bi-directional Communications MQTT allows for messaging betwe mqtt.org web socket 참고: https://ko.wikipedia.org/wiki/%EC%9B%B9%EC%86%8C%EC%BC%9..
React 2024. 2. 6. 17:37
webWorker관련 참고자료

https://tech.kakao.com/2021/09/02/web-worker/ 브라우저 Web Worker 다루기 with 오피스 문서 텍스트 추출 및 암호해제 안녕하세요. 톡플랫폼개발팀 bishop.cho입니다. 현재 메일클라개발셀에서 프론트엔드 업무 개발을 담당하고 있습니다. 기존에는 자바스크립트로 동작하는 오피스 에디터 및 뷰어 개발을 했던 경 tech.kakao.com https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API Web Workers API - Web APIs | MDN Web Workers makes it possible to run a script operation in a background thread separat..
React 2024. 2. 5. 18:23
이전 Prev 1 2 3 4 5 6 7 8 ··· 17 Next 다음