Trouble Shooting (1)

전체 보기

팀

Search

문제 상황

로그인 후, 일부 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 키 이벤트를 무시하도록 설정

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

지연 양

문제 상황

StudyPostMapper에서 Lombok이 생성해야 할 Getter/Setter를 MapStruct가 참조하지 못하는 문제 발생. Gradle에서 annotationProcessor 의존성 설정 문제로 인해 MapStruct가 Lombok보다 먼저 실행되면서 오류가 발생.

원인

Gradle의 annotationProcessor 의존성 순서가 올바르지 않음. Lombok이 MapStruct보다 늦게 실행되어 Lombok이 생성한 Getter/Setter를 MapStruct가 참조하지 못함. 결과적으로 매핑 클래스를 생성하는 과정에서 오류가 발생함.

해결

build.gradle에서 Lombok 의존성을 MapStruct 의존성 위로 배치. Gradle의 annotationProcessor는 선언된 순서대로 실행되므로, Lombok이 먼저 Getter/Setter를 생성하도록 수정. IDE 설정에서도 Lombok이 정상적으로 동작하도록 확인. 의존성 관련 코드 생성 순서를 조정하며, "코드 생성 의존성 > 코드 활용 의존성" 순서를 지켜야 함을 학습함.

MapStruct와 Lombok 의존성 충돌 해결

형진 김

문제 상황

모집 기한이 지난 모집글이 자동으로 취소되지 않거나 삭제되지 않는 문제 발생.

원인

엔티티 연관관계 설정 문제

해결

엔티티 연관관계 수정

배치 작업과 JPA 연관관계 문제 해결 및 개선

형진 김

문제 상황

프론트 엔드와 1:N 채팅 구현 시

원인

브라우저가 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로 연결된 클라이언트 화상채팅 시간 제어

종윤 이