1. 결과물 URL 

https://haerang94.github.io/todolist_event/

2. 자기소개

안녕하세요 웹 프론트엔드 개발자를 준비하고 취업 준비생입니다. 

기술면접을 여러 번 봤지만 통과는 되지 않아 계속 공부하고 있어요. 자바스크립트와 리액트를 주로 공부했고 처음에 노마드를 통해서 많이 공부했었습니다. 

서버 쪽도 했었지만 프론트엔드를 더 좋아하여 웹 프론트엔드 개발자로 진로를 확실히 하여 공부하고 있습니다. 

3. 서비스 소개 

• 달력으로 모든 날짜에 개별적인 투두리스트를 만들 수 있습니다.
• 날짜별로 todo와 Done이 구분됩니다.
• LocalStorage에 날짜별로 저장이 되어 날짜별 투두리스트, 진행도를 확인할 수 있습니다.
• 진행 상태에 따라서 식물이 자라며 최종 100%단계에서 랜덤한 꽃을 피웁니다.
• 검색으로 투두리스트를 필터링할 수 있고 검색 키워드를 초기화할 수 있습니다. (keyup으로 검색 도중에 계속 필터링이 됩니다)
• 전체 삭제 기능이 있습니다.
• 명언 문구는 약 4초마다 변경됩니다. 
• 달력에 오늘 날짜에는 핑크색으로 표시되었으며 투두리스트를 보기 위해 클릭한 날짜는 보라색으로 표시됩니다. 

4. 개발과정 (어려웠던 점과 해결 방법)

   1) 달력 구현 및 날짜 별로 다른 투두리스트 구현 및 저장하기 

- 달력을 구현하는 것까지는 해본 적이 있어 쉬웠지만 해당 날짜를 클릭하면 그 날짜에 해당하는 새로운 투두리스트를 만들어 보여주고 또 저장할 수 있도록 구현해야 했습니다. 

- 이 문제를 해결하기 위해 저는 객체 const currentDate={}를 만들고 그 안에 배열 형태인 

todos=[]와 dones=[] 를 키 값으로 넣어줬어요 

const currentDate={"todos":[],"dones":[]};

또 localStorage에 저장할 때의 키 값으로는 달력에서 클릭된 날짜를 가르키는 todolistDate를 사용했습니다. 

즉, 2021-01-01의 투두리스트는 localStorage에 "2021-01-01": [todos:[...],dones:[...]]

으로 저장되어 사용할 수 있습니다.

2. todo와 done 왔다 갔다 옮기고 저장하기 

todo에서 완료를 누르면 done으로 가고 done에서 미완료를 옮기면 todo로 이동하고

새로운 상태를 저장해야했습니다.

기존의 단순 추가, 삭제 함수를 재사용하기 위해서 default value를 사용했습니다.

아래 함수에서 파라미터가 없을 때는 새로운 투두리스트를 추가하는 것이고 있을 때는 done에서 todo로 이동하는 것입니다. 

// 파라미터 todo값이 없을 때는 todolist추가할 때

// 있을 때는 dones에서 todos로 이동할 때

const addTodo = (todo = inputContent.value) => {

  if (todo === undefined && inputContent.value === "") {

    alert("write a task");

    return;

  }

  makeTodolist(todo); // 새로운 투두리스트 만들고

  storeTodo(todo); //새로운 투두리스트 상태 다시 저장해준다.

  inputContent.value = "";

};

3. 명언 문구 애니메이션 구현 

페이지 왼쪽위의 명언은 약 4초에 한 번씩 랜덤으로 바뀝니다. 

그냥 나타나는 것이 아닌 애니메이션으로 서서히 나타나고 사라지게 하고 싶었습니다.

proverb.innerText로 dom을 조작할 때 애니메이션이 사라집니다.

그래서 애니메이션은 css로 만들고 클래스 속성명을 넣고 뺄 때 setInterval과 setTimeOut을 사용했습니다.

document.addEventListener("DOMContentLoaded", () => {

  proverb.innerText = "행복은 스스로 찾는 것이다.";

//나타나게 하기 (애니메이션 시간은 1s)

  setInterval(() => {

    proverb.classList.add("appear");

    setTimeout(() => {

      proverb.classList.remove("disappear");

    }, 1001);

// 새로 보여줄 문구

    let num = Math.floor(Math.random() * proverbList.length);

    proverb.classList.add("disappear");

    setTimeout(() => {

      proverb.classList.remove("appear");

// 중요 setTimeout 안에 넣어서 애니메이션 동작이 끝나면 새로운 문구가 변경되도록 한다.

      proverb.innerText = proverbList[num];

    }, 1001);

  }, 4000);

});

중간에 이것 저것 바꿔봤었는데요, 애니메이션이 끝나기 전에 새로운 문구로 확 바뀌는 문제점이 있었는데 setTimeOut에 애니메이션과 같이 넣어서 애니메이션 동작이 끝나면 문구가 바뀌도록 하여 해결했습니다.

5. 앞으로의 계획 

- 이렇게 식물을 키우는 투두리스트를 만드는 것은 제가 앞으로 친구와 개발할 교육 프로그램의 일부분을 넣은 것입니다. 

저희의 아이디어는 정해진 일정을 완료하면 랜덤 우주 씨앗을 얻어 우주 식물을 키우고 기록하는 프로그램을 만들려고 합니다.

지금은 단순히 오늘의 일정이 완료되면 꽃을 피웠지만 앞으로는 랜덤한 씨앗을 얻고 또 

그 씨앗을 심어 새로운 식물을 얻거나 포인트 개념으로 사용하면서 일정 관리에 재미 요소를 

더할 예정입니다. 

또 지금까지 키워온 식물을 전체로 볼 수 있고 지금까지의 달성률을 한 눈에 볼 수 있는 페이지도 따로 만들 것입니다. 

--- 

명절 동안 하려고 했는데 쉬느라 이틀동안 급하게 하느라 하고 싶었던 기능을 다 넣지는 못해서 아쉬웠고 최소한 디자인 부분과 제가 구현한 기능이라도 안정적으로 개발하려고 노력했습니다. 모두 수고하셨습니다.