더 알아보기/개념37 Axios에서 요청 취소 설정하기 웹사이트에서 버튼 클릭이나 특정 동작 후 로딩 화면이 표시되고, 검색 중에는 '검색 취소' 버튼을 제공하는 경우가 많은 데, 그런 기능은 어떻게 구현할 수 있을까?를 고민하다 2가지 방법을 알게 되었습니다. 1. CancelToken 사용하기 1️⃣ axios.CancelToken.source()를 사용하여 취소 토큰을 생성한다.2️⃣ API 요청을 보낼 때 cancelToken 옵션에 토큰을 삽입한다.3️⃣ 해당 요청을 취소할 때 source.cancel()를 호출한다.import axios from 'axios';// CancelToken 생성const source = axios.CancelToken.source();axios.get('/api/endpoint', { cancelToken: so.. 2024. 8. 28. 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. [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-dom의 createPortal 사용 후기 react-dom의 createPortal이란? React 프로젝트에서는 구현된 화면을 /public/index.html의 에서 렌더링 하는 데 react-dom의 createPortal을 사용하면 #root가 아닌 다른 태그에 id를 부여함으로써 영역을 분리하여 화면을 렌더링 할 수 있다. [React] ReactDOM.createPortal() 모달 공부를 하다가 마주친 ReactDOM.createPortal()에 대해 알아보자! velog.io 어떤 상황에 사용할 수 있을까? Modal 컴포넌트를 생성할 때 화면을 감싸고 있는 root를 개별적으로 사용할 수 있기 때문에 화면 우선순위 처리면에서 유용할 것 같다. 이외의 새롭게 알게된 부분 예제에서는 document.getElementId("#mod.. 2023. 7. 28. MVC 패턴 내 머릿속에 MVC 패턴은 백엔드에서 사용하는 아키텍처로써 Model, View, Controller가 있다고 알고 있었는 데, 막연히 Spring과 같은 백엔드에서만 사용하는 것이다라고 생각하며 3년이라는 시간이 지나자 이제는 MVC 패턴이 프런트에서도 사용되고 있다는 것을 알게 되어 새로운 마음으로 MVC 패턴에 대해 알아보았다. 프론트엔드의 MVC 아키텍처와 디자인 패턴 > 내가 건축가가 되어서 직접 집을 짓는다고 생각해보자. 눈에 보이는 집의 구조는 같은 집일지라도 단독주택으로 집을 짓는 것과, 빌라로 집을 짓는 것과, 고층 건물로 velog.io 위 글에서 MVC 패턴에 대한 설명과 프론트에서는 MVVM, MV*과 같은 MVC에서 파생된 개념들도 잘 정리되어 있기 때문에 한번 읽어보면 개념 잡는.. 2023. 3. 27. SWR vs React-Query 앞서 작성한 애자일 방법론의 서론과 마찬가지로 커리어리에 올라온 Q&A를 통해 SWR과 React-Query의 차이점을 알아보게 되었고 좋은 글을 발견하여 따로 정리할 것 없이 해당 글을 첨부하였다. React Query vs SWR React Query와 SWR의 차이점 tech.madup.com 추후 패캠에서 SWR과 React-Query 강의 시청 후 추가하거나 사용법을 정리해 볼 예정이다. 2023. 3. 24. 애자일(Agile) 방법론 아침마다 커리어리에서 개발 관련 글을 3개씩 읽으려고 노력하는 중인데, 오늘 본 글에서 요즘 개발팀에서 애자일 방식을 많이 사용한다는 글을 보게 되었다. 고로 애자일 방식이 뭔지에 대해서 알아보기로 했다. 내가 알고 있던 애자일의 정의는 "프로젝트를 장기적으로 보고 순차적으로 진행하는 방식이 아니라 일정 기간마다 회의를 통해 팀 단위로 해당 기간 동안 진행할 부분들을 정하고 빠르게 개발해 나가는 방식"으로 알고 있었으며 이번 기회를 통해 위 정의가 맞는 지 또는 더 자세한 부분이 있는지 알아보고 정리해 나갈 예정이다. 정의 애자일(Agile)이란? : 소프트웨어 개발 방법론 중 하나로 사전적 의미로는 '기민한, 날렵한'이라는 뜻을 가지고 있다. 좋은 것을 빠르게 취하고, 낭비 없게 만드는 다양한 방법론을.. 2023. 3. 24. CSS 모듈화 웹 컴포넌트 스타일링 관리 CSS-in-JS vs CSS-in-CSS 웹 컴포넌트 스타일링 관리 CSS-in-JS vs CSS-in-CSS www.samsungsds.com [React] CSS모듈화. 리액트에서 CSS 적용하는 방법은 크게 2가지가 있다. 1. style.css 등을 만들어서 각 컴포넌트의 스타일링을 하고 import해오기 2. 해당 컴포넌트 안에서 property 적용하기 하지만, 위 2가지 방법 모두 코 codingbucks.tistory.com 에스코어 에스코어는 디지털 혁신을 위한 고급 프로페셔널 서비스를 제공합니다. 매니지먼트 컨설팅과 소프트웨어 테크놀로지 서비스 오퍼링을 살펴보세요. s-core.co.kr CSS-in-CSS React에서 CSS를 적용하는 방법 1) styl.. 2022. 7. 13. 이전 1 2 3 4 5 다음 728x90
