최근 코딩 테스트를 공부하기 위해서 HackerRank 라는 사이트를 알게 되었고 이를 통해서 공부하고 있었습니다. 다만 HackerRank 사이트가 외국 사이트다 보니까 모든 문제가 영어로 되어있어서 문제를 이해하거나 해석하는데 불편한 점이 있었습니다. 또한 알고리즘에 대한 힌트를 얻기 위해서 검색했을 때 정보가 많이 검색되지 않는 부분도 있었습니다. 그래서 이걸 AI 를 사용해서 문제를 요약해주고 힌트를 주거나 풀이를 제공하면 어떨까? 라는 생각이 들어서 이 프로젝트를 진행하게 되었습니다.
NextJs Tailwindcss 를 사용했습니다. 배포에도 이전 프로젝트와 같이 GCP Docker 를 사용해서 배포했습니다.Gemini API 를 사용했습니다. Open API 나 Claude 등도 고려 대상에 있었지만, GCP 를 사용하고 있었기 때문에 결제 방식이나 세팅을 통합할 수 있다고 판단했습니다.Zustand 를 사용했습니다. NextJS 와 잘 어울린다는 추천을 많이 받아서 예전부터 사용해보고 싶었는데 이번 기회에 적용해 보았습니다.URL**을 전달해서 진행하도록 변경했고, URL 분석을 위해서 API Routes 를 적용했습니다.문제 제목 또는 문제 URL 가져오기 → **문제 제목**으로 필터링 후 Gemini 에게 문제의 요약 / 힌트 / 풀이 요청문제 제목**으로 검색해서 가져오기 때문에, 문제 내용이 변경되거나 문제에 대한 정보가 적은 경우 풀이가 불가능했습니다. 따라서 아래와 같이 변경했습니다.
문제 URL 가져오기 → API Routes 를 통한 URL 분석을 통해서 html을 Gemini 에게 전달 → 해당 html을 통해서 문제의 요약 / 힌트 / 풀이 요청URL 을 가져오기 때문에 토큰의 크기가 증가하지만, 보다 확실한 방법으로 진행되어 정확한 정보를 제공할 수 있게 되었습니다. 토큰의 크기 때문에 현재 svg 파일은 제외됩니다.Api Routes 에 요청하는 것은 불필요하다고 생각해서, 캐싱을 통해서 반복적으로 요청하는 것을 막았습니다.