neda의 블로그

230829 supabase inner join을 통해 필요한 데이터 한 번에 가져오기 채팅 기능을 구현하기 위해 채팅방 테이블, 채팅방 참가자 테이블, 채팅 메시지 테이블을 각각 만들었다. 일반적으로 채팅 페이지에서는 현재 사용자가 참여중인 채팅방의 목록을 보여주어야 한다. 또한 채팅방 각각의 참여자 수와 마지막 메시지를 미리보기로 보여주어 채팅방 리스트에서도 한 눈에 확인하기 쉽도록 해야 한다. supabase foreign table join supabase 에서는 외래키를 통해 연결된 테이블에 대해서 자동으로 join을 지원한다. 이렇게 하면 연결된 데이터를 모두 가져올 수 있다. await supabase .from('chat_rooms') .select( `*,chat_room_particip..

230828 sendbird 용량 초과로 인한 supabase로의 chat 구현 sendbird의 프리티어 최대 연결 수는 20이다. 한 사용자가 20개의 탭을 열어 20번 연결하면 끝나는 셈이다. UIKit이나 js sdk에서 중복 연결을 막지 않으면 1명이 사용하더라도 사용량이 다 찰 위험이 있는 것이다. 연습 용 프로젝트에서 17번을 찍은 적이 있기 때문에 실제 웹 사이트에 쓸 프로젝트에서는 3번 이상을 넘기면 합쳐서 20번이 넘기 때문에 멈추게 되었다. 결국 정말 맛보기 중에 맛보기 밖에 하지 못하는 프리 티어이다. supabase로 채팅 구현 결국 완전히 구현된 서비스를 사용하지 않고 직접 만들기로 했다. socket io을 사용하여 node 서버를 만들지 supabase로 만들지 고민했다. 채..

230827 내일배움캠프 15주차 WIL 벌써 15주차가 끝이 났다. 시간이 정말 빠른 것 같다. 이번 주에는 supabase와 sendbird에 집중한 시간인 것 같다. supabase는 여러모로 편한 것 같다. 타입스크립트로 타입을 내보는 것 부터, sql문을 직접 작성하지 않고, 자바스크립트 점 표기법을 통해 원하는 select문을 쉽게 사용할 수 있다. 또 대시보드에서는 sql문을 지원하기 때문에, 다양한 postgreSQL 자료들을 찾아보고 적용할 수 있다. sendbird는 처음에는 문서가 괜찮아 보여 시작했는데, 갈수록 예상하는 것과 다르게 동작하거나, 상수를 useState로 관리하는 등 신기한 부분이 많은 것 같다.

230825 sendbird javascript 메시지 보내기 sendbird javascript SDK를 사용하여 메시지를 보내는 방법 사용자 아이디로 샌드버드 연결 -> 메시지 보낼 채널 가져오기 -> 메시지 보내기 export const sendRequestTutoringMessage = async (studentId: string, tutorId: string) => { try { await sendbird.connect(studentId); } catch (err) { throw new Error('채팅 연결 에러'); } let channel; try { channel = await getGroupChannel(studentId, tutorId); } catch (err) { throw new..

230824 sendbird React UIKit 커스텀 메시지 보내고 받기 UIKit을 사용하는 채팅방 내에서 일반 텍스트 메시지가 아닌 다른 메시지를 띄우기 위해서 커스텀 메시지를 이용할 수 있다. 커스텀 메시지 렌더링하기 props로 받은 message 객체에서 일반 메시지는 customType을 가지지 않는다. 커스텀 메시지는 보낼 때 커스텀 타입을 지정할 수 있고, 렌더링할 때 그 타입에 따라 다르게 렌더링시켜 줄 수 있다. { if (!props.message.customType) return null; if (props.message.customType === 'request') { const message = props.message as ClientUserMessage; const { n..

0823 sandbird react uikit으로 사용하기 웹 사이트에 1:1 채팅 기능을 추가하기 위해서 sandbird 서비스를 이용했다. sandbird에서는 react UIKit을 제공하여 쉽게 시작할 수 있었다. UIKit으로 react에서 시작하기 sendbird에서는 react에서 채팅 서비스를 만들기 위한 UIKit과 함께 튜토리얼을 제공한다. React chat tutorial: How to build a chat app UI | Chat UI in 3 easy steps Build in-app messaging with developer-friendly SDKs, APIs, and UIKits. sendbird.com function App() { const [currentChannel..

230822 supabase postgreSQL view를 통해 통계 만들기 특정 열의 값에 따라 통계를 만들기 위해서는 group by 절을 사용할 수 있는데, javascript api에서는 group by절을 사용할 수 없다. VIEW를 직접 만들어서 VIEW 테이블에 대해 select를 하여 통계를 가져올 수 있다. 매칭 시스템을 만들고 있는 중이다. 사용자는 매칭이 끝나면 서로를 평가(리뷰)할 수 있다. 이를 위해서 테이블을 만들었다. profiles 테이블에는 사용자의 id를 포함한 사용자 데이터가 있고, role 열에는 사용자의 역할이 정의되어 있다. 'tutor' 또는 'student'이다. review 테이블에는 사용자에 대한 각각의 리뷰에 대한 데이터가 있고, reviewed_id를 통..

230821 supabase query count 수파베이스에서 count qeury하기 Select에서 count 사용하기 유저 테이블의 유저가 총 몇명인지 찾기 위해 count를 사용 const getAllUserCount = async () => { const { count, error } = await supabase .from("user") .select("*", { count: "exact", head: true }); console.log(count, error); }; job 컬럼에서 값이 '개발자'인 행만 count하여 개발자 직업을 가진 유저가 몇 명인지 구하기 const getStudentUserCount = async () => { const { count, error } = awa..

230820 내일배움캠프 14주차 WIL 새로운 프로젝트의 시작과 기획 월요일에는 프로젝트 발표, 화요일에는 광복절, 수요일부터는 마지막 프로젝트가 시작되었다 이번 프로젝트는 마지막 프로젝트이거 프로젝트 기간이 긴 만큼, 기획부터 탄탄하게 하기로 했다. 주제 선정부터 필요한 기능, 기술 선택까지 다 함께 천천히 고민했다. 특히 이번에는 디자이너분과 협업이 이루어지는 만큼, 기획을 잘 해놓아야 디자인 잡기가 편하다고 생각했다.

230818 React Hydration SSR을 사용하면 정적인 HTML 페이지를 서버에서 렌더링할 수 있다. 하지만 이벤트와 같은 상호작용을 할 수 없는 정적인 페이지일 뿐이다.이때 서버에서는 상호작용을 위한 자바스크립트 파일을 같이 내려 보낸다. 클라이언트에서는 내려받은 정적인 페이지에 상호작용을 추가하는 Hydration을 수행한다. Hydration 서버에서 렌더링된 정적인 HTML 파일을 클라이언트에서 상태와 상호작용을 추가하는 단계 처음 한 번만 수행되고, 이후로는 다시 Hydration하지 않고 클라이언트에서 상태를 통해 관리 장점: 서버에서 HTML을 렌더링하여 페이지 로딩 시간을 줄일 수 있다 SSR을 사용하여 SEO 최적화가 유리하다