개발자 하민아빠의 Dev & Money

지금까지 우리는 상태 관리(Redux)와 라우팅(React Router)을 통해 클라이언트(화면) 단의 뼈대를 튼튼하게 다졌습니다.특히 지난 9편엔 새로 고침에도 로그인이 유지되도록 하는 reudx-persist를 알아보기도 했습니다. 이제 진짜 데이터를 화면에 뿌려주기 위해 백엔드 서버와 통신(API 호출)을 할 차례입니다.보통 API 통신에는 axios 라이브러리를 많이 사용하시죠?그런데 실무에서는 컴포넌트마다 axios.get()을 하드코딩하며 매번 로그인 토큰(Access Token)을 손으로 집어넣지 않습니다.귀찮기도 하고, 토큰이 만료되었을 때(401 에러) 대처하기가 너무 힘들거든요. 오늘은 모든 API 요청과 응답의 '문지기' 역할을 하는 Axios 인터셉터(Interceptor)를 알아보..

지금까지 우리는 리액트의 필수 무기인 useState(상태 관리), useEffect(부수 효과), useRef(DOM 제어 및 저장소)를 모두 배웠습니다. 이 3가지만 완벽히 이해해도 리액트로 못 만들 기능은 거의 없다고 보셔도 됩니다. 그런데 실무에서 회원가입이나 로그인 폼(Form)을 만들다 보면 뭔가 단단히 잘못되어 가고 있다는 느낌을 받을 때가 있습니다.이메일, 비밀번호, 닉네임, 전화번호... 입력창이 늘어날수록 똑같은 형태의 useState와 onChange 함수를 무한정 복사&붙여넣기 하고 있는 내 자신을 발견하게 되거든요. "아, 이거 진짜 너무 비효율적인데? 코드 길어지는 것 좀 봐..." 이런 깊은 빡침(?)과 고민을 해결하기 위해 리액트가 준비한 기가 막힌 해결책, 바로 커스텀 훅(..