목록React (98)

개발 노트

자료구조 변경 비교

기존 : mqtt 수신내역을 배열형태로 일괄적으로 담음 변경 후 : mqtt수신 시 farmCode기준으로 묶어서 내부에 필요한 정보만 저장 기존 호출 컴포넌트 const ResizableComponent: React.FC = () => { const workerRef = useRef(null); const { messages, addMessage } = useMqttStore(); useEffect(() => { const URL = '/mqttWorker.built.js'; if (!workerRef.current) { const worker = new Worker(URL); workerRef.current = worker; workerRef.current.onmessage = function (ev..
React 2024. 3. 13. 09:30
Next.js에서 mysql2 연결하기 (net error 해결기)

net error는 왜 발생하는 것인가?! 서버사이드 렌더링을 해야하는데 클라이언트단에서 렌더링을 시도할 때 발생!! -> 서버사이드 렌더링으로 코드를 수정해야 한다!! api통신으로 해결하는 방법으로 수정 1.db 연결하기 // src/lib/db.ts import mysql from 'mysql2/promise'; const database = mysql.createPool({ host: process.env.DB_HOST, user: process.env.DB_USER, password: process.env.DB_PASSWORD, database: process.env.DB_DATABASE, port: 3306, }); export default database; 2. api page만들기 imp..
React 2024. 2. 29. 11:38
mqtt연결 시 connected반복 에러

mqtt - npm (npmjs.com) mqtt A library for the MQTT protocol. Latest version: 5.3.6, last published: 2 days ago. Start using mqtt in your project by running `npm i mqtt`. There are 2650 other projects in the npm registry using mqtt. www.npmjs.com import { count, log } from 'console'; import mqtt, { MqttClient } from 'mqtt'; const mqttUri = 'ws://127.0.0.1:9001'; const options: mqtt.IClientOptions..
React 2024. 2. 28. 17:33
정렬기능 보완

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