2026. 04. 13.
Vite 게시판을 Vercel에 무료로 배포하고 GitHub Actions로 자동 배포하기
지난 글에서 만든 Vite + JavaScript + Tailwind CSS 게시판https://www.fullstackfamily.com/@urstory/posts/14398을 실제 인터넷에 올려보겠습니다. 친구나 가족에게 링크 하나 보내면 누구나 접속할 수 있는,...
45 1 0
2026. 04. 12.
Vite + TypeScript + Tailwind CSS로 게시판 만들기
프레임워크 없이, TypeScript만으로 게시판을 만들어 봅니다. 회원가입, 로그인, 글 쓰기/수정/삭제, 페이지네이션, 댓글까지 전부 구현하는 튜토리얼이에요. 완성하면 이런 모습이 됩니다. 이전에 같은 앱을 JavaScript 버전/viteboardtutorial으로 만들었는데요...
24 0 0
2026. 04. 12.
Vite + JavaScript + Tailwind CSS로 게시판 만들기
프레임워크 없이, 순수 JavaScript만으로 게시판을 만들어 봅니다. 회원가입, 로그인, 글 쓰기/수정/삭제, 페이지네이션, 댓글까지 전부 구현하는 튜토리얼이에요. 완성하면 이런 모습이 됩니다. 빌드 도구는 Vite, 스타일은 Tailwind CSS를 사용합니다. React나 V...
19 0 0
2026. 04. 12.
매일 쓰는 VS Code 생산성 확장 5가지: GitLens, Path Intellisense, Import Cost, Thunder Client, TODO Tree
이 시리즈의 마지막 글이에요. 이전 편에서 ESLint, Prettier, Tailwind, React 관련 확장을 세팅했고, 이번에는 프레임워크에 상관없이 매일 손이 가는 생산성 확장 다섯 ...
14 0 0
2026. 04. 12.
React 개발을 빠르게 만들어 주는 VS Code 확장 3가지
이전 글에서 Vite 프로젝트에 ESLint, Prettier, Tailwind CSS까지 세팅했죠. 개발 환경은 갖춰졌으니, 이번에는 React 컴포넌트 작업을 빠르게 만들어 주는 VS Code 확장 세 가지를 설치하고 써 봅니다. 이 확장은 Next.js 프로젝트에서도 그대로 쓸 수 있어요...
10 0 0
2026. 04. 12.
Vite 프로젝트에 Tailwind CSS 설치하고 VS Code 확장 설정하기
이전 글에서 Vite + React + TypeScript 프로젝트에 ESLint, Prettier, Error Lens, Pretty TypeScript Errors를 설정했죠. 이번에는 같은 프로젝트에 Tailwind CSS를 얹고, 작업을 편하게 만들어 주는 VS Code...
11 0 0
2026. 04. 12.
Vite 프로젝트 필수 도구 설정 가이드: ESLint, Prettier, Error Lens, Pretty TypeScript Errors
Vite로 프로젝트를 만들었으면 그다음은 개발 환경을 다듬을 차례입니다. 코드를 잘 짜는 것도 중요한데, 잘못된 코드를 바로 알려주는 도구가 곁에 있으면 실수가 눈에 띄게 줄어요. 이 글에서는 Vite + React ...
6 0 0
2026. 04. 12.
Vite vs create-next-app: 프론트엔드 프로젝트 시작하는 두 가지 방법
Vite vs createnextapp: 프론트엔드 프로젝트 시작하는 두 가지 방법 프론트엔드 프로젝트를 처음 시작할 때 "뭘로 프로젝트를 만들지?"가 제일 먼저 고민되는 부분이죠. 2026년 현재 실무에서 가장 많이 쓰이는 방법은 두 가지입니다. Vite — HTML + TypeScript + Tailwind CSS 조합이거나, React만 단독으로 쓸 ...
17 0 0
2026. 04. 12.
모던 웹 개발자를 위한 VS Code 확장 프로그램 가이드 (2026)
모던 웹 개발자를 위한 VS Code 확장 프로그램 가이드 2026 JavaScript와 TypeScript로 React, Next.js 프로젝트를 만든다면 Visual Studio Code는 거의 기본값처럼 쓰이는 도구죠. 기본 상태로도 충분히 쓸 만하지만 어떤 확장을 얹느냐에 따라 작업 흐름이 꽤 달라집니다. 이 글에서는 2025년 후반부터 2026년 ...
19 0 0
2026. 04. 09.
AI에게 게임을 만들게 하는 법 — 하네스 엔지니어링 실전 가이드
이 글에서 설명하는 방법으로 실제로 만든 게임 에디터의 소스 코드: github.com/urstory/pixelquesthttps://github.com/urstory/pixelquest — 7개 기능, 142개 테스트, 사람이 직접 작성한 코드 0줄 "2D 레트로 게임 메이커를 만들어줘."...
#AI#HarnessEngineering#Claude#GameDev
360 0 0
2026. 04. 09.
Discord - 오디오인터페이스 지원안하는 문제 해결방법
맥에 오디오 인터페이스RME Babyface Pro사용중를 사용하는데 상대방이 목소리가 끊겨서 잘 못듣는 문제가 있습니다. 왜 이런 문제가 발생하냐? 라고 찾아봤습니다. 그런데!!! Discord가 대놓고 지원안한다고 말할줄이야. _;;; 아니 음성으로 대화하는 용도 아닌가...... 여하튼 이런 문제를 해결하기 위한 방법을 찾아봤습니다. Discord는 ...
#discord#audio-interface#babyface-pro#mac
27 0 0
2026. 04. 09.
같은 Opus인데 왜 결과가 다를까 — 하네스 엔지니어링이라는 답
올해 3월, Anthropic 엔지니어링 블로그에 눈에 띄는 실험 결과가 올라왔습니다. 같은 Opus 4.5에게 같은 프롬프트를 줬거든요. "2D 레트로 게임 메이커를 만들어라." 한쪽은 고장난 UI만 나왔고, 다른 한쪽은 레벨 에디터, 스프라이트 에디터, 플레이 테스트까지 갖춘 게임이 실제...
162 2 3
2026. 04. 06.
니콜이 거짓말 안 하게 만드는 법 — 문맥 판단, 대화 합성, 도구 호출 검증
AI 기억 시스템 시리즈 3편. 1편에서 세션 태그와 토픽 묶음을, 2편에서 벡터 검색과 태그 확장을 다뤘습니다. 이번엔 기억한 내용을 바탕으로 "어떻게 답하느냐"의 문제입니다. 기억을 잘 찾아오는 것과 그걸 가지고 답을 잘 하는 것은 다른 문제입니다. 니콜에게 "비트코인 얼마야...
#AI#LLM#벡터검색#기억시스템#거짓말감지
24 0 0
2026. 04. 04.
AI 기억 시스템 개선기 — 벡터 검색 + 태그 확장으로 "저번에 뭐 들었더라?"를 찾는 법
지난 글에서 세션 태그, 토픽 묶음, 매칭 점수 세 가지로 AI가 대화를 기억하게 만들었습니다. 잘 되는 것 같았는데, 실제로 써보니 근본적인 문제가 있었습니다. 키워드 검색의 한계 이전 시스템은 키워드 매칭이 핵심이었습니다. "마이그레이션"으로 검색하면 "마이그레이션"이 들어간 대화만 찾습니다. K: "저번에 무슨 노래 들었더라?" → 키워드 추출: "노...
#AI#LLM#벡터검색#pgvector#기억시스템
18 0 0
2026. 04. 04.
AI가 대화를 기억하는 법 — 세션 태그와 토픽 기반 맥락 유지 알고리즘
LLM은 대화가 끝나면 전부 잊습니다. 다음에 만나면 처음부터 다시. 니콜이라는 AI 에이전트를 만들면서 이걸 어떻게든 해결해야 했고, 세 가지 방법을 만들었습니다. 문제: "저번에 뭐 하기로 했었지?" 사용자가 어젯밤에 이런 대화를 나눴습니다. K: React 프로젝트 Next.js...
#AI#LLM#기억시스템#알고리즘
21 0 0
2026. 04. 03.
폼 전송의 세 가지 방식: urlencoded, multipart, JSON의 차이와 선택 기준
HTML 의 submit 버튼을 누르면 데이터가 서버로 갑니다. 간단해 보이지만, "어떤 형식으로 보내느냐"에 따라 서버가 받는 데이터의 모양이 완전히 달라집니다. 텍스트만 보낼 때, 파일을 함께 보낼 때, JavaScript로 API를 호출할 때 — 상황에 따라 각각 다른 인코딩 방식을 씁니다. application/xwwwformurlencoded, m...
#HTML#HTTP#Form#multipart#JSON
31 3 0
2026. 04. 03.
HTTP 메서드 완벽 가이드: PUT과 PATCH의 차이, DELETE body의 함정
웹 개발을 하다 보면 GET과 POST는 금방 익숙해지는데, PUT과 PATCH의 차이를 물어보면 "둘 다 수정 아닌가요?"라며 얼버무리게 되곤 합니다. DELETE에 body를 보낼 수 있는지도 은근히 헷갈리고요. 이 글에서는 HTTP 메서드 다섯 가지를 RFC 스펙부터 실무까지 다룹니다. PUT과 PATCH가 정확히 뭐가 다른지, DELETE body는...
#HTTP#REST API#PUT#PATCH#DELETE
46 3 0
2026. 04. 03.
Claude Code 에이전트 시스템 vs 니콜: 같은 이름, 완전히 다른 철학
Claude Code 소스코드가 유출된 지 사흘째, 이번엔 Agent/Team/Skill 시스템을 파고들었습니다. 니콜의 멀티 에이전트 아키텍처와 나란히 놓고 비교해 봤는데, 꽤 재밌는 차이가 나왔습니다. 둘 다 "멀티 에이전트"라는 이름을 쓰지만, 설계 철학은 정반대거든요. ...
49 1 0
2026. 04. 01.
Claude Code 소스 분석으로 AI 에이전트에 도구 6개를 이식한 이야기
Claude Code의 유출 소스를 분석해서 우리 AI 에이전트 "니콜"에 필요한 도구 6개를 구현했습니다. 53만 줄을 뜯어보고, 필요한 걸 골라내고, 실제로 돌아갈 때까지 삽질한 과정입니다. 시작: 53만 줄의 TypeScript 2026년 3월 31일, Claude Code의 TypeScript 소스가 유출되었습니다. 1,903개 파일, 535,137...
#ClaudeCode#AI에이전트#니콜#하네스엔지니어링
519 2 0
2026. 03. 31.
하네스 엔지니어링: AI 에이전트를 제대로 일하게 만드는 기술
3년 전에는 "프롬프트 엔지니어링"이 화두였죠. 지금은 "하네스 엔지니어링"입니다. 프롬프트가 AI에게 뭘 시킬지 고민하는 거라면, 하네스는 AI가 일하는 환경 자체를 설계하는 건데 — 이게 생각보다 결과 차이가 큽니다. 올해 2월 OpenAI가 5개월간 코드 한 줄 직접 안 쓰고 100만 줄짜리 제품을 만든 실험 결과를 공개했고, 3월에는 Anthropi...
#하네스엔지니어링#AI에이전트#니콜
156 1 0