공부하자

API 요청을 할 때, 401 Unauthorized 응답이 오면 보통 액세스 토큰을 갱신(Refresh)하는 로직을 추가한다.이 과정에서 ky 라이브러리를 활용하면 beforeRetry 훅을 사용해 비교적 간결하게 구현할 수 있다. 일단 ky에서 제공하는 BeforeRetryHook을 살펴보면BeforeRetryHook에는 다음과 같은 타입이 정의되어 있다.👉 [ky 공식 문서](https://www.npmjs.com/package/ky#:~:text=users%27)%3B-,hooks.beforeRetry,-Type%3A%20Function)  kyTiny and elegant HTTP client based on the Fetch API. Latest version: 1.7.5, last publ..

데이터 통신에는 항상 axios만 사용해왔는데 요즘에는 오히려 fetch만 쓰는게 덜 무겁다는 의견도 많이 나오고 axios는 과하다는 이야기가 많아서 이번 프로젝트에서는 fetch 기반의 ky 라이브러리를 사용해서 데이터 통신을 해보고자 한다.ky란?https://www.npmjs.com/package/ky kyTiny and elegant HTTP client based on the Fetch API. Latest version: 1.7.5, last published: a day ago. Start using ky in your project by running `npm i ky`. There are 693 other projects in the npm registry using ky.www.npm..

문제 상황Dialog 컴포넌트와 버튼을 합쳐서 드롭다운 컴포넌트를 만들고 있었다.내가 만든 컴포넌트의 요구사항은 다음과 같다.버튼을 클릭하면 Dialog가 열림Dialog는 화면 여유 공간에 따라 버튼의 위나 아래에 위치스크롤/리사이즈 시에도 적절한 위치 유지핵심 구현을 위해 위치 계산이 필요했고 위치 계산에는 여러가지 방법이 있다.처음에는 그냥 순수하게 useEffect만 사용해 구현했다.useEffect(() => { if (isOpen && anchorEl && dialogRef.current) { const updatePosition = () => { // 1. 버튼의 위치 정보 가져오기 const buttonRect = anchorEl.getBoundingClientRe..

유어슈에서 만든 디자인 시스템인 handy를 기반으로 새 프로젝트에 쓰이는 컴포넌트를 만들기로 했다.그러다 handy right icon에 아이콘이 겹쳐 나타나는 문제가 생겼고 이를 해결하기 위한 과정과 삽질기(ㅠㅠ)를 공유하고자 한다. 문제 상황현재 handy라는 디자인 시스템을 사용하고 있는데 여기에서 BoxButton을 사용중이다.BoxButton 스토리북은 밑에 링크에서 확인 가능하다.http://handy-react-storybook.s3-website.ap-northeast-2.amazonaws.com/2.1.0/?path=/docs/components-boxbutton--docs이렇게 BoxButton에는 아이콘을 넣어서 사용할 수 있는데제목 그대로이런식으로 아이콘이 겹쳐서 나타나는 문제이다..