소개
엑셀로 관리하고 있는 IT자산 현황을 Airtable로 옮겨 관리의 효율화를 제고하고 대시보드를
생성하여 현황을 공유하고자 함.
진행 방법
생성된 Airtable Base 연결
- api key값을 관리자로부터 전달 받음.- Base ID도 물어보았으나 모른다고 찾아달라고 하니 Base ID를 찾아 연결함.
. URL 알경우 : Base 연결 시 appXXXXXXXXXXXXXX ,
Workspace 연결시 wspXXXXXXXXXXXXXXBase 데이터를 파악하여 대시보드 생성을 요청함.
- 베이스 구조를 파악하고 이 구조로 만들 수 있는 대시보드를 제시해 줌.기존에 만든 자산현황 대시보드 화면 이미지를 참조하라고 하고 자산이 달라질 경우
대시보드 내용도 달라져야 함을 고려해서 대시보드 생성 요청
- localhost 에 대시보드 생성 ( 새로고침 icon 생성 )vercel에 배포 요청
- 배포했으나 임의 생성 vercel에 배포 https://dist-nine-black-66.vercel.app기존 자체 생성한 github와 vercel에 배포 재요청
- github repository 생성 https://github.com/jwko0607/rentacar-dashboard
- 대시보드 생성 https://rentacar-rouge.vercel.app화면에 " 데이터 로드 실패 Airtable API error: 403 다시 시도" 메시지
vercel 환경 변수 제거 후 재배포 ( 키 값 노출을 우려로 환경변수에 저장했었음 )
화면에 " 데이터 로드 실패 Airtable API error: 403 다시 시도" 메시지
- API 키를 브라우저에서 직접 쓰는 대신, Vercel 서버리스 함수를 통해 서버 측에서 Airtable을 호출하는 구조로 변경하여 재배포
결과와 배운 점
대시보드 화면의 우측 상단에 새로고침을 누르거나 5분마다 자동 면 에어테이블 전체 데이터를 다시 불러와서 화면전체를 다시 그림으로서 토큰 사용등 비효율적이라고 판단하여 물어봄.
클로드 코드 답변 :
현재 구성에서는 소비되는 것이 크지 않음. ( 1명만 열어두고 실시간 모니터링이 아닐 경우 )
항목
소비 주체
비용
Claude 토큰
없음
없음
Airtable API 호출
브라우저 → Vercel → Airtable
Airtable 요금제 한도 내
Vercel 서버리스 실행
Vercel
무료 플랜 한도 내
브라우저 → Vercel 서버리스 함수 → Airtable API ( 배포된 웹앱이 독립적으로 동작)
- Claude는 코드를 작성해서 배포한 것으로 역할 종료- 5분 타이머는 브라우저 안에서 JavaScript가 실행하는 것
- 브라우저가 열려있는 동안만 작동하고, 탭을 닫으면 멈춤향후 계획
다수의 인력이 동시에 대시보드 open 대비
- 이전 데이터와 다른 부분만 비교해서 업데이트하고 하이라이트 하는 방식으로 변경
21기를 마치며
내가 실무에 활용할 수 있는 명확한 구현 대상 및 목표가 있을 경우 재미도 있고 역량 확보도 배가 된다는 것을 느낌.
회사에서 활용 가능한 업무의 AI 활용이 보안과 상충되어 학습 정도로만 시도한 나로서는 이번 기수에서 생존과 실무 적용이 기반이 되어야 한다는 것을 느낌.
이번 게시글에서는 내 업 무는 아니지만 보안 관리하에 있는 회사의 관리 에어테이블로 활용 가능한 업무를 가지고 시도해 봄.