프론트엔드 킹왕짱이될테다 프론트엔드 킹왕짱이될테다

함수가 정의될 때, 그 함수는 해당 시점의 user 상태 값을 "캡처"합니다. 이후에 user 상태가 업데이트되더라도, 함수 내부에서 사용되는 user는 함수가 정의된 시점의 값을 참조하기 때문에 최신 값이 반영되지 않는 것입니다.  2024년 12월 26일.. 웹소켓 통신으로 받아오는 다량의 실시간 데이터 중 꽤나 중요한 파트인 블랙리스트 강퇴를 정상적으로 수행하지 못한 나의 함수에 대해 Chat GPT는 React의 클로저의 작동과 관계된 문제라고했다,,, 블랙리스트가 추가됐다는 이벤트를 해당 블랙리스트 유저의 이메일과 함께 받으면 바로 접속된 유저 중 해당 이메일을 가진 유저 (블랙리스트 당사자)를 퇴장시켜야했다. 아래 함수는 블랙리스트 이벤트를 받으면 실행되는 함수이다. const handleBl..

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

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

변수의 타입을 미리 알지 못할때 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일 때..

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

상태관리 라이브러리없이 props전송없이 state공유가 가능한 방법이 있다. 그건 바로 context API 근데 잘 안쓰는 이유는, 1. 성능이슈 2. 컴포넌트 재활용이 어렵다 로 인해 잘 이용은 안함. 컴포넌트 바깥에 const Context1= createContext() 이렇게 만들어준다. 그리고 state를 공유할 부분에 이렇게 감싸주고, 전송할 데이터를 value={{여기안에넣으면된다}} 그리고 Detail 컴포넌트로 임포트를 해주고, import { Context1 } from "./App"; const {shoes}=useContext(Context1); useContext를 이용해 보관함을 해체한다. 그리고 이제 자유롭게 쓰면되는데, 아까 언급한 것 처럼 state 변경시 쓸데없는 컴포..

폭풍업뎃... 이게 어떻게된거냐면요 코딩애플로 리액트 전체 다시 한번 싹 훑는 중입니다.. 근데 몰랐던 내용도 많고 나는 그동안 아무것도 모르고 코딩하고있었구나....싶네요 라이브러리 없이 애니메이션효과넣는걸 하고있었다. //App.css .start { opacity: 0; } .end { opacity: 1; transition: opacity 0.5s; } //이렇게도 되고 //이렇게도 됨 useEffect(()=>{ setFade('end') }, [탭]) 그냥 이렇게했을 땐 안되는 이유 classname="start end" 로 만드려는건데, start였다가 start end 이렇게 변경돼야 작동함. 그래서 다시 공백으로 만들어주는 코드가 필요. setFade("") setFade("end") ..