오늘은 10월 19일 5일차이다.
목표
- 애니메이션 구현
- word 상태의 textColor, bgColor 대신 state 속성 추가
진행
애니메이션은 완성하지 못했다. CSS에 대한 지식 부족때문에 그런 것 같다. 그래서 내일 할 예정이고, word 상태가 원래는 text, textColor, bgColor로 이루어진 객체의 배열이었는데, 생각해보니 이는 너무 비효율적인 것 같아서, textColor와 bgColor를 없애고 state 속성을 추가했다. 여기에는 문자열이 들어가는데,
blank(아무것도 입력하지 않은 상태)
filled(한 문자를 입력한 상태)
correct(자리와 문자 모두 맞은 상태)
contained(문자만 맞은 상태)
non-containd(정답에 해당 문자가 포함되지 않는 상태)
가 들어갈 수 있다. 이 state를 렌더링할 때 받아와서 글자색과 배경색, 테두리 색 등을 결정할 수 있도록 하였다. 이렇게 하면 나중에 애니메이션 만들 때도 편리하게 케이스들을 구분할 수 있을 것 같다.
코드
코드는 특별히 바뀐 것은 없다.
보충해야할 것
- 애니메이션 구현
- CSS 공부
내일 할 것
- 애니메이션 구현
- 코드 정리
마무리
애니메이션 구현에 많은 시간을 쏟았는데 완성하지 못해서 아쉽다. 내 지식이 부족한 것을 누구를 탓하랴. 내일은 꼭 완성하고 싶다.
