[JavaScript] Clone Coding - Momentum ① 분석

JavaScript Clone Coding

첫번째 클론 코딩 프로젝트

본 프로젝트는 Nomad Coders(https://academy.nomadcoders.co/) 의 Nicolás Serrano Arévalo 님의 강의를 듣고 수행한 프로젝트입니다. 개발자로서 배울게 많은 프로그래머라고 생각하는 분 입니다. 무료 강의도 있고, 프로젝트 형태로 하나의 서비스를 클론 코딩하는 강의로 있으니 한 번 둘러보시길.

클론 코딩 대상 : Momentum

Momentum 이라는 크롬 확장 프로그램(웹 애플리케이션)은 기존의 New tab 페이지 대신 별도의 개인적인 대쉬보드를 사용자에게 제공한다. 

Momentum(이하 ‘모멘텀’)의 기능 분석 

1.UserName 입력 받기.

모멘텀 앱에서 가장 처음 볼 수 있는 화면이 바로 이 화면입니다. 로고와 사용자의 이름을 입력받을 수 있는 input text field를 보여주고 있습니다. 각 Elements들은 Center로 정렬되어 있습니다. 또한 새로운 접속 또는 새로고침시 서로 다른 Background 이미지를 출력합니다.

• logo 넣기
• input text field / Title 넣기
• Elements 가운데 정렬
• Background Image 넣기

2.ToDo 리스트 입력 / 사용자 지역에 따른 온도, 날씨 / Mantra(명언) 출력

 첫번째 화면에서 입력한 사용자 이름이 Greetings 메세지에 출력되며, 현재 시간(HH:MM)과 오늘 해야할 일(ToDo List)을 작성할 수 있는 입력 필드가 있습니다. 또 우측 상단에서 현재 사용자 위치의 날씨/온도(‘C)/지역명을 표시합니다.

이름 옆에 마우스를 올리면(hover) 버튼이 보이며, 버튼 클릭 시 Greeting Message 대신 명언이 출력됩니다. 

• 실시간 시간 표시
• Username 을 포함한 Greeting Message 출력
• ToDo List 입력받아 리스트를 생성한다.
• 사용자 위치에 access 권한을 얻어, 날씨와 온도 지역명을 출력한다.

---

큰 틀로 세부 기능을 나누어보면,

1. 시간 출력
2. 사용자 정보 입력 부분
3. ToDo List

정도가 되겠다.

이 후 시간이 되면 주요기능 외에 기능들도 구현해보도록 하겠다.