나만의 무기 중간발표 회고 - (1)
중간발표가 끝났다.
우리는 Arts in Metavers라는 주제로 메타버스 내의 전시공간을 만들고자 하였다.
물론, 큰 틀은 게더타운을 모티브로 하였다!
💡 코로나 시대의 예술, 메타버스 위에 올라타다!
주제 선정에 대한 간단한 소개를 하자면 아래와 같다.
-
요즘 예술가들은 공간적, 시간적 제한으로 전시할 기회가 사라졌다.
COVID-19로 인하여 그 제한이 더욱 더 심해졌다. -
메타버스에 전시 공간을 만들어 시공간적 제한을 허물고,
사용자 또한 언제든 원하는 작가의 전시를 시공간적 제한 없이 경험할 수 있도록 하자. -
실제로 전시관에 온 것 처럼 작품을 감상하고, 작가와 소통하는 등의 체험을 할 수 있기를 바라며 주제를 선정.
첫 주제 선정 당시 팀원들과 적던 내용들...
하지만, 첫 주제 발표 후에 많은 것들이 바뀌긴 했다. ㅎㅎ
우리는 Front-End와 Back-End 모두 JavaScript를 사용하여 프로젝트를 진행하고 있다. 이제 1주 반 정도 지났는데, 꽤 많은 이슈들이 있었다.
Front-End 부분
먼저, Front-End 부분은 React를 사용하여 진행하기로 하였다.
그 전에, 캔버스에 2D 캐릭터가 움직이는 부분을 구현하기로 했는데, 해당 부분에 대한 구현을 위해 들은 강의의 코드들은 CommonJS로 구현되었다. 모든 강의를 들은 후에 require로 되어있는 부분을 ES6(ES2015) 모듈 시스템인 import로 변경하였다.
그리고 캐릭터가 움직여야하는 단계로 가기 전의 웹은 일반 웹페이지와 다를바 없어 React로 구현을 하였는데, 캐릭터를 그리는 부분을 React 폴더로 합치는 과정이 필요했다.
Map이 그려지는 부분에 대한 파일을 클래스 형태에서 함수 형태로 변경하고 전역에서 호출되거나 선언되는 부분을 함수 안으로 넣는 형태로 맞춰 나갔다.
다행히 무리없이 빌드가 되었으나, 다음으로 구현해야하는 멀티플레이라는 더 큰 챌린지에 맞딱드리게 되었다.
Back-End 부분
먼저, Express 프로젝트에 Sequelize를 이용하여 서버 코드를 작성하기 시작했다.
💡 Sequelize 란?
- Promise기반 Node.js환경의 ORM(Object-relational Mapping)이다.
- 이것을 통해 Express와 MariaDB, PostgreSQL, SQLite, MSSQL등과 연동이 가능하다.
먼저, Database와 서버를 연결하고, 웹에 해당하는 부분에 대한 기능을 위해 로그인, 회원가입부터 간단한 api를 만들어 통신을 확인하였다. 그 후,
- 메타버스로 들어가기 위한
Room(전시 공간) 생성 - 생성된
Room(전시 공간) 불러오기 - 캐릭터와 닉네임 프로필 업데이트를 위한
Profile 업데이트 - 만들어진 전시 공간에 대해 전시가 끝나면
전시 공간 삭제등
CRUD를 구현하였다.
그리고 다음으로 Front-End와 마찬가지로 Back-End 모두 멀티플레이를 위해 Socket.io에 대한 이해가 필요했다.
그래서 팀원들 모두 노마드 코더 줌 클론코딩을 수강했다...
Front-End와 Back-End가 만나다!
이 부분은 정확한 이해와 정리를 바탕으로 적어야하므로, 다음 글로 넘기겠다....
움직임 성공한 기념으로 캡쳐샷 하나 던지기 (이미지는 게더타운에서... 상업 목적x)
