HOLOLOG
GitHub

socketIO를 이용한 실시간 두더지 게임 구현하기 (svelte in Full-stack )

hojun lee · 01/08/2025
커버이미지

개발자(software engineer)에겐 기술에 대한 갈증과 더불어 두려움이 공존한다.

결국 알아야하는 기초가 되는 핵심 기술과 그 기술을 둘러싼 다채롭거나 방대한 양의 부가 기술이 존재한다. 항상 기술을 쌓는 것과 기술의 탐험하는 것에 대한 방향성의 차이를 맞이하게 된다.

나에겐 역시나 핵심 기술은 Javascript이다. 아마 개발자의 생활을 하는 동안은 더 단단하게 기초를 다져야할 것이다.

하지만 기술 탐험도 게을리 할 수 없다.

그래서 새로운 프로젝트를 진행해본다.

핵심에 트렌드 스택을 곁들인.

핵심기획

실시간 통신이 가능한 2인 대결 두더지 잡기 게임 이름하여 디그다 프로젝트

digda

기술스택

프론트엔드: svelteKit, Socket.IO-client, shadcn(css) 백엔드: Node.js, Socket.IO 데이터베이스: edgeDB (Auth : webAuthn) 호스팅 및 배포: Docker-compose(local) Cloudflare

  • backend : workers
  • frontend : pages

설명

프론트엔드는 svelteKit

CSR을 주로 사용하되 restAPI와 route을 활용하기 위해 svelteKit을 프레임워크로 사용한다. 최근 svelte가 5.0 ver로 update되면서 rune을 필두로한 유의한 변화가 있었다. 이를 활용해보고자 한다. react와 유사해지는 모양새가 보이는데, 이는 react로 대동단결되어 있던 국내 front-end 시장에서 svelte가 틈새시장을 공략해줬으면 좋겠다(제발) 결국 자바스크립트를 잘하면 프레임워크는 상관없다. 약간의 러닝커브만 있을 뿐. 요즘 대세로 자리 잡고있는 svelte-shadcn을 활용하여 깔끔하게 통일된 UI를 디자인하겠다.

백엔드는 node.js를 사용한다.

당연하게도 자바스크립트로 되어있으니까. 하지만 express는 사용하지 않으려고 한다. node.js에는 이미 http 서버를 사용할 수 있다.

Express를 사용하지 않는 이유

단순한 웹소켓 서버 구현 Socket.IO만을 위한 서버는 HTTP 서버만 필요 정적 파일 제공이나 REST API가 불필요한 경우 최소한의 의존성으로 구현 가능

성능상의 이점 미들웨어 레이어 제거로 인한 성능 향상 메모리 사용량 감소 직접적인 HTTP 서버 제어 가능

데이터베이스는 edgeDB

EdgeDB는 현대적인 데이터베이스 시스템으로, SQL과 NoSQL의 장점을 결합하여 개발자에게 더 나은 데이터 모델링 및 쿼리 경험 제공

  1. 강력한 타입 시스템: 데이터 모델링에 있어 강력한 타입 시스템을 제공하여 데이터의 무결성을 보장합니다.
  2. 관계형 데이터베이스 기능: 관계형 데이터베이스의 특성을 갖추고 있으며, 복잡한 쿼리를 쉽게 작성할 수 있습니다.
  3. GraphQL 지원: EdgeDB는 GraphQL과의 통합을 지원하여 유연한 API 설계를 가능하게 합니다.
  4. 스키마 관리: 스키마가 변경될 때, 이를 쉽게 관리하고 마이그레이션할 수 있는 도구를 제공합니다.
  5. 고성능: 성능 최적화를 위한 다양한 기능을 제공하여 대규모 애플리케이션에서도 원활하게 작동합니다.

WebAuthn 웹 인증 표준

이 기술은 생소할 것이다. 하지만 구글과 애플, 깃헙 등에서 차차 도입하고 있으니 꼭 확인해보도록!

WebAuthn은 웹 인증의 표준으로, 사용자 인증을 보다 안전하고 편리하게 만드는 기술. EdgeDB에서 제공하는 WebAuthn 기능은 다음과 같은 이점 제공

1.강력한 보안: WebAuthn은 패스워드를 사용하지 않고도 사용자를 인증할 수 있는 방법을 제공하여 피싱 공격이나 비밀번호 유출의 위험을 줄입니다. 2. 다양한 인증 수단 지원: 생체 인식(지문, 얼굴 인식 등)이나 하드웨어 키(예: YubiKey)와 같은 다양한 인증 수단을 지원하여 사용자에게 유연성을 제공합니다. 3. 사용자 경험 향상: 비밀번호 입력 없이 간편하게 인증할 수 있어 사용자 경험이 개선됩니다. 4. 통합 용이성: EdgeDB는 WebAuthn을 쉽게 통합할 수 있는 API를 제공하여 개발자가 쉽게 구현할 수 있도록 돕습니다.

이게 아이디나 이메일주소만으로 비밀번호없이 휴대폰인증 및 passkey등으로 로그인할 수 있다!

호스팅은 cloudflare

클라이언트: SvelteKit을 사용하여 사용자 인터페이스를 구축하고, Cloudflare Pages에 배포합니다. 서버: Cloudflare Workers를 사용하여 node.js로 구축된 Socket.IO 서버를 설정하고 클라이언트와의 실시간 통신을 처리합니다. API: 필요한 경우 Workers를 사용하여 API 요청을 처리하거나 백엔드 로직을 구현합니다.

먼저 레포를 만들고 웹소켓을 연결해보자.

디그다디그다.