전체 글 검색 결과
116 개의 검색 결과가 있습니다.
프로젝트 기록/LLM 게임 프로젝트

개발 리뷰 -14- 게임 시스템 개발 + 최종 데모 영상

#0 데모 영상https://youtu.be/T4Ly4DbC_Eo

2025. 2. 26. 13:18
프로젝트 기록/LLM 게임 프로젝트

개발 리뷰 -13- socket provider와 hook만들기

#0 개요3가지 페이지 (room들을 보고 입장하는 페이지, 게임 시작 대기 페이지, 게임 진행 페이지)에서 socket을 유지하고,그 외 페이지(로그인, 회원가입, 메인, 공지 등)에서는 socket을 유지하지 않으려고 한다. 최대한 socket을 효율적으로 관리하기 위한 방법으로, 페이지 구조를 변경하고자한다. #1 SocektProvider 생성1 createContext// 1. Context 생성const SocketContext = createContext(null); createContext는 Context 객체를 생성하는 함수이다.상위 컴포넌트에서 제공하는 값을 하위 컴포넌트들이 props를 넘겨 받지 않아도 직접 사용할 수 있게 해준다. 나중에 로 “공유하고 싶은 값”을 주입하면, 하위 ..

2025. 2. 6. 13:28
프로젝트 기록/LLM 게임 프로젝트

개발 리뷰 -12- 채팅 시스템 구현

#0 개요구현 과정은 다음과 같다.1. react-hook-form을 적용하여, 채팅을 입력하지 않고 제출하는 경우에 대한 block 만들기.2. 정상적으로 제출시 message state에 저장되고 채팅이 출력되는 로컬 로직부터 구현채팅 UI 변경은 socket.on으로 서버로부터 데이터를 받을 때만. 이유는 아래와 같다 3. socket emit 이벤트로 작성한 채팅을 보내는 함수만 작성4. Shadcn 의 Sooner를 사용해서 빈 채팅창 입력에 대한 오류 출력 UI 작성하기https://sonner.emilkowal.ski/ SonnerAn opinionated toast component for React.sonner.emilkowal.ski5. 메세지 전송시 해당 시간을 저장해두고, 다음 메세..

2025. 2. 5. 15:40
프로젝트 기록/LLM 게임 프로젝트

개발 리뷰 -11- 게임 채팅 페이지 개발

#0 개요 #1 반응형 설계1. 화면을 삼분할하고, 화면이 좁아질때마다 우측과 좌측의 컨텐츠를 하나씩 지워나간다. 2. 왼쪽 사이드바1) hidden: 작은 화면에서 요소가 사라지도록 함.2) left-[max(0px,calc(50%-45rem))]: 0px과 50%-45rem 중 큰 값을 설정. 즉 너무 큰 화면에서는 왼쪽 사이드바도 안쪽으로 모일 수 있도록 가운데를 기준으로 정렬된다. 3) xl 미만의 크기에서는 우측 네비게이션이 사라지고, lg 미만에서는 왼쪽 요소도 사라지도록 반응형으로 만들었다.기본 코드:import { useState } from "react";import { useParams } from "react-router-dom";interface IMessage { id: numb..

2025. 1. 23. 16:41
프로젝트 기록/LLM 게임 프로젝트

개발 리뷰 -10- 메인 페이지 개발

#1 스크롤 이벤트메인 페이지는 스크롤 이벤트를 중심으로 돌아가도록 설계했다.다만 웹보다는 게임 UI 느낌이 나도록 하기 위해 스크롤을 제거했다.::-webkit-scrollbar { display: none; /* 크롬, 사파리, 오페라 등 웹킷 엔진 */}다음과 같은 코드로 제거시, 프로젝트의 모든 부분에서 스크롤이 사라지게 된다.그것이 웹의 디자인 형식에서 벗어나서 게임 UI에 가까워지기 때문에 팀원과 지우도록 합의했다. 그러나 당연하게도 전체 스크롤에서 현재 어디 쯤인지 정보를 얻는 방법은 필요하니, 새로운 디자인의 스크롤을 필요한 곳에서 만들어 쓰기로 했는데, 메인에서는 header에 다음과 같이 스크롤 정보를 넣었다. 또 스크롤을 내리면 튜토리얼 화면이 오른쪽으로 넘어가도록 디자인을 설계하여..

2025. 1. 23. 12:49
프로젝트 기록/LLM 게임 프로젝트

개발 리뷰 -9- 실시간 채팅 구현을 위한 Websocket, webRTC 선행

#0 개요실시간 채팅으로 이루어지는 LLM 참가 게임을 만들기 때문에 통신에 대해서 이해가 필요하다고 생각했다.따라서 websocket과 webRTC를 사용하는 간단한 프로젝트를 구현해보면서 여러가지 조사하여 기술을 정리하고자 한다. 간단한 http 비교 개요는 다음과 같다#1 WebSocket 프로토콜은 네트워크나 통신 환경에서 데이터를 전송·수신하기 위한 규칙과 절차를 정의한 약속을 말한다.http와 websocket 둘 다 이러한 프로토콜의 한 종류이다. http의 핵심은 stateless로, 벡엔드가 유저(클라이언트)를 기억하지 않는다는 것.request를 받으면 response후에 상태를 저장하지 않아서 효율적인 통신이 가능하다. 단 실시간 통신에는 부적절.따라서 인증 기능을 쿠키 등으로 구현하..

2025. 1. 16. 17:44