코딩 일지

목차 - axios interceptors 사용 시 장점 - JWT 토큰 요청 헤더에 넣어주는 법 - access, refresh token 만료 시 재발급 받기 - RN Hook에서 사용하는 법 Axios Interceptors를 사용하게 된 배경 및 장점 기존에는 api 요청을 보낼 때마다, 모든 요청에 JWT 토큰을 담은 header를 매번 넣어줬다. 개발 초기 단계일 땐 큰 문제가 없었지만, 유지보수와 업데이트를 하며 기능이 늘어 api 요청이 늘 때마다 중복된 코드가 계속해서 추가되었다. 100개가 넘어가는 api 요청 코드를 당장 뜯어고칠 수는 없었기에 현황을 유지했지만, 기존 코드는 JWT 토큰의 유효기간이 없다는 치명적인 단점이 존재했다...(100년이었으니 사실상 없는 거나 마찬가지) 이..

개념 useEffect란, 페이지가 맨 처음에 랜더링 될 때, 또는 변수의 값이 변경될 때 실행되는 함수이다. 클릭할 때마다 1씩 증가하는 간단한 버튼을 만들어보자. 예제 코드 App.js import Count from './Commponents/Count.jsx'; const App = () => { return ( useEffect ); } export default App; Count.jsx import React,{useState,useEffect} from 'react' const Count = () =>{ const [count, setCount] = useState(0) useEffect(()=>{ console.log(count) }) useEffect(()=>{ console.log('..

개념 React hook에서는 useState를 이용해서 간편하게 state값을 변경할 수 있다. const [num, setNumber] = useState(0) 위와 같은 형태로 사용한다. 배열 안에 들어가는 값은 첫번째 인자값은 값을 변화시킬 변수명, 두번째 인자값은 그 값을 변화 시키기 위해 사용할 함수명(?)이다. 두번째 인자값은 어느 값을 넣어도 코드 작동에는 문제가 없으나, 관용적으로 set + 첫번째 인자값(맨 앞글자 대문자) 형태로 사용한다. useState() { return ( useState ); } export default App; App.jsx import React,{useState} from 'react' const Hook = ()=>{ const [num, setNumb..

목차 - 훅이란? - 탄생 배경 - 종류 - 장점 훅(Hook)이란? Hook은 리액트 16.8 버전 이후 추가된 기능이며, Hook이 등장하면서 더 이상 상태를 관리하기 위해 Class를 쓸 필요가 없어졌다. 기존에는 Class형 컴포넌트에서만 상태를 관리 할 수 있었고, 함수형 컴포넌트에서는 상태를 관리할 수 없었지만, Hook을 통해 상태 관리를 할 수 있게 되었고, 상태 관리 뿐만 아니라 기존 클래스형 컴포넌트에서만 가능하던 여러 기능을 사용할 수 있게 되었다. Hook이 등장하기 전 리액트에는 여러 문제들이 있었다. 탄생배경 리액트 컴포넌트는 클래스형 컴포넌트(Class component)와 함수형 컴포넌트(Functional component)로 나뉜다. 기존의 개발방식은 일반적으로 함수형 컴..