클래스로 리액트 상태관리하기? (클래스 컴포넌트 아님)

class로 상태 관리하기?학점은행제 플래너 앱의 핵심 로직은 사용자가 입력한 학점은행제 플랜을 복잡한 규칙에 따라 검증하는 것이었다. 개발 초기 필요한 데이터와, 자료구조, 입출력 타입이 정해지지 않은 상황에서, class로 서비스 로직을 분리하고 클래스 인스턴스로 상태를 관리하는게 어떨까라는 생각이 들었다. 하위 클래스를 조립하는 방식으로 만들어 모듈화할 수 있고 테스트 코드를 작성하기도 용이하다고 생각했다. 물론 클래스 인스턴스를 리액트 상태로 관리하는 것이 까다롭고 권장되지 않는다는 것도 어렴풋이 알고 있었다. 하지만, UI 작업 이전에 서비스 로직을 먼저 구현할 필요성을 느꼈고 class가 좋은 선택지로 보였다.열띤 토론해당 방식으로 개발하며 이러한 방식의 장단점을 느껴볼 수 있었고, 개발완료 ..

• format_list_bulleted 회고
• · 2025. 8. 16.

React.memo()로 무거운 컴포넌트의 불필요한 리렌더링 막기

AI 어시스턴스 앱을 개발하면서 채팅 UI를 구현하면서, 사용자와 어시스턴트 간의 대화 메시지를 보여주는 Message 컴포넌트를 만들었다. 메시지 목록은 부모 컴포넌트인 Chat 컴포넌트가 배열 상태(messages)로 관리하며, 이 배열을 순회하며 각 Message 컴포넌트를 렌더링한다.//Chat.jsximport { useState } from "React";import { Mesasge } from "./Message.jsx"export fucntion Chat(){ const [messages, setMessages] = useState([]); ... return ( ... {messages.map((message) => ( ..

• format_list_bulleted 회고
• · 2025. 5. 4.

의사 클래스 :has()로 자식 요소에 따라 CSS 적용하기

React와 Tailwind CSS를 기반으로 LLM을 이용한 챗봇 프로젝트를 진행하면서, 메세지 입력 필드(Input 또는 Textarea)에 포커스 했을 때 단순히 입력 필드 자체 뿐만이 아니라 이를 감싸는 컨테이너 전체에 포커스를 주는 UI를 구현할 필요가 있었다.사실 매우 간단한 과제이지만, 여러 방법을 정리해보면서 각 방식에 대한 장단점을 파악할 수 있었기에 이를 정리하고 공유한다.방법 1 : absolute positionfunction Input() { return ( {messages.length === 0 && ( )} {status === "submitted" ? ( ..

• format_list_bulleted 회고
• · 2025. 4. 24.

크롬 브라우저에서 한글 입력시 버그와 isComposing 속성

문제상황input(또는 textarea)에서 Enter 키를 눌러 메세지를 보내는 코드를 작성했다. 그런데 한글을 입력하고 Enter를 누르면 마지막 글자가 남는 버그가 발생했다. 그런데, 기묘하게도 영어나 숫자를 입력했을 때는 이러한 버그가 발생하지 않았고, 제출 버튼을 눌러서 제출했을때도 버그가 발생하지 않았다. 따라서, 한글입력과 키보드 이벤트와 관련한 이슈로 파악할 수 있었다.또한 이러한 이슈는 크롬 브라우저를 사용중인 경우에만 발생하였다.구글 검색을 통해 관련 이슈를 찾을 수 있었다.코드 수정수정전const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault()..

• format_list_bulleted 트러블슈팅
• · 2025. 3. 27.

AbortController로 네트워크 요청 최적화하기

문제점웹 요청을 연달아 보내는 경우, 이전 요청들이 아직 처리 중인 상태에서 새로운 요청들이 계속 쌓이면서 병목 현상, 즉, 흐름이 막히는 현상이 발생할 수 있다. 경우에 따라, 사용자는 마지막 요청이 완료될 때까지 로딩을 기다려야 할수도 있다. 이는 매우 부정적인 사용자 경험으로 이어진다. 최악으로는, 사용자는 응답이 없다고 오해하여 페이지를 이탈할 수 있다.해결 방법1. HTTP/2 프로토콜을 사용하기HTTP/2 프로토콜이란?크롬 브라우저는 HTTP/1.1 프로토콜로 동일한 출처에 대해 동시에 6개의 TCP 연결만을 허용한다. HTTP/2 는 브라우저에서 동시 요청에 제한이 없으므로 병목현상이 줄어든다. 이는 더 빠른 웹 통신을 위해 2015년에 도입되었으며 HTTP/2 나 gQUIC 같은 효율적인 ..

• format_list_bulleted 회고
• · 2025. 3. 23.

Windowing 도입해서 DOM 요소 줄이기

유튜브에 나온 인플루언서들의 맛집을 조회할수 있는 지도 웹앱 먹튜브를 개발하면서, MVP 개발이 가장 큰 목표였다. 갑자기 떠올린 사이드 프로젝트 아이디어인 만큼 짧은 시간안에 중요한 기능만 개발하고 싶었다. 따라서, 빠른 개발을 위해서 데이터를 공통 편집하기 유용하며 별도의 백엔드 인프라가 필요하지 않은 구글 시트를 DB로 선택했다. 일단 비효율적이라도 구현하고, 최적화는 필요한 경우에만 나중에 하기로 했다.관련 포스팅 : 구글 시트 CORS 에러 삽질기문제상황간단한 구현을 위해, 앱 접속시 디비의 모든 데이터를 패칭해 이를 리스트와 마커로 띄워주고 있었다. 그런데 데이터를 약 100개 정도 있는 상황에서 리스트에서 렌더링이 제대로 되지 않는 현상이 발생했다. 문제를 정확히 파악하기 위해 개발자도구에서..

• format_list_bulleted 회고
• · 2025. 3. 13.