React 기반 채팅 애플리케이션에서 수학 수식을 렌더링하는 방법을 소개합니다.문제 상황기본 ReactMarkdown 설정에서는 LaTeX 수식(`$E=mc^2$`, `$$...$$`)이 일반 텍스트로 표시되어, 수학 표현식이 제대로 렌더링되지 않았습니다.해결 방법1. 필요한 패키지 설치npm install remark-math rehype-katex katex 설치되는 패키지:remark-math: Markdown에서 LaTeX 수식 구문 파싱rehype-katex: KaTeX를 사용하여 수식 HTML 렌더링katex: 수학 표현식 렌더링 라이브러리 + CSS 2. 컴포넌트에 플러그인 추가'use client';import { useState, useRef, useEffect, useCallback, ..

실무에서 AI 관련 프로젝트를 진행하다보니, 리소스 관리가 특히나 중요해졌습니다.퇴근 후에는 서버를 사용하지 않는데, 켜져있으면 낭비가 발생하죠. 그래서 퇴근 직전에 매일 서버를 직접 꺼야 했었는데요.하루종일 바쁘게 보내다 맞이한 퇴근의 기쁨에 서버 끄는 것을 잊어버리는 사태가 가끔 발생하더라구요.그래서, 차라리 이걸 자동화해버리고, 다른 업무에 집중하자! 라는 생각이 들었습니다.그렇게 시도해본GPU 서버 자동 종료 시스템 구축하기두둥탁 1️⃣ 시스템 구성 개요우리가 만들 시스템은 다음과 같은 특징을 가집니다.매일 저녁 19시에 자동으로 서버 종료특정 날짜는 제외일로 지정 가능 (야간 작업이 필요한 경우 등)모든 동작을 로그로 기록재부팅 후에도 설정 유지 2️⃣ 시스템 구현 렛츠고1단계: 제외일 관리 파..

🤔 들어가며React Native 앱에서 네비게이션을 구현할 때, 페이지 간 데이터 전달 방식을 어떻게 선택하시나요? URL 파라미터를 사용할지, 전역 상태 관리를 사용할지는 많은 개발자들이 고민하는 부분입니다.최근 프로젝트에서 콘텐츠 상세 페이지의 라우팅 방식을 URL 파라미터에서 스토어 기반으로 전면 리팩토링했습니다. 이 과정에서 배운 각 방식의 장단점과 언제 어떤 방식을 선택해야 하는지에 대한 경험을 공유하고자 합니다.📋 기존 방식: URL 파라미터 기반 라우팅구현 방식기존에는 전형적인 URL 파라미터 방식을 사용했습니다:// 기존 파일 구조src/app/content/detail/[id].tsx// 네비게이션const handleItemPress = (itemId: string) => { r..

🤔 이 글을 쓰게 된 이유AI 채팅 서비스를 개발하면서 ChatGPT처럼 텍스트가 한 글자씩 타이핑되는 효과를 구현해야 했습니다."그냥 setInterval로 글자 하나씩 추가하면 되겠지?"라고 생각했었는데요... 언뜻 간단해 보이는 기능이었지만, 실제로는 React의 렌더링 사이클과 비동기 타이머가 만나면서 예상치 못한 문제들이 속출했습니다.가장 당황스러웠던 것은 API 응답은 정상적으로 받아오고, 상태 업데이트도 올바르게 작동하는데 화면에는 아무것도 표시되지 않는 현상이었습니다. 개발자 도구에서는 모든 것이 정상인데 UI만 멈춰있는 상황... 정말 멘붕.이 과정에서 겪었던 삽질과 깨달음을 공유합니다. 같은 고민을 하고 계신 분들께 도움이 되었으면 합니다.🚫 처음 작성한 문제투성이 코드첫 번째 시도..

🤔 이 글을 쓰게 된 이유프론트엔드 개발자로서 AI RAG 시스템을 구축하면서 가장 고민스러웠던 부분은 "사용자가 AI 응답을 기다리는 동안 어떤 경험을 제공할 것인가?"였습니다.ChatGPT처럼 텍스트가 한 글자씩 타이핑되는 것을 보며 "이런 기능을 어떻게 구현하지?"라고 궁금해했던 적이 있으신가요?저 역시 그랬습니다.초기에는 단순히 로딩 스피너만 보여주다가, 사용자들이 "응답이 언제 올지 모르겠다"며 불안해하는 모습을 보고 깨달았습니다. AI 응답의 특성상 처리 시간이 예측하기 어렵고, 단순한 로딩 표시로는 좋은 사용자 경험을 제공하기 어렵다는 것을요.💡 실시간 AI 응답 UI/UX 설계 핵심 원칙1. 스트리밍 응답으로 즉시성 확보하기가장 중요한 것은 Server-Sent Events(SSE)나 ..

일반적으로 `git config user.name`을 설정할 때,git config user.name myname이런 식으로 설정하게 되는데, 간혹 띄어쓰기를 넣어야하는 경우가 있다. 🍀 띄어쓰기를 넣어서 설정하는 방법git config user.name "my name"이렇게 쌍따옴표로 묶어서 설정해주기! ⚠️ 만약 그냥 냅다 my name이라고 적는다면?git config user.name my nameuser.name=my띄어쓰기 전까지인 `my`만 설정되게 된다 만약 잘못 설정했다면, unset한 후에 다시 설정해주기!git config --unset user.name

🫧 문제 상황git config 설정을 하다가 잘못하고 user.name을 두번 설정해버렸다 ㅎㅋgit config --listuser.name=Parkuser.email=email@gmail.comuser.name=Park예를 들면, 이런 식이었던거임. 그런데 그 와중에, `user.name`을 다 지우고 다시 설정하고 싶어진 나.git config --unset user.namewarning이 뜨고 만다 같은 값이 두 개나 있는데, 내가 어떻게 unset을 하냐 머 이런 말을 정중하게 적어뒀다 🍀 해결 방법모든 값을 다시 하나로 replace 한 다음, unset 하는 방법git config --replace-all user.name Parkconfig를 global로 설정한 경우 `--globa..

IT 쪽 공부를 시작하면서 좋아하게 된 유튜버, 인스타그래머가 여럿 있는데,그 중에 특히나 정감이 많이 가는 유튜버 '코딩알려주는누나' (..언니🥰)의 강의에서 알게된 지식을 정리하고자 한다.💛실무에서 자주 사용하는 Javascript 문법💛실무에서 이미 몇 번이고 본 코드긴 한데, 막상 내가 쓸려고 보면 생각이 안나서 이렇게 기록 ㅎ1.  Object Shorthand Assignment (객체 축약 할당?)💔 기존const name = 'noona';const age = 28;let person = { name: name, age: age} ❤️ 실무에서는?let person = { name, age}객체 내 변수와 할당할 변수의 이름이 동일할 경우, `name: name..