“YOUR.LOL [리그 오브 레전드 전적 검색 사이트 제작기]” 시리즈

Next.js + Spring Boot 기반 프로젝트인 리그오브레전드 전적 검색 사이트 제작기를 담은 시리즈입니다.

Created by @kimyoungjo

015. 8.14 개발 일지 [YOUR.LOL 제작기]

어제 정상적으로 데이터 안받아와진다는 유저 오늘은 또 잘 됨 ㅋㅋ 개발 일지 AddMatch 컴포넌트를 누를 시 매치 데이터를 추가적으로 받아와 상태 업데이트를 통해 매치 정보를 추가적으로 요청 할 수 있도록 구현 여러 함수에 기능적인 부분 설명 주석 작성 (앞으로 계속해서 추가해나갈 예정) 주절주절일단 오픈 api로 구현할 수 있는 모든 것은 …

2024년 08월 14일

·

0분 분량

014. 그냥 안됐고 이젠 그냥 됨 [YOUR.LOL 제작기]

받은 피해량과 가한 피해량 막대 그래프를 추가했다. 매치ID를 이용한 매치 정보 요청 API를 백엔드로 옮겼고 클라이언트는 react-query로 리펙토링 했다. 왜정말 잘 되다가 갑자기 안됐다. 중요한 것은 왜 안됐었는지 아직도 모르겠다는 것이었다. 지금 YOUR.LOL의 전적 검색 구조는 여러번의 API 요청을 통해 ZUSTAND 전역 상태를 업데이트를 해가며 일종의 트리거가 되는 상태들의 변화로 …

2024년 08월 13일

·

2분 분량

013. 08.12 개발 일지 + RIOT DATA DRAGON 사용법 [YOUR.LOL 제작기]

