Jungle

정글일지 60 날짜 2023년 6월 22일 목요일 계획 멀티플레이 서버 구현 산성비 게임 고도화 아바타 회의 구현 결과 Colyseus를 이용해 멀티플레이를 위한 Room 생성에 성공했다. 산성비게임에서 키워드 생성 갯수와 출발속도 증가를 다룰 수 있게 되었다. TIL useEffect() typescript로 되어있는 skyoffice 코드를 살펴보다 class 정의 내에서 useEffect 함수를 많이 보았다. 그리고 게임을 setInterval로 작성했었다. 드디어 이걸 이해하였다. useEffect는 1회 호출된다. 마지막에 인자를 설정하여 추가적으로 호출할 지를 결정할 수 있다. 즉 2번째 인자를 [ ]처럼 비워두면 추가 호출에 관한 조건이 없기 때문에 더이상 호출되지 않는다. Game.state로 두었던 나는 Game.state에 변화가 일어날 때 마다 useEffect가 호출되었다. 위에서 말했다싶이 이 함수 내에는 특정 시간 간격으로 키워드를 생성하는 등의 인터벌 함수를 구현했었다. 인터벌 함수가 game.state를 변화시켰고, 그로 인해 useEffect가 호출되었고 이 루프가 반복되어서 인터벌 함수들이 지나치게 많이(거의 수만번 이상) 호출되어 게임이 엉켰었다. useEffect의 두번 째 인자를 제거하여 이 문제를 해결하였다. 또한 return 문에 clearinterval을 통해 정의한 인터벌들을 모두 초기화 해주었는데, 그로 인해 주기적인 호출이 발생하지 않아 키워드가 1회만 생성되거나 하는 문제가 있었다. 이부분도 clearinterval을 제거하였더니 해결되었다. ...

정글일지 59 날짜 2023년 6월 21일 수요일 계획 산성비 게임 서버 연결하여 중복처리 아바타 변환을 위한 API 서버 구현 멀티플레이 서버 공부 결과 Colyseus를 이용해 멀티플레이 구현하는데 감은 잡았다. 아직까지도 눈에 띄는 성과가 나오지 않고 있다. TIL javascript 현재 우리는 리액트를 기반으로 javascript(정확히는 typescript)로 구현 중이다. 필요한 api를 찾아서 적용할때 공식 document를 이해하는게 너무 힘들었다. 이제 어느정도는 감을 잡았다. Class라는 것에 크게 묶여 있다. 그 내부에 property라고 하는 작은 내부 구성요소들이 존재한다. 그리고 이 class를 바탕으로 method라고 하는 다양한 함수들이 정의된다. class를 정의할땐 property를 정의하고, constructor를 통해 초기화 한 이후 method들이 정의되어 있다. 물론 자세하고 정확한 개념은 더 공부가 필요하지만 현재 구현하면서 내린 결론은 이정도이다. 프로젝트가 끝나면 다시 공부해보자. ...

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

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

정글일지 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시간 후에 출발할 예정이였는데.. 다음주엔 꼭 성공해야겠다. ...

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

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

정글일지 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 앞뒤에는 ``, 백틱인 것을 꼭 명심해야 한다… ...

어느덧 나만의 무기를 갖기 프로젝트에 돌입한지 2주가 되었다. 그리고 내일은 중간 발표를 앞두고 있다. 5주짜리 프로젝트의 절반에 다가간다는 사실에 놀랍다. 어제 문득, 한달 후에는 이곳에 없을 것이라는 생각이 들었다. 여기에서 벌써 5개월이 다되간다니.. 시간 참 빠르다. 별에 별일이 다 있었고, 너무 힘들고 지치는 일도 많았지만 그래도 처음에 비하면 많이 나아진것 같다. 아직도 팀원들과 대화하다 보면 모르는 단어가 튀어나와서 물어보고, 협력사 설명회에서 하는 설명을 알아듣지 못해 혼자 검색해보긴 하지만 까막눈은 면한 듯 하다. ...

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