Web Frontend/Library

Axios의 Interceptoraxios의 interceptor는 요청의 응답을 가로챈 후 그 응답을 미리 처리할 수 있는 기능을 지원합니다.그렇기에 인가가 필요한 요청에서 401(Unauthorized) 에러가 발생하면 응답(에러)을 먼저 가로채서 토큰 Refresh를 진행하고, refresh된 토큰을 에러가 발생했던 요청의 헤더에 다시 넣어서 요청을 retry 할 수 있습니다.이러한 interceptor은 모든 요청과 응답에 대해 공통적인 작업을 수행할 수 있어 중복되는 코드를 없애며, 효율적인 인가 처리를 도와줍니다. 다음은 interceptor의 base 코드입니다.export const instance = axios.create({ baseURL: NEXT_PUBLIC_BASE_URL,});..

예전에 여러 스타일링 방식을 공부하며 Tailwind CSS를 접했던 적이 있습니다. 당시에는 Tailwind CSS를 보며 네이밍이 없는 CSS와 다소 지저분한 마크업 코드에서 거부감을 느꼈습니다. 그러나 최근에 여러 FE 채용공고를 보면서 많은 팀들이 사용 중인 것 같아 다시 관심을 가지게 되었고, 여러 Tailwind CSS 도입 후기 글을 읽으며 장단점을 파악하고, 이전에 Emotion JS로 스타일링 했던 프로젝트의 CSS를 Tailwind CSS로 마이그레이션 하며 공부하게 되었습니다. 그래서 오늘은 Tailwind CSS를 프로젝트에 적용하며 겪은 주관적인 후기를 알려드리려고 합니다.  Tailwind CSS란?Tailwind CSS는 Utility-First 컨셉의 CSS FrameWork..

React-hook-form을 통한 예외처리여러 개의 input tag를 사용하여 컴포넌트를 만들 때에는 보통 react-hook-form을 통해 예외처리를 합니다.import { useForm } from 'react-hook-form';const { register, handleSubmit } = useForm();return ( );위의 코드에서 만약 사용자가 이름을 12자 이상 작성했다면const onValid = (data) => { //do something};const inValid = (e) => { const name = e.name; if (name.type === 'maxLength') { console.log(..

Optimistic UI란우선 시작하기에 앞서 Optimistic UI의 개념에 대해 짚고 넘어가겠습니다 Optimistic UI는 서버의 응답을 기다리지 않고 즉시 UI적인 반응을 보이는 것입니다. 쉽게 말해서 서버에 응답이 이미 성공했을 것이라고 가정하고 UI를 그리는 방식을 일컫는 말이라는 것입니다. 어떤 요청이 높은 확률로 성공한다는 보장이 있을 때, 그 요청이 늦지 않은 시간 안에 응답이 온다는 보장이 있을 때 사용할 수 있는 UI라고 생각하시면 됩니다. 이러한 Optimistic UI를 이용하여 댓글 기능을 구현해 보겠습니다. 구현데이터 가져오기댓글 기능을 구현하기 위해선 우선 현재 댓글의 리스트를 조회해야 합니다. 이러한 상황에서는 주로 useQuery를 사용해 data를 fetching 할..