TIL : TypeScript + React를 이용한 todoList 만들어보기

 

오늘  내가  하였던  것들
typeScript와 리액트를 이용해서 
할일 목록 페이지 를 만들어보는 것이었습니다. 

 

 

( 1 ) 할일을 입력하면  저장되는  폼 을 작성하였습니다. 

1. form의 기본동작을  preventDefault()를 이용해서 방지하였습니다.    2. 상태값을  저장하는  함수를 이용한 이유 ?                사용자가 입력한 데이터가  저장해야되기에 이용하였습니다.          또한,   제목 , 내용 ,  isDone( 할일이  시작에서 종료로 되는 상태) 이 변경여부가 이기에 그것을          고유한  식별자 인   id 기준으로 잡았습니다.        3.  setText , setTitle이용해서 폼을 리셋합니다.

 

 

( 2 )  할일목록이   시작과 종료 기준으로 컴포넌트를 분리하여 작성하였습니다.   

4. 컴포넌트로  나누어서  TodoItems에  각각   상태가    할일이  시작 과 종료될때 기준으로 분리하였습니다.

 

 

( 3 )  저는  또한  사용자가 할일 목록들에서  끝난 할일을  삭제하거나 할일목록들에서  할일의  상태가 

        시작 종료 여부로   변경되는  것을 하였습니다.  

사용자입장에서도          저는  이 할일을  보기 싫어서 지우고 싶어요,         할일 목록을  시작 혹은  종료로 나누길 원해요  가상의 사용자의  의견을반영하였습니다.

 

 

(  4  )   todoIsTrue 인 데이터와  toIsFalse 인 데이터로 나누었습니다. 

todoIsTrue :  할일목록이 시작상태인 데이터들만  있는  배열       todoIsFalse : 할일목록이  종료상태인 데이터들만  있는  배열  저는  밑줄친 부분에서   xx만 있게 데이터를 구성하려면  유튜브에서도 동영상만 보여주게 하는 필터를 보고 filter 를 생각해 내었습니다.

 

 

이전 프로젝트에서 하였던  깃 커밋 메세지 컨벤션을  처음 적용하는 것이 낮설기도 해서  , 이번  프로젝트에서 적용을  해보았습니다. 

 

https://velog.io/@archivvonjang/Git-Commit-Message-Convention

[Git] Commit Message Convention

그래서  다음  메세지를  주로 이용하였습니다.

깃 커밋 컨벤션을  적용하면서 느낀점은 ?    그냥  커밋한 것 보다  커밋 컨벤션을 적용한것에서   네가 지금  프로젝트를 진행하면서 어떤부분이 변경되었는지  알수     있었습니다.