neda의 블로그

230901 nextjs 서버컴포넌트에서 form 사용하기 서버 컴포넌트에서는 useState와 같은 hooks을 사용할 수 없다.따라서 form의 기본 사용법에 따라 action과 method로 http 요청을 보내고 api 폴더에 만들어 둔 route.ts에서 적절한 처리하여 응답을 받는다. // app/api/auth/login/route.ts export async function POST(request: Request) { const requestUrl = new URL(request.url) const formData = await request.formData() const email = String(formData.get('email')) const password = String(form..

230831 javascript Intl을 사용하여 날짜 시간 다루기 채팅방에서 채팅에 대한 각각의 시간과 일자별로 날짜를 알려주기 위해서 Intl 객체를 사용하여 사용자의 언어에 맞게 시간을 계산하여 보여줄 수 있다. 시간 보여 주기 const getTimeText = (isoDateString: string) => { const isoDate = new Date(isoDateString); const options: Intl.DateTimeFormatOptions = { hour: 'numeric', minute: 'numeric' }; return new Intl.DateTimeFormat(navigator.language, options).format(isoDate); }; getTimeText(..

230830 react router dom에서 useSearchParams로 쿼리 스트링 조작하기 특정 params 값 가져오기 const [searchParams, setSearchParams] = useSearchParams(); const room_id = searchParams.get('room_id') 기존 params에 특정 params 업데이트하기 const [searchParams, setSearchParams] = useSearchParams(); setSearchParams((prev) => ({...prev,room_id:'123'})); 특정 params 삭제하기 setSearchParams는 useState처럼 콜백 함수에서 기존 상태를 인자로 받을 수 있다. 삭제는 URLSear..

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를 통..