💡 Projects

[눈치 코치 캐치!] DB 동시성 제어 문제 해결

시작하기 전에 [눈치 코치 캐치!]의 MVP를 완성하고 런칭의 기쁨도 잠시, 다양한 피드백을 마주하게 되었다. 그중 내가 맡아 개선한 부분은 ‘게임 진행 중 시간제한(타이머)’ 기능을 추가한 것이었다. 게임에 참여하고 있는 모든 유저가 키워드나 그림을 제출해야만 다음 라운드로 넘어갈 수 있기 때문에 시간제한을 두지 않으면 게임이 지루해진다는 의견이 있었고, 전적으로 동의했다. 빠르게 기능을 개발하면서 한 가지 문제 상황을 맞닥뜨렸다. 지금부터 이 문제를 해결하기 위해 어떤 시도를 했고, 어떤 방식으로 해결했는지 적어보려 한다. 차근차근 문제부터 뜯어보자! 문제 상황 제한 시간을 넘어 미처 제출하지 못한 유저의 키워드나 이미지가 일괄 자동 제출 되었을 때 DB에 제대로 데이터가 쌓이지 않아 다음 라운드로 ..

[눈치 캐치 코치!] 본격 Spring으로 시그널링 서버 구축하기

시작하기 전에 지난 글에서 WebRTC를 구현하기 위한 방식으로는 Mesh 방식을, 그에 따라 필요한 시그널링 서버는 WebSocket을 통신 프로토콜로 사용하여 Spring Boot로 구축하기로 결정했다. 👇아직 이전글을 보지 않았다면?👇 [눈치 코치 캐치!] WebRTC를 어떻게 구현해야 할까? 시작하기 전에 지난 글에서 WebRTC에 대해 알아보았다. 그럼 이제 우리의 [눈치 코치 캐치!] 드로잉 게임 서비스에 맞게 WebRTC를 구현해야 한다. WebRTC를 어떻게 구현해야 할까? 👇아직 이전글을 보 oneul-losnue.tistory.com [눈치 코치 캐치!] WebRTC 한 방에 정리하기 시작하기 전에 이번 프로젝트에서 실시간 게임을 개발하고 있다. 웹 게임이지만 함께 있는 듯한 느낌을 주..

[눈치 코치 캐치!] WebRTC를 어떻게 구현해야 할까?

시작하기 전에 지난 글에서 WebRTC에 대해 알아보았다. 그럼 이제 우리의 [눈치 코치 캐치!] 드로잉 게임 서비스에 맞게 WebRTC를 구현해야 한다. WebRTC를 어떻게 구현해야 할까? 👇아직 이전글을 보지 않았다면?👇 [눈치 코치 캐치!] WebRTC 한 방에 정리하기 시작하기 전에 이번 프로젝트에서 실시간 게임을 개발하고 있다. 웹 게임이지만 함께 있는 듯한 느낌을 주기 위해 음성 채팅 기능을 고려하게 되었고, WebRTC를 접하게 되었다. 이것만으로 영상 oneul-losnue.tistory.com 첫 번째 고민, WebRTC의 방식 선택 WebRTC의 다양한 방식(Mesh vs SFU vs MCU) WebRTC는 기본적으로 서버를 사용하지 않는 P2P(Peer to Peer) 방식을 사용한..

[눈치 코치 캐치!] WebRTC 한 방에 정리하기

시작하기 전에 이번 프로젝트에서 실시간 게임을 개발하고 있다. 웹 게임이지만 함께 있는 듯한 느낌을 주기 위해 음성 채팅 기능을 고려하게 되었고, WebRTC를 접하게 되었다. 이것만으로 영상 통화도 가능하다고?! 그래서 WebRTC가 뭔데..! 지금부터 차근차근 알아보자. WebRTC가 뭔데? 드라이버나 별도의 플러그인 설치 없이 실시간 소통(비디오, 오디오)이 가능하도록 만들어주는 기술. 기본적으로는 P2P (Peer to Peer), 즉 두 단말이 서로 1:1 통신을 하게 되어있다. 웹에서 실시간 미디어 스트림을 송수신할 수 있는 유일한 표준이고 또 유일한 P2P 표준이기도 하다. WebRTC는 표준임과 동시에 표준을 구현한 오픈소스 프로젝트의 이름이라고 한다. (사실 프로젝트가 먼저 있었고 표준화..

[대나무숲] 2. 부트스트랩 템플릿 / API 설계 / 협업 규칙

부트스트랩 템플릿 빠른 작업을 위해 부트스트랩 템플릿을 사용하기로 결정하였다. 익명고민상담소의 소소하면서도 친근한 분위기와 딱 맞는 테마를 팀원분이 찾아주셨다. 기초가 될 레이아웃은 템플릿, 디자인적인 요소는 테마에서! API 설계 기초 뼈대 HTML 작업 팀원분들이 편하게 작업하실 수 있도록 기초 뼈대를 만들었다. 와이어프레임을 기준으로 부트스트랩 요소들을 조합하고, 테스트까지 완료! 완성본은 팀원분들과 Github을 이용하여 공유하였다. Python Flask 폴더 구조 static/assets → 프로젝트에 사용할 리소스(css, img, js, vendor) static/dist → 가져다 쓸 부트스트랩 템플릿(.gitignore에 추가) templates → HTML 파일 HTML, CSS, J..

[대나무숲] 1. 기능 명세서 / 와이어 프레임 / DB schema

항해99 본과정에 앞서 사전 스터디를 진행하며 웹개발 종합반 강의를 완강했다. 그 강의에 기반하여 팀원들과 토이 프로젝트를 진행하기로 결정! 늦게 합류한만큼 본과정 시작 전까지 시간이 많지 않기에 기본 게시판 CRUD를 구현해보기로 하였다. 프로젝트 주제 선정 대나무숲 - 익명 고민 상담소 : 익명으로 고민을 털어놓고, 익명으로 해답을 알려주는 상담소(게시판) 기술 스택 Frontend : HTML5, CSS3, Bootstrap5.0, JavaScript, Jquery, Ajax Backend : Python, Flask DB : MongoDB Infrastructure : AWS EC2 기능 명세서 🚩 표시는 Option 기능 1. 고민 게시판 닉네임, 비밀번호, 제목, 내용, 작성 시간으로 고민 글..