미리보기
기본 정보
안녕하세요, 저는 다양한 직군의 팀원들과 협업하여 함께 개발하는 것을 좋아해요. UX에 관심이 많고, 단순한 기능 구현이 끝이 아닌 어떻게 하면 코드를 좀 더 개선할 수 있을지 항상 고민해요. 또한, 진행 중인 프로젝트에 맞는 새로운 기술을 적용하는 것을 좋아합니다. 앞으로 10년 뒤가 궁금해지는 개발자가 되고싶어요.
기술 스택
JavaScript, React, react-query, Next.js, next-auth, HTML/CSS, Figma, GitHub
경력
쿤텍
재직 중
2023.03. ~ 재직 중 (1년 8개월)
연구원 • CS연구소 SES연구팀 소속 FE연구원
AEGIS (오픈소스 취약점 점검 솔루션 )
• Service Design & Front-End Development
• 농협 서비스 배포 및 유지보수
RMS (패키지 취약점 점검 솔루션 )
• Service Design & Front-End Development 진행 중
• 미래에셋, 우리은행 서비스 배포 예정
프로젝트
쿤텍
2023.03. ~ 2024.03.
AEGIS 프로젝트 설명
AEGIS는 고객사(농협은행)에서 만든 프로그램에 사용된 오픈소스에 어떠한 취약점이 있는지 검출하는 웹 서비스입니다. 고객사에서 점검을 돌리면 AEGIS는 Mend(소스코드 기반)와 Cybelllum(설치 소프트웨어 기반) 또는 통합으로 점검을 돌리고 AEGIS 화면에 검출된 취약점 정보를 수치 및 그래프로 보여주며, 매우 취약한 라이브러리가 있을 경우 해당 라이브러리 사용 여부에 관한 결재를 올릴 수 있는 기능을 제공해 주는 프로젝트입니다.
페이지 제작
프로젝트 페이지 :
오픈소스 점검을 돌릴 수 있는 페이지 UI 디자인, 개발
점검 상세 페이지 :
점검 결과를 수치 및 그래프로 보여주는 페이지 UI 디자인, 개발
취약점 페이지 :
조치계획등록 UI 디자인, 개발
라이브러리, 라이선스 페이지 :
UI 디자인, 개발
프로젝트 비교, 차수 비교 페이지 :
UI 디자인, 개발
기능 구현
엑셀 파일 업로드, 다운로드 기능 구현
테이블 행 선택 후 조치계획등록 시 다음 행으로 이동 기능 구현
오픈소스 점검 기능 구현
점검 결과 그래프 구현
결재 프로세스 구현
프로젝트 CRUD 구현
table 필터 검색, 정렬 구현
공통 모듈 개발
공통 모달 커스텀 가능하도록 개발(Confirm modal, Alert modal 등)
공통 버튼 커스텀 가능하도록 개발
성능 리팩토링
API 캐싱 최적화를 위해 React-query 도입
기술 스택
typescript
react
react-query
react-table
styled-component
axios
쿤텍
2024.03. ~ 진행 중
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
자격증
정보처리기사
한국사업인력공단
2023.11.