프론트엔드 관련/기초4 React Router Path AutoComplete with type-safety 리액트 라우터 경로 자동 완성 및 경로 안정성서론이 글을 쓰게 된 계기는 우연에서 시작되었다.기술 블로그를 돌아다니다가 이 글을 보고 경로 자동완성에 대해 생각해보았다. rjw0907 (R정우) / 작성글 - velog시행착오를 즐기는 프론트엔드 개발자입니다!velog.io 처음 글을 봤을 때에는 대단하다고 생각이 들었다.그러나 바로 이해가 되지 않는 부분도 있었고, 좀 더 개선의 여지가 없을까 많이 고심하게 되었다.사실 이전에 해왔던 프로젝트에는 경로 자동완성은 커녕, 타입 안정성조차 존재하지 않았다.사용자를 네비게이트 시켜야하는 경우, 단순히 수기로 하듯이 그냥 직접 경로를 작성하였다.이로 인해 라우트 경로를 바꾸면 전부 수정해야하는데 위치도 제대로 모르게 되는 곳이 태반이었고, 이는 일말의 여지도 .. 2025. 4. 10. [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 다음
