개발자 99% 커뮤니티에서 수다 떨어요!
1. 결과물 URL + 캡처 이미지 2~3장
https://kwak-bs.github.io/momentum/
(1) 처음 들어갔을 때 화면입니다. 가운데에 현재 재생되고 있는 음악의 정보와 애니메이션이 구현되고 있습니다. 하단에 있는 네모 박스를 탭하여 음악을 들을 수 있습니다.
(2) 우측 하단의 있는 Todo 버튼을 클릭하여 TodoList를 보이게한 화면입니다.
(3) 다크 모드를 적용하여 나타낸 화면입니다. Done탭은 완료한 TodoList를 시간별로 나열하였습니다.
2. 자기소개
안녕하세요. 취준생입니다. 프론트 엔드는 작년 부터 흥미를 갖게 되었습니다.
자바스크립트부터 차근차근 다시 해보자는 마음으로 노마드 코더 강의를 들으면서 이번 챌린지에 참가하게 되었습니다.
사실 구글 익스텐션인 Momentum을 실제로 애용하고 있어서 거기에 맞는 Todo-List를 구현하고 싶었지만 한계가 있었습니다. 그래도 최대한 비슷하게 하고자 기존에 계획했던 Done Tab까지는 구현할 수 있었습니다.
Todo-List만 구현하면 재미없을것 같아 자바스크립트로 음악을 재생하는 방법을 찾아보았고 구글링을 통하여 배우고 구현해보았습니다. 물론 현재는 재생만 가능하고 일시정지, 정지는 되지 않습니다. 생각보다 빡셌습니다.
마찬가지로 재미를 더하고자, 다크 모드 기능까지 구글링으로 배우고 구현해봤는데, 적용하면 멋있을 줄 알았는데 디자인에 감각이 없어서 그런가 다 만들고 보니까 다크모드는 어울리지 않는 것 같네요. 그래도 해보고 싶은 기능은 다 구현해볼 수 있어서 좋았습니다. 이런 기회를 주신 노마드 코더에게 감사를 전합니다.
3. 서비스 소개
<center>
(1) 시간, 날짜.
(2) 음악 정보, 애니메이션.
(1) 이름 입력 기능. (LocalStorage 이용)
(2) MainTodo 기능. (LocalStorage 이용)
<Left>
(1) 현재 위치 정보 및 날씨 정보. (상단)
(2) 밑에 사각형들을 클릭하면 음악이 재생된다는 것을 이탤릭체로 간단하게 영어로 작성해보았습니다. (하단)
<Right>
(1) 다크 모드기능 (상단, prefers-color-scheme CSS 미디어 이용)
(2) Todo-List 기능(하단)
<Bottom>
(1) Tab할 시 음악 재생 기능. (보이는 것과 같이 음악은 5곡만 준비되었습니다.)
4. 개발 과정 (어려웠던 것중 해결방법)
모든 기능들이 쉽지 않았습니다. 그나마 음악을 재생하는 기능이 제일 빨리 끝냈던 것 같습니다.
음악을 재생하는 기능은 구글링을 통하여 클론 코딩으로 구현해보았습니다. 생각보다 간단해서 기분 좋았습니다.
다크 모드에서 1차 고난이 시작되었습니다. 검색을 통하여 prefers-color-schme CSS 미디어 쿼리를 사용해야 한다는 것은 알았으나, 구글에 널려있는 코드들을 제 프로젝트에 응용하는 것이 어려웠습니다. 똑같은 코드만 1시간 동안 쳐다본 것 같습니다. 그래도 감을 잡고 차근차근 구현하니 만족스러운(?) 결과를 볼 수 있었습니다.
최종 고난이 존재했습니다. Todo-List의 Done 탭이었습니다. 제가 구현한 Todo-List의 To do 탭은 말 그대로 할 일만 작성합니다. 체크 박스에 체크를 하면 Done tab에 있는 리스트로 시간과 함께 넘어가게 됩니다. 체크를 한 Todo-List의 Todo 항목들을 Done tab으로 넘기는 것은 어렵지 않았습니다.
하지만 시간 별로 나열하는 것이 상당히 생각보다 아주 쉽지 않았습니다. 제가 검색을 못하는 것도 있겠지만, 이건 구글링도 소용이 없었습니다. 순전히 저의 힘으로 해결해야 했습니다. 남은 시간은 3시간 밖에 남지 않았고 어떤식으로 구현하는 것이 좋을 지 고민하다가 알고리즘 문제를 풀때 자주 애용하던 flag = true / false 방식을 사용하였습니다.
체크된 Todo 항목들은 Done 리스트로 내용, 시간, flag 정보를 넘깁니다. flag의 디폴트 값은 true이고 사전에 먼저 넘어갔던 항목들의 시간이 존재하면 flag = false로 바뀝니다. 즉, 최초로 넘어간 시간이 먼저 출력되고 그 이후에 들어오는 같은 시간(월,일,시간)은 내용만 받아 li로 출력됩니다. 시간이 바뀌면 다시 flag = true로 변경하여 해당 시간을 다시 출력합니다.
5. 앞으로 계획
이번 기회를 발판삼아 좋은 프론트엔드 개발자가 되고 싶습니다. 확실히 이번 프로젝트는 도움이 많이 됐습니다. 감사합니다.