본문 바로가기

분류 전체보기185

[Virgin road] React Bits 의 Ballpit 코드를 수정해보자. 결혼 축하 편지를 남기는 플랫폼이다. 방 페이지에서 하객들이 작성한 편지마다 그들의 이름이 새겨진 공이 둥실둥실 떠다니는 모습을 보여주고 싶었다. 마치 축제의 풍선처럼, 행복한 순간들이 공중을 떠다니는 느낌을 표현하기 위해서죠.이를 구현하기 위해 오픈소스로 공개된 Three.js 기반의 물리 시뮬레이션 Ballpit 컴포넌트(링크)를 활용했다. 하지만 그대로 적용하기엔 여러가지 문제가 있었다. 1. 공에 편지 작성자 이름 추가2. 이벤트 리스너 메모리 누수3. W 클래스 (물리 엔진) - Vector3 객체 풀링4. Z 클래스 (InstancedMesh) - NDC 연산 버퍼 사전할당5. maxBoundary 중복 계산 제거 이 글에서는 이 문제들을 어떻게 해결했는지, 그리고 추가로 진행한 최적화 작업들.. 2026. 3. 9.
리엑트로 PDF 를 만들어보자 현재 개발하고 있는 서비스 버진로드 는 2026. 3. 9.
React 프로젝트 와 API 구조 구성 (feat. 환경변수 Mock 사용법) 이 글에서는 API 스펙을 받았지만, 실제 서버가 개발되지 않았을 때 쉽게 전환 할 수 있는 구조를 실제 프로젝트(Virgin Road)를 기반으로 설명한다.문제 상황API 문서는 완성 되었지만 구현을 안되었을때전체 구조도1. 타입 정의API에서 정의한 타입을 미리 작성해 둔다.src/types/room.tsexport type Recipient = 'GROOM' | 'BRIDE' | 'BOTH';export interface LetterSummary { writerName: string; recipient: Recipient;}export interface Room { roomCode: string; groomFirstName: string; groomLastName: string; brid.. 2026. 2. 26.
[Oh! my SecendBrain] 4. Phase 1 개발 목표Phase 1의 목표는 일단 동작하게 만드는게 목표다.동작이라 함은 FastAPI를 통해 로컬 AI 를 사용해 메모를 의미기반으로 찾고 내가 작성한 내용을 AI로 분류 후 메모를 옵시디언에 작성하는것이다. 이걸 API 스펙을 작성하면 다음과 같다.POST /api/v1/notes/process # 새 노트 정리 및 저장POST /api/v1/search # 의미 기반 노트 검색POST /api/v1/batch/process # 미처리 노트 일괄 임베딩GET /api/v1/notes/list .. 2026. 2. 20.
[Oh! my SecendBrain] 3. 개발 계획 어떻게 만들 것인가아이디어는 잡혔다. 이제 실제로 어떻게 만들지 계획을 잡아보자.결론부터 말하면, 이 프로젝트는 크게 4개의 Phase로 나눠서 진행할 예정이다. 한 번에 완성된 제품을 만들려 하지 않고, 단계별로 동작하는 결과물을 만들어가는 방식을 선택했다.전체 구조를 먼저 이해하자본격적인 계획 전에, 이 서비스가 어떤 구조로 동작하는지 간단히 짚고 넘어간다.핵심 컴포넌트는 딱 4개다.FastAPI가 메인 서버 역할을 하고, Ollama가 로컬에서 AI 모델을 실행한다. LanceDB는 노트를 벡터로 저장해서 의미 기반 검색을 가능하게 하고, Obsidian Vault는 실제 마크다운 파일이 저장되는 곳이다.입력 경로는 두 가지다. 메신저(Slack, WhatsApp 등)로 보내거나, 직접 API를 호.. 2026. 2. 20.
[Oh! my SecendBrain] 2. 아이디어와 서비스 개요 아이디어의 출발점지난 글에서 이야기했듯, 나는 Claude Code로 옵시디언 볼트를 주기적으로 정리해왔다. 결과물은 만족스러웠지만 한 가지 찜찜함이 항상 남았다."내 개인적인 생각들이 외부 서버로 나가고 있다는 것."그러던 중 oh-my-opencode와 OpenClaw를 접하면서 머릿속에 딱 하나의 그림이 그려졌다."이걸 조합하면, 내 노트북 밖으로 데이터가 한 바이트도 나가지 않는 AI 두 번째 뇌를 만들 수 있지 않을까?"그게 Oh My Second Brain의 시작이다.한 줄로 설명하면옵시디언 노트를 AI가 주기적으로 연결·정리하고 새로운 아이디어를 발굴해주는 서비스. 단, 모든 처리는 내 노트북 안에서만.기존에 Mem.ai나 Notion AI 같은 서비스들도 비슷한 걸 하긴 한다. 그런데 이것.. 2026. 2. 20.
[Oh! my SecendBrain] 1. 소개 나는 아이디어나 생각나는 정보들, 정리해야 하는 정보들은 항상 옵시디언에 작성하곤 한다.이유는 노션은 유료인 부분도 있고 옵시디언이 md 파일로 되어 있어 Claude Code 에 기획안을 작성하고 정리해 달라고 하기 편하기 때문이다. 또 개인 로컬에 작성하기 때문에 뭔가 개인적인 느낌이 있다.또 뭔가 나의 불규칙적인 아이디어들을 연결되어 생각들이 정리되고 새로운 아이디어가 떠오르곤 하기 때문에 자주 애용한다.그런데 문제는 md 파일이 늘어나고 나의 정보들이 많아질 수록 내가 직접 정리하고 연결하는것이 뭔가 노트가 유기적으로 살아있는 느낌이 안든다. 뭐랄까.... 옛날 노트들은 죽은 느낌이랄까? (다들 이런 생각들 많이 한다더라...)그래서 옵시디언 고수들을 자신들의 다양한 노하우와 노트정리법을 공유하곤.. 2026. 2. 20.
Server State Management 1. Server State Management (서버 상태 관리)가장 정확한 표현입니다. 클라이언트 상태(useState)와 서버 상태를 분리합니다.2. Custom Hooks Pattern (커스텀 훅 패턴)useCreateRoom, useVerifyEmail 같은 재사용 가능한 훅으로 로직을 캡슐화합니다.3. Data Fetching Abstraction (데이터 페칭 추상화)API 호출을 선언적으로 관리하는 추상화 레이어입니다.목적🎯 핵심 목적서버와의 통신을 "상태"가 아닌 "비동기 이벤트"로 다루기구체적 목적들1. 서버 상태와 클라이언트 상태 분리`// ❌ 기존: 서버 데이터를 클라이언트 상태로 관리 const [data, setData] = useState(null); const [loadi.. 2026. 2. 11.
[나도 AI 개발자] 자막 추출 AI 개발해보기 (1) 또 우리 팀에 이사님이 아래의 사진과 같이 하나의 캡쳐사진을 웍스 단체 DM에 보내며 자막 추출 AI를 만들라 해본다...뭐 당연히 우리 팀에서는 나한테 시키면서 이번에도 해보라고 한다.솔직히 뭔지도 모르고 아는건 없지만 저번에 해봤던 ComfyUI를 설치하고 아웃페인팅을 해봤던 것때문에 이전처럼 당황하지 않았다.뭐 우리 듬직한 클로드와 함께 공부해가면서 구축해보면 될일이지 뭐~뭐 일단 Qwen3-ASR이 뭔지 부터 찾아보자.Qwne3-ASR은 알리바바에서 만든 30개 언어 + 중국 방언 22개 의 언어를 Automatic Speech Recognition (자동 음성 인식) 하는 AI 오픈소스 모델이라고 한다. 모델은 총 두개의 모델을 제공해주는데 0.6B 의 가볍고 빠른 모델과 성능이 좋은 1.7B .. 2026. 2. 2.
AI 전문가란 무엇인가... 2026. 1. 26.
AI 서버 구축하기 GPU 다루기 - 사내 GPU를 어떤식으로 구축했는가?- 도커 다루는 법- comfyui 다루는 법등등.,,,, 2️⃣ Docker Compose의 역할Docker란?각 서비스를 격리된 컨테이너에 넣는 기술┌─────────────────────────────────────┐│ Ubuntu 24 (Linux) │├─────────────────────────────────────┤││ ┌──────────────────┐ ┌──────────────────┐│ │ 사용자 서비스 │ │ 주문 서비스 ││ │ ┌──────────────┐ │ │ ┌──────────────┐ ││ │ │ Python 3.10 │ │ │ │ Python 3.10 │ ││ .. 2026. 1. 26.
리엑트는 무엇인가? (feat. 안드로이드 개발자) 이 글을 작성하기 앞서 Compose 의 패러다임은 React 의 개념을 많이 차용하였다고 한다.해서 Compose 를 공부하기 전에 React 가 무엇인가 부터 집고 가면 Compose를 이해하기 쉬울것이라 생각하여 작성하게 되었다.1. 웹 브라우저는 어떻게 동작할까?React를 이해하려면 먼저 웹 브라우저가 어떻게 동작하는지 알아야 한다.1.1 브라우저 렌더링 프로세스웹 브라우저가 화면을 그리는 과정은 다음과 같다:1. HTML 파싱 (Parse) : 브라우저가 HTML 코드를 읽고 DOM(Document Object Model) 트리를 구성CSS 적용 (Style) : 각 엘리먼트에 스타일 규칙을 적용Render Tree : DOM 과 CSSOM 을 합쳐 웹의 청사진을 그려냄레이아웃 계산 (Layo.. 2026. 1. 22.
진격의거인으로 공부하는 네트워크 지식들 (코딩 애플) 나는 코딩애플의 영상을 자주 보곤 하는데 이번에 네트워크의 기본 지식들이 필요해 유튜브 영상을 기록용으로 작성해보려 한다.진격의 거인 비유법으로 알려주니 너무 이해가 잘 된다. 1. subnet서브넷은 벽이다.각종 해커(거인)들이 사람만 보면 잡아먹듯이 항상 네트워크로 들어오려고 하는데 벽을 세워 들어오지 못하게 한다.VPC 라는게 있는데 이건 가상 네트워크 인데 이건 쉽게 생각하면 파라디섬 같은 거다. 안에 컴퓨터들을 설치하고 주소를 지정해줄 수 있다.그 섬 내부에 subnet이란 벽을 세워 거인들이 침입하는것을 막는다.외부에서 접근이 가능한 컴퓨터와 아닌 것을 분리해서 subnet 을 각각 만들어준다.로드벨런서라는것도 있는데 이건 서버에 접근하기 전 몸빵을 한다.2. 보안 그룹벽만 만들어놨다고 안전한.. 2026. 1. 15.
LLM 서빙 엔진 TGI 와 vLLM 이란? 잠깐 LLM 서빙 엔진 이란 것을 알기전 LLM 모델이 무엇인지 부터 잠깐 집고 넘어가자.LLM 모델은 수십억 개의 숫자(파라미터)로 이루어진 거대한 수학함수하고 한다. 쉽게 생각하면 "패턴을 알고 있는 거대한 계산기"라고 생각하면 된다. 해서 실제 답변을 만드는 일을 한다. 모델에 대한 내용은 다음 글에서 자세히 정리해보도록 하고 지금은 LLM 서빙 엔진 을 먼저 무엇인지 알아보자.(사실 모델이란 말은 많이 들어봐서 뭔가 알듯 한데 LLM 서빙 엔진은 처음 들어봤다.;;)LLM을 동작할때 단순히 모델(Gemma / Qwen) 과 같은 학습하고 저장하는 것을 넘어 실제 사용자 응답을 처리하는 서빙(Serving) 단계가 핵심이 되었다.서빙 엔진은 학습된 모델을 생산환경에서 빠르고 안정적으로 사용 가능하게.. 2026. 1. 14.
VS Code Remote SSH로 GPU 서버에 편하게 접근하기 나는 처음 GPU 서버에 접근 권한을 받고 시스템 운영(사내 서버 관리)팀에게 터미널로 접근할 수 있는 방법에 대해서 간단히 전해 들었다. 그런데 나는 터미널을 싫어하는 개발자이고 또 딱 봐도 Python 을 만질거같다는 느낌도 들고 폴더형식을 한눈에 볼수있으면 좋다고 생각이 들어(nano 로 하면 되긴 하는데 엄청 불편할 거 같다 ㅜ). 그래서 IDE 로 접근 가능하지 않을까 생각에 클로드에게 물어봤고 한번에 알려주었다. 오늘은 Visual Studio Code의 Remote SSH 를 활용해 어떻게 GPU 서버 에 VS Code로 접속하는 방법 을 했는지 작성해보겠다.일단 내 기본 정보는 아래의 기준으로 한다. (예시임!)서버 IP: 211.000.00.000사용자명: admin포트: 221. 일단 .. 2026. 1. 14.

티스토리툴바