미리보기

프로젝트 개요

공간을 제공하고자 하는 사용자와 필요한 이용자를 빠르게 연결하는 공간 공유 플랫폼입니다. 사용자는 제공할 공간을 등록하고 관리할 수 있으며, 이용자는 다양한 공간을 검색하고 예약할 수 있습니다.

목표 이용층

카페, 스튜디오, 회의실 등을 대여하고자 하는 공간 제공자와 행사 및 모임을 위해 공간을 찾는 사람들

사용 기술

• 백엔드: Spring Boot, Spring Security, Java 17, JPA, MySQL

• 프론트엔드: React, JavaScript, CSS3, Axios, Redux

• API: Kakao Map API

• 데이터베이스: MySQL

• 실시간 통신: WebSocket, STOMP

• 데이터 관리: JPA와 Specification을 활용한 검색 및 필터링 기능

• 이미지 처리: AWS S3

• 배포: AWS EC2

• 보안: JWT 인증 및 권한 관리

• 기타: 효율적인 데이터 처리 및 전송을 위한 Blob 객체 사용, 라우팅 및 상태 관리를 최적화한 React 구조

주요 기능

• 공간 등록 및 관리: 공간 제공자가 공간 등록, 수정, 삭제를 통해 공간을 관리

• 검색 및 필터링: JPA의 Specification을 활용하여 공간 및 신고 횟수 데이터를 동적 쿼리로 검색하고 필터링

• 예약 및 결제 관리: 사용자가 원하는 공간을 예약하고 결제 절차를 간소화

• 데이터 및 이미지 전송 최적화: Blob 객체를 사용하여 JSON 데이터와 이미지 파일을 한 번에 전송

성과

• 효율적인 데이터 처리: JPA의 Specification을 사용해 한 번의 요청으로 호스트 및 공간 리스트와 신고 횟수를 효율적으로 가져와 성능을 최적화

• 동적 라우팅 및 관리 간소화: React의 RoutesAndMenu 배열을 이용해 유연하게 라우트를 관리, 코드 중복을 줄이고 재사용성 강화

• 데이터 전송 최적화: Blob 객체를 사용해 JSON과 이미지 데이터를 동시에 전송하여 서버-클라이언트 간 통신 효율성을 개선

역할 및 주요 업무

• 검색 기능 최적화: JPA의 Specification 기능을 통해 신고 횟수를 포함한 공간 리스트 검색 및 필터링 기능 구현

• React 페이지 라우팅 및 상태 관리: 동적 라우팅을 위해 RoutesAndMenu 배열을 정의하고 map() 함수를 통해 라우트 및 메뉴 구성을 최적화

• 데이터 및 이미지 전송 구현: Blob 객체를 사용하여 JSON과 이미지 파일을 FormData로 동시에 전송해 서버-클라이언트 간 데이터 통신 효율성 증대

• UX 개선을 위한 성능 최적화: React 상태 관리와 Blob 객체 활용으로 데이터 전송 속도를 높이고, 사용자 경험을 강화

프로젝트 개요

전자상거래를 위한 통합 시스템으로, 제품 등록, 주문 처리, 결제, 배송 관리까지 직접 수행할 수 있는 플랫폼을 제공합니다. 한 업체가 상품 관리를 간편하게 할 수 있도록 설계되었습니다.

목표 이용층

단일 업체가 자체적으로 제품을 관리하고 판매하는 온라인 쇼핑몰

주문, 결제 및 배송 과정을 효율적으로 관리하고자 하는 사업체

사용 기술

• 백엔드: Dynamic Web Project 기반 Java, Servlet

• 프론트엔드: HTML, CSS, JavaScript (Fetch API)

• 데이터베이스: MySQL

• 기타: SOLID 원칙을 반영한 MVC2 아키텍처 적용, 동적 웹 페이지 생성을 위한 Servlet 및 Properties 설정 파일 사용

주요 기능

• 상품 등록 및 관리: 제품 등록, 수정, 삭제 기능을 제공하여 상품 정보를 효율적으로 관리

• 주문 및 결제: 고객이 제품을 주문하고 결제하는 절차 지원

• 배송 관리: 주문 제품의 배송 상태를 확인 및 업데이트

• 캐싱을 통한 성능 최적화: 이미지 캐싱으로 네트워크 트래픽을 줄여 메인 페이지 로딩 속도 개선,

성과

• 이미지 로딩 최적화: 메인 페이지 이미지를 Buffer에 저장하여 로드 시간 단축 및 네트워크 트래픽 91.88% 감소

