윈도우에서는 package.json 파일에서 scripts 부분의 start 부분을 아래와 같이 변경 해주어야한다. "scripts": { "start": "set HTTPS=true&&set SSL_CRT_FILE=cert.pem&&set SSL_KEY_FILE=key.pem&&react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },

React+Tailwind css를 사용하여서 UI를 구성하며 사용자의 인증 처리는 JWT 토큰을 통해서 인증 처리한다. 본 프로젝트에서는 Refresh Token은 사용하지 않고 AccessToken 만을 사용하여서 인증 처리를 한다. 주요기능 로그인 사용자가 로그인 요청시 AccessToken 발급 처리 후 LocalStorage에 Token값과, 만료일시를 저장한다. 만료 일시가 중요한 이유는 callBack 함수에서 만료일시가 되면 로그아웃을 수행하기 때문이다. 코드는 Github를 참고 하시기 바랍니다.

프로젝트 개요 프로젝트를 시작하게 된 이유는 React와 Tailwind css로 된 clone 사이트를 찾다가 아래 강좌를 보고 UI는 구성하게 되었습니다. https://www.youtube.com/watch?v=ATz8wg6sg30 하지만 Backend는 Spring Security 와 JWT 를 사용하여서 자체 구축 하였습니다.다른 예제에는 Refresh Token 갱신까지 다루었지만 본 프로젝트에서는 서버에서는 지정한 토큰만료시간에 맞춰 로그아웃 처리하도록 하였다. Requirements [TMDB]: https://www.themoviedb.org/?language=ko 사이트 인증키 발급을 받아야 합니다. 본 예제에서 사용되는 영화 정보 및 이미지 정보는 TMDB API를 통하여서 구현이 되..

앞선 예제에서 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..

Producer에서 전송한 배달정보를 수신하여서 WebSocket으로 배달정보를 전송한다. Spring Kafka Consumer Project 서버 설정을 위한 application.yml server: port: 9001 spring: output: # Console Color 표시 ansi: enabled: ALWAYS kafka: consumer: bootstrap-servers: localhost:9092 Kafka consumer configuration package com.roopy.delivery.consumer.config; import lombok.RequiredArgsConstructor; import org.apache.kafka.clients.consumer.ConsumerCon..

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