react-query 카테고리별 데이터 가져오기 (+ 반복되는 코드 줄이기)

개발환경 * react * typeScript * Firebase * react-query react-query로 데이터 가져오기 + firebase [api.ts] import { db } from '../shared/firebase'; import { collection, getDocs, orderBy, query, where } from 'firebase/firestore'; import { PostType } from '../types/Posts'; //관리자 (콘텐츠 by Mango) export const getAdminPostList = async (): Promise => { const q = query(collection(db, 'test'), where('role', '==', 'adm..

• format_list_bulleted TIL :: Today I Learned
• · 2024. 1. 9.
• textsms

타입스크립트 :이쁜 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 : 투두리스트 만들기 (2단계 - Redux Toolkit)

TypeScript : 투두리스트 만들기 (1단계 - React Props) Lv1 React를 이용한 TodoList를 만듭니다. Todo를 Create, Delete, Update(완료/취소) 가 가능해야 합니다. 이때, useState와 Props만을 사용합니다. Keyword props drilling, state 끌어올리기 1. 프로젝트 생성 : npx create-re zerotonine2da.tistory.com Lv2 React + redux-toolkit를 이용한 TodoList를 만듭니다. Todo를 Create, Delete, Update(완료/취소)가 가능해야 합니다. Lv1의 코드를 고쳐서 만듭니다. Keyword 전역 상태 관리, redux 1. props drilling과 us..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 15.
• 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 : 도서관 프로그램 구현

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

TypeScript : 추상클래스 & 인터페이스

1. 추상클래스 - 인스턴스화를 할 수 없는 클래스 - 기본은 부모클래스가 하지만, 핵심 기능은 자식클래스에 위임하는 것 - 상속을 통해 자식클래스에서 메서드를 각각 구현하기 abstract class Shape { abstract getArea(): number; // 추상 함수 정의!!! printArea() { console.log(`도형 넓이: ${this.getArea()}`); } } class Circle extends Shape { radius: number; constructor(radius: number) { super(); this.radius = radius; } getArea(): number { // 원의 넓이를 구하는 공식은 파이 X 반지름 X 반지름 return Math.PI..

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