사이드 프로젝트를 빠르게 배포하고 싶을 때 Cloudflare Pages가 좋다. 무료 플랜으로도 충분하고, 글로벌 CDN이 기본이라 속도도 빠르다. Vercel이나 Netlify도 좋지만, 이미 Cloudflare를 쓰고 있다면 한 곳에서 관리하는 게 편하다. Git 연동 없이 CLI로 바로 배포하는 방법을 정리한다. 프로젝트 생성 Vite로 React 프로젝트를 만든다: npm create vite@latest my-app -- --template react cd my-app npm install TypeScript를 쓰고 싶으면 --template react-ts로 바꾸면 된다. 개발 서버를 띄워서 확인: npm run dev http://localhost:5173에서 기본 화면이 뜨면 정상이다. ...
칸반 보드 같은 걸 만들 때 드래그 앤 드롭은 필수다. 라이브러리를 쓰면 편하긴 한데, 간단한 기능이면 직접 구현하는 게 번들 사이즈도 줄고 커스터마이징도 자유롭다. HTML5 Drag and Drop API가 있긴 하지만 모바일에서 제대로 작동하지 않아서, 마우스/터치 이벤트를 직접 다루는 방식으로 구현했다. HTML 구조 <div class="container"> <div class="column" id="todo"> <h2>할 일</h2> <div class="card" draggable="true">카드 1</div> <div class="card" draggable="true">카드 2</div> </div> <div class="column" id="doing"> <h2>진행 중</h2> <div class="card" draggable="true">카드 3</div> </div> <div class="column" id="done"> <h2>완료</h2> </div> </div> CSS 드래그 중인 요소에 시각적 피드백을 주는 게 중요하다: ...
포트폴리오 사이트나 기술 블로그를 만들고 싶은데 호스팅 비용이 부담스럽다면 GitHub Pages가 답이다. 무료에다 HTTPS도 지원하고, Git push만 하면 자동으로 배포된다. 나도 처음 기술 블로그를 GitHub Pages로 시작했는데, 트래픽이 꽤 나올 때까지 문제없이 잘 버텨줬다. 저장소 만들기 GitHub에서 새 저장소를 만든다. 두 가지 방식이 있다: 사용자 사이트: 저장소 이름을 username.github.io로 만들면 https://username.github.io로 접속 프로젝트 사이트: 아무 이름으로 만들면 https://username.github.io/repo-name으로 접속 개인 블로그라면 사용자 사이트가 깔끔하다. mkdir my-site && cd my-site git init git remote add origin https://github.com/username/username.github.io.git 기본 페이지 만들기 간단한 index.html부터 시작하자: ...
웹앱에 로그인 기능을 넣을 때 가장 먼저 고려하는 게 소셜 로그인이다. 직접 회원가입 시스템을 만들면 비밀번호 해싱, 이메일 인증, 비밀번호 찾기 등 신경 쓸 게 한두 가지가 아니다. Google OAuth를 쓰면 이런 고민을 한 번에 해결할 수 있다. 실제로 사이드 프로젝트에 Google 로그인을 붙여본 경험을 바탕으로 정리한다. 생각보다 삽질 포인트가 몇 개 있어서, 순서대로 따라하면 빠지지 않게 적어봤다. Google Cloud Console 설정 프로젝트 생성 Google Cloud Console에 접속 상단의 프로젝트 선택 → 새 프로젝트 만들기 프로젝트 이름을 적당히 짓고 만들기 OAuth 동의 화면 설정 이게 빠뜨리기 쉬운 부분인데, OAuth 동의 화면을 먼저 설정해야 클라이언트 ID를 만들 수 있다. ...
서버리스 환경에서 풀스택 앱을 만들어보고 싶었다. AWS Lambda는 설정이 번거롭고, Vercel은 DB 연동이 따로 필요하고… 그러다가 Cloudflare Workers + D1 조합을 발견했다. Workers에서 바로 SQL 쿼리를 날릴 수 있고, 배포도 wrangler deploy 한 줄이면 끝이다. 여기에 OpenAI API를 연동해서 할 일을 자동으로 분류해주는 기능까지 넣어봤다. 프로젝트 초기화 먼저 Wrangler CLI가 필요하다: npm install -g wrangler wrangler login 프로젝트를 생성한다: npm create cloudflare@latest ai-todo -- --type=hello-world cd ai-todo D1 데이터베이스 생성 Cloudflare D1은 SQLite 기반의 서버리스 데이터베이스다. 콘솔에서 만들 수도 있지만 CLI가 더 편하다: ...