SB_Momentum

자기소개

컴퓨터 공학을 전공했지만 코딩과는 무관한 직종으로 취업해서 졸업한지 어언 6년... 다시금 개발에 대한 욕심이 생겨서 뒤늦게(?) 다시 공부를 하고 있습니다! HTML은 조금 해봤었지만 CSS, Javascript는 처음이었는데 니꼬샘의 강의 덕분에 손쉽게 접하고 뿌듯해하면서 하나씩 기능을 완성시키는 재미를 느끼면서 만들었습니다! 니꼬샘 감사합니다 :)

서비스 소개

1. 메인화면 : 3가지의 모양

2. 세부 기능 소개

2.1 시계

- 기본적으로 시:분 이 표시되게 했습니다.
- 시계 위에 마우스를 올려놓으면 위쪽으로는 오늘의 날짜가 뜨게 했고, 오른쪽에 세팅 아이콘이 뜹니다.

- 세팅 아이콘을 클릭하게 되면 24시 시계 표시, 초 표시 2개의 기능이 나타나게 되고 체크박스를 이용해서 기능을 활성화/비활성화 시킬 수 있습니다.

2.2 이름 표시

- 기본적으로 니꼬쌤 강의에 나온 것과 같이 Hello, '설정한 이름'으로 정해줬습니다.
- 시계와 마찬가지로 이름 위에 마우스를 올려두면 세팅아이콘이 뜨도록 했습니다

- 이름변경 : 다시 Form을 띄우는게 아니라 SPAN 태그 안에서 바로 이름을 수정 할 수 있도록 했습니다.

- 명언 표시 버튼을 누르면 배열로 세팅된 명언을 랜덤으로 띄워주도록 만들었습니다.

3. 대망의 ToDo List

- ToDoList 효과(?) 주는 것에 신경을 많이 썼는데 캡쳐로는 안보이니 링크를 봐주세요!

- ToDoList 보이기
1. ToDo 작성하는 Form에서 Submit을 하면 2.5초동안 화면 우측에 List 표시
2. 화면의 우측으로 마우스를 이동시키면 List 표시
3. 화면 최우측의 아이콘을 누르면 List를 넓게 표시
- List 상시표시일때는 아이콘을 반투명, 숨겨져있을 때는 불투명하게 했음

- ToDo 입력
1. 이름 밑의 Form에서 작성
2. ToDoList의 최상단에서 작성

- ToDo 기능
1. 기본적으로 Local에 저장이 되므로 새로고침해도 항상 뜸!
2. 좌측의 Circle아이콘을 누르면 ToDo -> Completed 로 이동 / Checked Circle을 누르면 Completed -> ToDo 로 이동
3. 우측의 'X' 아이콘을 클릭하면 해당 ToDo항목 삭제
4. 'All Completed' 클릭하면 현재 ToDo에 있는 모든 항목이 Completed로 이동
5. 'Delete All Completed'를 클릭하면 현재 Completed에 있는 모든 항목이 삭제
6. ToDo, Completed List의 항목이 많아서 영역을 넘어가게 되면 스크롤해서 볼 수 있도록 설정

- 날짜 연계

1. 이름 밑의 Form에서 입력하면 오늘 날짜로 기한이 정해짐
2. List에서 입력할 때는 날짜선택란에서 직접 기한을 정할 수가 있음
3. 날짜를 다른 날로 옮기게 되면, 기한이 지난 ToDo는 보이지 않게 됨

4. 날씨 기능

- 좌측 상단에 접속 지역과 오늘의 평균 온도 표시
- 날씨에 마우스를 올려두면 향후 7일간의 최저기온과 최고기온 표시

개발과정 어려웠던 부분과 해결방법

1. 마우스를 올려두면 세팅아이콘이 뜨고, 세팅아이콘을 클릭하면 박스가 뜨게 하는 것.
- 뭔가 멋드러지게 하고 싶었는데 어떻게 아이콘을 숨기고 그걸 2단계에 걸쳐서 해야될지 감이 안왔는데 몇 시간의 검색 끝에 'Tooltip' 이라는 것에 대해 알게 되었습니다ㅜㅜ Tooltip을 구현하기 위해서 CSS에서 display:none / :hover 기능을 활용하고 클릭했을 때 뜨게 하는 것은 JS를 이용했습니다.
- 구글링 키워드 : CSS how to make Tooltip

