SweetAlert2 SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes sweetalert2.github.io 1. VS code 패키지 설치 yarn add sweetalert 2. import 하기 import swal from 'sweetalert'; 3. 삭제 확인 창 const removeHandler = async (e: React.MouseEvent, id: string) => { try { swal({ title: '삭제하시겠습니까?', text: '삭제된 데이터는 복구할 수 없습니다.', icon: 'warning', butto..

[App.tsx] export type Todo = { id: string; title: string; content: string; isDone: boolean; }; function App() { const initialState: Todo = { id: uuid(), title: '제목1', content: '내용1', isDone: false, }; //데이터 : 배열 안 객체 const [todos, setTodos] = useState([initialState]); return ( My Todo List [InputForm.tsx] import { Todo } from '../App'; type Props = { todos: Todo[]; setTodos: React.Dispatch; }; f..

function App() { const [title, setTitle] = useState(''); const [content, setContent] = useState(''); const inputTitle = (e: React.InputHTMLAttributes) => { setTitle(e.target.value); }; return ( 제목 ) 1. 오류 input 태그 onChange 이벤트 발생시, 타입 작성 : React.InputHTMLAttributes "InputHTMLAttributes 형식에 target 속성이 없습니다." 2. 해결 (1) input 태그의 타입 : onChange? 뒤에 있는 것 (2) 타입뒤에 Handler는 제외해야함 => 결론 : input 태그의 타입은 ..

★ 재상 튜터님의 TS + React Cookbook ★ (1) 함수에서 TS 사용하기 function sum(a: number, b: number): number { return a + b; } function objSum({ a, b }: { a: number; b: number }): string { return `${a + b}`; } 1) sum ( 타입 지정 해주기) : return 의 타입 지정 2) 객체의 타입 지정시 묶어서 지정. (2) 비동기 함수에서 TS 사용하기 type Person = { id: number; age: number; height: number }; async function getPerson(): Promise { const res = await fetch(`htt..

공식 매뉴얼 https://www.typescriptlang.org/docs/ 공식 튜토리얼 https://www.typescriptlang.org/docs/handbook/intro.html 온라인 책 https://radlohead.gitbook.io/typescript-deep-dive/getting-started

1.프로그램 세팅 (1) 터미널(cmd) 실행 : npm init -y : tsc --init --rootDir ./src --outDir ./dist --esModuleInterop --module commonjs --strict true --allowJS true --checkJS true (2) package.json 수정 : script 항목 "scripts": { "start": "tsc && node ./dist/index.js", "build": "tsc --build", "clean": "tsc --build --clean" }, (3) src 폴더 생성 > index.ts파일 생성 2. 인터페이스 & 데이터 정의 (index.ts) (1) 역할 enum enum Role { LIBRARI..