UI Code Lab

웹 프로젝트를 진행하다 보면 탭 전환 기능을 구현할 일이 자주 생깁니다. 처음에는 단순히 fetch로 HTML을 불러와서 innerHTML에 넣고, 탭 클릭 시 보여주기/숨기기만 하면 충분해 보이죠. 하지만 프로젝트가 커질수록 코드가 중복되고, 전역 변수 충돌이나 페이지별 관리의 불편함 같은 문제가 하나둘씩 드러납니다. 이런 상황에서 필요한 건 공통 로직을 모듈화하고, 각 페이지에서는 최소한의 설정만 남기는 구조화입니다. 1. 문제 상황탭 전환 로직을 페이지마다 중복 작성 → 유지보수 어려움전역 변수(cache, loaded)가 다른 스크립트와 충돌 가능성페이지마다 다른 파일맵을 관리해야 하는데, 공통 로직과 섞여 있어서 불편 2. 해결 전략공통 로직은 하나의 모듈로 분리페이지별로는 fileMap만..

요즘 웹사이트를 보면 다크 모드 기능이 기본처럼 탑재되어 있죠. 눈의 피로를 줄이고, 사용자의 환경에 맞춰 테마를 바꿀 수 있는 다크 모드 토글 기능은 UX를 높이는 데 매우 효과적입니다. 이번 글에서는 라이브러리 없이 바닐라 JavaScript와 CSS 변수만으로 다크 모드 토글 기능을 구현하는 방법을 소개합니다. ✅ 구현 목표버튼 클릭 시 라이트 ↔ 다크 모드 전환CSS 변수(--color, --bg)를 활용한 테마 스타일링JavaScript로 data-theme 속성 제어로컬 스토리지에 사용자 테마 저장 🧱 HTML 구조 input[type="checkbox"]로 토글 기능 구현label과 span.slider로 스타일링 🎨 CSS 스타일 :root { --bg-color: #ffff..