[#47] supabase에 jsonb 형태로 데이터 넣기

Bora.K | 권보라·2024년 1월 17일
1

TIL

목록 보기
47/51
post-thumbnail

최종 프로젝트


게임 추천 및 커뮤니티 사이트

  • [subabase] api에서 불러온 데이터 가공하여 insert하기

구현 내용


Steam API로 데이터 가져올 때 문제점

게임 추천 사이트 제작을 위해 Steam API를 사용하고 있다.
그런데 Steam API는 활용하기 매우 까다롭다는 생각이 든다.

일단 클라이언트에서 API를 불러오는 것이 불가능해서 glitch 서버를 만들면서 고생했는데,
이번에는 detail 정보를 가져오는 것에서 문제가 생겼다.

가장 많이 play된 게임 100개 가져오기

https://api.steampowered.com/ISteamChartsService/GetMostPlayedGames/v1

일단 스팀 게임이 18만개 이상의 앱 리스트를 가지고 있는데,
18만개를 모두 불러오기에는 로딩 속도도 그렇고, 너무 방대해서
가장 많이 플레이된 게임 100개만 가져와서 사이트에 뿌리기로 결정했다.

그런데 이 100개의 데이터는 appid만 포함되어 있어서
이 appid를 다시 api에 넣어주어 호출해야 detail 정보를 가져올 수 있다.

한번의 과정이 더 필요한 것이다.

https://store.steampowered.com/api/appdetails?appids=${appid}&l=korean

장르별 필터 시 문제점

메인 화면에는 게임 장르별로 필터를 걸어서 보여줘야 하는 기능을 구현해야하는데,
이 때 문제에 직면했다. 100개의 데이터를 하나하나 api에 넣어주어 호출하는데,
100개의 detail 정보를 가져와야만 장르 정보를 수집할 수 있다는 것.

100개의 detail정보를 가져오는데 로딩 시간이 너무 길었다.
3분 이상 걸렸던 것 같다. 이건 도저히 사용할 수 없다고 판단했다.

내가 찾은 해결책

지난 프로젝트에서 공부했던 구글 스프레드 시트를 활용해서 csv 파일로 받은 다음
supabase에 데이터를 넣어주는 것이다.
이 때 api로 불러온 자료가 너무 많은 데이터를 담고 있었기 때문에
필수로 필요한 것들만 따로 가공하기로 했다.

구글 스프레드시트를 json으로 가져오는 방법은 이전에 포스팅되어 있다.

csv 파일로 다운받는 것은 파일>다운로드>csv 로 가능하다.

supabase에 import 하기

1. 필요한 column들의 name과 type을 지정해준다.

2. csv 파일을 import 해준다.

insert > import data from csv

객체 안에 객체가 있는 경우 type은?

1. type은 jsonb로 선택!

2. 형태는 객체 json 형태로 셀에 넣어주기!

 {
   "name": "Counter-Strike 2",
   "app_id": 730,
   "required_age": 0,
   "is_free": true,
   "short_description": "Counter-Strike는 20년이 넘는 시간 동안 전 세계 수백만 명의 플레이어가 모여 수준 높은 경쟁을 펼칠 수 있는 플랫폼을 제공해 왔습니다. 그리고 이제 곧 Counter-Strike 2와 함께 새로운 CS 시대의 막이 열립니다.",
   "header_image": "https://cdn.akamai.steamstatic.com/steam/apps/730/header.jpg?t=1698860631",
   "capsule_image": "https://cdn.akamai.steamstatic.com/steam/apps/730/capsule_231x87.jpg?t=1698860631",
   "website": "http://counter-strike.net/",
   "genres": "액션",
   "pcRequirements": {
      "minimum": "",
      "os": "Windows® 10",
      "processor": "쿼드 코어/스레드 4개 - Intel® Core™ i5 750 이상",
      "memory": "8 GB RAM",
      "graphics": "비디오 카드는 1GB 이상이어야 하며 셰이더 모델 5.0을 지원하는 DirectX 11과 호환되어야 합니다.",
      "DirectX": "버전 11",
      "storage": "85 GB 사용 가능 공간",
      "network": "",
      "sound": "",
      "etc": ""
   }
},

내가 수작업으로 제작한 json 파일의 경우
pcRequirements 안에 또 다른 객체가 들어가 있다.
이 경우 supabase에서 type을 뭘로 해야하는지,
값은 어떤 형태로 넣어야 하는지 몰라서 한참을 찾았다. ㅠㅠ

{"minimum":"", "os":"Windows® 10", "processor":"쿼드 코어/스레드 4개 - Intel® Core™ i5 750 이상", "memory":"8 GB RAM", "graphics":"비디오 카드는 1GB 이상이어야 하며 셰이더 모델 5.0을 지원하는 DirectX 11과 호환되어야 합니다.", "DirectX":"버전 11", "storage":"85 GB 사용 가능 공간", "network":"", "sound":"", "etc":}

구글 스프레드시트에서 열의 첫번째 셀에는 key 값인 pcRequirements를 넣고
하단의 셀에는 값을 객체 json 형태로 넣어주면 된다.

api로 받아온 파일에는 저 부분이 하나의 텍스트로 다 붙어있어서
스프레드시트에서 텍스트를 하나하나 다 분리하고... 다시 합치고
이리 저리 붙여가면서 정말 고생했다 나 자신...


오늘의 회고


최종 프로젝트가 정신적으로 가장 힘든 프로젝트인 것 같다.
시간이 제일 길게 주어졌지만, 이전 프로젝트들보다 오히려 팀 전체 속도가 느린 느낌이다.

지난 프로젝트들에서는 일주일만에 웬만한 기능들은 구현했으나
이번 프로젝트는 2주가 지났는데, 아직 20%도 구현이 안되어 있다.
다음주 월요일 중간 발표 때까지 70%를 구현할 수 있을지 걱정이다..ㅠㅠ


profile
Frontend Engineers

0개의 댓글