미리보기

No Code / Low Code 백엔드 개발 스튜디오 개발

프로젝트 설명:

비즈니스 요구 사항에 맞게 백엔드 서비스를 설계하고 Java 기반의 서비스 코드를 자동으로 생성할 수 있는 No Code / Low Code 백엔드 개발 스튜디오를 개발했습니다.

수행 역할:

1. No Code Select 서비스 생성 기능 개발

목적:

사용자가 UI 화면에서 드래그 앤 드롭과 조건 설정만으로 데이터 조회(Select) API를 생성할 수 있는 No Code 플랫폼 기능 개발

주요 업무:

• 시각적 테이블 선택 및 관계 자동 검사

  • 미리 생성된 테이블을 드래그 앤 드롭으로 선택할 수 있도록 UI 구현

  • 테이블 간 상속/참조 관계를 자동 검사하여 올바른 테이블 조합만 선택 가능하도록 UX 설계

• DTO 자동 매핑 시스템 개발

  • 선택된 테이블의 컬럼 정보를 기반으로 상속/참조 관계를 고려한 OutDTO 자동 매핑 기능 구현

• 조건 및 부가 설정 지원

  • Where 조건을 입력할 때 컬럼명 및 연산자를 자동 제안하는 인터페이스 구현

  • 페이징, 중복 제거, 정렬 기능에 대한 설정 UI 제공

• 동적 Select 쿼리 생성

  • 자체 개발한 SQL Generator를 통해

    복잡한 연산, 조인, 조건, 정렬 등을 포함한 동적 쿼리 생성

• Select Java 코드 자동 생성

  • 사용자 설정 정보를 기반으로 FreeMarker 템플릿 엔진을 활용한 Java 코드 자동 생성기 구현

주요 성과:

• End-to-End No Code Select 서비스 생성 파이프라인 구축

• 평균 10분 이내에 사용자가 손쉽게 Select API 생성 가능

2. 리스트 순서 변경 UX 개선

목적:

기존 버튼 기반 순서 변경 방식의 직관성 부족과 사용자 불편(VOC)에 대한 피드백을 바탕으로 React DnD(Drag and Drop) 라이브러리를 도입하여 시각적 조작방식 및 사용성 개선

주요 업무:

• 드래그 앤 드롭 UX 구현

  • useDrag, useDrop 훅을 활용해 리스트 항목의 직관적인 순서 변경 기능 개발

  • 실시간 시각 피드백 및 애니메이션 최적화 드래그 중 실시간 위치 반영 및 CSS 트랜지션 적용으로 부드러운 이동 효과 구현

• GPU 가속 적용 및 브라우저 최적화

  • translate3d를 사용해 GPU 가속 활성화

  • 일부 브라우저(Safari, Firefox 등)에서 발생하는 미세한 깜빡임/블러 현상 해결을 위해 will-change: transform을 적용하여 렌더링 최적화

• 성능 및 상태 관리 최적화

  • useCallback, React.memo를 활용해 불필요한 렌더링 최소화 및 성능 개선

  • useDragLayer 기반 커스텀 프리뷰를 제공하여 불필요한 DOM 렌더링 최소화

주요 성과:

• React DnD 기반 드래그 앤 드롭 UX 도입으로 직관적으로 항목 순서를 변경할 수 있도록 개선

• VOC 감소 및 사용자 만족도 90% 이상 달성 (내부 설문 및 피드백 기준)

3. 중앙 집중식 다이얼로그 관리 시스템 구현

목적:

다양한 종류의 다이얼로그를 단일 컴포넌트에서 통합 관리하고 타입 안정성과 유지보수성을 높이기 위해 중앙 집중식 다이얼로그 관리 시스템 구현

주요 업무:

• 다이얼로그 타입 정의 방식 개선

  • DialogType을 as const 배열과 typeof를 활용해 문자열 리터럴 타입으로 정의

• 유연한 Props 설계

  • 각 다이얼로그의 Props를 개별 인터페이스로 정의하고 공통 Props를 기반으로 확장함으로써 재사용성과 타입 안정성 확보

• 중앙 렌더링 로직 구성

  • switch 문 기반의 조건부 렌더링으로 각 다이얼로그를 동적으로 선택해 렌더링

  • 모든 다이얼로그 컴포넌트를 한 곳에서 import 및 관리하여 의존성 명확화

• MobX 상태 관리 연동

  • store에서 현재 표시할 다이얼로그 타입과 해당 Props를 관리하고 observer 패턴을 통해 상태 변화 시 자동 렌더링되도록 구현

• 다이얼로그 관리용 Props 타입 통합

  • 유니언 타입을 통해 각 다이얼로그별 Props를 구분하고 안전하게 렌더링 가능하도록 설계

주요 성과:

• 20개 이상의 다이얼로그를 하나의 컴포넌트에서 통합 관리 가능하게 구현

