aotoyae

💡 타입스크립트로 CRA 폴더를 만들었다면 폴더 위치에서 npx create-react-app . --template typescript 폴더까지 새로 만든다면 npx create-react-app 원하는_폴더_이름 --template typescript 💡 자바스크립트로 만든 앱 TS 로 마이그레이션 한 시스템에서 다른 시스템으로 옮기는걸 Migration 이라고 한다! TS 로 앱을 생성하고 src 폴더 내에 아래 파일들을 제외하고 다 지운다! src/react-app-env.d.ts src/reportWebVitals.ts src/setupTests.ts 그리고 기존 JS 앱에서 src 내 파일들을 카피해온다. 마지막으로 확장자를 바꿔주자! jsx ➡️ tsx, js ➡️ ts

💡 typescript + react + vite 앱 만들어보자! ✚ 또 다른 명령어.. 새 폴더를 만들고 그 위치에서 npx create-vite-app . --template react-ts 폴더까지 새로 만든다면 npx create-vite-app 원하는_폴더_이름 --template react-ts npm install ✚ 원래는 이렇게 했었지만! npm create vite@latest yarn create vite npm 6.x npm create vite@latest [프로젝트 명] --template react-ts npm 7+, extra double-dash is needed: npm create vite@latest [프로젝트 명] --template react-ts 버전별로 입력하면..

💡 프롭스를 더 유연하게 내려보자 ~ UtilityType.tsx import { AddressComponent, PersonChildComponent, ProfileComponent, } from "./UtilityTypeChildren"; export type PersonProps = { id: string; description: string; address: string; age: number; profile: string; }; export const PersonComponent = ({ // ❗️ 다섯가지 타입들 설정 id, description, address, age, profile, }: PersonProps) => { return ( {id} // ❗️ 어드레스만 하나 내려주는 중 );..

💡 타입스크립트를 투두리스트에 활용해 보자. type Todo = { id: string; isDone: boolean; }; function App() { const [todos, setTodos] = useState([]); // Todo 에 세팅은 어떻게 넘길까?! return ( {todos.map(({ id }) => ( ))} ); } function Todo() { return ; } export default App; function App() { const [todos, setTodos] = useState([]); return ( {todos.map(({ id }) => ( // ❗️ 프롭스 넘겨주고 ))} ); } function Todo({ id, setTodos, }: { id: ..