02 - 07 일지

오전, 오후 : 과제 다듬기

특이사항

컴포넌트 분리를 시도하다가 파일 전체가 에러투성이로 점철되었다. 도무지 되감기로 해결이 안되는 수준이라 아예 깃허브에서 풀 받아서 복구했다. 세상에나....그래서 일단은 function App 밖에 있던 

function ShowToDo(props){
  const buttonString = props.todo.isComplete == false ?"완료" :"취소"
  return(
    <div className="todobox">
      <h2>{props.todo.todoName}</h2>
      <div>{props.todo.todoContents}</div>
      <div className="todobuttoncontainer">
        <button className="todoboxcompleteordelete" onClick={() => props.completeOrUndoToDo(props.todo.id)}><b>{buttonString}</b></button>
        <button className="todoboxcompleteordelete" onClick={() => props.todoDelete(props.todo.id)}><b>삭제하기</b></button>
      </div>
    </div>
  )}

ToDo 박스를 생성하던 ShowToDo 컴포넌트를 분리독립 시켰다. 오늘 저녁 기술매니저와의 면담에서 현재로서는 쪼갤 기준이 별로 없으니 기능별로 쪼개보라는 조언을 들었다. 내일은 훅 이론을 배우면서 중간중간 쪼개기를 시도해봐야겠다. 당장 살펴봤을 때에는 상단의 헤더 부분을 분리시키고, 진행 중, 완료됨 박스를 구분짓는 todocontainer DIV를 줄여볼 수 있을 것 같다. 당장 해보면 할 수 있을 법도 하지만 낮에 있었던 총체적 난국 때문에 가볍게 멘붕상태다. 컨디션 조절을 해두자.