📢

DevOnOff

생성일

2025/01/31 06:45

태그

개발스터디

Backend

Frontend

깃허브

https://devonoff-topaz.vercel.app/community/study

비고

프로젝트 설명

DevOnOff는 ‘Dev’와 ‘On/Off’를 결합한 이름으로, 개발 스터디를 온라인과 온/오프라인 모두 지원하는 플랫폼입니다.

Overview

스터디 모집과 진행을 한번에 할 수 있는 개발 스터디 플랫폼 DevOnOff

스터디 모집과 진행을 한번에 할 수 있고 정보 공유, 질의 응답 게시판을 기반으로 사용자들 간의 커뮤니티 활성화 DevOnOff는 ‘Dev’와 ‘On/Off’를 결합한 이름으로, 개발 스터디를 온라인과 온/오프라인 모두 지원하는 플랫폼입니다.

•

스터디 모집부터 진행까지, 한 번에 해결!

DevOnOff는 스터디 모집, 참여, 관리까지 모든 것을 간편하게 할 수 있는 올인원 플랫폼입니다. 더 이상 여러 서비스를 돌아다닐 필요 없이 한 곳에서 해결하세요!

•

스터디원들과 실시간 소통, 언제든지 가능!

실시간 채팅과 화상 채팅 기능을 통해 스터디원들과 언제든지 소통하며, 장소와 시간에 구애받지 않고 효율적으로 온라인 스터디를 진행해보세요.

•

스터디 랭킹 Top3에 도전! 학습 시간으로 경쟁하며 동기부여 UP!

온라인 스터디 참여율을 높여 스터디 상위 랭킹을 목표로 도전하세요. 서로를 자극하며 꾸준한 학습이 가능합니다!

•

개발 중 궁금한 점이 있어도 이제는 쉽게 해결!

질문 게시판을 통해 스터디원들과 개발 관련 질문을 주고받으며 실시간으로 문제를 해결하세요. 여러분의 궁금증을 신속하게 해결할 수 있습니다.

•

개발 정보를 나누며 함께 성장하는 커뮤니티!

정보 공유 게시판에서 유용한 개발 정보를 함께 나누고, 서로의 지식을 쌓으며 실력을 한층 더 향상시킬 수 있습니다.

DevOnOff

개발자 온오프라인 스터디 플랫폼

https://devonoff-topaz.vercel.app/community/study

시연 영상

프로젝트 소개

프로젝트 아키텍처

기술 스택

ERD

컨벤션

GitHub

주요 기능 소개

로그인 / 회원가입

스터디 모집 게시판 (온라인, 병행)

스터디 모집글 작성

정보 공유 게시판

Q&A 게시판

마이페이지

채팅

스터디룸 (화상 채팅)

랭킹 게시판

트러블 슈팅

전체 보기

팀

Trouble Shooting (1)

문제 상황

로그인 후, 일부 api 요청에는 Authorization: Bearer <Access Token>을 헤더에 포함해야 하는 경우가 있음 하지만, Next.js 클라이언트 컴포넌트에서 쿠키에 저장된 토큰에 직접 접근할 경우, 안전하게 관리되어야 할 토큰이 노출됨

시도한 방법과 한계

해결

클라이언트에서는 모든 api 요청을 Next.js 서버로 보내고, 인증 헤더에 토큰을 담는 역할은 미들웨어가 수행하도록 구현

•

클라이언트

•

미들웨어

•

Next.js API Route

요청 헤더 accessToken 처리 방식

지연 양

문제 상황

클라이언트에서 요청을 보낼 때 미들웨어에서 accessToken, refreshToken을 모두 찾을 수 없을 경우, 로그인 페이지로 리다이렉트를 진행하고자 함

시도한 방법과 한계

원인

•

api 요청과 페이지의 요청을 미들웨어에서 동일하게 처리하고 있어, 클라이언트 사이드 네비게이션과 서버 사이드 리다이렉션이 충돌함

해결

api 요청과 페이지 요청을 구분해서 미들웨어가 동작하도록 코드를 수정

•

클라이언트 컴포넌트에서는 401 에러가 넘어왔을 때에 대한 에러 처리를  통해 로그인 페이지로 이동시킴

accessToken, refreshToken 모두 찾을 수 없을 때 Redirect 실행 문제

