프론트엔드 관련/기초3 [React] http Typescript axios(feat. interceptor 에러 핸들링) 서론 이전에 작성한 글 조회수 1000 넘은 김에 특별 재작성 이벤트!! React의 Typescript와 함께 data fetching(axios로 API 호출)Typescripttypescript를 사용함에 따라 기존의 코드에서 사용하던 axios가 어려워져버렸다... 기존의 자바스크립트를 이용한 axios는 간단하고 데이터를 쉽게 받아올 수 있었으나, Dynamically Typed Language라ash9river.tistory.com 회사를 다니면서 내가 했던 것들이 잘못된 부분이 있었구나 했는데, 사람들이 너무 많이 봐서 as 같은 느낌으로 다시 작성한다. 리액트 프로젝트 타입스크립트 악시오스 인터셉터 에러핸들링 드가자잇 AxiosInstance import { config } from '@.. 2025. 3. 30. React로 이미지 업로드 (with Blob, FileReader) 서론백엔드에서 이미지를 url로 보내주세요~라고 요청을 했는데, url?? 도대체 무슨 소리지...파일을 어떻게 보내지? 라는 생각이 들었다. Blob과 File 그리고 url 사이에서 무슨 소리지? 싶어서 찾아보았다.BlobBlob은 Binary Large Object의 약자로 주로 이미지, 오디오, 비디오와 같은 멀티미디어 파일 바이너리를 객체 형태로 저장한 것을 의미한다. 멀티미디어 파일들은 대다수 용량이 큰 경우가 많기 때문에, 이를 데이터베이스에 효과적으로 저장하기 위해 고안된 자료형이다. 이 Blob 객체는 blobpart와 optional type로 나누어져 있다. 먼저, blobpart는 Blob | BufferSource | String을 속성으로 지닌 값의 배열이다. optional t.. 2024. 7. 23. React 렌더링 사이클과 useEffect, 그리고 useRef ref와 useEffectuseEffect는 굉장히 섬세하다. 웬만해서는 사용해서는 안된다. 그런데, 이전에 구글 맵을 렌더링할 때, useEffect와 ref를 같이 사용함으로써, 예기치 못한 부작용들이 발생할 수 있었다. 이를 위해서 react의 trigger phase, render phase와 commit phase를 파고들어 보자.TLDR리액트 공식문서에서는 렌더링 과정을 다음과 같이 얘기한다.렌더링 트리거 (손님의 주문을 주방으로 전달)컴포넌트 렌더링 (주방에서 주문 준비하기)DOM에 커밋 (테이블에 주문한 요리 내놓기)렌더링 트리거렌더링 트리거란, 단순히 렌더링을 트리거하는 것이다. 렌더링 트리거가 왜 일어나는지에는 다음의 두 가지 이유가 있다.Initial render어떠한 동작(페이지 방.. 2024. 4. 25. 이전 1 다음
