Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
window 95 테마의 todo list 만들기!!
#to_do_list
3년 전
1,175
3

1. 결과물 URL

undefined

링크바로가기 

2. 자기소개

안녕하세요 :)

비전공자이지만 그만큼 더 노력해서 멋진 프론트앤드 개발자가 되고싶은 수강생입니다. ㅎㅎ

js를 제대로 배우게 된지는 얼마 안됐지만, 하루하루 너무 재미있어서 힘들 때도 있지만 코딩이 즐겁네요!!

노마드 코더에서 너무나 대단하신 분들이 많아서 배울점도 너무 많고, 개발자 분들과 정보도 공유하는 여기는 천국입니다.😊😊😊

3. 서비스 소개

기존의 투두 리스트를 응용하여 개발자들을 위한 투두리스트를 만들어 보면 어떨까 해서 이렇게 프로젝트를 진행하게 되었어요! 옵션을 선택해서 현재 내가 진행중인 일의 카테고리를 정하고, 만약 중요한 todo 라면 checkbox를 선택하여 todo 리스트 목록에서 그 중요도를 나타낼 수 있게 아이콘과 밑줄로 강조되는 ui를 만들었습니다.

또한 우측 상단에 현재 진행중인 일과, 완료한 일을 숫자로 표시해서 진행상황까지 표시될 수 있도록 만들어 보았습니다!

레트로틱한 걸 좋아해서 디자인 테마는 윈도우 95로 정해서 작업했어요!!! css가 간단할 줄 알았는데, 윈도우 95와 비슷하게 맞추려다 보니 은근히 생각보다 오래걸리더라구요...;;; 그래도 후회는 없습니다👍

4. 개발과정

todoObj를 생성할 때 넘겨주어야 하는 값들(category와 중요도 true or false)은 object로 잘 넘겨주었는데, localStorage에 저장하는 과정에서 새로고침을 하면 모든 데이터가 동일하게 저장이 되어서 문제가 뭔지 찾고있었습니다.

알고보니, 초기 값을 미리 셋팅해 놓아서 계속 동일한 값이 저장이 되는 것이었어요!! (이렇게 당연한 문제를 찾는데 한참 걸렸어요......ㅎㅎㅎ ㅜㅜㅜㅜ)

초기값을 정적으로 정해두지 않고 localStorage에 받아온 데이터를 넣어주니 바로 해결이 되었습니다 ㅋㅋㅋㅋㅋ

5. 앞으로의 계획

이번 기회로 todo list에 얼마나 많은 기능들이 추가 될 수 있는지 더 알게 되었고, 그 다양한 기능들을 앞으로 더 구현하기 위해 더 노력해야겠다고 생각했습니다 😊

앞으로 니꼬쌤과 함께 더 열심히 할 계획입니다. 수강생 분들 다들 화이팅 입니다!!!!!

3 comments