지연 양

문제 상황

원인

•

useIntersectionObserver의 ref 요소 위치

•

잘못된 이전 메시지 로드 및 스크롤 관리

해결

useIntersectionObserver의 ref 요소 위치 변경

•

ref 요소를 메시지 목록 위에 위치하도록 수정하여, 사용자가 스크롤을 위로 올려서 이전 메시지를 보고자 할 때 이전 메시지가 로드됨

이전 메시지 로드 함수와 (초기 로딩, 이전 메시지 로드, 새 메시지 추가) 3가지의 상황을 분리하여 스크롤 처리

•

이전 메시지 로드 함수

•

스크롤 처리

채팅 - 무한스크롤 오류

지연 양

문제 상황

채팅방에서 한글 메시지 입력 후 keyDown 이벤트가 발생할 때, 마지막 글자가 다음 블록의 첫 글자로 들어가며 keyDown 이벤트가 두 번 발생

원인

•

IME(Input Method Editor) 이슈로 인해 엔터키를 누를 때 한글 입력이 완성되지 않은 상태에서 이벤트가 발생

해결

컴포지션 이벤트를 활용하여 IME 입력이 완전히 끝난 후에만 메시지가 전송되도록 처리

•

isComposing 상태를 추가하여 IMe 입력 상태 추적

•

onCompositionStart와 onCompositionEnd 이벤트 핸들러를 사용하여 IME 입력 상태 관리

•

handleKeyDown에서 isComposing 상태를 확인하여 한글 입력 중에는 Enter 키 이벤트를 무시하도록 설정

채팅 - 한글 메시지 중복 입력

지연 양

브라우저가 strict cors 로 되어 있어서 cors 설정을 전체로 해도 에러가 발생

해결

strict cors 일때 전체 허용(”*”)을 하지 않고 특정 Origin 을 명시해 줘야함

•

코드 수정

strict cors 에러

seunghwan712@gmail.com

승환 곽

문제 상황

새로운 참가자 입장 시 미디어 스트림이 즉시 표시되지 않는 현상 발생, 화면 공유 전환 시 일시적인 검은 화면 발생

원인

•

미디어 스트림 초기화와 피어 연결 타이밍 불일치

•

트랙 교체 시 동기화 문제

해결

미디어 스트림 표시 문제

심승태

문제 상황

같은 와이파이 내 두 클라이언트 간 화상채팅 연결시 상대방의 화면이 출력되지 않음.

원인

Symmetric NAT로 인해 동일 와이파이에 속한 두 클라이언트가 하나의 서버에 연결할 때 와이파이 라우터에서 NAT매핑 충돌이 발생함.

해결

클라이언트 간 P2P 연결이 정상적으로 이루어지지 않은 경우에 TURN서버를 통해 두 클라이언트의 데이터가 중계될 수 있도록 구현함.

같은 네트워크에 속할시 화상채팅 연결 오류

종윤 이

문제 상황

서버 리소스의 한계로 클라이언트끼리 P2P연결을 하게 해뒀기 때문에 화상채팅을 정해진 시간에만 사용하도록 할 수가 없었음.

원인

클라이언트끼리 P2P연결을 했기 때문에 서버에서는 클라이언트가 서로 연결된 상태인지 아닌지 알 수가 없음.

해결

클라이언트가 화상채팅을 위해 시그널링 서버를 통해 서로 연결될 때 백엔드 서버에 HashMap의 형태로 세션ID,해당 유저 닉네임,스터디ID를 저장해 현재 연결된 유저들에 대한 정보를 알 수 있고 연결을 끊을 때도 서버에 연락을 주게 만들어 현재 화상채팅방에 접속 중인 유저와 아닌 유저를 판별할 수 있도록 구현했음. 클라이언트단에서 화상채팅방 입장시간을 제어할 수 있도록 만들었고 입장시간 이후 특정 유저가 최초로 화상채팅방에 접속시 redis에 (key:스터디ID/value:만료시간) 형태로 저장하고 해당 key가 화상채팅방 만료시간에 expire되도록 설정한 후 expire될 때 해당 스터디룸에 접속한 클라이언트들에게 event을 보내주어 화상채팅을 끊도록 구현했음.

P2P로 연결된 클라이언트 화상채팅 시간 제어

종윤 이