typescript-todo : 요구사항/화면 구상 & 디렉토리 설정 & 기술스택

💙 요구사항 정리

1. localStorage 활용한 할일 관리 CRUD 웹 어플리케이션
2. ListScreen 
    : 할 일 리스트업
    : input form을 활용한 할 일 추가
    : CSS을 활용한 할 일 완료 체크
    : 휴지통 아이콘 클릭해 해당 할 일 삭제
    : 전체 완료된 할 일 삭제 버튼 클릭해 완료된 할 일은 삭제
3. FocusScreen 
    : 완료되지 않은 할 일 한 개 보이기
    : 완료 버튼 클릭 -> 해당 할 일에 대해 완료 체크
    : 스킵 버튼 클릭 -> 해당 할 일 말고 완료되지 않은 다른 할 일 한개를 보임
4. 미디어 쿼리 생성 함수를 활용해 반응형 어플리케이션
5. 토글 버튼을 활용해 다크모드/라이트모드 지원 
6. React Context를 통해 ListScreen과 FocusScreen 간의 할 일 상태 공유, 
        Props Drilling 패턴 방지, 유연한 컴포넌트 작성
7. useContext을 활용해 가독성 높이고 다른 react hooks와 함께 조합

💙 화면 구상

ListScreen과 FocusScreen : Dark-Mode

ListScreen과 FocusScreen : Light-Mode

💙 디렉토리 설정

💙 기술 스택

💙 .tsx와 .ts의 차이

1. .tsx

React Component 사용

typeScript에서 react 문법을 담아내기 위한 확장자

2. .ts

typeScript 파일 그 자체

기존 js 파일이 ts로 변경되어 typescript 사용