todo리스트 보러가기 😛 

1. 자기 소개

안녕하세요 여자 취준생입니다. 처음으로 노마드 코더를 통해 바닐라 자바스크립트를 배우게 되어서 너무 좋았습니다. 제가 이렇게까지 집중했던 것도 오랜만이어서 기분이 좋았습니다. 제가 스스로 쓰고 싶은 toDo리스트를 만들고자 했습니다. 구경오세요!

2. 서비스 소개

강의에서 다뤘던 서비스 말고 새로 추가한 서비스는 다음과 같습니다.

• 알람 기능
• 오디오 플레이어
• 내용 수정 및 내용 전체 삭제
• 배경 바꾸기

알람은 정각을 포함해 총 3회 반복하여 울립니다. 시간 간격은 5분, 10분, 15분입니다.
시간 간격은 우측 하단 "환경설정 아이콘> 시간 설정 아이콘"에서 변경 가능합니다.
시간이 되었을 때, 좌측 하단에서 메시지 창이 나오고 띠링띠링 알람벨이 울립니다.
알람벨은 "환경설정 아이콘> 알람벨 아이콘"에서 on/ off 할 수 있습니다.
@@ 시간 설정하는 창을 닫고 싶으시면 시간 설정 창 또는 배경 화면을 클릭하세요.
@@ 알람 메시지 창을 닫고 싶으시면 알람 메시지 창을 클릭하세요.

집중할 때 듣기 좋은 음악인 차분한 클래식과 잔잔한 재즈를 BGM으로 넣었습니다. 제 취향이라서요. 곡은 저작권이 문제 되지 않는 "유투브 스튜디오"에서 다운받았습니다.
플레이어의 "A아이콘"은 전곡 반복재생이며, 누르셔서 "1 아이콘"으로 바꾸면 한곡만 반복재생 가능합니다.

리스트 텍스트 꼬리부분에 마우스를 갖다 대면 연필 아이콘이 나옵니다. 누르시면 내용은 입력창으로 올라가고 ul 태그에서는 사라집니다. 입력창에서 수정하시면 됩니다.
리스트 입력창 왼쪽에 내용 전체를 지우는 "텍스트 삭제 아이콘"이 있습니다. 많은 내용을 한꺼번에 삭제하고 싶을 때 사용하세요.

한 배경화면만 바라보기 지겨워서 배경을 바꿀 수 있는 기능을 마련했습니다. "환경설정 아이콘> 다른 배경 아이콘"을 통해 원하는 배경으로 바꾸세요. 배경보고 힐링하고 싶어서 제 취향대로 넣었습니다.

3. 개발 과정

리스트 체크 기능을 넣으면서 기존의 코드를 다시 수정을 했습니다. 각 리스트의 object를 수정했습니다. id키는 new Date()를 이용해 고유한 아이디로 만들었습니다. prog라는 키를 만들어 진행 중인지 완료했는지에 따라 리스트를 체크 하도록 했습니다.

알람 기능은 시간 입력창을 만들고, 내용을 입력했을 때 시간을 value를 받게 했습니다. 받은 시간은 리스트 object time키 값으로 저장됩니다. 각 리스트에 시간 value를 나타냄과 동시에 타이머가 돌아가도록 만들었습니다. 이때 알람기능은 리스트의 내제되어 있는 버튼(삭제, 확인, 수정)을 누르면 멈춥니다. 이때 확인 수정을 다시 눌러서 체크를 해제하면 타이머는 다시 돌아갑니다. 시간 간격은 디폴트 값으로 10분을 주었고 LS에 저장됩니다. 저장된 시간마다 알람 박스가 울리도록 했습니다.

하 지금도 원한이 사무치는게 시간 입력창 옆에 시계 아이콘은 디폴트로 주어진 것인데, 저거 CSS color, 아이콘 넣기 둘 다 안돼요. 할 수 있는 유일한 방법이 background: url();에 svg 파일을 넣는 방법인데 GIt한테 거부당했어요. 안돼요. 업데이트 됐으면 좋겠어요. 다른 CSS 방법으로 60% 구현했는데, 마음에 안들어요.

음악 기능은 Audio 태그와 Audio API를 사용했습니다. 음악은 숫자로 저장했고, 음악리스트 객체를 만들어 해당 숫자의 타이틀을 저장해 화면에 출력하도록 만들었습니다.

간단하게 이 세 가지에 대한 개발 과정을 설명했습니다. 알람 기능..ㅎㅎ 가장 머리 많이 써야 했던 파트였는데요, 그래도 세분화해서 조금 만들어보고 테스트 해보고를 반복하다 보니 괜찮았습니다. 리스트 체크 기능 넣을 때는 다 만들어 본 다음에 테스트를 하다보니 에러 찾는데에 시간 많이 걸렸어서 혼났거든요. 여러분.. 작업을 세분화해서 돌다리 두드려보고 건너듯이 개발합시다..이게 가장 효율적인 작업 방식이었어요.

그리고 또 아쉬운건 알람 메시지 박스 대신 Notification APl를 사용하려 했습니다. 이걸 사용하면 창을 최소화하거나 다른 웹페이지를 사용하더라도 window10에서 메시지를 띄워주기 때문입니다. 하지만 계속 실패했습니다. 이거에 꽂혀서 몇 일을 계속 알아봤는데, window10와 크롬, 엣지 등의 문제인 것 같더라고요. 저와 같은 문제를 겪는 개발자가 있길래 window10 알람이 제대로 기능하지 못하는 사용자들을 위해 알람 소리라도 추가했습니다.

세상에서 절 가장 힘들게 하는게 Git, Github에요. 작업은 10시에 이미 끝냈는데, 아까 Git한테 svg 파일 거부당하고, 파일 잘못 올리고, 잘못 올린 파일 Git으로 지우는 법 급하게 알아내서 지금 새벽 두시, 끝났네요. 지금 같은 파일 들어가 있는repository가 3개 입니다.

4. 앞으로의 계획

Notion이라는 노트 앱을 사용하는데요, Notion 앱에 있는 드래그 앤 드롭 기능을 뒤늦게 구현하려다가 포기했습니다. 드래그 앤 드롭 기능은 LS와 연동하여 구현하기가 어렵겠더라고요. 하던 알람 기능 다 못끝내고 하면 죽도 밥도 안될 것 같아 나중에 하기로 했습니다. 내일 다시 시작할 겁니다ㅎㅎ 그리고 Notification API도요. 되는 컴퓨터로 한번 구현해보고 싶습니다.

그리고 코코아톡 강의 들을겁니다. 기초는 제대로 다지고 싶고 GIt이랑 GIthub 좀 제대로 배우려고요. 다들 안녕히 주무세요!