[WebSocket] React + express 스트리밍 챗봇 만들어보기

최근 실시간 기능에 대한 이해가 필요해져서 WebSocket을 학습하며,React와 Express를 사용해 스트리밍 방식의 간단한 챗봇 예제를 만들어봤다. WebSocket- 클라이언트와 서버가 한 번 연결되면, 양방향으로 지속적인 데이터 교환이 가능한 프로토콜- HTTP는 요청/응답 구조의 단방향 통신이며, 매번 연결이 필요함 스트리밍 전송- 데이터를 한번에 보내지 않고 여러 조각으로 나누어 순차적으로 전송하는 방식- 사용자가 일부 데이터를 받아 즉시 처리할 수 있도록 활용할 수 있음ex. 유튜브에서 영상 파일 전체를 받지 않아도 곧바로 재생을 시작할 수 있음, chatGPT같은 챗봇 서비스에서 한문장씩 응답 출력 등 목표- 사용자가 버튼으로 질문 전송- 서버는 전송된 질문에 맞는 답변을 스트리밍 방..

• format_list_bulleted 실험실
• · 2025. 7. 28.
• textsms

[React/Next.js/React-hook-form] 입력값에따라 동적으로 너비가 조정되는 input 컴포넌트 만들기

퀴즈를 제작하는 폼에서 선택지를 입력하는 컴포넌트를 개발하면서, 사용자가 입력하는 텍스트 길이에따라 input의 너비가 자동으로 조정되는 기능이 필요했습니다. 그 과정에대한 간단한 기록입니다! 시도 1 - css ch 단위 이용처음에는 단순히 CSS의 ch 단위를 활용했습니다. ch 단위는 현재 사용중인 폰트의 '0' 문자 너비를 기준으로 하는 단위로, 문자 개수에 비례한 너비를 설정하기위해 활용하고 현재 폼에 react-hook-form을 사용하고 있었기 때문에 watch를 사용해 입력된 값을 확인했습니다. const inputValue = watch(`problem.item`);// 텍스트 길이에 따라 너비 계산const inputWidth = Math.max(15, (inputValue?.lengt..

• format_list_bulleted 팀 프로젝트/오르미
• · 2025. 6. 10.
• textsms

[github workflow + Next.js] 빌드 실패 File is not defined 오류 해결하기

문제Next.js 14를 사용한 프로젝트에서 Github Actions로 빌드, 스토리북 테스트를 진행하고 있는데 Github Actions 빌드 환경에서 File을 찾을 수 없다는 에러가 발생했습니다. ReferenceError: File is not definedError: Failed to collect page data for /lectures/[lectureId]/question 로컬 개발 환경이나 빌드 상황에서는 정상적으로 동작하고, CI 환경에서만 발생하는 상황이었습니다. 시도 1 (해결 X)유일하게 prefetch를 하는 페이지였고, File을 서버컴포넌트에서 사용하려는게 문제가 됐나보다 추측하고 서버 환경에서 File을 정의하거나 CI 환경에서 prefetchQuery를 진행하지 않도록..

• format_list_bulleted 팀 프로젝트/오르미
• · 2025. 6. 2.
• textsms

Zod를 활용한 응답데이터 검증에서 발생한 날짜 형식 검증 해결하기

Next.js 프로젝트에서 프로젝트의 전반적인 데이터 검증에 zod를 활용하고 있습니다.퀴즈 목록을 가져오는 컴포넌트를 구현하는 과정에서 다음과 같은 문제가 발생했습니다. 문제- 네트워크 탭에서는 모킹서버로 정상 요청-응답 확인- 컴포넌트에서는 받아온 응답을 확인할 수 없음 시도네트워크 요청은 기대한 값을 잘 받아오고 있기 때문에 api나 서버 모킹 관련 문제가 있는 건 아니라고 생각이 들었고, 서버 -> 사용자에게 보여지는 컴포넌트 흐름으로 데이터가 잘 전달되는지 확인하고자 가장 먼저 데이터를 fetch하는 함수에 필요한 로그를 추가했습니다.// fetch 함수 내부...if (!response.ok) { console.error(response.statusText); throw new Error(..

• format_list_bulleted 팀 프로젝트/오르미
• · 2025. 5. 20.
• textsms

[React-Hook-Form + Zod] 안전성있게 폼과 데이터 처리하기

프론트엔드 구현의 끝은 복잡한 폼이라는 말을 들은 적이 있습니다..이번 프로젝트를 진행하면서 그 말이 자연스럽게 떠올랐습니다. 다행히도 프로젝트 초반부터 react-hook-form과 zod를 도입해 사용하고 있었기 때문에, 데이터 구조가 중간에 수정되더라도 즉시 인지할 수 있었고 보다 안정적으로 구현을 이어가고 있습니다. 이번 프로젝트는 BaaS 기반 프론트엔드 관점으로 기능을 관리했던 방식이 아니라, 백엔드 개발자분과 함께 협업하고 있습니다. 앞으로도 다양한 어려움이 생길 수 있겠지만, 그중 가장 먼저 마주한 어려움은 데이터 타입의 차이였습니다.예를 들어 사용자가 퀴즈를 생성할 수 있는 폼을 만들고 해당 데이터를 서버에 전달해야 하는데, API 명세서에서 요구하는 타입과 제가 폼을 만들기 위해 정의한..

• format_list_bulleted 프론트엔드 아키텍처 & 설계
• · 2025. 5. 19.
• textsms

[Next.js/TS] 사용성과 안정성을 고려한 Toast 알림 구현 기록

오르미에서 공통적으로 사용할 Toast 시스템을 구현한 기록입니다! 지금까지 라이브러리를 사용해 아주 간단하게 토스트 알림을 사용했지만, 이 프로젝트에서는 구현해야할 디자인 요구사항이 명확하다보니 직접 시스템을 만들어보자 생각이 들었습니다.복잡한 요구사항이 없다면 생각보다 간단하게 구현할 수 있으니 혹시 라이브러리 사용을 고민하며 글을 보신 분이 계시다면 ㅎㅎ 한번 도전해보세요! 개요고려한 점1) 개발자의 사용성- 추후 리액트 경험이 적은 팀원이 백엔드 개발을 마무리한 후 프론트엔드 개발에 합류할 계획이 있습니다. 이에 복잡한 로직을 고려하지 않고 간단하게 토스트 알림을 사용할 수 있도록 만들고자 했고, 코드 가독성과 안정성을 높일 수 있는 설계를 위해 고민했습니다.2) 서비스 사용자의 UX- 너무 많은..

• format_list_bulleted 팀 프로젝트/오르미
• · 2025. 5. 9.
• textsms