24.10.25(금)
오늘은 언어수업 화상페이지로 넘어가기 전에 매칭을 하기 위해 supabase 테이블을 만드는 작업을 하려고 realtime에 대한 공부하는 것을 목표로 했다.
그런데, (1) 다른 팀원의 어드민 페이지는 루트레이아웃을 적용하지 않기로 해서 이부분을 같이 해결하고 pull 받은 후에, (2) 어제 내가 작업한 것을 push 하는 과정에서 오류가 생겨 해결하고 (3) 매칭을 위한 realtime에 대한 공부를 진행했다.
1. No-Layout
우리팀이 PWA를 적용하긴 하지만, 웹페이지도 모바일 버전과 동일하게 만들기로 한지라 무신사 pc페이지처럼 layout.tsx 파일에 적용시켜 두었다.
그런데, 어드민 페이지는 웹 크기로 두기로 했는데 루트 레이아웃을 어떻게 따로 적용시켜야 할지 몰라서 검색을 해보았다.
크게 두 가지 방법으로 나왔다.
1) 조건부 렌더링
2) 레이아웃을 적용시킬 페이지와 적용시키지 않을 페이지를 분리
1번 방법으로 해보다가 잘 안되어 2번 방법으로 진행했다.
처음에는 (Layout)/모바일 css를 적용시킬 페이지들, layout.tsx, (NoLayout)/웹 css를 적용시킬 어드민페이지 이렇게 분류했는데,
분류 이름을 명시적으로 하기 위해
-> (mobile)/모바일 css를 적용시킬 페이지들, layout.tsx, (desktop)/웹 css를 적용시킬 어드민페이지 이렇게 바꾸었다.
☄️(mobile), (desktop) 폴더 안 레이아웃 폴더가 있는데 왜 app 폴더 안에도 레이아웃(루트) 폴더가 있어야 하느냐!!??
-> 루트레이아웃은 모든 페이지에서 공통으로 적용되는 레이아웃이라서 app폴더 안에 없으면 넥스트가 아예 레이아웃 못 찾기 때문!!!
2. Git push 오류
git push에 대한 오류를 해결하는 과정이 담겨있다....
error: RPC failed; HTTP 400 curl 22 ~ 이부분에 대해 해결하기 위해 구글에 검색해봤고, 비슷한 오류를 해결하신 분이 계셔서 따라했다.
참고 블로그
1) git config --global http.version HTTP/1.1
이 방법을 했을 땐 여전히 아무런 변화가 없었다.
2) git config --global http.postBuffer 1048576000
이건 내 로컬 버퍼 사이즈를 늘려주는 명령어인데, 이걸 했더니 push에 성공했다.
이로써 알게 된 것은, 이미지 용량이 너무 컸던 것이었다.
앞으로 이미지를 올리기 전에 확인해야할 것을 알게 되었다.
- 🌟 이미지 용량 확인하기 🌟
- 이미지를 webp로 변환하기
- 임시-online image compressor같은거에 올려서 압축
- 로컬에서 해상도 줄여서 사용
- 웹서비스 중에도 이미지 용량 줄이는 사이트가 있어 사용해보기
3. 언어수업(화상)을 하기 전 매칭단계를 위한 supabase realtime 공부
1) 개념
(1) 정의
: PostgreSQL 데이터베이스의 변경사항을 실시간으로 클라이언트에 전달하는 기능
→ 이를 통해 애플리케이션이 데이터베이스 내 테이블에서 발생하는 데이터 추가, 업데이트, 삭제 이벤트를 실시간으로 받아볼 수 있다.
(2) 주요 기능
- 실시간 데이터 스트림 : 특정 테이블에서 발생하는 모든 변동 사항을 즉시 받아볼 수 있다.
Ex) 사용자가 새로운 매칭을 요청하면 해당 테이블에서 변동사항을 실시간으로 감지해 즉시 업데이트 가능 - 다양한 이벤트 타입 : Insert, Update, Delete와 같은 이벤트에 대한 구독을 설정하여 필요한 데이터 변동사항만 받아볼 수 있다.
- 자동 푸시 알림 : 데이터베이스에 변화가 생기면 서버에서 클라이언트로 자동으로 알림 푸시
Ex) 실시간 채팅, 알림, 협업 애플리케이션 등
2) 매칭 기능구현 순서
(1) 데이터베이스 설계 및 테이블 설정
- 사용자 테이블: 이름(id/닉네임), 언어(국적.nation), 선호하는 학습언어(language) 등
- 매칭 테이블: 매칭된 사용자ID, 매칭상태(대기중, 매칭완료 등) 등
화상정보테이블: 화상수업 URL, 방ID, 채팅상태 등..
(2) 매칭 상태 모니터링
- Supabase Realtime 기능을 사용하여 매칭테이블의 상태변화를 모니터링 가능
- 사용자가 매칭 요청 → 매칭상태를 “대기 중”으로 설정, 다른 사용자가 같은 언어로 매칭을 요청할 때 상태를 “매칭완료”로 업데이트
(3) 매칭 로직 작성
- 사용자의 매칭 요청이 들어오면, 현재 대기 중인 사용자를 검색하여 매칭 여부를 결정
- 조건에 맞는 사용자가 있으면 매칭 테이블에 업데이트하고, ~~매칭이 이루어지면 실시간 이벤트를 통해 바로 화상 화면 보여짐
(4) 화상 통신 연결
- 매칭이 완료되면 화상 수업에 사용할 서비스를 선택하고 URL 생성(Ex. WebRTC나 Twilio 같은 화상통신 API)
- 생성된 URL을 매칭된 사용자에게 전달하여 실시간 화상수업 시작
(5) 테스트 및 예외처리
- 매칭 성공, 실패, 종료 시나리오에 따른 예외처리 추가
- 매칭 대기시간이 길어질 경우(10분), 대기 중인 사용자에게 알림을 주거나 대기 취소 옵션을 제공할 것.
4번은 다른 팀원이 맡으신 기능이라 그 전까지 해보려고 했으나,
화상통신연결 기능을 어느 정도 구현한 후에 하는 순서가 맞을거라는 피드백을 받아 작업 우선순위를 뒤로 미루고 다른 것을 먼저 구현해보기로 했다.
