join으로 데이터 받아오기 기존의 channel_id와 channel 정보를 따로 받아오는 방식에서 join으로 변경해주었다. 채팅목록 실시간으로 업데이트 채팅의 last message도 실시간으로 업데이트 되게 하였다. created_at 기준으로 필터링 내가 채팅을 구독한 시점을 받아와 메세지 필터링에 적용시켜주었다. 생성 시점을 반환해주고 필...

채팅 구독 기능 처음 대화를 시작할 수 있는 버튼을 우선 리스트에 임시로 만들었다. 채팅 구독이 되어있지 않을 시 구독 관계를 형성해주고, 채팅창으로 이동한다. 줄바꿈 문제 해결 채팅방에 엔터 입력 시 적용이 되지 않았다. whitespace-pre-wrap으로 해결. 영어의 경우 띄어쓰기 없이 길게 쓸 경우 줄바꿈이 되지 않았다. break-all로 ...

채팅 목록 구성 1. 마지막 메세지 불러오기 각 채팅방 마다 지난 채팅 중 가장 마지막 메세지를 불러와 화면에 띄워주었다. 문제 1 : map 내부에서 async-await 호출 시 Promise array 해결 Promise 배열을 어떻게 처리할 수 있는 걸까, 하다 Promise.all 이라는 것을 발견했다. 순회 가능한 객체에 주어진 모든 프로미스를 ...

채팅 내부 UI 설정 채팅 디자인의 꼬리 부분 (직각 삼각형) tailwindcss의 border를 이용한 삼각형 border를 사용하여 삼각형을 만들 수 있었다. 하지만 border 자체로 만드는 것이기 때문에 내외부 색상을 다르게 할 수 없었다. rotate 사각형을 만들고 45도를 돌리는 방법도 있었지만 원하는 디자인과 맞지 않았다. Image 그 부...

중간 발표 이번에도 발표를 담당하여 중간 보고를 마쳤다. 발표는 매번 할 때마다 하고 나면 진이 빠진다... (ㅋㅋㅋㅋ) MVP 스펙으로는 상품 등록, 판매 그리고 채팅 기능을 설명했다. 팀원분들 모두 열심히 해주셔서 뿌듯함과 함께 발표를 진행했던 것 같다. 조금 아쉽게도... 노트북이 좀 구려서 (ㅋㅋㅋ) 여러 응용 프로그램을 동시에 켜두니 렉이... ...

채팅 목록 불러오기 - 인플루언서의 내 채팅방 가져오기 스크롤 조정 처음 입장 시, 스크롤이 아래에 고정되게 한다. 메세지 구분하여 좌우 배치 preMessage에 Boolean 값인 isMine을 추가하여 구분해주었다.

supabase realtime 실시간 메세지 받기 채널 정보를 통해 채널의 소유주가 누구인지 반환해준다 본인의 채팅방인지 확인해주고 실시간으로 받는 메세지를 구분해준다. 문제점 : 다중 열 필터 기능이 아직 개발되지 않은 문제로 실시간 값을 받은 후 이차 필터링을 해줄 것 추후 보완수정 작업을 거칠 예정이다.

메세지 보내기 메세지를 입력하고 채팅 보내기를 누르면 콘솔에 입력된 메세지가 잘 찍히는 것을 확인할 수 있다. supabase로도 데이터가 잘 들어간다.

유저가 구독하고 있는 채팅방을 불러와서 리스트를 화면에 출력하였다.

타입 자동 생성 위 명령어를 통해 자동으로 데이터베이스의 타입을 생성할 수 있었다. 번거로움을 덜기 위해 package.json 파일에 등록해두고 사용하였다. 라우터 설정 supabase에 저장된 지난 채팅 데이터를 가져오기 위해 라우터 설정을 진행하였...으나 계속 오류가 발생하고 있는 문제가 😰😰 다시 처음부처 코드를 짚어봐야겠다...

supabase table 구성 일대다 소통 방식의 채팅이다 보니 테이블 설정을 어떤 방식으로 해야할까 고민이 있었다. 인플루언서의 입장에서는 자신의 채팅을 구독하고 있는 모든 유저의 메세지가 보여야하고, 팬 유저의 입장에서는 자신과 자신이 구독한 인플루언서의 메세지만 보여야하기 때문에 이를 필터해서 받아올 때를 고려해야 했다. 결론적으로 위와 같은 테...

supabase realtime은 broadcast를 지원하여 단체 채팅 기능 구현을 가능하게 한다. 이를 이용하여 일대다 채팅방을 구현할 수 있을 것 같다. 문제점 분석 일대다 채팅방으로 '일'에 해당하는 크리에이터는 단체 채팅방으로, '다수'에 해당하는 구독 유저에게는 일대일 채팅방으로 보여져야 한다. 새로운 팬 유저가 '---와 채팅 시작하기'를 클...

.

1. 디자인과의 협업 시 지켜야 할 점 기술 적 제액 파악 및 대체 솔루션 탐색 왜 구현이 어려운지, 어떤 방법으로 해당 부분을 대체할 수 있는지 친절하게 명시한다. 개발 편의를 위해 디자인을 임의로 바꾸지 말 것 디자이너의 컨셉과 흐름을 존중하며 임의로 변경하지 않고 요청해야 한다. 2. 회의 - 우선 순위 정하기 페이지와 구현해야 할 기능이 많기 ...

카카오맵 마커, 윈도우인포테일윈드 css프로젝트 약국 어디가멘?(2)

인증(authentication) / 인가(authorization) 인증(Authentication) 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차 (ex. 로그인) 인가(Authorization) 인증을 받은 유저가 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차 (ex. 마이페이지에서 개인정보를 확인) HTTP 프로토콜의 특징 2...

json-server   아주 간단한 DB와 API 서버를 생성해주는 패키지이다. json-server는 주로 나와 같이 front-end를 공부하거나 백엔드에서 실제 DB와 서버가 완성되기 전 개발에 임시적으로 사용할 mock data를 생성하기 위해 쓰인다. > 앞서 공부했던 Supabase와 Firebase는 백엔드가 없는 환경에서 실제 서...

HTTP 프로토콜 : 데이터 통신을 월활하게 하기 위해 필요한 통신 규약(신호 송신의 순서, 데이터의 표현법, 오류 검출법 등)   클라이언트-서버 모델을 기반으로 동작한다. 요청과 응답은 텍스트 기반의 메시지로 이루어져 있다. 특징 무상태성 : 모든 요청은 독립적, 이전 요청의 정보를 기억하지 않는다. 확장성 : 확장 헤더를 추가하여 기능을...