서비스 내용
AWS를 사용하는 많은 사용자가 매번 로그인하여 비용을 확인하는 번거로운 과정을 겪고 있었습니다. 이를 간소화하고자 AWS Account ID를 입력하고 버튼 클릭 한 번으로 이번 달 비용을 확인할 수 있는 웹사이트를 개발했습니다. 이 프로젝트는 사용자 경험 개선과 효율적인 클라우드 비용 관리를 목표로 시작되었습니다.
기능
홈화면
•
AWS 사용자는 입력폼에 자신의 AWS AccountID를 입력 할 수 있습니다.
비용 확인
•
사용자는 자신이 입력한 AccountID 에서의 이번달의 비용을 버튼 클릭 한번으로 로그인을 통하지 않고 간소화 하여 쉽게 확인 할 수 있습니다.
사용 기술 및 라이브러리
React + Axios
•
컴포넌트 기반 UI
재사용 가능한 컴포넌트 구조로 사용자 인터페이스 개발의 효율성과 유지보수성을 높여 채택하였습니다.
•
비동기 HTTP 요청
간편한 API 호출과 에러 처리를 통해 서버와의 데이터 통신을 원활히 지원하기에 채택하였습니다.
NestJS + AWS SDK
•
유지보수성과 확장성
모듈화와 의존성 주입을 통해 유지보수성과 확장성을 높여주기에, 프로젝트에 적합했습니다.
•
타입스크립트 기반
TypeScript를 사용해서 타입 안정성과 코드 자동완성, 리팩토링에 유리하기에 채택하게 되었습니다.
•
풍부한 공식 모듈
TypeORM, Mongoose, GraphQL, WebSockets, Swagger 등 다양한 공식 통합 모듈을 제공하기에 채택 하였습니다.
•
비용 확인
AWS Account ID의 비용을 확인 하기 위해 AWS SDK를 채택하였습니다.
맡은 역할
프로젝트 전체 담당
•
React를 활용한 반응형 사용자 인터페이스 설계 및 구현
•
Axios를 사용해 백엔드 API와 데이터 통신 로직 구축
•
NestJS로 유지보수 가능한 서버 아키텍처 설계
•
AWS SDK를 활용해 AWS Account ID의 비용 확인 기능 구현
•
프론트엔드와 백엔드를 통합하여 클라우드 환경(AWS)에 배포
겪었던 어려움
React 웹사이트는 HTTPS 프로토콜로 배포하고, 백엔드 서버는 HTTP 프로토콜로 배포하여 프로토콜이 달라 통신이 안되는 문제가 발생하였습니다.
해결 방안
React 프로토콜 변경
•
React 배포를 vercel에서 S3 Bucket Static Hosting을 통해서 HTTP 프로토콜로 일치시켜 백엔드 서버와 문제 없이 통신되도록 구현하였습니다.
성과
이 프로젝트를 통해 AWS SDK의 활용과 API 문서 분석 능력을 크게 향상시켰습니다. 특히, 프론트엔드(React, HTTPS)와 백엔드(NestJS, HTTP) 간 프로토콜 불일치 문제를 S3 Static Hosting으로 해결하면서 배포 환경 설정과 프로토콜 관리에 대한 이해를 깊게 했습니다. 또한, 사용자 중심의 UI/UX 설계가 서비스의 성공에 얼마나 중요한지 깨달았습니다.
