스케치퀴즈
Typescript로 작성된 오픈소스 그림퀴즈 웹 어플리케이션입니다. 캐치마인드와 skribbl.io로 대표되는 인기 게임 장르이나, 완성도가 높은 웹 버전 오픈소스가 없어 제작하게 되었습니다.
라이브 데모는 여기에서 확인할 수 있습니다.
개발 환경 구축
백엔드 (./server)
Express와 socket.io를 기반으로 한 node.js 서버입니다. 소켓 통신 규약은 PROTOCOL.md에 정의되어 있습니다.
Usage
$ yarn으로 의존성을 설치합니다.
$ yarn start로 서버를 엽니다. 포트는 3000입니다.
$ yarn test로 서버 코드를 테스트합니다.
$ yarn build로 서버를 빌드합니다.
프론트엔드 (./web)
React.js와 tailwindcss를 기반으로 한 클라이언트입니다.
Usage
$ npm i로 의존성을 설치합니다.
만약 외부에서 동작하는 백엔드 서버를 사용해야 한다면 백엔드 서버 URI를 SocketContext.ts에 입력합니다.
$ npm start로 디버그용 개발 서버를 엽니다.
$ npm run-script build로 프로덕션 빌드를 할 수 있습니다.
배포
Docker와 Docker Compose를 준비하고 리포지토리 최상단 폴더로 이동해주세요.
$ HOST=<도메인> SSL_CERT=<cert 경로> SSL_KEY=<key 경로> SSL_CA=<cacert 경로> docker-compose build --no-cache를 입력하여 빌드할 수 있습니다.
$ HOST=<도메인> SSL_CERT=<cert 경로> SSL_KEY=<key 경로> SSL_CA=<cacert 경로> docker-compose up를 입력하면 서비스가 배포됩니다. 빌드된 프론트엔드는 nginx로 서빙됩니다.
브랜치
-
develop: 현재 개발중인 버전입니다. -
master: 릴리즈된 버전입니다.
단어 목록
국립국어원이 2003. 6. 4.에 배포한 한국어 학습용 어휘 목록의 일부를 가져와 사용하고 있습니다. 데이터는 여기에서 받을 수 있습니다.