전체 글

실시간 채팅 refactoring에서 message 상태를 한 곳으로 모은 이유

개요마감 기한에 쫓겨 '일단 돌아가게 만든 로직'이 다들 하나쯤은 있을것이라 생각한다.내 경우엔 이 프로젝트에서 실시간 채팅 로직이 그러했다.당시 구현하면서도 "나중에 꼭 리팩터링을 해야겠다." 라고 생각했는데,취준, 다른 프로젝트 등에 겹쳐서 미루고 미루다가 정리한 후 포스팅을 남기게 되었다. 채팅은 처음엔 단순한 기능처럼 보인다.채팅방을 선택하고 이전 대화를 불러온 뒤, 소켓으로 받은 새 메시지를 한 곳에 렌더링하면 된다.하지만 기능이 늘어나면서 'useChat' 커스텀 훅 하나가 방 생성과 선택, 소켓 연결, 메시지 병합, 읽음 처리, 퇴장까지 모두 맡게 됐다.이 커스텀 훅 파일은 288줄까지 커졌고 메시지가 중복 렌더링되거나, 채팅방을 나간 뒤에도 이전 상태가 남는 문제도 생겼다. 이번 refac..

Next.js 16에서 useSearchParams() 사용 시 should be wrapped in a suspense boundary 에러가 발생한 이유와 해결 방법

문제 상황Next.js 16(App Router)을 사용하는 프로젝트에서 `searchbar`컴포넌트를 구현하던 중,URL 쿼리 스트링을 읽기 위해 `useSearchParams()`훅을 사용했다."use client";import { useEffect, useState } from "react";import { useRouter, useSearchParams } from "next/navigation";import style from "./serachbar.module.css";export default function Searchbar() { const router = useRouter(); const searchParams = useSearchParams(); const [search, set..

[스위프 웹 11기 후기] - 팀 빌딩부터 네트워킹까지

스위프란?https://swyp.im/ 스위프 | IT 직군을 위한 취업·커리어 성장 플랫폼실전 프로젝트로 배우고 협업하며 성장하는 IT 커리어, 스위프에서 포트폴리오와 실무 역량을 완성하세요.swyp.im스위프는 기획자(PM), 개발자, 디자이너 등IT 직군이 실전형 팀 프로젝트를 경험하면서 취업과 커리어 성장을 준비할 수 있도록 돕는 플랫폼이다. 웹/앱 프로젝트 기수제로 운영되면서 지원자들을 팀으로 매칭해주는데,나는 웹 11기 프론트엔드 직군으로 참여해서 프로젝트를 수행했다. 최종적으로 우리 팀은 PM 1명, 디자이너 1명, 프론트엔드 2명, 백엔드 3명으로 이루어졌다. 뭐니뭐니해도 가장 좋았던 점은 '다양한 직군과 협업할 수 있는 기회'이다. 항상 사이드 프로젝트 팀원을 구하거나 수행할때마다,개발자..

프로젝트에 Ncloud를 사용해보자

Ncloud란?https://www.ncloud.com/intro/feature NAVER CLOUD PLATFORMcloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certificationwww.ncloud.comNcloud는 클라우드 서비스 플랫폼으로, 서버, 스토리지, 네트워킹, 데이터베이스, AI 서비스 등 다양한 IT 인프라와 소프트웨어 서비스를 클라우드 형태로 제공합니다. 우리 서비스에서는 위 이미지와 같이 사용중입니다. 하나씩 간단히 어떤 서비스인지에 대해 설명을 드리자면,먼저, Cloud Log Analytics는 다음과 같이 한 문장으로 나타낼 수 있습니..

Next.js + node.js로 간단한 Web Scoket 채팅 구현하기 - 1

개요그동안 여러 프로젝트를 진행해오면서SSE(Server Sent Event), CRUD API 연동은 진행해봤지만,Web Socket을 다뤄본적은 없었다. Web Socket 대신 SSE를 사용했던 이유는 알림 기능을 구현하기 위해서였다.물론 Web Socket을 사용해도 되지만,클라이언트는 단순히 알림조회를 하므로 양방향 소통이 필요하지 않았다.그래서 단방향인 SSE를 다뤘었다. 그래서 Web Socket을 한번쯤은 다뤄보고 싶었는데,언젠간 분명히 사용할 것 같아서 그냥 간단한 채팅을 구현하면서 트러블 슈팅을 해보려한다. Server평소에 프론트엔드를 주로 공부하고, 프로젝트도 모두 프론트엔드로 참여를 했다.그리고 프론트엔드 직무로 프론트엔드를 준비중이기도 하다. 따라서 서버를 다룬 경험은 거의 없어..

백준 / 4195번 / 친구 네트워크 / JS

https://www.acmicpc.net/problem/4195 풀이const fs = require('fs');const filePath = process.platform === 'linux' ? 0 : './input.txt';const input = fs.readFileSync(filePath).toString().trim().split('\n');const T = +input.shift();function* idGenerator() { let id = 0; while (true) { yield id++; }}class UnionFind { constructor() { this.parent = []; this.count = []; this.nameMap = new Ma..