seungineer

게임 로직적인 부분의 경우 .env 파일을 사용해야 할 일이 적었다. 그리고 백엔드에서 URL이 바뀐다거나 요청 Interface가 달라진다거나 할 이유가 적었기 때문에 .env 파일을 사용하지 않았다. 그러다가 게임 로비, 마이페이지 등을 개발하면서 백엔드 Interface가 바뀌거나  요청 주소가 달라지는 등 이를 수정하는 경우가 잦아져 .env 파일로 관리하는 게 낫겠다 생각이 들어 적용하였다.🐛 분명히 .env에서 잘 가져왔는데, undefined?...const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;export const fetchRooms = async () => { const data = await fetchWithAuth(`${BASE_URL..

보호되어 있는 글입니다.

2024.06.24 - [🧭 KAIST JUNGLE/HandTris] - [HandTris] #3. TypeError: Cannot read properties of undefined - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기) [HandTris] #3. TypeError: Cannot read properties of undefined - (손 동작으로 하는 온라인 웹 테트리스 게임 만socket의 url을 가져올 수 없다.soccket 변수에 담겨 있는 url 속성을 가져와 sessionId를 parsing 하고자 하던 중 만났던 에러 중 예외처리를 해주지 않아 발생한 에러에 대해 정리하고자 한다. 제목은 'Typseungineer.tistory.com개발 중인 핸드트리스가 toy pr..

2024.06.21 - [🧭 KAIST JUNGLE/HandTris] - [HandTris] #2. 프로토타입 통신 테스트 - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기) [HandTris] #2. 프로토타입 통신 테스트 - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기)2024.06.20 - [SEUNGWOO + ENGINEER] - [HandTris] #1. 모델 선정 및 프로토타입 제작 - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기) [HandTris] #1. 모델 선정 및 프로토타입 제작 - (손 동작으로 하는 온라seungineer.tistory.comsocket의 url을 가져올 수 없다.soccket 변수에 담겨 있는 url 속성을 가져와 sessionId를 pars..

2024.06.20 - [SEUNGWOO + ENGINEER] - [HandTris] #1. 모델 선정 및 프로토타입 제작 - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기) [HandTris] #1. 모델 선정 및 프로토타입 제작 - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기)Hand Pose Detection모션 기반 게임을 만들기 위해서는 웹캠으로 보이는 손의 형태를 인식하는 모델이 필요하다. 대학교 3학년 때 Object Detection을 활용하여 마스크 착용 여부를 인식하는 프로그램을seungineer.tistory.com온라인 테트리스 게임이기에 상대방의 테트리스 화면을 나의 테트리스 화면과 동시에 가져와야 한다. 이전 글에서 WebSocket으로 이를 구현한다고 하였다. 오늘..

Hand Pose Detection모션 기반 게임을 만들기 위해서는 웹캠으로 보이는 손의 형태를 인식하는 모델이 필요하다. 대학교 3학년 때 Object Detection을 활용하여 마스크 착용 여부를 인식하는 프로그램을 만드는 과제를 했던 경험이 있었기에 어떻게 시작해야 할지 막막하진 않았다. 여러 Pose Detection 모델 중 '웹 기반 게임'에 어떤 모델을 사용하는 게 적합할지 테스트해보며, 최종적으로 Tensorflow.js의 Mediapipe Handpose 모델을 사용하기로 했다. 이 모델은 성능이 좋아, 웹 브라우저에서 버벅일 수 있겠다고 생각했다. 사용자 경험을 헤칠 정도이면, OpenPose 모델을 Hand Detection만 하도록 제한해 사용하고자 하였다. 결론은 Mediapi..

어떤 웹사이트에서 form을 입력할 때 입력이 모두 완료되면 자동으로 다음 입력해야 하는 빈칸으로 넘어가도록 구현된 웹사이트가 많다. id와 pw를 입력받을 때 id를 10자 이상 입력하면 pw 입력 칸으로 바로 넘어가는 기능을 구현하던 중 React의 배치 업데이트 특성을 잘 살려서 구현되었는지 의문이 들었다.구현 App.js의 App() 컴포넌트에서 return 하는 input tag를 다음과 같이 구현할 수 있다.function App() { ... useEffect(() => { if (id.length >= 10) { pwRef.current.focus(); } }, [id]); return ( 아이디 : ..

구현을 위한 MEMOindex.html에 라이브러리 스크립트로 이미 포함되어 있기에 전역 객체로 추가되어 있음- 따로 import 하지 않아도 사용 가능// ex)const randomNumber = Random.pickNumberInRange(1, 9);import모듈에서 여러 멤버를 가져올 수 있다. 아래의 import로 현재 범위 내에 foo, bar 멤버를 포함시킬 수 있다.import { foo, bar } from "my-module.js";commit message convention(Angular JS)- 커밋 전에 확인하기!!더보기Subject lineSubject line contains succinct description of the change.Allowed feat (featur..

2024.05.19 - [🧭 KAIST JUNGLE/Pintos] - [PintOS] Virtual Memory - 들어가기(Project 3, TIL) [PintOS] Virtual Memory - 들어가기(Project 3, TIL)Virtual Memory는 왜 필요할까?가상 메모리가 없는 경우를 상상해 보자. 음악 재생 플레이어와 게임 프로세스에서 같은 물리적 메모리 주소에 각각 재생 시간과 캐릭터의 체력 정보가 담기면 어떻게seungineer.tistory.comAnonymous page페이지 타입Uninit Page(초기화되지 않은 페이지)물리 메모리에 연결되지 않은 상태로, 특정 타입으로의 변경을 기다리는 lazy loading을 위한 기본 페이지 역할사용할 준비가 되지 않은 페이지 주소를..

보호되어 있는 글입니다.