Vite 게시판을 Vercel에 무료로 배포하고 GitHub Actions로 자동 배포하기
지난 글에서 만든 을 실제 인터넷에 올려보겠습니다. 친구나 가족에게 링크 하나 보내면 누구나 접속할 수 있는, 진짜 "내 사이트"를 만드는 거예요. 이 글에서는 Vercel이라는 무료 호스팅 서비스를 사용합니다. 가입부터 도메인 발급, 그리고 GitHub에 코드를 푸...
Vite + TypeScript + Tailwind CSS로 게시판 만들기
프레임워크 없이, TypeScript만으로 게시판을 만들어 봅니다. 회원가입, 로그인, 글 쓰기/수정/삭제, 페이지네이션, 댓글까지 전부 구현하는 튜토리얼이에요. 완성하면 이런 모습이 됩니다. 이전에 같은 앱을 으로 만들었는데요, 이번에는 TypeScript로 다시 작성합니다. 기능...
Vite + JavaScript + Tailwind CSS로 게시판 만들기
프레임워크 없이, 순수 JavaScript만으로 게시판을 만들어 봅니다. 회원가입, 로그인, 글 쓰기/수정/삭제, 페이지네이션, 댓글까지 전부 구현하는 튜토리얼이에요. 완성하면 이런 모습이 됩니다. 빌드 도구는 Vite, 스타일은 Tailwind CSS를 사용합니다. React나 V...
매일 쓰는 VS Code 생산성 확장 5가지: GitLens, Path Intellisense, Import Cost, Thunder Client, TODO Tree
이 시리즈의 마지막 글이에요. 이전 편에서 ESLint, Prettier, Tailwind, React 관련 확장을 세팅했고, 이번에는 프레임워크에 상관없이 매일 손이 가는 생산성 확장 다섯 ...
React 개발을 빠르게 만들어 주는 VS Code 확장 3가지
이전 글에서 Vite 프로젝트에 ESLint, Prettier, Tailwind CSS까지 세팅했죠. 개발 환경은 갖춰졌으니, 이번에는 React 컴포넌트 작업을 빠르게 만들어 주는 VS Code 확장 세 가지를 설치하고 써 봅니다. 이 확장은 Next.js 프로젝트에서도 그대로 쓸 수 있어요...
Vite 프로젝트에 Tailwind CSS 설치하고 VS Code 확장 설정하기
이전 글에서 Vite + React + TypeScript 프로젝트에 ESLint, Prettier, Error Lens, Pretty TypeScript Errors를 설정했죠. 이번에는 같은 프로젝트에 Tailwind CSS를 얹고, 작업을 편하게 만들어 주는 VS Code...
Vite 프로젝트 필수 도구 설정 가이드: ESLint, Prettier, Error Lens, Pretty TypeScript Errors
Vite로 프로젝트를 만들었으면 그다음은 개발 환경을 다듬을 차례입니다. 코드를 잘 짜는 것도 중요한데, 잘못된 코드를 바로 알려주는 도구가 곁에 있으면 실수가 눈에 띄게 줄어요. 이 글에서는 Vite + React ...
Vite vs create-next-app: 프론트엔드 프로젝트 시작하는 두 가지 방법
프론트엔드 프로젝트를 처음 시작할 때 "뭘로 프로젝트를 만들지?"가 제일 먼저 고민되는 부분이죠. 2026년 현재 실무에서 가장 많이 쓰이는 방법은 두 가지입니다. - Vite — HTML + TypeScript + Tailwind CSS 조합이거나, React만 단독으...
모던 웹 개발자를 위한 VS Code 확장 프로그램 가이드 (2026)
JavaScript와 TypeScript로 React, Next.js 프로젝트를 만든다면 Visual Studio Code는 거의 기본값처럼 쓰이는 도구죠. 기본 상태로도 충분히 쓸 만하지만 어떤 확장을 얹느냐에 따라 작업 흐름이 꽤 달라집니다. 이 글에서는 2025년 후반부터 2026...
안드레이 카파시가 말하는 AI관련 갭차이
내 타임라인을 보면 AI 능력에 대한 이해 격차가 점점 벌어지고 있다. 첫 번째 문제는 사용 시점과 요금제 수준이다. 많은 사람이 작년쯤 ChatGPT 무료 버전을 써보고, 그 경험이 AI에 대한 인식을 과도하게 지배하도록 내버려뒀다. 이 부류는 모델의 여러 허점이나 환각 현상을 보고 비웃는 반응을 보인다. 나도 OpenAI의 Advanced Voice M...
일에 임하는 태도
https://youtube.com/shorts/936Qxr7y6jY?si=Z62sUl3dwtz5diLT 마인드셋이 중요하다.
천재적인 영감이 떠올리는 방법
AI에게 게임을 만들게 하는 법 — 하네스 엔지니어링 실전 가이드
"2D 레트로 게임 메이커를 만들어줘." 이 한 문장을 Claude에게 그냥 던지면 20분 만에 UI 비슷한 게 나옵니다. 근데 버튼을 누르면 아무 반응이 없고, 스프라이트를 그려도 저장이 안 되고, 플레이 테스트를 누르면 빈 화면만 뜹니다. $9 날렸습니다. 같은 모델에게 같은 프롬프트를 ...
Discord - 오디오인터페이스 지원안하는 문제 해결방법
맥에 오디오 인터페이스(RME Babyface Pro사용중)를 사용하는데 상대방이 목소리가 끊겨서 잘 못듣는 문제가 있습니다. 왜 이런 문제가 발생하냐? 라고 찾아봤습니다. 그런데!!! Discord가 대놓고 지원안한다고 말할줄이야. --;;; 아니 음성으로 대화하는 용도 아닌가...... 여하튼 이런 문제를 해결하기 위한 방법을 찾아봤습니다. Discor...
같은 Opus인데 왜 결과가 다를까 — 하네스 엔지니어링이라는 답
올해 3월, Anthropic 엔지니어링 블로그에 눈에 띄는 실험 결과가 올라왔습니다. 같은 Opus 4.5에게 같은 프롬프트를 줬거든요. "2D 레트로 게임 메이커를 만들어라." 한쪽은 고장난 UI만 나왔고, 다른 한쪽은 레벨 에디터, 스프라이트 에디터, 플레이 테스트까지 갖춘 게임이 실제...
창의성이 중요하다는 착각.
"인생의 목표가 남을 이기는 것이 되면 절대 만족할 수 없습니다. 반면에 남을 기쁘게 하는 데서 보람을 느끼면, 다섯 명을 기쁘게 하던 사람이 500명, 1,000명까지 범위를 넓히고 싶어지죠. 재미있는 건, 그게 우리가 보통 '성공'이라 부르는 것과도 이어진다는 점입니다." '이 사람이랑 같이하면 뭔가 좋은 일이 생길 것 같다'는 느낌. 나와 함께하면 진...
니콜이 거짓말 안 하게 만드는 법 — 문맥 판단, 대화 합성, 도구 호출 검증
기억을 잘 찾아오는 것과 그걸 가지고 답을 잘 하는 것은 다른 문제입니다. 니콜에게 "비트코인 얼마야?"라고 물었는데 과거 대화에 있던 가격을 그대로 읊으면 곤란하거든요. "저장했어요"라고 말해놓고 실제로는 아무것도 저장하지 않았으면 더 곤란하고요. 이번 글에서 다루는 건 네 가...
ESLint-KR 프로젝트를 진행중입니다.
안녕하세요. 멋쟁이사자처럼 부트캠프 프론트엔드 17기 수강생입니다! ESLint에 대해서 다들 알고계신가요? ESLint는 협업간에 코드 규칙을 정하고 코드 컨벤션을 맞추며 동시에 룰을 정해 코드를 강제하는 도구 중 하나입니다. 여기서 Lint는 소스 코드를 분석하여 문법 오류, 잠재적 버그, 스타일 불일치 등을 자동으로 찾아내 표시해주는 정적 분석 도구입...
AI 기억 시스템 개선기 — 벡터 검색 + 태그 확장으로 "저번에 뭐 들었더라?"를 찾는 법
지난 글에서 세션 태그, 토픽 묶음, 매칭 점수 세 가지로 AI가 대화를 기억하게 만들었습니다. 잘 되는 것 같았는데, 실제로 써보니 근본적인 문제가 있었습니다. 키워드 검색의 한계 이전 시스템은 키워드 매칭이 핵심이었습니다. "마이그레이션"으로 검색하면 "마이그레이션"이 들어간 대화만 찾습니다. 실제로는 "블루밍 들려줘"라는 대화가 있었는데, "노래"라는...
AI가 대화를 기억하는 법 — 세션 태그와 토픽 기반 맥락 유지 알고리즘
LLM은 대화가 끝나면 전부 잊습니다. 다음에 만나면 처음부터 다시. 니콜이라는 AI 에이전트를 만들면서 이걸 어떻게든 해결해야 했고, 세 가지 방법을 만들었습니다. 문제: "저번에 뭐 하기로 했었지?" 사용자가 어젯밤에 이런 대화를 나눴습니다. 그리고 오늘 아침: 세션이 만료되면 이...