• 다이얼로그 추가/삭제 시 단일 컴포넌트에서 관리 가능하여 유지보수 편의성 대폭 향상

• 공통 인터페이스 및 통합 Props 구조를 통해 중복 코드 제거

• TypeScript의 typeof, 유니언 타입 등을 활용해 컴파일 단계에서 오류 방지

4. 서비스 등록 및 메시지 핸들링 시스템 개선

목적:

분산된 서비스 등록 및 메시지 핸들링 시스템을 중앙 집중식 관리 시스템으로 재구성하고 런타임 오류를 방지하기 위해 컴파일 타임 타입 검증 도입하여 개발 효율성과 안정성 개선

주요 업무:

• 중앙 집중식 서비스 관리 시스템 구축

  • 기존의 Map 기반 양방향 매핑 구조를 도메인별 객체 기반 구조로 리팩토링하여 가독성과 유지보수성 향상

• 자동화된 메시지 핸들링 프로세스 설계

  • 서비스 핸들러를 수동으로 등록하던 방식에서 Object.keys() 기반 자동 매핑 방식으로 전환하여 도메인별 핸들러 일괄 등록 가능하도록 개선

• 타입 기반 핸들러 검증 시스템 설계

  • 모든 메시지 타입이 핸들러에 구현될 수 있도록 컴파일 타임에 강제하는 유틸리티 구현

  • VS Code Quick Fix를 지원하는 타입 패턴 설계를 통해 생산성과 정확성 향상

주요 성과:

• 서비스 추가 시간 50% 이상 단축

• 컴파일 타임 검증으로 런타임 오류 발생 가능성과 디버깅 소요 시간 90% 이상 감소

5. React 구조 리팩토링을 통한 순환 의존성 문제 해결

목적:
컴포넌트 간의 순환 의존성(circular dependency) 문제를 해결하고 모듈 간 결합도를 줄이기 위해 의존성 주입(Dependency Injection) 패턴을 응용한 리팩토링 수행

주요 업무:

• 직접 참조 제거 및 구조 분리

  • 컴포넌트 간 직접 import를 제거하고 상위 컴포넌트에서 필요한 의존성을 Props를 통해 주입하는 방식으로 전환

• 의존성 주입 패턴 도입

  • 하위 컴포넌트가 특정 모듈이나 컴포넌트를 직접 참조하지 않고도 동작할 수 있도록 외부 의존성을 외부에서 주입하는 구조 설계

• 공통 모듈 분리

  • 타입, 유틸리티, 상수 등 공통 요소를 별도 모듈로 분리하여 재사용성과 코드 명확성 강화

주요 성과:

• 순환 참조 문제를 구조적으로 해결하여 빌드 및 런타임 오류 제거

• 컴포넌트 간 결합도 감소로 인해 테스트 용이성과 코드 가독성 향상

6. RBAC 기반 데이터 접근 제어 시스템 개발

목적:

체크박스 클릭 한 번으로 테이블 단위의 세밀한 접근 제어를 활성화하고 별도의 데이터베이스 설계나 외부 솔루션 없이도 즉시 RBAC(Role-Based Access Control) 시스템을 적용할 수 있도록 자동화된 시스템 구축

주요 업무:

• RBAC 스키마 구조 설계

  • 프론트엔드 개발 스튜디오 개발자와 협업하여 스튜디오에서 바로 활용 수 있는 RBAC 스키마 구조 설계

• 자동화된 RBAC 인프라 구현

  • 사용자(USER), 역할(ROLE), 권한(PERMISSION) 간의 n:n 관계 테이블 자동 생성

  • RBAC 정책 관리용 CRUD API 제공

• Java 서비스 코드 자동화

  • FreeMarker 템플릿 엔진을 활용해 권한 체크 로직이 포함된 Java 서비스 코드 자동 생성 기능 구현

주요 성과:

• 커스텀 RBAC 시스템 구축으로 외부 의존성 최소화

• 1~2일 이상 소요되던 권한 처리 작업을 클릭 한 번으로 대체할 수 있는 자동화 파이프라인 구축

기술 스택:

• 언어 : JavaScript(ES6+), TypeScript, Java

• 프레임워크 및 라이브러리 : ReactJS, FreeMarker

• 상태 관리 : MobX

• 데이터베이스 : Tibero(Oracle)

• 협업 도구 : Figma, Slack, Google Sheet

RDBMS 기반의 데이터 모델링 설계 플랫폼 개발

프로젝트 설명:

데이터베이스 테이블과 컬럼을 설계하고 이를 기반으로 데이터베이스 구조를 시각적으로 확인할 수 있는 데이터 모델링 설계 플랫폼을 개발했습니다.

수행 역할:

1. 공통 컴포넌트 개발

목적:

