미리보기

클라우드 연구센터에서 openStack 기반 솔루션 플랫폼 FrontEnd 개발 및 유지보수

1. openStack 기반 솔루션 플랫폼 GPU 카드 관리 화면 FrontEnd 개발 담당

   • TypeScript 기반 React 라이브러리를 이용한 프로젝트의 FrontEnd 화면 구축 담당.

   • JAVA 기반 SpringBoot 백엔드 API와 연동하고 배포하여 제품에 반영.

   • 기존 코드의 복잡한 데이터 로직 정리, 새로운 Release 버전의 라이브러리, 설계에 맞게 이관.

     
     

2. openStack 기반 솔루션 플랫폼 최신 프론트엔드 기술로 마이그레이션 진행

   • 기존 사용하지 않는 라이브러리 제거, legacy 라이브러리 교체

   • exceljs 라이브러리를 도입해 데이터 추출 기능을 고도화.

   • 패키지 매니저 교체로 인해 의존성 설치 시간: 1분 50초 이상 → 10초 단축. node_modules 용량의 크기: 1.13GB → 400MB로 감소. 로컬 개발 서버 실행 시간: 약 41초 → 10초 단축

   • Vite 번들러인 rollUp의 효율적인 번들링으로 인해 번들링 사이즈가 120MB → 17.4MB까지 단축.

3. openStack 기반 솔루션 플랫폼 고객사 개선안 및 버그 이슈 해결

   • Ag-grid 테이블 선택, 체크박스 오류 이슈 정책 회의 및 Ag-grid 문서와 테스트를 통해 해결.

   • typeScript 기반 React 라이브러리를 이용한 프로젝트의 FrontEnd 화면 이슈 수정 담당.
     

4. openStack 기반 솔루션 플랫폼 화면 테스트 및 사용 매뉴얼(Jira, Confluence) 작성

기술 스택

코어 : TypeScript, React, Spring

협업 툴 : Git, GitLab, Jira, Confluence

상태 관리

• Redux 사용: useSelector를 사용하여 전역 상태를 조회

• React Hooks 내장 상태 관리 (useState, useEffect):

  • 컴포넌트 내부 상태 관리는 주로 useState와 useEffect를 사용.

  • 비동기 로직 및 API 데이터 로딩 상태(openLoading) 등을 관리하기 위해 활용.

데이터 그리드 (Data Grid)

• AG-Grid: 대용량 데이터의 표시 및 조작을 위한 고성능 데이터 그리드 사용.

유틸리티 라이브러리

• Lodash: 데이터 조작과 유틸리티 함수를 제공하는 라이브러리 사용.

  • has, isEmpty, omit, entries 등의 함수 사용.

기획 목적

학우들이 에브리타임이라는 플랫폼에서 필요한 물품을 찾고 교내에서 빌려주는 곳을 알지 못해 쉽게 물품들을 공유하기 위해 교내 학우들만 학교ID로 접근할 수 있는 사이트를 개발하였습니다.

프로젝트 목적

• 팀 리더부터 기획, UX/UI 디자인, 개발, 배포하며 다양한 포지션의 실력 향상.

• Backend 개발자와 협업하며 연동하면서 React와 JS 구현 역량 증진.

• 기획부터 디자인, 프론트엔드 개발, 백엔드 코드 수정, 배포까지 프로젝트의 전 과정에 참여하며, 전반적인 개발 역량 강화.

• 팀프로젝트의 리더로서 팀원 간의 원활한 커뮤니케이션 능력 향상 및 Github, Notion 능력 향상.

• 백엔드는 AWS에, 프론트엔드는 Netlify를 활용하여 배포를 진행. AWS를 통해 백엔드 서버를 안정적으로 운영하고, Netlify의 CI/CD 파이프라인을 통해 프론트엔드 코드를 효율적으로 배포.

역할

• 팀 리더

• FrontEnd 개발(React.js) 및 배포

• Github 프로젝트 README.md 작성

• Figma를 활용한 UX/UI 디자인, draw.io를 활용해 I.A, Flowchart 작성

• 프로젝트 일정 관리

기여도 50%

기획 과정

• Figma를 활용하여 전체적인 와이어프레임, UX/UI 디자인을 진행했습니다.

• Figma URL: https://buly.kr/DlIcItq

• draw.io를 활용하여 I.A(Information Architecture - 기능구조도), Flowchart를 작성했습니다.

경험

