728x90 🧠 지식창고170 Axios의 timeout 옵션으로 요청 시간 제한 설정하기 단점 Axios를 사용하던 중 API 요청에 제한 시간을 둬야 하는 기능을 개발하게 되었고,그 과정 중 timeout 옵션을 알게 되어 짧게 정리해보았습니다. 역할API 요청이 timeout 옵션으로 설정한 시간 내에 완료되지 않을 경우 자동으로 요청을 취소하고 오류를 발생 시킵니다.기본값은 0으로, 옵션을 설정하지 않거나 0을 설정한 경우 무제한으로 요청을 대기할 수 있습니다. timeout을 설정하면 애플리케이션의 응답성을 높이고, 불필요한 대기를 방지할 수 있습니다.설정 방법import axios from 'axios';// 1분 (60초)으로 타임아웃 설정const axiosInstance = axios.create({ timeout: 60000});axiosInstance.get('/api/e.. 2024. 8. 28. TanStack Query TanStack Query란?: TanStack Query는 현대 웹 애플리케이션에서 데이터 패칭, 캐싱, 동기화 및 상태 관리를 간편하게 처리할 수 있도록 돕는 라이브러리입니다. React, Vue, Svelte 등 다양한 프레임워크와 호환되며, 비동기 데이터와 서버 상태를 효율적으로 관리할 수 있는 강력한 도구입니다. 이 라이브러리는 API 호출, 데이터 캐싱, 폴링, 배경 업데이트와 같은 데이터 관련 작업을 간단하게 처리할 수 있도록 설계되었습니다. 개발자들은 복잡한 데이터 관리를 간소화하고, 애플리케이션의 성능을 향상시킬 수 있습니다. TanStack Query와 React Query의 차이점이름과 브랜드React Query : React 전용TanStack Query : 다양한 프레임워크와 라이.. 2024. 8. 12. [Error] Vue import Error Vue 프로젝트 보고 있는 데 import 사용한 곳마다"export default를 사용해야 합니다", "모듈 또는 해당 형식 선언을 찾을 수 없습니다."이런 오류가 발생해서 2시간을 머리를 뜯고 있었는 데 다행히 팀장님이 도와주셔서 금방 해결할 수 있었다. Cannot find module "파일 경로" or its corresponding type declarations. 라는 에러가 발생했고, Vuex Extension을 삭제했더니 문제가 해결되었다. Error가 어디서 발생하고 있는 건지 잘 읽어보자해결하고 나니까 오른쪽 끝에 vetur라는 글자가 보였다. 코드 설정뿐만 아니라 익스텐션도 의심해봐야 한다. Vetur뿐만 아니라 Material Icon도 문제다.json을 json이라고 인식하지.. 2024. 6. 3. [Postman] WebSocket Mock Server 사용법 Postman 설정Postman에 접속한다.사이드바에서 Mock Servers에 접속한다. (없을 경우 Configure workspace sidebar에서 활성화시킨다.)New에서 WebSocket을 선택한다.연결 테스트를 진행한다. URL은 테스트용이기 때문에 wss://ws.postman-echo.com/raw를 사용해 주었다.Mock Server이기 때문에 Message를 Send 했을 때 동일한 값이 넘어온다.Vue에 연결하여 테스트 Postman Mock Servers Test 전송 2024. 5. 21. [React] useState를 선언할 때 let이 아닌 const를 사용하는 이유 강의를 듣다가 useState를 선언할 때 왜 let이 아닌 const를 사용하는지에 대한 의문이 생겼고, 강의 내용을 쓸 수 없기 때문에 구글링을 통해서 클로저에 대한 부가적인 이해 및 관련 글을 읽게 되었다. hooks에서 useState가 const로 선언되는 이유 카카오톡 오픈 채팅방에 따르면 요즘의 기업들은 클래스형이 아닌 훅스를 사용한다고 한다. 남들하는건 다 할줄 알아야지.. 그래서 공식 문서를 하나씩 읽어보기 시작했다. ko.reactjs.org/docs/hooks-s dudghsx.tistory.com 위 두 글을 정독하게 되었는 데 useState를 함수 뜯어보았을 대략적으로나마 어떤 방식으로 hook이 작동되는지 알 수 있었고 그 과정 속에서 클로저의 역할을 이해하게 되었는 데 (이해.. 2024. 4. 3. [Next.js] Drag&Drop 기능 구현하기 이번에는 관리자 페이지에서 이미지를 업로드할 때 파일 선택 버튼 외에도 드래그 앤 드롭으로 이미지를 삽입할 수 있는 기능을 구현해보았다. 코드 아래 링크에 블로그와 기존에 구현했던 이미지 파일 변환 기능을 활용하여 구현하였다. Test 페이지 (/pages/test.js) import Head from "next/head" import FileBox from "@/elements/library/fileBox/Test" import { useEffect, useState } from "react" import styled from "styled-components" const Test = () => { const [imageFile, setImageFile] = useState(null) // AWS에 이.. 2024. 1. 9. [Next.js] Grouping Pagination 만들기 (라이브러리 X) 이전에 구현했던 페이지네이션에서...(그룹화) 기능을 추가한 버전으로 업그레이드하게 되면서 해당 내용을 정리해 보았습니다. Pagination 만들기 (라이브러리 X) 오늘은 Pagination(페이지 네이션) 기능을 만들어 보았다. 라이브러리 대신 부트스트랩으로 CSS 입혔고, 기능은 JS 사용해서 만들었다. (라이브러리를 사용하지 않은 이유 : 블로그를 찾아보던 중 reac eundol1113.tistory.com [React-query] Pagination에 Prefetching 사용하기 현재 진행 중인 프로젝트에 페이지네이션 기능을 구현했는 데 페이지를 넘길 때마다 데이터를 불러오는 속도보다 화면 전환 속도가 더 빨라서(데이터 불러오는 속도 < 화면 전환 속도) 페이지가 eundol1113.tis.. 2023. 12. 11. [Next.js] 드롭다운 영역 외 클릭 시 메뉴 닫기 드롭다운은 프로젝트에서 자주 구현하게 되는 기능인만큼 만들다 보면 이것저것 기능이나 디자인을 넣고 싶어지는 데 이번에는 드롭다운 영역 외 클릭 시 드롭다운 메뉴가 닫히는 기능을 만들어 보았다 기능 구현 과정에서 useRef를 사용하였고 이 과정에서 ref.current.contains(e.target)이라는 개념도 새롭게 알게 되었다. 🤔 ref.current.contains(e.target)란? ref : React의 'useRef' 훅을 통해 생성된 ref 객체 (ex. const ref = useRef(null) ref.current : Ref 객체의 'current' 속성을 나타내며, 해당 Ref가 현재 참조하는 DOM 요소 ref.current.contains(e.target) : 현재 Ref가.. 2023. 11. 27. [Next.js] 드래그 상태에서 css 조작하기 관련 글 목차 1️⃣ react-beautiful-dnd를 사용하여 드래그로 순서 변경하기 [React, Next.js] react-beautiful-dnd를 사용하여 드래그로 순서 변경하기 라이브러리는 react-beautiful-dnd npm 사이트에서 가져와서 사용했다. react-beautiful-dnd Beautiful and accessible drag and drop for lists with React. Latest version: 13.1.0, last published: a year ago. Start using react-beautiful-dnd in yo eundol1113.tistory.com 2️⃣ 다중 이미지 업로드 및 미리 보기 + 드래그로 순서 변경 [Next.js] 다중 .. 2023. 11. 23. 이전 1 2 3 4 5 ··· 19 다음 728x90
