728x90 반응형 typescript11 [React+TS] AbortController: fetch 요청 취소하기 이번에 하고 있는 프로젝트는 팀원 + 코드래빗이라는 AI 한테 코드리뷰를 받고 있다. 내가 적은 이슈 + pr 내용도 참고해서 코드 리뷰해주는데 꼼꼼하고 구조도 분석해주고 새롭게 알게 되는 것도 있어서 생각보다 훨씬 좋은 것 같다.오늘 포스팅하는 AbortController 도 코드래빗에서 코드에 추가하면 좋을 것 같다고 리뷰해줬길래 코드 추가를 위한 공부를 하면서 끄적여본 포스트. 아무튼 코드래빗 추천한다. AbortControllerfetch 요청을 취소할 수 있게 해주는 브라우저 내장 객체로,API 요청을 시작했다가 컴포넌트가 언마운트되면(=페이지를 떠나면) fetch 요청을 중단(Abort)시킬 수 있게해준다. (기본 fetch는 사실 요청 취소 기능이 없다!) 그렇다면 이런 기능이 왜 필.. 2025. 12. 2. [React & TypeScript] Debounce, useDebounce 커스텀 훅 만들기 Debounce 란?이벤트가 연달아 터질 때 실행을 잠깐 지연시키는 것더 자세히 말하면, 마지막 이벤트 뒤로 일정 시간 동안 더 이상 이벤트가 안 오면 그때 한 번만 실행시키는 것을 말함 그렇다면 이런 건 왜 사용할까?-> 짧은 시간동안 함수가 수십 번 불리면 불필요한 호출이 많아짐-> 결과적으로 네트워크/연산 낭비가 심해지고 깔끔하지 못한 UX 가 만들어지게 됨 예를 들어 검색창 자동완성 기능을 만든다고 했을 때사용자가 검색창에 글자를 입력할 때마다 API 를 호출한다면 어떻게 되는지 생각해보자. "apple" 을 치는 동안 5번의 API 요청을 하게 됨. a -> API 요청p -> API 요청p -> API 요청l -> API 요청e -> API 요청 계속해서 요청을 보내는 것 보다는 잠깐 기다렸다.. 2025. 11. 24. [TypeScript] 유틸리티 타입 Partial Partial 타입이란? - 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있음 어떤 제네릭 타입 T를 돌면서 P가 제네릭 타입 T에 존재하면 속성으로 넣음 -> 제네릭 타입의 일부 속성만 가진 새로운 타입이 만들어짐type Partial = { [P in keyof T]?: T[P];}; 예를 들어,개인정보 수정 화면에서 기존의 개인정보데이터를 originalData 새롭게 수정된 데이터를 editData로 정해놨을 때 patch 리퀘스트를 보내려하면 originalDat와 editData를 비교해서 변경된 부분만 patch 리퀘스트에 실어서 보낼 일이 생기는데 이런 경우 타입 안정성을 지키기 위해 유용하게 쓸 수 있다.type Info = { name: string; age: numbe.. 2025. 8. 10. [TIL] 11/15 -webkit-box, Ellipsis, $ 접두사, 낙관적 업데이트 1. EllipsisBox 만들기ElipsisBox 란 일반적으로 텍스트가 지정된 범위를 초과할 때 나머지 텍스트를 생략하고 말줄임표 (...) 를 표시하도록 스타일링된 컨테이너를 의미한다. 1.1. 전체 코드interface Props { children: ReactNode; linelimit: number; // 몇 줄까지 보여줄 것인지}const EllipsisBox = ({ children, linelimit }: Props) => { const [expanded, setExpanded] = useState(false); // 처음엔 확장되지 않음 return ( {children} {setExpanded(!expanded)}}> .. 2024. 11. 15. 이전 1 2 3 다음 728x90 반응형
