웹프로그램이야기(99)
-
인터페이스 JMeter 성능 테스트
MSA 서비스 개발시 보통 REST 방식을 가장 많이 쓸것이다. REST방식외에 WebFlux와 gRPC 방식으로 개발했을때 성능을 테스트 해보았다. WebFlux의 경우 R2DBC와 JDBC 방식으로 개발하여서 테스트를 진행하였다. 테스트 전의 예상의 WebFlux는 비동기 방식을 지원하더라도 일부 NoSQL이 아닌 RDB의 경우 Blocking 방식으로 처리 되어서 JDBC 연동은 느릴것으로 생각했었고 R2DBC는 비동기 방식을 지원하기 때문에 R2DBC가 빠를 것으로 예상했으나 그렇지는 않았다. 물론 단순희 조회 하나만 테스트 해서 그럴 수 있을 것이다. 향후 좀더 다양한 케이이스를 추가해봐야겠다. 테스트시나리오 1초에 동시에 100명의 사용자가 현재 위치에서 가까운 스타벅스 매장을 검색한다고 가정..
2023.02.10 -
Step1: react-netflix-clone-ui
React+Tailwind css를 사용하여서 UI를 구성하며 사용자의 인증 처리는 JWT 토큰을 통해서 인증 처리한다. 본 프로젝트에서는 Refresh Token은 사용하지 않고 AccessToken 만을 사용하여서 인증 처리를 한다. 주요기능 로그인 사용자가 로그인 요청시 AccessToken 발급 처리 후 LocalStorage에 Token값과, 만료일시를 저장한다. 만료 일시가 중요한 이유는 callBack 함수에서 만료일시가 되면 로그아웃을 수행하기 때문이다. 코드는 Github를 참고 하시기 바랍니다.
2022.12.26 -
Netflix Clone Project 를 시작하며
프로젝트 개요 프로젝트를 시작하게 된 이유는 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를 통하여서 구현이 되..
2022.12.26 -
React infinite scroll
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..
2022.11.30 -
React WebSocket 연동
앞선 예제에서 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..
2022.11.26 -
Kafka consumer를 이용한 배달 정보 수신 및 WebSocket 배달정보 전송
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..
2022.11.26