미리보기

WEHAGO라는 서비스에서 특정 서비스들의 개발/배포/운영하고 있습니다.

새로운 서비스들을 개발할때 최대 4~5명 최소 2명의 프론트 개발자들의 리더를 맡고있습니다.

레거시 UI 컴포넌트 성능 최적화 및 최신 스택 도입 주도하고 있습니다.

• React 15 -> 18

• HappyPack 도입으로 Webpack 3 빌드 속도 60% 단축

• Webpack 5 마이그레이션 완료하여 최신 로더·플러그인 호환성 확보

• TanStackQuery 적용 요청·로딩·에러 상태를 자동 관리해 boilerplate 코드 감소

• ESLint + Prettier + Husky를 적용해 코드 일관성 유지

데이터 시각화 및 대시보드를 개발 진행하였습니다.

• Vue.js, Vuex, Chart.js,Three.js를 사용한 인터랙티브 대시보드 구축

• API 연동 및 비동기 데이터 처리 최적화

각 프로젝트에서 사용될 공통 컴포넌트를 개발하였습니다.

• Grid·Button·Modal·Tooltip·Dropdown 등 10개 이상의 범용 컴포넌트 구축

UI 반응형 웹으로 변경 개발을 하였습니다.

• 프로젝트 개요

  • 요구사항 : WEHAGO 서비스안에서 법들에 대한 비교 서비스를 만들고자하여, 세법들에 대해 LLM을 사용하여 다른 나라의 세법 비교하는 서비스 만들기

• 주요 역할 및 기여

  • WBS 작성 및 일정관리 주도(5명의 FE 개발 리딩)

    • 전체 WBS(Work Breakdown Structure) 작성으로 개발 범위·순서 명확화

    • 개발자별 Task 분류·할당 및 예상 공수 산정

    • 진척도 모니터링·일정 조율로 릴리즈 일정 준수

    • Jira 티켓으로 이슈 리스트 확인

  • TypeScript 파일 컨벤션 및 타입 관리

    • ComponentName.types.d.ts 파일을 컴포넌트 바로 아래에 배치해 충돌 방지

    • 함수명 handleXxx, API 함수명 getXxx·postXxx·putXxx 네이밍 규칙 수립

    • 파라미터 타입 getXxxParams, Props 인터페이스 ComponentNameProps 형식으로 통일

    • 전체 코드 컨벤션 Readme.md에 작성 및 교육 진행

  • Zustand 기반 전역 상태 관리 체계 구축

    • Redux DevTools 연동으로 상태 변경 이력 실시간 추적 및 디버깅 효율화

  • React Query 도입으로 데이터 페칭·캐싱 전략 고도화

    • React Query 정리 및 교육 진행

    • useQuery 훅 활용해 데이터 방대함을 이용하여 자동 캐싱 refetch 적용

    • queryKey 기반 쿼리 invalidation 설계로 데이터 일관성 보장

    • 자동 캐싱으로 인해, API 호출 및 UI 랜더링 속도 개선

  • 공통 컴포넌트 라이브러리 제작 및 문서화

    • 버튼, 모달, 폼 입력 등 10여 개 범용 UI 컴포넌트 설계·구축 후 Storybook 문서화

  • Husky 기반 Git Hook 관리 체계 구축

    • pre-commit, pre-push 스크립트 설정으로 린트·타입 체크 자동화 기능도입 및 commit 형식이 맞지 않을시에는 commit이 되지않도록 하니 작업에 대한 이해도가 올라감

• 프로젝트 개요

  • WEHAGO 거래처 서비스 UI의 새로운 디자인 및 프로세스들을 가지고 개발

• 주요 역할 및 기여

  • WBS 작성 및 일정관리 주도(2명의 FE 개발 리딩)

  • UI 개발 리스트 정리 및 공수 산정

    • WBS 기반으로 UI 기능·이슈 리스트 작성

    • 각 Task별 예상 공수 산정 및 개발자별 할당

  • 일정 관리 및 최적화

    • 스프린트 일정 모니터링·진척도 조율

  • 디렉터리 구조 개선 (FSD Slice 아키텍처 반영)

    • FSD 기반 폴더 설계 및 Slice 개념 적용

    • 필요하지않다면, 해당 Page의 폴더 삭제시에 아주 간편한 장점이 생기게됨

  • React 18 기능 최적화 및 공통화

    • Concurrent Mode, Suspense 적용

  • 전역 상태 관리 체계 설계

    • Zustand + Redux DevTools 연동으로 상태 변경 이력 실시간 추적

  • 데이터 페칭·캐싱 전략 고도화

    • TanStack Query(useQuery, Suspense) 사용으로 데이터 호출 최소화

  • 폼 유효성·에러 핸들링 최적화

    • React Hook Form 도입으로 폼 관리 로직 간소화

    • React Error Boundary 적용해 공통적으로 Error 페이지 구성

• 프로젝트 개요

  • WEHAGO 거래처 서비스 UI의 사용자 경험과 개발 효율성 증가를 목표로, React 15 → 18,

    Webpack 4 → 5 버전 업그레이드 및 기술 스택 현대화를 진행