재사용 가능한 UI 컴포넌트를 공통화하여 팀 내 개발 효율성을 향상시키고 UI의 일관성을 확보하여 사용자 경험(UX)을 개선

주요 업무:

• 공통 UI 컴포넌트 아키텍처 설계 및 구현

  • 다양한 화면에서 반복적으로 사용되는 UI 요소들을 추상화하여, 재사용 가능한 공통 컴포넌트로 구현

  • Atomic Design 패턴을 기반으로 컴포넌트를 계층적으로 설계해 재사용성과 확장성 강화

• 유연한 스타일링 및 동작 지원

  • 다양한 요구사항에 대응할 수 있도록 Props 기반의 유연한 동작 정의 및 스타일 커스터마이징 기능 제공

  • 기본 스타일과 사용자 정의 스타일 병합 전략 도입

주요 성과:

• UI 일관성 확보로 사용자 경험(UX) 개선

• 공통 컴포넌트를 활용한 코드 재사용률 70% 증가

2. 테스트 코드 도입

목적:

프론트엔드 코드의 품질을 향상시키고 기능 구현 시 발생할 수 있는 버그를 사전에 방지하기 위해 Jest와 React Testing Library를 활용한 테스트 환경을 구축

주요 업무:

• Jest와 React Testing Library를 사용하여 단위 테스트 환경 구축 및 테스트 코드 작성

• pre-push 훅 설정하여 git push 시 자동으로 테스트가 실행되도록 환경 구성

주요 성과:

• 테스트 환경 도입을 통해 코드 품질 및 안정성 향상

• TDD(Test Driven Development) 의 중요성을 인식, 점진적으로 개발 방식에 반영

3. ERD 툴 편집 모드 기능 개발

목적:

기존 생성/읽기 전용 ERD 툴에 실시간 테이블 편집 기능을 추가하여 사용자가 데이터베이스 구조를 시각적으로 수정할 수 있는 협업 환경 구축

주요 업무:

• 생성/편집 모드 통합 및 컴포넌트 리팩토링

  • 테이블 생성/수정 기능을 하나의 컴포넌트로 통합

  • 테이블 존재 여부에 따라 생성/편집 모드로 자동 전환되도록 로직 구조 개선

  • 생성 모드 UI를 재활용하여 모드 간 UX 일관성 확보

• 편집 모드 상태 관리 시스템 구현

  • editMode 상태 변수 및 useEffect 기반 자동 상태 전환 로직 설계

  • React Flow 기반 노드 더블 클릭 이벤트를 통해 직관적인 편집 흐름 제공

• 데이터 무결성 보장 로직 추가

  • 편집 중 원본 데이터를 안전하게 유지하기 위해 Model 계층에 Deep Copy 메서드 구현

주요 성과:

• 실시간 시각적 편집 기능을 통해 협업 기반 데이터 모델링 지원

• 생성/편집 모드 통합 및 UI 재사용을 통한 일관된 사용자 경험 제공

4. 데이터 마이그레이션 및 플랫폼 통합 기능 개발

목적:

기존 시스템에서 사용 중인 Tibero 데이터베이스의 데이터를 자사 플랫폼 스키마에 맞게 자동 변환/이관하고, 이후 개발을 플랫폼 내에서 원활히 이어갈 수 있도록 통합 기능을 개발

주요 업무:

• ETL(Extract, Transform, Load) 프로세스 구현

  • Extract: 사용자 입력을 통해 JDBC URL, 계정 정보 등을 받아 Tibero DB에 연결하고 테이블, 필드, 제약조건 등 주요 메타데이터 추출

  • Transform: 추출된 데이터를 자사 플랫폼의 DB 스키마 구조에 맞게 자동 매핑 및 변환 (ex: 위치 정보 포함)

  • Load: 변환된 데이터를 자사 플랫폼의 내부 테이블에 저장

• 스키마 변환 및 시각 정보 처리

  • Tibero의 테이블 구조와 제약조건을 분석해 플랫폼 스키마에 자동 매핑

  • 각 테이블에 사용자 정의 위치 정보(x, y)를 포함시켜 ERD 시각화에 필요한 배치 정보까지 저장

• 플랫폼 통합

  • 자사 플랫폼에서 마이그레이션 기능을 실행하여 Tibero DB 구조를 그대로 반영한 ERD 구조를 시각적으로 확인 및 수정 가능

주요 성과:

• 마이그레이션 프로세스 자동화로 데이터 이전 시간 80% 이상 단축

• Tibero 기반 개발자가 기존 구조 그대로 자사 플랫폼에서 개발을 이어갈 수 있어 학습 비용 최소화

기술 스택:

• 언어 : JavaScript(ES6+), TypeScript, Java

• 프레임워크 및 라이브러리 : ReactJS, React Flow, Jest

• 상태 관리 : MobX

• 협업 도구 : Figma, Slack