미리보기

연구원 • CS연구소 SCS연구팀 소속 FE연구원

AEGIS (오픈소스 취약점 점검 솔루션 )

• Service Design & Front-End Development

• 농협중앙회, 농협은행, 국민,우리카드, 미래에셋 은행권 서비스 배포 및 유지보수

RMS (패키지 취약점 점검 솔루션 )

• Service Design & Front-End Development

• 미래에셋, 우리카드 서비스 배포 및 유지보수

AEGIS 프로젝트 설명

AEGIS는 금융권 개발자가 오픈소스 파일을 사용하기 전에 해당 오픈소스의 취약점 여부를 검출하여 보안을 강화해주는 서비스입니다.

이 서비스는 Mend(소스 코드 기반), Cybellum(설치된 소프트웨어 기반), 그리고 두 가지를 통합한 통합 점검 방식으로 취약점을 점검하며, 검출된 취약점을 수치와 그래프 형태로 시각화하여 취약점의 위험 수준을 직관적으로 확인할 수 있습니다.

또한, 고위험 라이브러리가 발견될 경우, 해당 라이브러리의 사용 여부를 결정하기 위한 결재 프로세스를 지원합니다.

AEGIS는 오픈소스 사용 시 보안 리스크를 최소화하며, 효율적인 취약점 점검과 의사결정 지원, 금융권의 보안 규정 준수 및 안정성 확보하기 위한 서비스입니다.

페이지 제작

• 프로젝트 페이지 :

  오픈소스 점검을 돌릴 수 있는 페이지 UI 디자인, 개발

• 점검 상세 페이지 :

  점검 결과를 수치 및 그래프로 보여주는 페이지 UI 디자인, 개발

• 취약점 페이지 :

  조치계획등록 UI 디자인, 개발

• 라이브러리, 라이선스 페이지 :

  UI 디자인, 개발

• 프로젝트 비교, 차수 비교 페이지 :

  UI 디자인, 개발

기능 구현

• 엑셀 파일 업로드, 다운로드 기능 구현

• 테이블 행 선택 후 조치계획등록 시 다음 행으로 이동 기능 구현

• 오픈소스 점검 기능 구현

• 점검 결과 그래프 구현

• 결재 프로세스 구현

• 프로젝트 CRUD 구현

• table 필터 검색, 정렬 구현

공통 모듈 개발

• 공통 모달 커스텀 가능하도록 개발(Confirm modal, Alert modal 등)

• 공통 버튼 커스텀 가능하도록 개발

성능 리팩토링

• API 캐싱 최적화를 위해 React-query 도입

기술 스택

• typescript

• react

• react-query

• react-table

• styled-component

• axios

RMS 프로젝트 설명

RMS는 AEGIS에 NEXUS(공급망관리)를 추가적으로 제공한 웹 서비스입니다. RMS는 고객사(미래에셋, 우리은행)에서 만든 프로젝트에 설치되어 있는 패키지들(NEXUS)을 Mend를 통해 검사한 후 취약점 결과를 제공해 주는 프로젝트입니다.

페이지 제작

• 대시보드 페이지 :

  점검한 패키지 저장소의 현황을 볼 수 있는 페이지 UI 디자인, 개발

• 저장소 페이지, 저장소 상세페이지 :

  패키지 별 점검 결과를 보여주는 페이지 UI 디자인, 개발

• 통계 페이지 :

  점검한 패키지 저장소의 통계를 볼 수 있는 페이지 UI 디자인, 개발

기능 구현

• 저장소 CRUD

• 저장소 검색 기능 구현, 선택된 저장소 별 상세 정보 그래프 구현

• 대시보드, 통계 페이지 데이터 1, 3, 6, 12개월 필터링 검색 기능 구현

디자인 패턴 적용

• 3곳에서 사용되고 있는 동일한 UI 컴포넌트를 하나로 재사용하기 위해 Presentaional & container 디자인 패턴 적용

성능 리팩토링

• API 캐싱 최적화를 위해 React-query 도입

기술 스택

• typescript

• react

• react-query

• styled-component

• axios