기존에 작성했던 TodoList javaScript 프로젝트를 typeScript로 변경하는 과제
강의만 듣고 처음 해보는 것이여서 내부 코드를 바꾸는 것보다 세팅이 더 오래걸렸다.
그래서 사실 clone만 7번을 했다.. 망했다고 직감할때마다.. 새로운 마음가짐으로 하려고..
그래서 그냥 세팅하는 과정을 정리해버렸다.
· git clone 레퍼지토리 주소
· git remote remove origin
· yarn install + yarn start
· yarn add typescript @types/node @types/react @types/react-dom @types/jest
· tsc --init --rootDir ./src --outDir ./dist --esModuleInterop --module commonjs --strict true --allowJS true --checkJS true
· 파일명 변경 : jsx, js → tsx
uuid 오류 해결
내가 기존에 TodoList에 있는 하나의 Todo마다 uuid로 id값을 부여해줬는데 이 부분도 자동으로 import 구문에서 uuid 타입 정의 파일이 없어서 오류가 표시되고 있었다.
이 문제를 해결하기 위해 yarn add @types/uuid를 터미널에 작성하여 패키지를 설치하고 오류를 해결하였다!
React.FC와 const AddTodo = ({ todos, setTodos }: Props):JSX.Element => {}
기존 javaScript프로젝트에서는 함수형 컴포넌트 형식으로 모든 컴포넌트가 작성되었는데 지금 같이 프론트엔드 개발자가 되기 위해서
같은 과정을 달려가는 동료분이 이번 과제를 위해 공유해주신 영상에서는 아래와 비슷한 형식으로 작성하라는 정보를 얻을 수 있었다.
const AddTodo: React.FC<AddTodoProps> = ({ todos, setTodos }) => {그리고 그 분이 다시 알려주신 정보에 의하면! 요즘은 위와 같은 형식보다는
const AddTodo = ({ todos, setTodos }: AddTodoProps):JSX.Element => {} 이런 형식이 더 많이 사용된다고 한다!
그래서 나는 이번 과제에서 전부 2번째 방법을 사용하여 작성하였는데..
그래도 2가지 방법의 설명이 나와있는 벨로그 링크를 첨부한다! click!
난 아직 초보라 더 알아봐야 될 것 같지만 뭐든 상황에 맞게 쓰는 것이 정답일 것 같다..
오늘은 여기까지..
과제를 조금 더 살펴봐야겠다..!
