윈도우에서는 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를 통하여서 구현이 되..

react-infinite-scroll-component 라이브러리를 이용하여서 페이징 처리에 대해 알아보도록 하자. 프로젝트 설정 및 라이브러리 설치 Tailwind 프로젝트 설정 사이트: https://tailwindcss.com/docs/guides/create-react-app Install Tailwind CSS with Create React App - Tailwind CSS Setting up Tailwind CSS in a Create React App project. tailwindcss.com react-infinite-scroll-component 설치 사이트: https://www.npmjs.com/package/react-infinite-scroll-component react-i..

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