Java Script & Type Script/TIL
-
3월 26일 TIL : ReactQuery 시작하기Java Script & Type Script/TIL 2023. 3. 26. 22:03
react query ajax성공/실패시 보여주는 html별도로 지정하거나, 몇 초마다 자동으로 ajax요청해야할 일이 있거나, 실패시 몇 초 후 요청 재시도해야 할 때 등 실시간 데이터가 중요할 때 쓰임! 1. install yarn add @react-query npm install @react-query 2. index.js 설정 //index.js import { QueryClient, QueryClientProvider } from "react-query"; const queryClient = new QueryClient(); ... ... 이용할 컴포넌트에서 useQuery("이름", () => { return axios.get("https://codingapple1.github.io/user..
-
3월 23일 TIL : TS-Overloading, Polymorphism [타입스크립트야... 내가 명시도안했는데 타입을 유추한거야?]Java Script & Type Script/TIL 2023. 3. 24. 00:25
Overloading 오버로딩은 함수가 서로 다른 여러개의 call signature를 갖고있을 때 발생한다. type Add= (a: number, b: number)=> number const add: Add = (a, b) =>a+b type Add= (a: number, b: number)=> number 위 callsignature는 아래 callsignature와 같다. type Add= { (a: number, b: number) : number } 1. 매개변수의 데이터 타입이 다른 경우 예외 처리 type Add= { (a: number, b: number) : number (a: number, b: string) : number } const add: Add = (a, b) => a+b..
-
3월 21일 TIL : TypeScript-call signature, unknown,void,neverJava Script & Type Script/TIL 2023. 3. 23. 23:24
변수의 타입을 미리 알지 못할때 unknown을 사용할 수 있다. let a: unknown; if (typeof a ==="number"){ let b = a+1} void는 값을 반환하지 않는 함수의 반환 값. 함수에 return 문이 없거나 해당 return 문에서 명시적 값을 반환하지 않을 때 항상 유추되는 타입. never는 함수가 절대 return하지 않을 때 발생 예를 들어 함수에서 exception이 발생할 때. function z (name: string | number){ if (typeof name==="string"){ } else if (typeof name=="number"){ }else { name } } name은 string혹은 number임. 이미 앞에서 string일 때..
-
3월 18일 TIL : TypeScript 시작Java Script & Type Script/TIL 2023. 3. 21. 12:06
object타입을 명시적으로 정해주는 방법 let a: number[] = [1, 2]; let b: string[] = ["hi"]; let c: boolean[] = [true]; 콜론이용, 타입적어주면 됨 그리고 ts가 타입을 추론하게 let a = [1,2] let b = ["il","1"] let c = [true] 이렇게해도 됨 이런식으로 더 많이한다고 함. optional types const player: { name: string; age?: number; } = { name: "nico", }; 옵셔널 체이닝처럼 물음표이용가능(선택적 타입) -> age가 undefined일 수도 있기때문에 ts가 에러처리함. ts는 알아서 에러처리를 알잘딱깔센 잘한다!!!! if (player.age&..
-
3월 18일 TIL : context API, props전송없이 state를 공유하는 방법Java Script & Type Script/TIL 2023. 3. 18. 21:05
상태관리 라이브러리없이 props전송없이 state공유가 가능한 방법이 있다. 그건 바로 context API 근데 잘 안쓰는 이유는, 1. 성능이슈 2. 컴포넌트 재활용이 어렵다 로 인해 잘 이용은 안함. 컴포넌트 바깥에 const Context1= createContext() 이렇게 만들어준다. 그리고 state를 공유할 부분에 이렇게 감싸주고, 전송할 데이터를 value={{여기안에넣으면된다}} 그리고 Detail 컴포넌트로 임포트를 해주고, import { Context1 } from "./App"; const {shoes}=useContext(Context1); useContext를 이용해 보관함을 해체한다. 그리고 이제 자유롭게 쓰면되는데, 아까 언급한 것 처럼 state 변경시 쓸데없는 컴포..
-
3월18일 TIL : automatic batchJava Script & Type Script/TIL 2023. 3. 18. 01:48
폭풍업뎃... 이게 어떻게된거냐면요 코딩애플로 리액트 전체 다시 한번 싹 훑는 중입니다.. 근데 몰랐던 내용도 많고 나는 그동안 아무것도 모르고 코딩하고있었구나....싶네요 라이브러리 없이 애니메이션효과넣는걸 하고있었다. //App.css .start { opacity: 0; } .end { opacity: 1; transition: opacity 0.5s; } //이렇게도 되고 //이렇게도 됨 useEffect(()=>{ setFade('end') }, [탭]) 그냥 이렇게했을 땐 안되는 이유 classname="start end" 로 만드려는건데, start였다가 start end 이렇게 변경돼야 작동함. 그래서 다시 공백으로 만들어주는 코드가 필요. setFade("") setFade("end") ..