[bumpyGG] #0 op.gg 카피코딩 개요

평소에 op.gg라는 서비스를 자주 이용하기도 하고 라이엇의 공개 api가 있다는걸 알게 되서 개인프로젝트에 도입해보려 한다

https://www.op.gg/?hl=ko_KR

롤 전적 검색은 OP.GG - 챔피언 공략과 게임 전적, 라이엇 아이디 태그 검색

https://developer.riotgames.com/apis#account-v1/GET_getByPuuid

Riot Developer Portal

 

디자인쪽에 크게 공수를 덜기 위해서 전체적인 디자인은 op.gg를 참고하고 백앤드를 병행하더라도 api구축은 현재로썬 크게 필요없으니

공개 api를 사용한다

 

기술 스택

- react(vite)

- tailwindcss

- shacn-ui

- jotai

- react-query

 

아키텍처 구조

- monorepo(소켓용서버+앱+디자인시스템)

 

규모가 작기도 하고 리렌더링 최적화게 집중해보고 싶어서 중앙집중식인 zustand보단 분산형인 jotai를 도입해보고자 했고

ui 컴포넌트 제작에 시간을 아끼고자 tailwindcss와 짝꿍인 shacn-ui를 도입해보고자 한다

https://pyjun01.github.io/v/shadcn-ui/

shadcn ui 자세히 알아보기

무엇보다 복붙으로 가볍게 적용 가능하다는 점이 가장 마음에 들었고 이를 디자인시스템에 녹여서 클라이언트앱에서 import해서 사용하기만 하면 되도록 설계해보겠다