분류 전체보기

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

2025 FEConf 후기

2025년 FEConf에 참가한 개인적인 후기입니다.간단히 어떤 내용들이 있었고, 개인적인 느낌을 적다보니 사진과 조금의 발표자료가 포함되어 있습니다.초상권, 발표내용을 업로드하는데 문제가 있을 경우,댓글 남겨주시면 삭제하겠습니다.늦었지만, FEConf 후기를 올려보려고 한다.그동안 규모가 작은 밋업이나 컨퍼런스는 가봤지만, 이런 대규모 컨퍼런스는 처음이라 신기하기도 했다.프론트엔드 개발을 주로 하는 사람으로써, 프론트엔드만을 주제로 한 컨퍼런스라 기대되기도 했다. 세션이 진행되는 홀도 좁지 않았는데,늦지 않았음에도 빨리 안가면 앉을 자리도 없을 정도였다.다만 의자에 음료나 본인 짐을 두고 자리를 오래 비우는 사람들이 많았는데,음료는 가지고 들어갈 수 없었고, 짐을 두고 자리를 오래 비우지 말라는 스태프..