드디어 전적 검색 데이터를 다 정리해서 적용하고 그에 맞게 퍼블리싱을 수정했다. 앞으로 할 것 도넛 차트를 이용해보고 싶어 일단 저렇게 구현은 해놨는데 뭔가 휑하고 양질의 정보가 아닌 느낌이 든다. 개선 방향 고민해보기 +버튼 누를시 추가 전적 로드 로딩시 로딩중임을 명시할 수 있는 div 디자인 해보기 로그인 구현 (spring boot + …

2024년 08월 12일

·

2분 분량

012. MATCH DATA 활용하기 [YOUR.LOL 제작기]

전적 검색의 핵심인 매치 정보를 요청하면 저런 형식의 데이터 객체가 10개가 온다. (5vs5 게임이므로) 좀 적어 보일 수 있는데 원래는 8만 글자가 넘는 데이터가 오는데 내가 필요한 것만 추려서 보기 좋게 세팅해뒀다. 이제 저 10개의 데이터 객체 중 내가 검색한 유저가 누구인지 가려내고 그 유저의 데이터를 중심으로 ui를 구성해나가면 될 …

2024년 08월 08일

·

0분 분량

011. 08.07 개발 일지 [YOUR.LOL 제작기]

전적 검색 페이지 ui를 개편했다. 로컬 상 이라서 그런 것인지는 모르겠지만 다수의 api를 순차적으로 요청하는데 렌더링 속도가 그렇게 늦다는 느낌은 받지 못해서 3-4개의 api를 추가적으로 요청하여 종합적으로는 체이닝은 5개정도 병렬 처리는 2-3개 정도 더 구성해 볼 예정이다. 주절주절솔직히 오늘은 집중이 좀 안돼서 리엑트 + typescript 관련 책을 하나 사서 읽었다. …

2024년 08월 07일

·

0분 분량

010. 의존성 체이닝(구현 편) [YOUR.LOL 제작기]

React-Query의 Query Key 의존성을 이용한 의존성 체이닝 const { data: account, error: accountError, isLoading: isAccountLoading, } = useQuery<RiotAccount, Error>({ queryKey: ["riotAccount", gameName, tagLine], queryFn: () => fetchRiotAccount(gameName, tagLine), //gameName, tagLine의 의존성 enabled: !!gameName && !!tagLine, }); // 1번 요청 const { data: accountDetail, error: accountDetailError, isLoading: isAccountDetailLoading, } = useQuery<RiotAccount, …

2024년 08월 05일

·

3분 분량

009. 비동기의 동기화 (계획편) [YOUR.LOL 제작기]

React는 사용자 인터페이스를 구축하는 라이브러리로서, 사용자 경험을 향상시키기 위해 비동기 작업을 필수적으로 처리해야 한다. 비동기 작업은 데이터 페칭, 사용자 입력 처리, 서버와의 통신 등 다양한 측면에서 핵심적인 역할을 한다. 근데 이런 비동기 작업에도 단점이 존재하는데 서로에게 의존성을 가지게 되면서 복잡성이 올라가고 그로 인해 상태 관리가 어려워져 그로 인해 발생하는 오류 …

2024년 08월 02일

·

3분 분량

008. 08.01 개발 일지 [YOUR.LOL 제작기]

메인 페이지 퍼블리싱 완료 전체를 담기 위해 배율 조정을 했다(50%) 실제로는 더 크다. 앞으로 추가 할 것은 서비스 로고 작업을 할 건데 그게 저 가운데 YOUR.LOL 부분을 대체 할 것이고 배경 사진도 lol에 맞는 동적인 이미지를 추가 할 계획이다. riot api 활용 계획전적 검색 페이지에 필요한 데이터와 그 순서를 정리해봤다. …

2024년 08월 01일

·

1분 분량

007. 구조 분해 할당과 React-Query [YOUR.LOL 제작기]

java, c ++ 같은 엄격한 언어들을 다루다가 javascript로 넘어왔을때 가장 이질적이었던 문법이 바로 구조 분해 할당이다. const array = [1, 2, 3]; const [a, b, c] = array; console.log(a, b, c); // 1 2 3 사실 이런식으로 할당하는 상상을 안해본 것도 아니고 논리적으로 이해가 안가는 것도 아닌데 막상 진짜 된다고 …

2024년 07월 31일

·

3분 분량

006. RIOT ID를 가져오는 방법 [YOUR.LOL 제작기]

Riot IDRiot은 2023년 10월부터 게임 내 닉네임을 없애고 자사 게임 내에서 공통으로 사용하는 Riot ID를 채택했다. 형식은 gameName#tag 의 방식이며 오늘 하루를 허비하게 만든 장본인이다. 원래는 어땠는데 ?리더보드를 만들기 위해 상위 랭커들을 요청했다고 가정하면 현재는 이렇게 데이터가 도착한다. 원래는 저기에 summonerName이라는 필드가 있었고 그게 닉네임 이었어서 요청 1번에 데이터 전처리만 …

2024년 07월 30일

·

1분 분량

005. 종목 변경합니다. [YOUR.LOL제작기]

API 정리글 작성중이었던 것 캡처본만 봐도 화가 치밀어 오른다. 선 요약pubg api document가 너무 불친절하다. 어떤 점이 불친절하냐면 seasonId라는 파라미터를 요구를 api가 있는데 example이 없어 직접 다른 api에서 필요한 데이터를 찾아다가 넣어야한다. 그래서 모든 api를 순서대로 차근차근 따라가면서 제공 되는 데이터 유형을 파악하고 거기서 파악한 데이터들을 다음 순서의 api에 파라미터로 …

2024년 07월 26일

·

3분 분량

004. 07.25 개발 일지 [YOUR.PUBG 제작기]

NextAuth로 로그인 구현하기여러 로그인 방식을 지원해주는 NextAuth를 이용하여 카카오, 페이스북 소셜로그인과 일반 로그인을 구현해보았다. NextAuth가 지원하는 로그인 방식을 Provider 라고 한다. 카카오 로그인 방식은 KakaoProvider 이런식으로 작명돼 있고 일반 로그인은 Credential Provider라는 이름으로 기능이 제공되고 있다. CredentialsProvider({ name: "Credentials", credentials: { // 이 부분이 로그인 폼에 들어갈 내용. username: { …

2024년 07월 25일

·

7분 분량