UI Code Lab

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

🧭 왜 직접 날짜 선택기를 만들어야 할까? 대부분의 웹 프로젝트에서는 날짜 입력이 필요한 경우가 많습니다. 물론 input [type="date"] 를 사용할 수도 있지만, 브라우저마다 디자인이 다르고 커스터마이징이 어렵다는 단점이 있죠. 그래서 이번 글에서는 순수 자바스크립트로 날짜 선택기 UI를 직접 구현해 보겠습니다. 🛠️ 구현 목표달력 UI를 동적으로 생성현재 월 기준으로 날짜 표시이전/다음 달 이동 기능날짜 클릭 시 선택된 날짜 출력 🧱 HTML 구조 ◀ ▶ 일월화수목금토 선택한 날짜: 없음 🎨 CSS 스타일 (간단 버전) .datepicker { width: 300px; border: 1..