오늘 새로 배운 것
form 태그와 button 태그
form 태그 밖에 submit을 위한 button 태그를 만들어주려면 form에 id를 추가하고 button에 form:'form의 id값'을 추가하면 된다.
padStart(n,'채울 내용')
문자열이 n의 길이만큼 만족하도록 부족한 만큼 문자열 맨 앞부터 채우는 함수
하루를 돌아보며...
오늘은 새로 todolist를 추가할 때와 기존 todolist를 수정할 때 공백 입력 시 alert했던 부분을 모달창으로 대체하는 것과 기존 일반 버튼 대신 커스텀 버튼 컴포넌트를 적용하는 부분을 진행했다.
원래는 수정 기능 쪽에서 공백 입력하고 '수정 취소'버튼을 클릭하면 이전 state 그대로 다시 출력하고, 수정 기능 쪽에 공백 입력 후 '수정 완료' 버튼을 클릭하면 공백 입력한 부분은 수정하지 않는 것으로 간주하고 이전에 저장된 state값을 그대로 출력하는 것을 목표로 했다. 하지만 현재 내 구현 능력으로는 공백 입력 후 수정 완료하거나 수정 취소하면 빈 state 그대로 저장이 허용되버리는 버그가 발생해서 그냥 무조건 채우게 해놓고 공백 입력 후 수정 취소나 수정 완료 버튼을 클릭하면 내용을 입력하라는 모달창이 뜨게 해놓는 것이 최선이었다.
또한 수정 버튼 옆에 진행 중이냐 완료냐의 상태를 토글하여 바꿀 수 있는 버튼을 수정 input에 공백 입력하고 클릭하면 이 또한 빈 state로 저장이 허용되버리는 문제가 발생해서 아예 수정 버튼을 클릭하면 수정 취소나 수정 완료하기 전까지는 진행 상태 버튼을 보이지 않게 토글로 구현해놓았다.
또 문제점이 class도 다르고 아예 다른 컴포넌트에 상관없는 todolist 렌더링 부분에 margin값을 줬는데 헤더 디자인이 바뀌는 문제도 있었다.
내일은 일단 삭제 여부를 한번 더 되묻는 모달창을 구현해볼 생각이고 위의 문제점도 좀 고민해보며 할 수 있는데까지 구현해볼 생각이다.
