미리보기

• 담당업무

  • Admin (어드민): 프론트엔드 & 백엔드 개발

  • Who.R.U (WEB): 프론트엔드 & 백엔드 개발 (🔗 whoru.ai)

  • 후엠아이 (APP): 프론트엔드 & 백엔드 개발

• 기술

  • Frontend: JavaScript, Vue.js (Composition API), JSDoc

  • Backend: PHP (Laravel, Eloquent ORM), MySQL

  • Testing: PHPUnit

• Admin (어드민)

  • 보상 지급 시스템 개선

    • 기존 즉시 실행 로직을 큐(Queue) 기반 비동기 처리로 전환하여, 대규모 사용자 보상 지급 시 발생하는 서버 과부하를 방지

  • 화면 구성 자동화

    • 화면 내 모든 요소를 공통으로 재사용 가능한 컴포넌트로 개발하고, props 정의만으로 UI가 자동으로 구성되도록 구조를 개선
      

• Who.R.U (WEB)

  • index.vue에 집중된 코드를 컴포넌트 단위로 분리하고 의존성을 낮춰 UI 구조를 개선. 리팩토링 방식을 문서화 및 공유하여 팀 내 일관된 개발 문화 형성
    

• 후엠아이 (APP)

  • PHPUnit 도입 및 TDD 기반 개발 프로세스 적용

    • 복잡한 상태를 가진 펫 비즈니스 로직에서 여러 테이블에 연관된 상태를 효율적으로 관리하고, 테스트 코드로 비즈니스 로직의 안정성을 검증

    • 기능 추가나 수정 시 기존 테스트 코드를 일부 수정하거나 추가하는 것만으로 빠르게 검증하고 필요한 상태를 쉽게 설정해 개발 효율을 높임.

  • 백버튼 히스토리 시스템 구현

    • 웹뷰 앱에서 디바이스 백버튼 기능을 구현하기 위해 Flutter 플래그와 연동한 히스토리 관리 시스템을 개발
      화면 구조와 UI 컴포넌트(바텀시트, 팝업 등)를 고려해 복합적인 동작을 처리하고, 사용자 경험을 개선

• 프론트엔드 개발 환경 개선 및 구조 확립

  • 복잡했던 전역 상태 관리를 단방향 데이터 흐름(Flux) 구조로 개선하여 코드 일관성과 유지보수성을 강화하고, 공통 모듈/상태 관리 방식에 대한 팀 내 표준을 수립함.

  • TypeScript를 사용하지 않는 환경에서 JSDoc을 도입해 함수 인자와 반환값의 타입을 명확히 정의하고, 코드 가독성과 안정성을 향상

  • 프론트 개발 가이드를 정리한 온보딩 가이드를 직접 작성하고, 기존 팀원 및 신규 팀원을 대상으로 기술 교육과 코드 리뷰를 주도함. 프론트엔드 개발 방향을 함께 이끌며, 팀 내 일관된 개발 환경 조성에 기여
    

• 백엔드 아키텍처 개선

  • Eloquent ORM 활용 방식 개선

    • 여러 서비스에 중복돼 있던 데이터 처리 로직을 모델 메서드로 통합하여, 역할을 분리하고 코드 중복과 유지보수 부담을 줄임.
      Active Record 패턴을 적용해 모델이 데이터 조작과 상태 관리를 책임지도록 구조를 개선함.

  • 비즈니스별 미들웨어 도입으로 컨트롤러에 있던 반복적인 검증 로직을 분리해 코드 중복을 줄이고 가독성을 개선함.

• 담당업무

  • 로지스올 WMS 시스템 프론트엔드 개발

• 기술

  • Frontend: Typescript, Vue.js

• 프로젝트 초기 설계 및 환경 구축

  • 컨벤션 및 협업 방식 수립 (Git Flow 기반)

  • 필수기능 검토 및 기능 도입 테스트 (그리드, 다국어, 탭 유지 등)

• 프론트엔드 개발

  • 퍼블리싱부터 전체 프론트엔드 개발을 주도적으로 담당

  • 약 60여 개 이상의 페이지를 개발하며 구조화된 컴포넌트 시스템 구축

    • 화면의 거의 모든 UI 요소를 모듈화하여 빠른 개발을 구현

    • 하루 평균 3~4페이지 작업, 공통 컴포넌트 약 40개 개발 및 유지보수

• 프론트엔드 아키텍처 설계 및 문서화

  • 프로젝트 개발 완료 후 프론트엔드 아키텍처 및 개발 방식 문서화

  • 컴포넌트 구조, 상태 관리, 데이터 흐름 설계 등 개발 방향성 정리

  • 납품 시 기술 문서 작성 및 프레젠테이션 진행, 기술 설명 및 질의응답 진행 (PPT 발표)

• 담당업무

  • 28HMS 치과 예약 시스템 프론트엔드 개발

• 기술

  • Frontend: Javascript, JSDoc

• 퍼블리싱 및 기능 구현을 포함한 모든 프론트엔드 작업을 단독 수행

• PC, 태블릿, 모바일 환경에 맞춰 해상도별 브레이크포인트를 설정해 반응형 UI 구현

• 재사용 가능한 컴포넌트 아키텍처 구축

  • 컴포넌트별로 마크업을 문자열로 반환하고, 필요한 데이터와 속성을 파라미터로 전달받아 동적으로 렌더링할 수 있도록 설계

• 상태 변화 감지 기반 렌더링 최적화

  • React의 useState와 유사한 상태 관리 방식을 적용하여, setter 함수 실행 시 변경 감지 및 하위 DOM 요소 리렌더링 구조로 설계

  • 기존 상태와 새로운 상태를 비교해, 원시값은 단순 비교, 객체 및 배열은 key와 길이 기반으로 변경 여부 판단하여 필요한 경우에만 DOM 업데이트를 수행. 이를 통해 불필요한 리렌더링을 최소화하고 성능을 개선

vue3-next-table
Vue 3 기반의 테이블 컴포넌트 라이브러리로, 간단한 props 설정만으로 테이블 UI를 손쉽게 구성할 수 있도록 설계되었습니다.
현재는 행 수정, 페이지네이션, 이벤트 핸들링 등의 기능을 제공하며,
향후에는 어드민 화면 전체 구성을 지원하는 범용 UI 모듈로 확장하는 것을 목표로 개발 중입니다.

• 기술

  • Frontend: Typescript, Vue.js

https://github.com/seonghong1/vue3-next-table

https://www.npmjs.com/package/vue3-next-table