라이더들은 배달 정보를 앱을 통해 전송한다. 앞에서 보았지만 앱 대신에 Swagger를 이용하여서 메세지를 전송한다. Zookeeper 설치 및 설정 Zookeeper 설치 및 설정은 아래 글을 참고 하시면 됩니다. https://jydlove.tistory.com/82 이번 프로젝트에서는 zNode1 하나만 설정 하여서 프로젝트를 진행하도록 하겠습니다. Kafka 설치 및 설정 Kafka 설치 및 설정은 아래 글을 참고 하시면 됩니다. https://jydlove.tistory.com/83 이번 프로젝트에서는 kafkaNode1 하나만 설정 하여서 프로젝트를 진행하도록 하겠습니다. Spring Kafka Producer Project 서버 설정을 위한 application.yml server: port..

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

방문횟수 일주일 한번은 꼭 감 맛 파, 고기, 감자 만으로 되어 있으며 국물은 개운 하며 무엇보다 고기양이 많으며 고기는 아주 연함 개인적으로 고기양이 많아서 좋음 위치 서울 영등포구 여의대방로69길 7 1층 106,107호

예제는 아주 간단한 예제이지만 처음에 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..

10초마다 메시지를 Consumer로 전송하는 Producer 예제를 만들도록 하겠습니다. 1. 프로젝트 설정 앞선 예제와 동일하게 https://start.spring.io/ 사이트에서 springboot-kafka-producer 프로젝트를 생성해줍니다. 프로젝트 생성 후 프로젝트 구조는 아래와 같습니다. 2. 소스 코드 application.properties server.port=10001 spring.output.ansi.enabled: always bootstrap-servers=localhost:9092,localhost:9093,localhost:9094 KafkaProperties.java package com.roopy.config; import lombok.Data; import or..