20231214 TIL React Query Typescript TodoList

목표

• 과제 틀 짜기

새로 알게 된것/ 오늘의 코드

타입스크립트 리액트 프로젝트 생성하기

yarn create react-app 만들프로젝트이름 --template typescript

그렇게 하면

이런식으로 jsx 파일이 아닌 tsx 파일로 생성된다. 

 

필요한 폴더 만들기

 

api 폴더, components 폴더, globalStyle폴더,  model폴더 

 

model 폴더에는 typescript  type을 모아놓은 파일이 들어감.

전체 구조↓

 

과제 진행 방향 

react query는  아직 써본 적이 없어서 튜터님의 프로젝트를 보고 작성했다.

타입스크립트도 제대로 알지 못해서 오류가 안생기는 것을 목표로 진행했다.

json-server를 이용해서 데이터 관리를 했다.

{
  "todos": [
    {
      "id": "1e147b21-3c93-a961-0ce3-3a7efded3ca4",
      "title": "방 치우기",
      "content": "큰방, 침실 위주로!",
      "isDone": false
    },
    {
      "id": "91849c8e-f42b-f0a3-eb2d-a2a4a25885dc",
      "title": "TIL 쓰기",
      "content": "과제 해결 내용과 react query 내용 담기'",
      "isDone": false
    },
    {
      "id": "e3137e19-e4e6-c264-bded-8004554ad993",
      "title": "알고리즘 정리하기",
      "content": "깃헙 또는 블로그에",
      "isDone": true
    },
    
  ]
}

 

오늘의 알고리즘

2023.12.14 - [알고리즘 풀이 모음] - 직사각형 별 찍기

직사각형 별 찍기

목표 달성여부

• 과제 틀 짜기

내일 목표

• 과제 완료하기