• 유연한 데이터 관리: Properties 파일을 통해 데이터베이스 전환이 용이하며 SQL 문을 코드에서 분리하여 가독성 및 유지보수성을 향상

• 동적 요청 처리: init.txt를 활용해 URI와 메소드를 매핑하여 요청을 동적으로 처리할 수 있게 하여 성능을 개선했습니다.

• 유연한 MVC2 아키텍처 적용: 메뉴별로 Action Class를 분리하고 설계하여, 향후 기능 확장이 쉽도록 코드의 재사용성을 높였습니다.

• 확장성: MVC2 아키텍처와 SOLID 원칙을 적용하여 새로운 기능 추가 시 코드 변경 최소화

역할 및 주요 업무

• Action Class 최적화: 클래스의 명확한 분리와 네이밍을 통해 코드의 유지보수성을 높이고 기능별로 쉽게 확장 가능하도록 구조화

• MVC2 모델 설계 및 구현: SOLID 원칙을 반영한 Action Class와 서블릿 구조를 적용하여 동적 요청 처리를 가능하게 함

• Servlet 및 URI 관리: init.txt 파일을 읽어 URI와 Method를 매핑하여, 동적 메소드 호출을 통해 효율적인 요청 처리

• 성능 최적화: 캐싱을 통해 트래픽을 줄이고 Properties 설정으로 코드와 데이터베이스를 분리하여 관리 용이성 및 성능 개선

• 비동기 데이터 처리: Fetch API를 사용해 백엔드와 비동기 방식으로 데이터를 주고받아 빠른 페이지 전환 및 응답 속도 개선

• UI/UX 개선: JavaScript를 이용해 이미지 슬라이드 기능을 구현하고, 트랜지션 효과 및 다양한 이벤트를 추가하여 사용자가 직관적으로 시스템을 이용할 수 있도록 설계

프로젝트 개요

병원 의료 서비스를 통합하여 관리할 수 있는 시스템

프로세스 : 예약 - 접수 - 진료 - 수납

내원 환자가 볼 수 있는 DID 화면 구현

목표 이용층

소규모 의원급 병원

의사 2명, 간호사 1명, 간호조무사 2명으로 설정

의사별 예약, 진료, 대기열을 관리하는 로직 구현

사용 기술

• 백엔드: Spring Boot 2.7.8, Spring Security 5.x, Java 11, MyBatis 2.3.0

• 프론트엔드: React, JavaScript, CSS3, Axios, Redux, Context API, MUI

• 데이터베이스: MariaDB

• 보안: JWT 인증 및 권한 관리

• 통신: MQTT - EMQX

주요 기능

• 예약: 담당의사별 예약

• 접수: 환자 정보 입력

• 진료: 진단, 처방

• 수납: 처방전, 진료의뢰서

• 채팅: 의사, 간호사, 간호조무사간의 1:1, 단체 채팅방

성과

• 확장성 강화: RESTful API 설계로 시스템 구조가 확장 가능하게 되어 유지보수가 용이

• 보안 강화: Spring Security와 JWT 인증을 적용해 권한 관리와 보안을 개선

• 실시간 반응성 개선: EMQX를 통한 실시간 데이터 전송을 통해 환자와 의료진 간의 실시간 채팅 및 알림 전달 기능이 개선됨

• MQTT 통신 최적화: Context API와 useRef를 활용하여 MQTT 중복 연결 문제를 해결하고, 전역 상태 관리로 MQTT 클라이언트의 성능을 최적화함

• UI/UX 개선: MUI와 Context API를 사용해 React 기반 전역 상태 관리 및 UI 성능을 최적화하여 의료진과 환자의 상호작용이 원활하게 진행됨

역할 및 주요 업무

• 진료 관리: 의사별 진료 기록과 대기열 관리 로직 구현, 진단 및 처방 기능 포함

• MQTT 통신 관리: Context API와 useRef를 활용해 MQTT 클라이언트를 전역적으로 관리하여 리렌더링 시 중복 연결 문제를 해결. MQTT 통신 문제를 해결하고 데이터가 누락되지 않도록 최적화

• 채팅 및 알림: Spring 기반 MQTT를 사용해 메시지 전송 시 Topic을 구성하여 알림 전송 및 사용자가 속한 채팅방 전체 구독 처리. 알림 Topic 처리를 통해 실시간 알림 기능 구현

• DID 화면 설정: 내원 환자가 볼 수 있는 DID 화면을 구현해 예약 상태 및 진료 순서를 시각적으로 표시하여 사용자 경험 강화

• 관리자 페이지: 의사, 간호사, 간호조무사 정보 수정 및 DID 화면 메시지문구와 동영상 설정