산성비 게임 아이템 구현

정글일지 58 날짜 2023년 6월 20일 화요일 계획 타이핑 게임 멀티플레이위한 프론트 구현하기 제한시간 설정하기 하강 속도 증가 기능 구현 아이템에 관한 프로퍼티 설정 Colyseus로 타이핑 게임 룸 구현 중복된 키워드 출제 방지 결과 타이핑 게임의 Reducer를 분리하였다. 전체 코드가 알맞게 분할되어 관리하고 보기 편해졌다. 각 키워드에 관해 아이템을 설정할 프로퍼티를 구성해놨다. 중복 출제 방지는 현재 불가능하다. TIL Reducer 리액트에서 컴포넌트를 통하여 다양한 기능들을 모듈화한다. 이 기능 내에서도 작게 분할하여 Reducer로 만들 수 있다. 예를 들어 내가 구현하는 산성비 게임은 리스트에서 단어를 골라 위에서 떨어뜨리는 기능, 유저가 입력하면 키워드가 사라지는 기능, 게임 창을 켜는 기능 등이 리듀서로 되어있다. 컴포넌트에는 ‘키워드 리스트에서 하나를 꺼내서 어떤 리듀서를 호출한다.’ 라는 식으로 구성이 되어있다. 유지, 보수의 장점은 확실하다. ...

2023년 6월 20일 · 2 분 · 배준수

화상회의 위해 Document 읽어보기

정글일지 57 날짜 2023년 6월 19일 월요일 계획 아바타 화상회의 구현하기 결과 실패 TIL Document 언어를 잘 모르면 Document를 읽어도 어떻게 쓰는 지를 모르겠다… 하지만 코치님도 말씀하셨듯이 원하는 정보를 Document에서 찾아 낼 줄 알아야 한다고 하셨으니 계속 보는 버릇 해야겠다. 왜냐하면 가장 정확하고 검증된 정보니까! 근거 없는 깃허브나 블로그에서 다른 사람의 소스를 보아도 무조건 집어넣을 생각하지 말고 받아서 단독을 동작시켜 본 후 뜯어보고 해보자. 회고 오늘 멘토님과 면담을 하였다. 멘토님은 팀 스파르타에서 일하시는 파트장님이셨다. 조용한 우리에게 에너지 넘치는 분이 오셔서 정말 다행이라는 생각이였다. 방향성과 유저 타겟층을 더 분명히 잡고 가야한다는 말씀을 해주셨다. 사실 우린 초등학교 저학년이라고 모두 생각하고 있었는데, 내가 말실수를 하는 바람에 초등학교 고학년이라고 해버렸다.. 내가 봐도 고학년이 할 게임은 아니긴 하다. 나는 아바타 화상회의 구현하느라 몇일 째 진전이 없는 상황인데 답답했다. 계속 붙들고 고집을 부리는게 맞을까 라는 고민이 많았다. 핵심 기능이자 기술적 챌린지로 좋은 구현인것 같은데, 이거 붙잡느라 다른걸 못하고 있기 때문이였다. 단계적으로 구현해야할 것이 아니라 병렬적인 기능이라면 우선 다른 것을 하고 와도 괜찮다고 하셨다. 내일은 내가 담당하는 산성비 게임 구현에 좀 신경써봐야겠다. ...

2023년 6월 19일 · 1 분 · 배준수

화상회의 기술 구현해보기

정글일지 56 날짜 2023년 6월 17일 토요일 계획 OPENCV JS를 이용해 아바타 화상회의 구현하기 영상 변형 기술 이해하기 결과 Typescript로 클라이언트단에서 아바타 변형에 실패하였음 OpenCV 뿐 아니라 Mediapipe, Tensorflow 등 다양한 라이브러리로 시도하였으나 실패하였음. TIL Mediapipe 구글에서 제공하는 머신러닝 툴. 비디오나 이미지 처리 솔루션이나 프레임워크등을 제공함 Tensorflow 마찬가지로 구글에서 제공하는 머신 러닝 툴. 위 Mediapipe가 Tensorflow를 기반으로 만든 것 같다. 회고 오늘 반드시 아바타 화상회의 구현에 성공하고 싶었지만 실패하였다. 우리가 Skyoffice라는 typescript로 짜여진 react기반 위에 서비스를 만들고 있는데, 기존에 WebRTC가 구현되어 있는 상태라 적용하기 어렵다. 컴포넌트 형태로 시도해보았지만, 비디오 스트림을 주고 받을 수 없었고, 기존에 웹캠이 출력되는 곳에 대한 코드도 찾기 힘들었다. property나 class, private 등이 아직은 나에게 너무 어렵다. 그렇다고 붙잡고 공부만 하고 있을 수도 없고.. 오늘 11시부터 새벽 5시까지 18시간동안 앉아서 이것만 했는데 못했다. 내일 등산은 취소다. 정확히는 오늘, 더 정확히는 1시간 후에 출발할 예정이였는데.. 다음주엔 꼭 성공해야겠다. ...

