타입스크립트 :이쁜 alert 모달창 sweetalert 사용하기

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..

• format_list_bulleted TypeScript
• · 2023. 12. 18.
• textsms

TypeScript 오류 : 'IntrinsicAttributes & BaseType & { children?: ReactNode; }' 형식에 선언된 'todos' 속성에서 가져옵니다.

[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..

• format_list_bulleted TypeScript
• · 2023. 12. 14.
• textsms

TypeScript 오류 : InputHTMLAttributes 형식에 target 속성이 없습니다.

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 태그의 타입은 ..

• format_list_bulleted TypeScript
• · 2023. 12. 14.
• textsms

TypeScript : JS / 리액트에서 타입스크립트 사용하기

★ 재상 튜터님의 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..

• format_list_bulleted TypeScript
• · 2023. 12. 13.
• textsms

TypeScript : 학습 자료 링크

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

• format_list_bulleted TypeScript
• · 2023. 12. 13.
• textsms

TypeScript : 도서관 프로그램 구현

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..

• format_list_bulleted TypeScript
• · 2023. 12. 13.
• textsms