목록React (98)

개발 노트

[실패]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
Next.js 13 이상 localization 적용하기

localization 이란? 국제화( i18n)을 통해 감지한 언어로 번역 및 언어를 교체 해줍니다. 적용하기 1. app/[lang]/dictionaries.js 만들어 번역하는 모듈을 적용시켜 줍니다. import 'server-only' const dictionaries = { en: () => import('../../public/dictionaries/en.json').then((module) => module.default), ko: () => import('../../public/dictionaries/ko.json').then((module) => module.default), } export const getDictionary = async (locale) => await diction..
React 2024. 1. 22. 18:09
Next.js 13 이상 국제화(i18n) 적용

i18n(Internationalization)이란? https://ko.wikipedia.org/wiki/%EA%B5%AD%EC%A0%9C%ED%99%94%EC%99%80_%EC%A7%80%EC%97%AD%ED%99%94 국제화와 지역화 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 대부분 중국어(번체)로 현지화된 TDE 소프트웨어 프로그램의 스크린샷 국제화와 지역화는 출판물이나 하드웨어 또는 소프트웨어 등의 제품을 언어 및 문화권 ko.wikipedia.org 시작하기 1. app하위에 i18n/settings.js 파일을 만들어서 다음과 같이 설정해줍니다. // app/i18n/settings.js export const fallbackLang = 'ko-KR' export ..
React 2024. 1. 19. 18:05
이전 Prev 1 2 3 4 5 6 7 8 ··· 17 Next 다음