2. 이름 수정 시 Form 입력창이 아닌 SPAN태그에서 바로 수정할 수 있게 하는 것.
- 클론하는 Momentum을 보면 이름 영역에서 바로 수정할 수 있던데 계속해서 Form태그가 켜졌다가 없어졌다가 하는게 보기싫어서 어떻게 해야 될까 진짜 고민도 하고 여러 방법도 써보고 했는데 도저히 SPAN 태그 자체를 수정하는 방법을 몰라서 포기직전까지 갔습니다..
- 어떤 기능을 쓸 수 있는지조차 몰라서 구글에 여러 키워드로 검색을 한 끝에 찾아낸 HTML 태그 옵션..'editable'...새롭다 새로워!!
- editable=true 로 한다면 SPAN이든 DIV든 화면에서 바로 수정이 가능합니다!!!
- 여기서 한 발 더 나아가서 'change name' 버튼 클릭 시, 텍스트커서를 현재 이름의 맨 마지막에 설정하고 싶은 욕심에 열심히 구글링한 끝에 JS의 RANGE 에 대해서도 배우게 되었죠. 하하
- RANGE 요녀석이 제법 활용도가 높을 듯 한데 좀 더 공부해봐야겠습니다.
- 구글링 키워드 : HTML editable, JS RANGE, Javascript how to place cursor at end of text

3. 마우스를 화면 우측으로 이동하면 ToDoList 보이기
- DIV 빈 영역을 만들어서 mousevent로 처리해주기
- 구글링 키워드 : Javascript mousevent

4.To Do 항목 저장 시 ID 세팅
- 처음에는 단순히 증가하는 num로 주었는데, 어디선가 꼬여서 중복되는 ID값이 부여되거나 건너띄거나 체크,언체크를 하면서 사라지는 현상이 발생했습니다ㅜ
- Date.now() 함수로 ToDo를 작성하는 시간으로 ID값을 줬더니 새로고침하고 Local에 저장된 List를 화면에 작성할 때 가끔 빠르게 처리되면서 동일 시간으로 될 때도 있더라구요..
- 그래서 ID = Date.now() + Math.floor(Math.random() * 100)) 으로 줘버렸습니다
- Math.random 함수는 0~1 까지 사이의 값을 랜덤으로 주므로 100을 곱해서 0~100 까지의 랜덤함수를 만들고 소수는 필요없으므로 floor 함수로 내림처리했습니다.

5. 처음부터 화면 레이아웃과 기능을 상세히 구성한 후에 만들자

- 처음에 니꼬샘의 강의를 먼저 듣고 완성된 클론 상태에서 컨테스트 제출을 위해서 여러 작업물들과 Todo 앱등을 참고하면서 기능을 생각했습니다.
- 생각한 기능들을 넣으면서 레이아웃 변경이 필요할 거 같아서 즉석에서 바꾸기도 하고, 이런 기능도 있으면 좋겠다 생각해서 생각나는대로 마구 추가했습니다.
-그러다보니 어느순간 통일성 없는 클래스, 변수 이름들이 꼬이기 시작했고,, 여러 개의 js 파일로 나눠서 작업하더라도 전역변수로 설정된 const 상수들은 다 공용으로 쓴다는 걸 몰라서 막 갑자기 되던게 안되기도 하고....하....쓸데 없는 걸로 얼마나 고생했는지...
- 앞으로는 어떤 사이트, 서비스를 만들 때 처음부터 변수명 규칙성과 기능에 한 설명을 스스로 잘 정한 후에 개발을 해야겠다는 걸 느꼈습니다.
- 잘 정리된 코드와 규칙성이 나중에 기능을 추가하더라도 꼬이지 않을 수 있다는 걸 뼈져리게 느꼈습니다ㅜ

추가 예정 기능 : 추가 후 세부기능 수정 예정(~2/15)

To Do List 기능 추가

1. 달력 기능 연계 : 날짜별로 설정한 ToDo 확인 2/7 완료
2. 기한 기능 추가 : 기한을 설정할 수 있어서, 해당 기한까지 Completed 되기 전까지는 매일 표시! 2/7 완료
3. ToDo, Completed 개수 및 수행도 추가 2/7 완료
4. 빈칸인 상태에서 Submit하면 ToDoList에 추가안되도록 하기 : 빈칸이면 안된다는걸 알려주는 효과 주기(경고창이나 흔들리는 효과) 2/7 완료
5. ToDoList에서 체크,언체크 할 때 누르는 곳이라는 효과 확실히 주기
6. ToDo항목 더블클릭하면 수정할 수 있도록 만들기

스타일 수정 : 좀더 보기 좋게 이쁘게!

명언상태 : show name 으로 세팅 아이콘 이름 변경 2/7 완료

스탑워치 추가

앞으로 계획

1. 이번 컨테스트를 하면서 CSS 레이아웃 잡는 것과 반응형으로 만드는 것에 대해 약하다는 것을 느껴서 여러 멋진 사이트들을 클론 코딩하면서 레이아웃 잡는 것에 익숙해지려고 합니다.

2. 자바스크립트로 생각보다 많은 걸 할 수 있다는 걸 느꼈는데 그 중에서 interactive 에도 관심이 생겨서 자바스크립트 공부도 계속해서!

3. 모두들 원대한 목표를 가지고 계시겠지만! 저도 멋드러진 사이트를 만들어서 직접 서비스도 해보고 싶고, 개발 관련 직종으로 이직도 고려 중입니다!

긴 글 읽어주셔서 감사합니다 :)