미리보기

• 담당업무

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

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

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

• 기술

  • Frontend: JavaScript, Vue.js, JSDoc

  • Backend: PHP, Laravel, Eloquent, MySQL

  • Testing: PHPUnit

• Admin (어드민)

  • 보상 지급 시스템 개선

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

  • 화면 구성 자동화

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

• Who.R.U (WEB)

• 후엠아이 (APP)

  • TDD 도입 및 테스트 기반 개발

    • 복잡한 상태 구조를 가진 펫 비즈니스 로직을 개발할 때, 여러 테이블에 연관된 상태들을 효율적으로 관리하고, 테스트 코드로 비즈니스 로직을 검증하여 안정성을 확보

    • 새로운 기능 추가나 수정 시, 기존 테스트 코드의 일부 수정·추가만으로 이전 로직을 빠르게 검증하고 필요한 상태를 쉽게 셋팅하여, 신규 로직 개발과 수정 대응을 효율화.

  • 백버튼 히스토리 시스템

• 프론트엔드

  • 폴더 구조, 컨벤션, 개발 규칙 정의 및 프론트 개발 리드

• 백엔드

  • Eloquent ORM 활용 방식 개선

    • 정적 메서드 기반의 데이터 조작에서 모델 인스턴스 기반으로 개선해 Active Record 패턴을 활용, 코드의 일관성과 유지보수성 향상

    • 모델 메서드로 비즈니스 로직을 분리해 여러 테이블의 상태를 일관되게 유지하고, 중복 코드와 오류를 방지하도록 설계
      (Fat Model, Skinny Controller)

    • 비즈니스별 미들웨어 도입으로 컨트롤러에서 수행하던 반복적인 검증 로직 분리, 코드 중복 감소 및 가독성 향상

• Eloquent ORM 활용 방식 개선

  • 정적 메서드 기반의 데이터 조작에서 모델 인스턴스 기반으로 개선해 Active Record 패턴을 활용, 코드의 일관성과 유지보수성 향상

  • 모델 메서드로 비즈니스 로직을 분리해 여러 테이블의 상태를 일관되게 유지하고, 중복 코드와 오류를 방지하도록 설계
    (Fat Model, Skinny Controller)

  • 비즈니스별 미들웨어 도입으로 컨트롤러에서 수행하던 반복적인 검증 로직 분리, 코드 중복 감소 및 가독성 향상

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

  • 복잡한 상태 구조를 가진 펫 비즈니스 로직을 개발할 때, 여러 테이블에 연관된 상태들을 효율적으로 관리하고, 테스트 코드로 비즈니스 로직을 검증하여 안정성을 확보

  • 새로운 기능 추가나 수정 시, 기존 테스트 코드의 일부 수정·추가만으로 이전 로직을 빠르게 검증하고 필요한 상태를 쉽게 셋팅하여, 신규 로직 개발과 수정 대응을 효율화.

• Queue 기반 비동기 처리로 대용량 쿼리 작업 성능 최적화

  • 기존에 즉시 실행 방식으로 운영되던 어드민 사용자 보상 지급 로직을 Queue & Job 기반 비동기 처리로 전환, 대량의 사용자처리 시 서버 메모리 과부하 및 장애 방지를 위해 최적화

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

  • 복잡했던 전역 상태를 단방향으로 관리하도록 구조 개선, 코드의 일관성과 유지보수성 강화(Flux)

  • Who.M.I 앱의 웹뷰에서 디바이스 백버튼 기능 도입을 위해 백버튼 히스토리 시스템 구현, 사용자 경험 개선

  • 어드민 화면 요소를 모두 컴포넌트화하고 JSON 기반 구성 방식을 도입하여, props만 정의해 화면을 자동 구축

  • 화면 코드가 하나의 파일에 집중되어 있던 기존 구조를 컴포넌트 단위로 리팩토링하여, 관심사 분리

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

  • 공통 개발 내용과 도메인별 개선사항을 구분 및 분리해야될듯 뭔가 b2c b2b admin개발했는데 어디서 뭘 했는지 모르겠음

  • 사운드 모듈, fetch, 백버튼 대응을 위한 히스토리 시스템, 등등 프론트 공통 모듈 구축?

• 담당업무

  • 로지스올 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