1달 가량 진행했던 토이 프로젝트가 끝이 났다. 지난 회사에서 슬랙에 chatGPT를 연결을 해봤었던 경험이 있었는데 그때 chatGPT를 활용한 프로젝트를 하나 만들어보고 싶단 생각을 했었다. 회사를 그만두고 다시 취준생으로 돌아오니 자기소개서를 쓸 생각에 막막하던 참에 chatGPT가 생각이 났고 이를 활용해 프로젝트를 진행해보게 되었다. chatGPT api key는 openAI에서 발급받아 사용하였다.
기술 스택
- Springboot
- ChatGpt api
- VueJS
- Spring Cloud OpenFeign
- Spring Data JPA
- Jenkins
- Docker
- MySQL
- redis
화면 구성
회고록
어색한 부분이 몇몇 존재하지만 그래도 주어진 질문, 정보에 맞게 생각보다 그럴싸하게 대답이 나와 만족스럽다. 단순히 chatGPT api를 받아와 화면에 띄어주는 것은 너무 프로젝트가 간단하게 끝나는 것 같아 사용해보지 않았던 기술들(VueJS, Feign, redis)을 사용해보았다.
먼저 프론트엔드를 이전에는 Thymeleaf를 사용했었는데 이번에는 VueJS를 사용해보았다. React를 사용하지 않은 이유는 VueJS는 자체로 프레임위크이기 때문에 지원해주는 문법을 사용해야 하지만 그만큼 배우기 쉽다고 들었기 때문이다. 배우기 쉽다는 부분이 중요했다. 보면 알겠지만 프론트를 대단하게 만든 것도 아니기 때문에 어렵지 않게 만들 수 있었다.
chatGPT api 호출은 OpenFeign 을 사용하였다. MSA를 공부하면서 알게된 클라이언트 도구인데 http 요청을 굉장히 편하게 보낼 수 있게 해주기 때문에 앞으로 자주 사용할 것 같다. 지난 롤 전적 사이트에서 사용한 Webclient를 사용할까도 고민했는데 그때는 클릭 한번에 많은 양의 api를 호출했기 때문에 비동기가 유의미했던 것이고 지금은 하나의 api만 호출하기에 크게 유의미한 속도는 나오지 않을 것으로 판단해 사용하지 않았다. 화면을 보면 호출 시간이 40초 정도로 라고 안내하고 있는데 chatGPT 자체가 오래 걸리기 때문에 이부분은 어쩔 수 없었다....
chatGPT api 호출양 같은 경우는 openAI 사이트에서 api가 얼마나 호출됬는지 달 별로 확인이 가능했다. 나는 일일 사용자 IP를 알고 싶었기 때문에 redis를 연결해 저장해주었다. redis를 사용한 이유는 다음과 같다. 우선 캐시로 저장이 되기 때문에 연속적인 db 호출을 막을 수 있다. 그리고 중복되는 값을 가지지 않기 때문에 여러번 저장이 되더라도 처음 한번만 저장이 되기 때문에 관리가 편했던 부분이 있었다. 나는 완료 버튼을 누르게 되면 호출되는 api에 인터셉트를 걸어 redis에 api를 호출한 ip와 user-agent를 저장해준 뒤 50분 간격으로 db에 이를 저장해주었다. 저장은 다음과 같이 되고 있다. 지운 부분은 ip이다.
인터셉터 핸들러를 설정하는 과정에서 새로 알게된 점도 있어서 많은 것을 알 수 있었다.
처음 사용하는 기술들이 있어서 재밌었던 프로젝트였다. 이로써 자기소개서를 좀 더 수월하게 작성할 수 있을 것 같다 !! 주의할 점은 openAI 무료 credit이 expire되어 지금은 내 카드를 연결해 결재를 하고 있다. openAI api를 사용할 얘정이라면 무료 credit 기간이 3개월이라는 점을 유의하길 바란다. 목표했던 부문은 끝을 냈다. 추가할 점이라면 현재는 사용자 ip만을 저장하고 있는데 단순 방문자 ip 또한 저장하여 일일 방문자 수를 보여주는 기능도 추가를 하면 괜찮을 것 같다.
주소
소스 코드는 깃허브에 모두 올려두었다.
