📅 기간
2024.12.18 - 2024.12.24
👥 구성
개인 프로젝트
👤 역할
기획 / 개발 전담
🔧 주요 기술
HTML, CSS, JavaScript
프로젝트 소개
Chrome 확장 앱 Momentum을 클론 코딩한 브라우저 생산성 대시보드입니다.
Vanilla JavaScript만으로 로그인, 시계, 날씨, 명언, Todo 등 6가지 기능을 구현하였으며,
LocalStorage를 활용하여 새로고침 이후에도 사용자 데이터가 유지됩니다.
Geolocation API와 날씨 API를 연동하여 실시간 현재 위치의 날씨 정보를 표시합니다.
구현 기능
🕐 핵심 기능
- 실시간 시계 - JavaScript Date 객체를 활용한 현재 시간 표시
- 날씨 표시 - Geolocation API로 현재 위치 좌표를 얻어 날씨 API 연동
- 명언 - 10개의 명언 중 랜덤으로 하나를 화면에 표시
- 동적 배경 - 6개의 배경 이미지 중 랜덤 선택 적용
- 로그인 - 이름 입력 시 LocalStorage에 저장, 재방문 시 이름 유지
- Todo 리스트 - 할 일 추가 / 삭제, LocalStorage로 새로고침 후에도 유지
기술적 도전
Geolocation API + 날씨 API 연동
브라우저의 Geolocation API로 사용자의 현재 위치(위도·경도)를 받아와 외부 날씨 API에 전달하고, 응답받은 기온 데이터를 화면에 표시하는 비동기 흐름을 구현하였습니다.
LocalStorage를 이용한 데이터 영속성
별도의 백엔드 서버 없이 LocalStorage만으로 사용자 이름과 Todo 목록을 저장하여, 페이지를 새로고침하거나 닫았다 열어도 데이터가 유지되도록 구현하였습니다.
한계 & 개선점
현재
LocalStorage에만 데이터를 저장해 다른 기기에서는 동기화가 안 됨
→
개선
백엔드 서버와 연동하여 로그인 기반 클라우드 동기화 구현
기술 스택
HTML5
CSS3
JavaScript (ES6+)
Geolocation API
Weather API
LocalStorage