240923 TIL - 다시 시작하는 가챠

LIHA·2024년 9월 23일

내일배움캠프

목록 보기

57/108

뼈대잡기

지금 해야 할 것

웅상님 가이드코드 보면서 가챠함수 자체 수정 & 가챠라우터에서 가챠로직 돌아가는 전후 부분 수정
-> DB참조 횟수 줄여야함
-> 정섭 튜터님이 알려주신 DB에서 랜덤추출하는 걸로 이름 추출까지 성공
-> 얘네를 이제 로스터 DB에 어떻게 꽂아줄건지 해보면 된다

-> roster 테이블에 꽂아줘야 하는데 roster에는 playerName이 없기 때문에 playerId로 꽂아줘야 한다
(이거 웅상님 코드 참고할것)

캐시 구매 시 purchaseHistory에 등록돼서 창민튜터님 말씀처럼 캐시 증감의 SUM값이 현재 캐시값이 되게끔 해주고 싶은데
-> 캐시 구매 시 purchaseHistory에 등록되는건 해놨다
-> 캐시 증감의 SUM은 반영되지 않은 값이 있어서 좀 무리일것 같다

수빈님 프론트 코드 이해하고 내가 담당한 부분에 적용하기
-> 이건 수빈님이 너무 신경쓰지 않아도 된다고 했으니 일단 감사히 백엔드에 집중...😭😭😭👍👍👍

우리들의 풋살

리프레시 토큰의 사용

엑세스 토큰만 사용할때는 XSS, CSRF에 대해 취약하다
-> 그래서 리프레시 토큰을 사용하기로 했음
쿠키(탈취 가능), 세션/로컬(서버에 저장, 탈취가능), 메모리(새로고침 하면 사라짐)
-> 리프레시 토큰은 쿠키에 저장, 액세스토큰은 메모리에 저장해서 사용하는 방식. 액세스토큰 유효기간 10초(...) 정도로 짧게 설정하고, 리프레시 토큰을 이용해 재발급 해주는 방식.

그래서 새로고침 하면 사라지지만, 다른 API를 누르면 또 쿠키에 있는 리프레시 토큰을 기준으로 새로 발급해준다.

find절의 include는 뭘까? - 릴레이션 걸린 데이터까지 보여달란 얘기

참고 블로그에 다음과 같이 써 있었다.

include 옵션은 쿼리 응답에 join되는 테이블의 일부 필드를 포함해줄 수 있게 함

select를 중첩해서 relation field의 특정 값을 가져올 수 있게 함

가령 include문을 사용해 특정한 field를 join할 수 있음

가챠와 상품구매 로직에 대해 - 정섭 튜터님의 조언

상점과 가챠는 따로 있는 것이 좋겠다!
큰 로직은 다음과 같을 것이다

돈이 빠져 나간다
상품 특성에 따라 분류가 되고 (유니폼, 꾸미기 등등 뭐든 많을테니)
상품을 얻는다

이 유저의 소유물로 뭔가가 추가된다는 로직을 호출하면 위와 같다. 가챠를 했을때는 3단계가 될것.
돈이 빠져나간다 - 랜덤으로 아이디 고른다 - 그 아이디에 해당하는걸 가방에 넣어준다
어지간하면 트랜잭션 안에 돈빼고 구매이력 만들고 선수가 들어가는 것 까지가 한 트랜잭션이어야 하지 않을까?
가챠를 돌린다면 어떤 정해진 풀이 있어야 하지 않을까? 티어라던지...
-> MySQL 쿼리중에 랜덤 추출이 된다! 충격적

막간 컨벤션 지키기

앞에 동사가 붙으면 코드 컨벤션 상 함수인 경우가 많다. 변수에 이런 작명은 지양하자
모델명은 상관없지만 테이블명은 복수인 것이 좋다 (players, accounts, gachas...)

그래서 결론적으로 정섭 튜터님의 말씀은

지금은 일단 돌아가기만 하면 그만인게 맞긴 하고,
그런데 지금 가챠로직은 비효율적인게 맞긴 맞다
지금 가장 문제는 가챠로직과 구매로직이 따로 돌아간다는 것.
얘까지 트랜잭션 안에 들어가면 좋을듯?
작은 함수들을 만들고 그들을 조립해주면 훨씬 나을것이다
가챠 아닌건 돈을 빼고 상품을 넣어주면 되고,
가챠가 맞는건 돈을 빼고 랜덤을 돌리고 상품을 넣어주면 되잖는가?

수빈님의 아이디어 - 로그는 로그로 별도관리 하는 건?

인게임 내부 로그는 Log, 인게임 내 콘텐츠 스트링은 String 이라는 식으로 테이블을 분리해서 관리해보는 것은 어떨까? 현업에서 그런 관리방식을 보셨다고.
-> 창민 튜터님 말씀대로 캐시의 증감만 기록하고 그 합계를 계정의 보유캐시로 꽂아주는 방법이 좋긴 좋다.
그런데 이 경우 캐릭터 생성 시 지급되는 캐시가 있다면 그것에 대해서도 로그가 남아야 함.

정섭튜터님의 클라 라이브러리 추천

JS 게임 클라이언트 라이브러리가 꽤 된다 - 픽시JS 라는 것이 있다
three.js 라는 것도 있다

창민 튜터님의 팁 - 이런 것들이 있단다

https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke

로그인 화면은 localhost:3333/api 이다!

랜덤추출 프리즈마 로우쿼리문 백업

import { prisma } from '../prisma/index.js';

export default async function (accountId, gachaQuantity) {
    const randomPickOne = await prisma.$queryRaw`Select * From player Order by rand() Limit 1`;

    const pickedPlayer = [];
    console.log('randomPickOne =>', randomPickOne)
    for (let i = 0; i < gachaQuantity; i++) {

        pickedPlayer.push({
            playerId: +randomPickOne[0].playerId,
            accountId: +accountId,
        });
        console.log('pickedPlayer: ', pickedPlayer);
    }

    return pickedPlayer;
}