![]()
import { NextRequest, NextResponse } from "next/server";export async function GET(req: NextRequest) { const page = parseInt(req.nextUrl.searchParams.get("page")!); const array = Array.from({ length: 5 }, (_item, idx) => { return page + idx; }); return NextResponse.json({ items: array }, { status: 200 });} 여러분 안녕하세요? 길고 긴 자율 프로젝트도 드디어 끝을 맞이했는데요다들 보람찬 프로젝트 기간 되셨나요? 저는 Next.js를 사용하여 이번 자율 프로..
![]()
안녕하세요! SSAFY의 2학기 첫 번째 프로젝트가 드디어 끝났습니다. 첫 프로젝트 도메인 중 많은 분들이 선택하셨던 주제가 바로 webRTC 기술인 만큼 채팅 기능을 구현한 팀도 많았으리라 생각되는데요! 오늘은 node.js + React + typescript를 이용한 채팅 기본 기능 구현 방법에 대해 알아보도록 하겠습니다. 필요 라이브러리 express (@types/express) socket.io socket.io-client uuid (@types/uuid) 1. index.ts (server) import express from "express"; import http from "http"; import { Server } from "socket.io"; const PORT = 3010; /..
![]()
안녕하세요 여러분! 길고도 짧았던 2학기 첫 프로젝트가 마무리되었습니다. 저는 첫 프로젝트로 WebRTC를 활용한 커플 다이어리 서비스를 제작하게 되었는데요 커플 서비스인만큼 채팅 기능을 빼놓을 수 없는 상황! 예상보다 고전했던 '신규 채팅 수신 시 화면 가장 아래로 이동' 기능을 만들기 위한 채팅방 UI/UX 개선기를 공개합니다. ※ 아래 화면 및 소스코드는 실제 프로젝트 작업물이 아닌 기사를 위해 작성한 간이 소스코드입니다. 1. 신규 메세지 수신 시 화면 맨 밑으로 이동 메세지 수신 시 화면 가장 아래로 이동하는 기능은 JavaScript의 scrollTo와 scrollIntoView를 이용하여 간단하게 구현이 가능합니다. // 메세지들을 감싸는 Wrapper ref const scrollRef =..
