Claude code: supabase 연계로 skill matrix 제작하여 vercel 배포

소개

이번 과제는 supabase을 사용한 backend와 전 주차에 배웠던 frontend의 조합을 통합 웹서비스 제작에 도전합니다. 이번에도 회사에서 쓸수 있을 법한 내용을 써서 실제 사용할 수 있게 아이디어를 내어 보았습니다. Supabase, vercel 모두 처음 사용해보는 거에요.

진행 방법

Vercel 가입, supabase 가입하였으나 이게 뭘 하는 것인지, 어느 메뉴로 들어가야 하는 것인지, 또 메뉴는 전부 영어인 것인지 막막하였으나 일단 클로드 코드를 켜고 시작해봅니다. 아직도 전 터미널보다는 클로드앱이 편해요. 거창한거 할 것도 아니니 일단 클로드 앱으로 코드 시작해봅니다.

supabase를 이용한 서비스가 무엇이 있을지 한참 고민하다가, 제가 하고자 한 것은 저희 직원들의 skill matrix를 제작하는 것이었습니다. 현재는 엑셀로 탭별로 인원들을 관리하고, 인원별 각각의 skill에 따른 level을 관리하는 시스템입니다. 인원의 변동도 있을 것이고 레벨 조정도 있어서 이런걸 한 화면에서 구현해보면 어떨까 하는 생각을 했습니다.

1) Frontend 화면 구성은 단순하게
2) Backend는 supabase를 사용
3) 현재 관리중인 엑셀시트를 폴더에 던져주고 알아서 supabase에서 구현해보라고 시킴
4) frontend는 한번에 훌륭하게 디자인해주고, 약간의 수정 후 인원과 레벨을 입력할 수 있는 창도 추가로 제작해달라고 함.

훌륭히 완성되었습니다. 4~5번의 수정은 거쳤지만 기대 이상으로 훌륭합니다.

스킬 믹스 - 스크린샷 썸네일

만들고나니 더 필요한게 없냐고 하면서 이것저것 제안을 해주는데 전부 구현해달라고 했습니다. stats이 그 때 만들어졌어요.

결과와 배운 점

1) Supabase에 올리는 것도 클로드에게 알아서 올려달라고 했어요. api은 당연히 줘야한다고 알고 있었지만 sql을 editor를 통하여 직접 입력해야 하는 단계가 있는 것은 몰랐습니다.

2) sql을 올리니 클로드가 알아서 내용을 업로드 해주네요. 그래서 아직도 전 supabase를 어떻게 사용하는지 모르고 있습니다.

3) vercel에 배포도 해달라고 하니 클로드가 알아서 해줍니다. vercel 배포도 전 아직 어떻게 하는 것인지 몰라요.

도움 받은 글 (옵션)

참고한 지피터스 글이나 외부 사례를 알려주세요.

(내용 입력)

3개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요