2023년 6월 17일 · 1 분 · 배준수

WebRTC 필터링 공부, OpenCV 공부

정글일지 55 날짜 2023년 6월 16일 금요일 계획 WebRTC 에서 필터링 공부하기 적용해보기 OpenCV 공부하기 OpenCV 사용해보기 결과 OpenCV를 파이썬 언어로 시도해봄 웹페이지에 카메라를 연결하여 출력하는 것은 성공 WebRTC에서 비디오 데이터를 받아 파이썬에서 처리하는 것은 실패 OpenCV를 JavaScript로도 가능하다고 하여 공부해볼 예정 TIL OpenCV Computer Vision을 처리하는 등의 기능을 가진 라이브러리. C, C++, Java, Python 등의 언어들에서 사용할 수 있다. 스노우 어플처럼 영상에 특정 효과를 부여하거나, 영상을 편집하는 데 정말 많이 사용되고 필수적인 라이브러리이다. JavaScript도 있다고 하여 공부해볼 예정. 영상 처리와 관련해서는 꼭 공부해야할 라이브러리같다. ...

2023년 6월 16일 · 2 분 · 배준수

중간 발표, 산성비 게임 계획하기

정글일지 54 날짜 2023년 6월 15일 목요일 계획 중간 발표 산성비 게임 로직 생각해보 산성비 게임 구현 방안 마련하기 컨셉 맵 알아보기 결과 중간 발표가 생각보다 잘 끝나서 너무 다행이다. 이후 멀티플레이 구현을 위해 구현한 게임의 언어 변경을 생각해봐야 겠다. 이후 구현에 대해 계획을 세워서 최선을 다해야 한다. TIL 1. Websocket 과 Socket.io WebSocket은 양방향 소통을 위한 프로토콜이다. Socket.io는 웹소켓을 활용하는 라이브러리다. WebSocket HTML5 웹 표준 기술 적은 데이터를 빠르게 통신할 때 이용하는 것이 좋음 이벤트를 들으면 보냄 비교적 많은 데이터를 주고 받을 때 좋음 Socket.io WebSocket을 이용한 라이브러리 Room의 개념이 있어서 일부 클라이언트에만 데이터를 전송할 수 있음 따라서 세밀하게 관리할 때 좋음 이렇게 보니 다른 프로젝트들에서 Socket.io를 통해 채팅을 구현하였는지 이해가 갔다. 귓속말의 경우 두 유저에게만 데이터를 전송하면 되니 일부 클라이언트에게만 전송하는 broadcasting 기능이 있는 Socket.io가 더 적합한 것 같다. ...

2023년 6월 15일 · 2 분 · 배준수

중간발표 준비하기

정글일지 53 날짜 2023년 6월 14일 수요일 계획 프로젝트 컨셉 구체화 대표님 앞에서 시연 피드백 바탕으로 회의 산성비 게임 고도화 중간 발표 준비 결과 급하게 준비한 것에 비해서는.. 이것 저것 보여드린게 있었다. 킬러 컨텐츠, 기술적 챌린지는 여전히 해결하지 못한 약점이었다. 사업성은 후순위이되, 서비스 기능들이 앞뒤가 맞아야 한다. TIL 1. 산성비 게임 배경화면 설정 어제 구현한 산성비 게임은 정말 기능만 구현한 단계였다. 오늘 회의를 통해 타겟 유저층을 키즈로 정하였고 컨셉을 학교로 가져간 만큼, 컨셉에 어울리게 구현해야 했었다. 기존에 있던 산성비 게임의 언어를 바꾸고, 이것을 phaser엔진을 이용한 colyseus라는 멀티 플레이 게임 프레임 워크로 만들어진 오픈소스 skyoffice 에 적용시키려니 죽을 맛이였다. skyoffice 구성을 뜯어보고, colyseus 구성도 뜯어보고, phaser 엔진 구성도 뜯어보고 모든 document와 구글링의 결과를 적용하였다. 결론은 그냥 산성비 게임 컴포넌트에서 return의 div에 inline으로 backgroundImage를 style에 추가하면 되는 것이였다. 멍청하면 몸이 고생하는 법이다. 또 경로 설정에도 애를 먹었는데, public에 이미지를 넣고 컴포넌트에서 import하였다. 그 후 backgroundImage :url(${typing_Background})라고 입력하였다. typing_background는 내가 import할 때 설정한 것이다. url 앞뒤에는 ``, 백틱인 것을 꼭 명심해야 한다… ...

