미리보기

기업 법률 업무 프로세스의 효율 향상을 위한 법무관리 솔루션 Law.ai를 개발했습니다.

IoT 사물 인터넷을 활용한 실시간 위치, 데이터 시각화 모니터링 솔루션 RMS와 병원 업무 효율화를 제공하는 SH 솔루션을 개발 하였습니다.

초고령화 사회 대비 교통약자를 위한 실시간 택시 예약 플랫폼 우리고 서비스를 개발 하였습니다.

Description

기업 법무팀의 업무를 프로세스화 하여 제공하는 기업용 법무관리 서비스 플랫폼

Experience

업무명 : 엑셀 생성 라이브러리 교체
설명 : 기존에 사용하던 Sheet.js 라이브러리는 엑셀 생성 시 스타일 기능을 사용하려면 라이브러리를 유료로 결재하여 사용중이었습니다. Excel.js 라이브러리를 사용하면 무료로 스타일 기능 가능하여 라이브러리 교체와 코드 리팩토링 진행 하였습니다.
성과 : 라이브러리 교체로 비용절감, 코드 가독성 개선

업무명 : 사용자 경험(UX) 개선
설명 : 고객사 측에서 웹 사이트를 사용하면서 불편 사항 ,개선 요청 사항을 종합하여 사용자 경험을 개선 하기 위해 낙관적 업데이트 도입, 스타일 업데이트, 스켈레톤 UI 등을 도입 하였습니다.
성과 : 고객사 측의 긍정적인 피드백, 사용자 경험(UX) 향상

업무명 : AI 화면 개발
설명 : 계약서 검토 AI 화면, AI 채팅 시스템을 개발
성과 : 사용자의 업무 효율성 증대

업무명 : 코드 리팩토링
설명 : 레거시 명령형 코드를 선언형 코드로 리팩토링
성과 : 가독성 개선 및 코드량 감소

업무명 : 표준계약서 개발
설명 : 레거시 명령형 코드를 선언형 코드로 리팩토링
성과 : 가독성 개선 및 코드량 감소

• 비용절감을 위해 유료 라이브러리에서 무료 Excel.js 라이브러리 변경 및 엑셀 기능 코드 리팩토링

• 낙관적 업데이트 도입, 스타일 업데이트, 스켈레톤 UI 등을 도입하여 사용자 경험(UX) 증대

• 계약서 검토 AI 화면, AI 채팅 시스템를 개발하여 사용자의 업무 효율성 증대

• 레거시 명령형 코드를 선언형 코드로 리팩토링 가독성 개선 및 코드량 감소

Tech Stack

Html Css React Javascript zustand styled-component react-query Express.js mySql

Description

병원에서 사용되는 IoT 제품의 자산 태그, 환자 생체신호, 약품냉장고 등의 실시간 측정 데이터를 제공하는
모니터링 시스템

Experience

• 실시간 측정 데이터 및 정보 조회를 포함한 모니터링 시스템의 핵심 기능을 개발하여 사용자 경험 개선

• reChart.js 및 highchart.js를 활용하여 사용자 맞춤형 데이터 시각화 대시보드 설계 및 구현

• 사용자의 웹사이트 UI 개선을 위한 디자인 업데이트

Tech Stack

React Javascript Redux Redux-Toolkit reChart.js highchart.js react-window styled-component

Description

IoT 사물 인터넷을 활용한 실시간 위치 , 정보, 조회 등의 정보를 제공하는 실시간 모니터링 시스템

Experience

• 기존 JSP로 개발된 페이지를 React로 전환하여 유지보수성 향상

• reChart.js 및 highchart.js를 활용하여 사용자 맞춤형 데이터 시각화 대시보드 설계 및 구현

• 실시간 위치 추적 및 정보 조회를 포함한 모니터링 시스템의 핵심 기능을 개발하여 사용자 경험 개선

• 확장성을 고려한 CSS 코드 리팩토링과 아키텍처 개편을 통해 코드의 일관성과 유지보수성 향상

• 기존 테이블 UI에 React-window를 적용하여 부분 클라이언트 렌더링을 구현, 렌더링 성능 대폭 개선

