앞선 예제에서 Producer, Consumer 를 통해서 라이더들이 전송한 배달정보를 받고 보내는 테스트 까지 완료 했다. 마지막으로 React App 을 통해서 전달받은 배달정보로 배송상태의 정보와 색깔을 변경 해보도록 하자. TodoList 에서 기본적인 React 프로젝트 설정에 대해서 설명 하여서 이 부분은 생략 하겠다. 아래 소스를 보면서 어떻게 WebSocket을 연동하는지 알아보도록 하자. /* * install * nap install react-stomp * npm install sockjs-client --save */ import React, { useState, useEffect } from "react"; import SockJS from "sockjs-client"; impor..

웹소켓을 이용해서 많은 분들이 채팅 프로그램을 만드는거 같다. 예전에 화물차(컨테이너) 의 관제 시스템을 만들면서 웹소켓을 이용하여서 실시간으로 화물차의 위치정보를 받아서 지도 상의 실시간 위치 및 화물의 배송상태를 모니터링 할 수있도록 만들었던 경험이 있는데 그 때 웹소켓이 참 유용하였던거 같아서 Websocket, Kafka 를 이용하여 실시간으로 React App 에 배달정보를 업데이트는 하는 프로그램을 만들어 보자. 프로젝트 목적 Spring Kafka 를 이용하여서 Producer, Consumer 구현을 익힌다. Spring Websocket 과 sockjs-client, stomp 을 이용하여서 Spring Kafka Consumer에 전송된 메세지를 이용하여 실시간 정보 업데이트에 대해 익..

예제는 아주 간단한 예제이지만 처음에 React를 접하고 나서 잘 이해가 가지 않았지만 몇번을 보고 나서는 이해 하게 되었다. 특히 앞선 클로저를 이해하고 나서는 왜 변경함수를 통하여 현재 상태값을 변경하는지도 이해하기 쉬웠던거 같다. 비록 간단한 예제 이지만 처음으로 React를 접하는 분들에게는 꼭 useState를 잘 이해하기를 바랍니다. 전체적인 컴포넌트 구조는 아래와 같다. 위의 화면은 Todo 예제 전체 컴포넌트 구조 이다. 부모 컴포넌트는 Todo 이고 자식 컴포넌트는 TodoForm, TodoList 로 구성 된다. [Todo.jsx] import React, { useState } from "react"; import TodoForm from "./TodoForm."; import Tod..

useState Hook은 아래와 같이 현재상태값, 상태변경함수를 반환하여 준다. setState 함수를 통하여 상태값이 변경이 되면 컴포넌는 Re-redering이 된다. const [state, setState] = useState(초기값); 궁금했던 점은 setState 함수는 호출 하고 나서 실행컨텍스트스택에서 setState는 제거 되는데 현재상태값을 어떻게 가져 올 수 있는지 였다. 상태값을 가져올 수 있는 이유는 클로저(closure)로 구현 되어 있기 때문이다. 클로저에 대한 이해 클로저에 대한 이해 에 대한 예제와 내용은 모던 자바스크립트 Deep Dive 책의 코드와 내용을 정리한 것입니다. 클로저에 대한 MDN의 정의는 다음과 같다. A closure is the combination..