• JavaScript와 React

  • LocalStorage를 이용하여 로그인 세션과 사용자의 데이터를 안전하게 저장하고 관리하는 시스템 구축.

  • React Hooks와 Router로 SPA 라우팅 처리

  • 물품 대여, 물품 등록, 커뮤니티, 마이 페이지 등 약 30개의 페이지 프론트엔드 개발

• CSS와 네트워크 최적화

  • CSS Modules로 스타일 관리

  • 비동기 작업 최적화 및 API 응답 속도 개선 및 렌더링 속도 15% 개선

• Figma와 협업 도구

  • Figma로 UI/UX 디자인 및 프로토타입 설계

  • GitHub와 Notion으로 협업 및 프로젝트 관리

• API 연동 및 데이터 처리

  • Axios와 SpringBoot API 연동

  • 카카오페이 결제 모듈 구현, MySQL 데이터 관리

기획 목적

대학생들이 기업 인턴 채용에 관심이 많아 인턴 채용 공고만 볼 수 있는 사이트를 만들었습니다.

프로젝트 목적

• 기획자, 디자이너, 백엔드 개발자와의 소통 경험

• React와 JS 구현 역량 증진

• Notion, GitHub를 활용한 효율적인 팀 커뮤니케이션

• 사람인 API를 적극 사용, 백엔드 API와 연동하여 프론트엔드에서 호출하는 기능구현에 중점

역할

• FrontEnd 리더

• FrontEnd 개발(React.js)

기여도 30%

기획 과정

• 기획자, 디자이너가 Figma를 활용하여 전체적인 디자인, 프로토타입을 작성했습니다. 개발하면서 함께 디자인 수정을 진행했습니다.

경험

• React와 JavaScript :

  • Hooks와 Router를 사용해 SPA 환경의 함수형 컴포넌트와 라우팅 처리 구현.

  • LocalStorage를 이용하여 로그인 세션, 사용자의 데이터를 안전하게 저장하고 관리하는 시스템 구축.

  • 회원 가입, 나의 정보(공고, 게시글, 댓글, 자기소개서, 알림, 개인정보)를 Databse와 연결하여 저장 및 출력.

• JSX / CSS: JSX로 UI 정의, CSS Modules로 스타일 모듈화 및 유지보수성 향상.

• 사람인 API

  • 기업 사진과 채용정보 API 요청 처리를 위해 Axios 라이브러리를 사용하여 비동기 데이터를 효과적으로 관리하고 렌더링 최적화.

• Git/GitHub, Notion: 팀 협업과 코드 버전 관리를 통한 효율적 개발.

• SpringBoot: 백엔드 API와 React 간 원활한 데이터 통신 지원.

• MySQL: Database를 관리하였으며, 데이터 조회 및 쿼리 결과를 실시간으로 반영하여 프론트엔드 코드의 정확성을 향상.

비고:

웹 사이트는 Netlify로 배포하였으나, 백엔드에서 https 인증서를 발급하지 못해 연동한 사이트는 배포를 하지 못함.

isysLab OTT 플랫폼 시청률 분석 연구 프로젝트(2023.02~2023.12 )

• 2023년도 정부(과학기술정보통신부)의 지원으로 넷플릭스, 디즈니플러스 등 OTT 플랫폼 시청률 분석을 위한 연구를 진행.

• Android OS 기반으로 음성, 영상 데이터 추출을 위해 라즈베리파이, python 언어를 사용하여 진행.

• 라즈베리파이를 이용하여 3.3초마다 음성 데이터와 영상 데이터를 DNA파일로 변환하여 PC로 전송하는 알고리즘을 개발.

2023.08~2024.02 UMC(IT 연합 프로젝트 동아리) 5기 한성대학교 회장, Web 파트원

• 연합 개발 동아리 내에서 프론트엔드 개발자(Frontend Developer) 및 한성대학교 동아리 회장(Leader)으로 활동.

• 회장으로서 다양한 행사(아이디어톤, 해커톤) 기획, 진행, 참여 및 ‘Intercom(인턴 채용 공고 플랫폼)’ 개발 프로젝트 참여

2024.03~2024.08 UMC(IT 연합 프로젝트 동아리) 6기 한성대학교 부회장

• 연합 개발 동아리 내에서 한성대학교 동아리 부회장(Vice Leader)으로 활동.

• 부회장으로서 다양한 행사 기획 및 참여.

• 한성대학교 정보화팀 소속 기자재실에서 TA(Teaching Assistant)조교

• 강의실 PC와 대여 노트북 복구, 보안 프로그램 설정 및 관리.