0309 💎 🪄 TypeScript 사용해 To-Do List 만들기 - props-drilling 방식 튜터님의 답안 코드를 살펴보자! 하지만 뭔가 코드에서 잘못 된 것인지 에러가 떠있었고 ㅠㅠ 내가 코드 수정해서 해결하긴 했다. 강의에서와 달리 hook을 만들어 사용해서 강의 때 코드와 다르기도 했다. 답안 코드의 to-do list 는 간소화된 투두리스트라 todo는 id, title, isDone(완료여부) 의 key들로만 간단히 구성됨. App.tsx > TodoList.tsx 컴포넌트 > TodoItem.tsx 컴포넌트 방식으로 속해있다. TodoList가 거의 메인이다. 이 컴포넌트에서 hook을 import해 사용하며, TodoItem으로 이 hook에서 받은 리턴값을 props 형태로 전..

0308 이전에 만들었던 to-do list 는 CRA 프로젝트로 생성해 JS 언어로 써서 만든 것 이번에는 Vite - React - TypeScript 프로젝트로 생성해서 JS => TS 로 바꿔봤다 (vite 을 통해 바로 typescript 템플릿으로 설정해 만들면 알아서 tsconfig.json 등 설정이 되어있으니 그냥 파일확장자만 ts / tsx 로 변경해서 쓰면 된다 ㅎㅎ 다만 패키지 설치는 ts 임을 고려해주자 나는 yarn 패키지 관리자를 썼다. (npm 이면 npm install ~ ) ) yarn add typescript @types/node @types/react @types/react-dom yarn add @types/styled-components (스타일컴포넌트를 쓰면) ..

240123 TIL ✍ React 기초과정 강좌를 듣고나서, my to-do list 페이지를 만들어보는 개인 프로젝트를 진행했다. 하지만 시간도 부족했고 내 이해 부족으로..?! 완료/완료취소 버튼의 기능 (완료 진행중 상태 변경) 은 시도해보다가, 결국 완전히 구현하지는 못한 채 과제를 제출했다. (+ id도 중복 가능성있게 설정했다거나 등의 문제도 많았다) 답안 설명을 보니, 원래의 추가하기 버튼에서 좀 더 생각해보면 답이 나왔을 것도 같다는 아쉬움이 있었다. 하지만 아직까진 props 활용과 component 분리, state 활용 등 실제로 프로젝트를 만들어보면서 헷갈리는 점과 의문점이 정말 많았기에.. 내게는 절대 수월하지 않았다. 😵 이번 프로젝트를 통해 한 것은, 크게 다음과 같다. 컴포넌..