2023년 6월 14일 · 2 분 · 배준수

프로젝트 관련 회의

정글일지 52 날짜 2023년 6월 13일 화요일 계획 이미지 유사도 비교 API 공부 ChatGPT API DB 연동 DALL-E2 API DB 연동 API 명세서 등록 기획 구체화 프로젝트 주제 결정 방향성 재고 산성비 게임 구현 스카이오피스 연결 결과 어제 변경한 주제에 대해 코치님에게 피드백을 받았다. 혼쭐났다. 결국 기존의 알고리즘 공부 서비스에서 방향성을 변경하는 것으로 재설정했다. 내일 대표님께 구현한 부분 시연이 있어서 우선 산성비게임은 완성했다. TIL 최근 TIL을 적지 않고 있다. 배운게 아주 없진 않지만, 체계적으로 무언갈 배워가기 보단 급하게 되는 코드를 찾아 넣기 바빠서.. 당장 오늘도 Javascript로 쓰여진 산성비 게임 코드를 Typescript 로 바꾸고 component로 쪼개어 기존 skyoffice 코드에 넣었다가, 쪼개지 않고 통째로 해보기도 하고, 온갖 시도 끝에 10시간 만에 스카이오피스 서버에서 구현하는데 성공하였다. 요즘 배운거라면.. ...

2023년 6월 13일 · 2 분 · 배준수

chatGPT 구현하기

정글일지 51 날짜 20203년 6월 12일 월요일 계획 ChatGPT Api Python 구현 DALL-E2 API Python 구현 ChatGPT Api Node.js 구현 DALL-E2 API Node.js 구현 프로젝트 주제 확정 유저 입력 문장과 AI 답변 DB 연동 및 저장 이미지 유사도 비교 알고리즘 공부 기획 구체화 결과 결국 주제는 AI를 이용한 게임으로 변경되었다. 내일 코치님과 면담을 통해 방향성에 대해 여쭤볼 예정 상대적으로 부족하지만 괜찮은 성능의 ChatGPT와 DALL-E2를 node.js로 구현함 TIL X ...

2023년 6월 12일 · 1 분 · 배준수

프로젝트 주제 정해보기

정글일지 50 날짜 2023년 6월 10일 토요일 계획 Docker 공부하고 설정하기 온라인 채점 서버 구현 현재까지 구현된 게임 시스템과 연결해보기 게임 시스템 완성하기 결과 아무것도 하지 못했다. 우리의 프로젝트 주제에 대해 다시 생각해보기로 하였다. TIL X 회고 다들 현재 진행 방향에 대해서 확신을 갖고 있지 못하다. 몇일 전 코치님의 피드백과 초안 발표 운영진의 피드백에서 크게 개선되지 못했다. 게임과 학습 서비스 그 사이 어딘가에 있는 우리의 방향성이 일거양득이 아니라 이도저도 아닌 애매함으로 평가되었다는 사실에 많이 당황하였다. 둘 중 하나로 고정해야 한다면 게임에 더 중점을 둬야 한다는 것에는 모두 동의하고 있지만, ‘알고리즘’이라는 주제로 게임 서비스를 기획하는 것이 쉽지 않다. 그렇다고 이제 와서 초보 개발자를 위한다는 것을 뒤집기엔 현재까지 공부하고 구현한 것이 물거품이 되는게 두렵다. 사실 쌓아온게 너무 많아서라기 보다는 지금까지 잘못된 길을 걷느라 시간을 낭비했음을 받아들이기 힘들뿐더러, 새로운 길 조차 확신이 없다는 게 가장 큰 문제인듯 하다. ...

2023년 6월 10일 · 1 분 · 배준수

colyseus, skyoffice 공부

정글일지 49 날짜 2023년 6월 9일 금요일 계획 colyseus document로 서버 공부 mongoose document 공부 skyoffice 서버 MongoDB 연결 skyoffice Custom room 생성 시 정보 저장 구현 채점 서버 구현 결과 서비스에서 기존에 생성되는 Data를 추출하여 MongoDB에 저장할 수 있게 되었다. User Data 관련 구현은 초혜에게 인수인계 하였다. 채점서버에 관한 구현 예정 TIL Skyoffice 서버 DB 연결(1) 목표 기존 Skyoffice에서 User가 Custom room을 만들면 Room 정보가 내 MongoDB에 저장되도록 구현 ...

2023년 6월 9일 · 3 분 · 배준수