들어가기에 앞서

이 글은 가계부 개발의 회고를 적은 글로 일기장의 형태를 띄고 있습니다. 구체적인 가계부 개발에 대한 글은 프로젝트 카테고리에 담을 예정입니다.

개발 동기

여러가지 숙제가 겹쳤다. 가장 중요한 내용은 D3에 대해 공부하는 것이었고 두 번째로 들어온 내용은 ag-Grid에 대해 공부하는 것이었다. D3는 조금씩 공부하고 있었고 ag-Grid는 하이닉스 시절 몇 번 써 봐서 조금은 익숙한 상태였다. 그런 와중에 아버지가 원하시던 "가계부를 만들어 줄 수 있겠니?"하시는 부탁에 기술들을 제대로 써먹을 수 있겠다 싶어 덥썩 물었다.

계획을 짜다

카테고리 유추하기

단순히 만들고 수정하고 만들고 변경하고를 반복하는 것 보다 대략적인 구조를 구체화 하는 것이 무엇보다 중요했다. 아버지가 요구해주신 내용은

카드사에서 받은 Excel -> 화면에서 쉽게 확인

이었지만 아쉽게도 카드사에서는 가맹점 이름은 나와도 카테고리에 대한 설명은 나와있지 않았다. 결국 OOZY 라는 이름을 보고 커피!라고 유추해야하는 무언가가 필요한 것이다. 이 역할은 claude가 담당하기로 했다.

데이터 넣기

데이터를 넣는 부분이 까다로웠다. 결국 엑셀을 json화 시킨 후 카테고리라는 key값을 추가한 뒤에 mysql에 집어넣어야 하는데 생각보다 복잡해보였다. 이를 해결하기 위해서 xlsx 라이브러리를 활용하였다.

xlsx를 통해 웹에 올린 파일이 엑셀인지 여부를 확인하고 행 단위 텍스트로 만든 뒤 claude 프롬프트로 json 배열을 생성하였다. 이후 이것을 prisma로 MYSQL에 저장했다. 가슴이 아팠던 것은 anthropic이 돈을 요구했다 정도? 5달러가 빠지는게 가슴이 좀 아팠다.

nginx설정

지금 droplet이라는 VM에는 이미 이 블로그가 돌아가고 있다. MYSQL도 돌아가고 있다. 그런 와중에 가계부 하나 낑겨 집어넣는 방식은 GPT피셜로는 건강하지 못하다고 하지만 돈 없는 개발자는 최대한 우겨넣어야 한다고 생각한다. nginx설정으로 3000번 포트에 블로그를, 3001번 포트에 가계부를 넣어 nginx의 리버스 프록시를 활성화해보았다.

끊이지 않는 버그들

서버가 터짐

가계부 웹을 구성하면서 신기한 경험들을 해보았다. 우선 기념비적으로 서버가 뻗는 것을 경험했다. 비밀번호가 틀리면 비밀번호가 틀리다고 안내 메세지를 띄우도록 설계했고 로컬에서는 잘 돌아갔는데 서버에서는 서버에러가 뜨면서 아예 서버가 뻗어버렸다... 이 문제를 해결하고자 pm2 logs 라는 로그확인도 해보고 next-auth 문제구나! 싶어 수정도 이것저것 해보았다. next-auth 버전 문제였고 1시간만에 해결해서 다행이다 싶었다.

오류 로그가 alert에 튀어나옴

오류 로그를 찍어내는 것도 문제가 있었다. 엑셀을 웹으로 올릴 때 alert로 성공 메세지를 찍어 올리게 했는데 실패시 오류 메세지도 한꺼번에 올리도록 코드가 짜졌다. 게다가 alert 외에는 console.error 부분에도 네트워크 탭에도 확인이 힘들어서 다시 코드를 재수정했던 기억이 난다. 결과값이 한칸씩 밀리는 간단한 버그였지만 데이터의 흐름을 파악하지 못했다면 에러 메세지가 보이지 않아서 찾기 힘들었을 것이다.

Github Action 오류

CI/CD 쪽에서도 오류가 있었다. 깃허브에서 내 VM으로 접속하지 못했던 오류였다. 정확히는 UnAuthorized라면서 handshake를 포기했던 내용이었다. 어차피 몇 번 배포 안할건데 이건 포기할까 진지하게 고민했지만 아무튼 성공했다. passPhrase 문제였고 이를 깃허브에 환경변수로 넣어주니 다시 인증에 성공했다.

마치며

예전에 까만 cmd 화면에 글자만 뜨는 모습을 보고 기겁을 했었는데 이제 그걸 내가 하고 있으니 참 아이러니하다. 예전에 멘토링 받았던 시절이 생각난다.

나는 개발자가 아닌 것 같아요. 이 길이 제 길이 맞는지 모르겠어요

라고 하던 시절이 기억나는데 그 떄의 내가 지금의 나를 보면 대단하다고 말해주지 않을까?