React (8) 썸네일형 리스트형 React: axios interceptor를 통해 request, response를 미들웨어 처리 Axios.interceptors.request Axios.interceptors.response request를 보내는 첫 단계와, response를 받는 첫 단계에서axios interceptor를 통해 미들웨어처럼 로직 핸들링하기 - access token을 refresh token을 통해 자동으로 갱신하는 로직에 활용 (refresh token 또한 만료시에는 Home으로 redirect) // src/api.tsaxiosInstance.interceptors.request.use( (config) => { const {access_token, refresh_token, access_token_expire_at, refresh_token_expire_at} = store.getSt.. React: navigation을 Promise의 resolve로 넘겨서 사용하기 token을 새로 받는 경우에refreshToken이 만료되어 error가 발생 -> 특정 페이지로 redirect axios interceptor를 사용중에 있고, error 발생 후 window.location.href="/"을 통해 redirect를 하면,access token, refresh token 등을 redux store에서 지우는로그아웃 처리와 header에서 Authorization을 지웠음에도 남아 있는 현상 발생 + 페이지 전체 리로드시 리액트가 가지는 상태를 잃어버리는 단점-> navigation을 활용해서 페이지 리다이렉트 navigation을 사용하는데 추가적인 문제상황 * 훅 문법으로 axios request 함수 내에서 사용이 제약적 - navigate를 변수 생성하.. React: Component내의 element를 useRef를 통해 접근 및 값 변경 React는 Virtual Dom을 사용, getElementByID 등의 문법 사용은 비권장-> useRef를 통해 element를 접근 Component내에서 fetch한 data내의 array를 통해 forloop를 돌면서 useRef를 통해 해당 element에 접근하고, 그 값을 변경하는 예제 https://github.com/Junanjunan/g6_react/commit/3b64933392094484244e4a3b15e5a882f954041b React: React 프로덕션 모드로 localhost 실행 시키기 # strict mode React 프로젝트 개발 시 Strict Mode를 사용이 권장됨.Strict Mode는 프로덕션 모드에서는 해제됨.Strict Mode가 해제된 프로덕션 모드에서는 어떻게 동작하는지 궁금해서 local 에서 프로덕션 모드로 실행시켜보자 1. Build the Application작업한 react 프로젝트를 buildnpm run build 2. 프로덕션을 Serve할 package를 설치 및 실행 - serve 설치npm install -g serve - 실행 (port 지정시 -l 옵션)serve -s buildserve -s build -l 5000 React: useForm을 활용해서 다른 컴포넌트 간에 변수 주고 받는 예제 # useForm # watch # useFormContext # 파일 업로드 필요사항 API를 통해 글을 작성하고, 파일을 업로드를 한 화면에서 해야함글 작성의 request 양식은 application/json 이지만,파일 업로드의 request 양식은 multipart/form-data 으로 나눠져 있음 - 하나의 useForm에 파일 정보를 담지 않고 구분해서 사용 - 글 작성을 먼저 한 후 글의 id값을 받아서 파일을 업로드하는 방식으로 구현 -> Form내의 handleSubmit과 업로드 될 파일을 불러오는 로직을 분리 파일업로드와 관련된 부분을 리팩토링하여 별도로 빼두었기에, 컴포넌트간 변수를 주고, 그 값을 변화시켰을 때,변화된 값을 가진 변수를 받을 수 있어야 함 -> useState의 setState 부분을 활용 예제 커밋: https://github.c.. React: Strict mode # useEffect # useRef 아래는 StrictMode를 살리면서,useEffect를 통해 render 단계에서 commit 단계로 로직을 옮기고,useRef를 통해서 추가적으로 발생하는 중복 요청을 막는 예제 코드:(커밋 메시지에 구체적인 내용과 ChatGPT 설명을 추가함)https://github.com/Junanjunan/g6_react/commit/fc642472500d8e262bfd7b701243e8ed2c2c55f2 [add] Restore React.StrictMode with useEffect and useRef · Junanjunan/g6_react@fc64247StrictMode of React is recommended for robust development. When I need new tokens beca.. React: redux / react query react 사용시, 상태 관리를 위해 redux, react query 사용을 고려할 수 있다. redux는 클라이언트 쪽의 상태react query는 서버 쪽의 상태와 관련하여 상태관리를 돕는다. 클라이언트 내에서 관리되면 충분한 경우 redux,서버에서 데이터를 얻어와야 하나, 불필요한 중복 요청 등을 줄이기 위해 캐싱 기능등을 이용하려면 react query를 사용 redux, react query를 용도에 맞게 함께 사용할 수도 있지, 꼭 하나만 사용하는게 정답은 아니다. 아래 자세하게 설명하신 분의 블로그 글을 남긴다.https://teawon.github.io/react/react-query/ React: install project in ubuntu # Node.js # npm https://nodejs.org/en/download/package-manager/ Node.js — Download Node.js®Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org Nodejs, npm 설치Node 홈페이지에서 안내하는 사항중 fnm을 이용하는 경우# installs fnm (Fast Node Manager)curl -fsSL https://fnm.vercel.app/install | bash# download and install Node.jsfnm use --install-if-missing 20# verifies the right Node.js version is in the env.. 이전 1 다음