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.

RSS와 Github Actions로 깃헙 프로필에 최근 블로그 포스팅 목록 추가하기

배경GitHub에서는 사용자 이름으로 된 레포지토리의 README.md 파일을 통해 자신을 효과적으로 소개할 수 있습니다. 많은 개발자들이 최근 블로그 포스팅 목록을 프로필에 표시하여 자신의 생각을 공유하고 블로그를 홍보하는 것을 보고, 저도 제 프로필에 이 기능을 구현하고 싶었습니다.이 글에서는 RSS 피드와 GitHub Actions를 활용하여 GitHub 프로필 README에 최신 블로그 글 목록을 자동으로 업데이트하는 방법을 직접 경험하고 적용한 과정을 공유하고자 합니다.RSS란?RSS (Really Simple Syndication 또는 Rich Site Summary)는 웹사이트의 새로운 콘텐츠 업데이트를 컴퓨터가 읽기 쉬운 표준화된 형식으로 제공하는 웹 피드입니다.대부분의 블로그 플랫폼(Ti..

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

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

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

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

Windowing 도입해서 DOM 요소 줄이기

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

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

코드분할로 초기로딩속도 개선하기

문제상황전월세 실거래가 공공데이터를 활용한 지도 서비스(대방)은 SPA(Single Page Application)로 설계되었습니다. SPA란 하나의 HTML 페이지로 실행되는 웹 애플리케이션으로, 최초 페이지 로딩 후 JavaScript를 통해 동적으로 페이지 내용을 갱신합니다. 따라서, 동적이고 사용자와 상호작용이 많은 앱을 구현하는데 적절하지만, 처음 접속시 모든 JavaScript를 파일을 다운로드 해야함으로 첫 페이지 로딩이 오래걸린다는 단점이 있습니다. 특히 지도 서비스인 대방은 외부 지도API를 불러오는데 추가적인 시간이 소요되므로, 초기 로딩을 단축하여 웹 성능(Web Performance)를 향상시키는 것이 중요했습니다.번들링 (Bundling)우리가 코드를 import 문법이나 requ..

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