목록React (101)

개발 노트

정렬기능 보완

RMAN/WEB데이터를 제외한 나머지 데이터 업데이트 시에만 업데이트 순으로 정렬하게 변경 1. 특정토픽일 때 정렬하도록 정규식을 사용하여 와일드카드 문자를 사용할 수 있게 적용 export const extractTimeFromSpecificTopics = (topic: string, message: string): string => { const specificTopics = ['dawoon/Robot/#', 'dawoon/Feeder/#', 'dawoon/SMARTGATE/#']; // 토픽이 특정 토픽에 속하면 시간을 추출, 그렇지 않으면 빈 문자열을 반환 if (specificTopics.some((specificTopic) => new RegExp(`^${specificTopic.replace..
React 2024. 2. 27. 09:38
정렬버튼 추가하기

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
이전 Prev 1 2 3 4 5 6 7 8 ··· 17 Next 다음