• 주요 역할 및 기여

  • React 15 → 18 마이그레이션 주도

    • Automatic Batching 등 신규 렌더링 기능 도입

    • 초기 로딩 성능 개선

    • React.StrictMode 적용으로 잠재적 메모리 누수·부작용 조기 발견

  • Webpack 4 → 5 업그레이드

    • splitChunks treeshaking 재구성으로 프로덕션 번들 크기 절감

    • speed-measure-webpack-plugin 추가로 빌드 시간 확인

    • Webpack Tree-Shaking 최적화: lodash → lodash-es 전환으로 번들 크기 528KB → 24KB (약 22배 감소)

  • JavaScript → TypeScript 전환 및 타입 안정성 강화

    • tsconfig.json 단계별 설정으로 점진적 마이그레이션 수행

    • 컴파일 타임 에러 검출로 런타임 버그 감소

    • 각 컴포넌트·유틸 함수에 명확한 인터페이스 정의로 코드 가독성 및 동료간의 협업속도 향상

  • Redux → Zustand으로 상태 관리 변경

    • 전역 상태 관리 로직 단순화

    • 불필요한 리렌더링 최소화로 컴포넌트 퍼포먼스 최적화

    • middleware(예: subscribe, devtools) 설정으로 디버깅·확장성 강화

  • Class Component → Function Component+Hooks 리팩토링

    • useEffect, useMemo, useCallback으로 변경

    • Custom Hook 패턴 도입으로 반복 로직 재사용

• 프로젝트 개요

  • 서버·스토리지·네트워킹·가상화 등 컴퓨팅 리소스를 주문형으로 제공하는 IaaS 서비스를 고객사 설치형으로 전환하기 위해 Electron 기반 데스크탑 애플리케이션 개발

• 주요 역할 및 기여

  • Electron 아키텍처 설계 및 기술 문서화

    • Electron 프로세스(메인·렌더러) 간 IPC 통신 플로우 정의 및 보안 고려 방안 정리

  • SSO 기반 로그인 페이지 개발

    • React·TypeScript 기반 렌더러 프로세스 내 UI 구현

    • Wehago OAuth 로그인 모듈 연동

  • React IaaS 웹 앱의 Electron 포팅

    • 기존 React IaaS 프로젝트를 Electron 환경에 래핑하여 크로스 플랫폼(Windows/macOS/Linux) 지원

• 특이점: 프로젝트 취소로 인해 해당 소스 홀딩

• 프로젝트 개요

  • 더존비즈온의 WEHAGO 서비스에서 사용되어지는 전자세금계산서 UI 서비스 유지보수

• 주요 역할 및 기여

  • UI 이슈 분석·해결 주도
    전자세금계산서 화면의 버그, 성능 저하, 레이아웃 깨짐 등 다양한 UI 이슈를 확인하여 대응 및 서비스 안정성 유지

  • 세금계산서 도메인 로직 모듈화
    세금계산서 처리에 사용되는 변수·함수들을 모듈로 추출·분리하여 코드 재사용성 및 유지보수성 향상

  • 공통 유틸리티 라이브러리 개발
    날짜·핸드폰·계좌번호 등 포맷터 등 재사용 가능한 유틸 함수 모듈화로 코드 일관성 및 개발 생산성 향상

  • 프로젝트 구조 리팩토링
    디렉터리·모듈 구조 재설계 및 의존성 정리

  • 공통 컴포넌트 확장 개발
    버튼, 모달, 폼 입력 등 범용 UI 컴포넌트를 추가 개발하여 신규 화면 개발 기간 단축

• 프로젝트 개요

  • 한국남부발전소의 각 발전소 설비 데이터를 실시간으로 수집·모니터링하는 Smart Plant 시스템 개발

• 주요 역할 및 기여

  • 3D 설비 모델링·애니메이션 구현

    • Three.js 기반으로 발전기·터빈 등 주요 설비 3D 렌더링 및 동작 애니메이션 개발

    • 사용자 인터랙션(회전·줌·팝업) 기능을 통해 설비별 세부 정보 확인 지원

  • 실시간 데이터 경보 시스템 구축

    • RESTful API로 센서 데이터를 페칭해 임계치 이상 시 자동 팝업 알림 구현

    • WebSocket 연동으로 실시간 상태 변화 반영 → 빠른 장애 대응 환경 조성

  • 대시보드 개발

    • 전체 설비 상태 요약·통계 차트 표시 대시보드 설계 및 구현

    • 필터·검색 기능 추가로 운영팀의 설비 조회·분석 효율성 향상

  • 관리자 페이지 구축

    • Vue.js + Vuex 기반 관리자 UI 개발

    • 설비 등록·설정·권한 관리 등 CRUD 기능 및 상태관리 로직 구현

활동 개요

• 프로젝트명: 화분

• 목적: 독거노인·1인 거주 어르신 대상 감정 언어 모니터링 시스템 개발

• 수상 내역: ‘장려상’ 수상

주요 역할 및 기여

1. 팀 리딩 및 일정 관리

   • 팀장으로서 역할 분담·WBS 작성·일정 조율 전담

2. 데이터 처리·파이프라인 설계

   • 라즈베리파이에 서버 구축 후 마이크로 수집된 음성 데이터를 소켓 통신으로 전송

3. 하드웨어·연결 구현

   • 라즈베리파이, 마이크, 스피커 모듈 연결 및 제어 로직 개발

4. 데이터 시각화

   • D3.js를 이용해 지도 기반 감정 분포 시각화 및 그래프 대시보드 구축

5. 프로토타입 개발

   • 부정적 언어 감지 시 사회복지사에게 위치 정보 및 분석 결과 전송 기능 설계