JavaScript

칸반 보드 같은 걸 만들 때 드래그 앤 드롭은 필수다. 라이브러리를 쓰면 편하긴 한데, 간단한 기능이면 직접 구현하는 게 번들 사이즈도 줄고 커스터마이징도 자유롭다. 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 드래그 중인 요소에 시각적 피드백을 주는 게 중요하다: ...

웹앱에 로그인 기능을 넣을 때 가장 먼저 고려하는 게 소셜 로그인이다. 직접 회원가입 시스템을 만들면 비밀번호 해싱, 이메일 인증, 비밀번호 찾기 등 신경 쓸 게 한두 가지가 아니다. Google OAuth를 쓰면 이런 고민을 한 번에 해결할 수 있다. 실제로 사이드 프로젝트에 Google 로그인을 붙여본 경험을 바탕으로 정리한다. 생각보다 삽질 포인트가 몇 개 있어서, 순서대로 따라하면 빠지지 않게 적어봤다. Google Cloud Console 설정 프로젝트 생성 Google Cloud Console에 접속 상단의 프로젝트 선택 → 새 프로젝트 만들기 프로젝트 이름을 적당히 짓고 만들기 OAuth 동의 화면 설정 이게 빠뜨리기 쉬운 부분인데, OAuth 동의 화면을 먼저 설정해야 클라이언트 ID를 만들 수 있다. ...

웹 브라우저에서 돌아가는 2D 게임을 만들고 싶어서 Phaser 3를 선택했다. Unity나 Godot 같은 본격적인 엔진도 있지만, 간단한 2D 게임이라면 Phaser로 충분하다. 특히 웹 배포가 기본이라 별도의 빌드 과정 없이 브라우저에서 바로 테스트할 수 있는 게 큰 장점이다. 이번에 만들 건 탑다운 뷰의 간단한 RPG 스타일 게임이다. 캐릭터가 맵을 돌아다니고, 장애물에 충돌하고, 아이템을 줍는 정도의 기본 기능을 구현해본다. 프로젝트 세팅 mkdir topdown-game && cd topdown-game npm init -y npm install phaser Vite를 번들러로 쓰면 개발이 편하다: ...