전체 글 (255) 썸네일형 리스트형 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를 변수 생성하.. Pydantic: Settings with BaseSettings # .env Pydantinc에서 제공하는 pydantic_settings.BaseSettings를 통해서, 환경설정 값들을 정할 수 있는데..env 파일이 없거나,개발환경에서만 쓰이거나 개인 프로젝트에서만 쓰이는 .env 파일 안에 있지 않은, 개별적인 설정 값들을 사용할 때 유용하게 쓸 수 있다. 설치: pip install pydantic-settings 아래와 같이 settings.py와 .env 파일이 있다고 하자.# settings.pyfrom pydantic_settings import BaseSettingsclass Settings(BaseSettings): ATTR_1 = "a" ATTR_2 = "b" # .envATTR_1 = "C" 프로그램 실행시 Settings의 ATTR_1 값은 .. 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.. C: bitmask forloop with enum 1, 2, 4, 8, 16... 과 같이 bitmask를 활용한 enum에서forloop를 '++' 연산 대신 ' #define TU_BIT(n) (1UL 1 KEYBOARD_MODIFIER_LEFTSHIFT = TU_BIT(1), // 1UL 2 KEYBOARD_MODIFIER_LEFTALT = TU_BIT(2), // 1UL 4 KEYBOARD_MODIFIER_LEFTGUI = TU_BIT(3), // 1UL 8 KEYBOARD_MODIFIER_RIGHTCTRL = TU_BIT(4), // 1UL 16 KEYBOARD_MODIFIER_RIGHTSHIFT = TU_BIT(5), // 1UL 32 KEYBOARD_MODIFIER_RIGHTALT.. 이전 1 ··· 5 6 7 8 9 10 11 ··· 32 다음