코알누 - ToDo List

아무래도 광인사에서는 이렇게 씁니다 하고 간단하게 한번 해보고 넘어갔던 부분이고 프로젝트는 다 React로 했다보니 이번 실습에서는 구현하는데 번거러운 점이 많았다.

일단 html에 값을 일일이 가져와서 변경하고 그걸 다시 랜더하는 부분을 생각해서 짜는게 상당히 귀찮았다.

왜 html/css 쓰다가 React 써봐야 React의 고마움을 알게 된다고 한건지 이해되는 부분이었다.

 

어짜피 다음 스터디가 React라서 이부분을 마스터 해야지 라는 생각보다는 어떻게 동작되는지만 확실하게 이해하고 넘어가는 방식으로 공부하고 구현했다.

 

나는 검정색을 좋아하기 때문에 처음에는 검정 배경에 흰글씨의 단순깔끔 디자인을 할까 하다가, 남에게 보여주는 거기 때문에 똑같은 검정 바탕이지만 별들이 있어 조금 더 이쁜 밤하늘로 배경을 선택했었다.

그런데 뭔가 좀 더 이펙트를 주고 싶어서 할일이 추가될 때 별이 할일 리스트에 떨어지며 추가되는 부분을 넣어보고 싶었고, 인터넷에서 gif를 검색하여 필요한 부분만 짤라서 활용했다.

이 때 내가 원하는 디자인을 찾는 번거로움과 완벽하게 일치하는 디자인들이 없었던 점에 불편함을 느끼고 회사라면 이런부분을 디자이너에게 요청할 수 있지 않을까 하는 생각이 들었다.

 

배경은 할일이 추가될 때 gif의 첫 프레임을 저장한 정지 사진(0)에서 별똥별이 떨어지는 gif(1)로 배경을 변경했다가 별똥별이 떨어지고 할일이 추가되면 다시 사진(0)으로 배경을 바꾸는 방식이었는데, gif 파일이다보니 플레이 타임에 맞춰서 배경을 변경해야했고, 이게 정확한 시간을 잴 수 없다보니 어렴풋한 시간으로 조절을 하여 완성도가 좀 떨어진다는게 아쉽다.

 

 

만들면서 두 가지 문제가 있었는데

 

첫번째 문제였던 점은

추가 할때 배경을 변경하다보니 변경된 gif(1)가 끝나기 전에 또 추가를 하게되면 gif(1)의 플레이가 꼬여서 나중에는 별똥별이 중간이나 끝부분에서 시작해 이상한 부분에서 끝나버려 원하는 모션이 안나오게 되었다.

이를 해결하기 위해 현재 배경이 gif(1)이면 배경 변경없이 그대로 진행되도록 코드를 변경하여 짧은 시간에 여러번 할일을 입력해도 별똥별은 한번 떨어지는 모습으로 보이도록 변경했다.

 

두번째 문제였던 점은

페이지를 처음 로드했을 때는 정지 사진(0)만 로드했다가 배경이 바뀔 때 gif(1)을 로드해서 사용하다 보니 처음 할일이 추가될 때는 배경이 바뀌는게 아니라 로드로 인해 화면이 하애지는 현상이 발생했고, 이를 해결하기 위해 페이지를 처음 로드할 때 gif(1)을 한번 불러와서 재생하고 정지 사진(0)으로 변경하는 식으로 바꿔서 처음부터 변경될 배경도 불러와 할일을 입력했을 때 로드로 인해 화면이 하얗게 변하는걸 방지했다.

 

솔직히 간단한 숙제 프로젝트였기에 이렇게 공들이며 제작할 필요가 있었나 싶긴 했었지만 막상 만들고 나니 뿌듯하기도 했고, 명예의 전당에 이름도 올려줘서 더 뿌듯했었다.

 

 

 

https://github.com/SpringDream0406/noonaToDo

GitHub - SpringDream0406/noonaToDo

 

- Enter 작동

let taskInput = document.getElementById("task-input");

taskInput.addEventListener("keypress", (e) => {
    if (e.key == "Enter") {
        addTask();
    }
})