• prop drilling 문제를 해결하기 위해 Redux와 Context API를 활용한 전역 및 페이지 단위 상태 관리 구조 구축

• Redux-Toolkit 도입을 통해 상태 관리 코드의 복잡성을 줄이고 가독성을 향상

• 불필요한 라이브러리 제거 및 코드 최적화를 통해 번들 사이즈를 6.08M -> 4.89M 빌드 속도 60초 단축

• Canvas API 기반의 leaflet.js와 leaflet-canvas-marker를 활용하여 대량 마커 생성 시 브라우저 성능 저하 개선

업무명 : JSP 웹사이트 React로 마이그레이션
설명 : 기존에 JSP로 개발된 웹사이트를 React로 마이그레이션
성과 : 고객사 측의 긍정적인 피드백, 사용자 경험(UX) 향상

업무명 : 데이터 시각화 대시보드 설계 및 구현
설명 : 고객사 측에서 웹 사이트를 사용하면서 불편 사항 ,개선 요청 사항을 종합하여 사용자 경험을 개선 하기 위해 낙관적 업데이트 도입, 스타일 업데이트, 스켈레톤 UI 등을 도입 하였습니다.
성과 : 고객사 측의 긍정적인 피드백, 사용자 경험(UX) 향상

업무명 : 렌더링 성능 개선을 위한 React-window 데이터 시각화 대시보드 설계 및 구현
설명 : 고객사 측에서 웹 사이트를 사용하면서 불편 사항 ,개선 요청 사항을 종합하여 사용자 경험을 개선 하기 위해 낙관적 업데이트 도입, 스타일 업데이트, 스켈레톤 UI 등을 도입 하였습니다.
성과 : 고객사 측의 긍정적인 피드백, 사용자 경험(UX) 향상

업무명 : 번들 사이즈 최적화
설명 : 고객사 측에서 웹 사이트를 사용하면서 불편 사항 ,개선 요청 사항을 종합하여 사용자 경험을 개선 하기 위해 낙관적 업데이트 도입, 스타일 업데이트, 스켈레톤 UI 등을 도입 하였습니다.
성과 : 고객사 측의 긍정적인 피드백, 사용자 경험(UX) 향상

업무명 : 사용자 경험(UX) 개선
설명 : 고객사 측에서 웹 사이트를 사용하면서 불편 사항 ,개선 요청 사항을 종합하여 사용자 경험을 개선 하기 위해 낙관적 업데이트 도입, 스타일 업데이트, 스켈레톤 UI 등을 도입 하였습니다.
성과 : 고객사 측의 긍정적인 피드백, 사용자 경험(UX) 향상

업무명 : Canvas API 기반의 leaflet.js와 leaflet-canvas-marker를 활용하여 대량 마커 생성 시 브라우저 성능 저하 개선
설명 : 고객사 측에서 웹 사이트를 사용하면서 불편 사항 ,개선 요청 사항을 종합하여 사용자 경험을 개선 하기 위해 낙관적 업데이트 도입, 스타일 업데이트, 스켈레톤 UI 등을 도입 하였습니다.
성과 : 고객사 측의 긍정적인 피드백, 사용자 경험(UX) 향상

Tech Stack

React Javascript Redux Redux-Toolkit reChart.js highchart.js react-window styled-component

Description

택시 예약 및 정보 등의 기능을 제공하는 실시간 택시 예약 서비스 플랫폼

Experience

• 전반적인 프론트엔드 , 백엔드 업무 진행

• Vue로 개발된 페이지를 React로 마이그레이션

• 플랫폼에서 사용 가능한 실시간 택시 정보, 예약, 검색, 로그인, 결제, 알림 톡 등 전반적인 예약 서비스에서 사용되는 기능 개발

Tech Stack

React Javascript Redux styled-component Java SpringBoot mySql

[웹 프론트엔드 성능 최적화 가이드] 서적을 기반으로한 프론트엔드 성능 최적화 적용 역량 키우기,
개발자 경험을 서로 공유하여 역량 강화 스터디에 활동 하였습니다.

개발자를 위한 글쓰기 모임, 글쓰는 또라이들을 위한 커뮤니티로 블로그 글을 작성하는 모임 글또 9, 10기 활동 중 입니다