코드메모장

흔히 Redux 와 Vuex 에서 사용하는 디자인패턴이다. 등장배경 MVC (Model, View, Controller) 패턴의 단점을 보완하고 대규모 애플리케이션에서 데이터 흐름을 일관성 있게 관리함으로써 프로그램의 예측가능성을 높이기위함 구조 Action 사용자 측에서 Action의 Type 과 새로운 데이터 payload 를 묶어서 dispatcher 에 전달하는 역할 Dispatcher 데이터들의 중앙허브 라고 할 수있다. Dispatcher는 들어오는 Action 객체 정보를 받아 실제로 어떤 행동을 할지 결정하는 곳이다. React Hook 중 useReducer 로 간단하게 dispatcher 를 사용할 수 있다. Store Store는 애플리케이션의 모든 상태와 관련 로직을 가지고 있다. ..

유투브 api 를 이용해서 프로젝트를 진행중이였다 동영상 리스트를 조회해오는 api 안에 동영상을 게시한 채널의 id는 있지만 채널img 정보가 없기때문에 동영상리스트 api 를 호출 후 받아온 동영상 id 들로 채널정보 api 를 호출한뒤 기존 동영상리스트 api data 에 채널 img 정보를 넣어야 했다. 초기 랜더링시 한번 실행된다. 문제는 초기랜더링이후 두번째 검색때부터 발생한다 호출부 getVideoSearch 라는 이름의 동영상리스트 api 를 호출하고 받아온 response 로 채널의 정보를 가져오는 api 를 호출한다 (unwrap()을 사용하면 redux 의 리턴값을 받을수있다) 동영상 list 를 받아오는 api 이다. 동영상 리스트에서 추출해낸 id 를 직렬화시켜서 채널 정보를 받아..

기존에 만들어놨던 react project 를 RTK 로 마이그레이션 하는도중 딸기우유가 떴다 에러를 직역하자면 'payload.headers' 경로의 작업에서 직렬화할 수 없는 값이 감지되었습니다' Redux 핵심 원칙중 직렬화(serializable) 원칙이 있다. 직렬화할 수 없는 값을 state, action 에 넣지 말아야 한다. 직렬화를 할수없는 값을 넣어도 저장은 되긴하지만 위처럼 redux-devtools에서 에러를 뱉어낸다. react-devtools 혹은 다른 redux 미들웨어들을 사용할때 오류를 감당할 자신이 있으면 non-serializable 타입의 데이터를 저장해도 된다. ( = 하지말라는뜻 ) 나는 직렬화되지않을 값을 return 해주고있었다. extraReducers 를 작..

React.ChangeEvent – onChange 이벤트 등에 사용 React.MouseEvent – onClick 이벤트 등에 사용 React.KeyboardEvent – onKeydown, onKeyup 이벤트 등에 사용 React.FormEvent – 태그의 onSubmit 등에 사용 사용예제 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement

FC : function Components // FC 를 쓰면 props 안의 chilren 을 쉽게 사용할 수 있다. // 제네릭까지쓰면 FC 에 들어있는 chilren 과 들어올 props 의 타입을 같이 사용가능하다. // 하지만 좋은 방법은 아니라고한다. // 그 이유는 사용하지 않는 children 을 암시적으로 가지고 있다고 추정 하기때문에 안티 패턴이다. // react 18v 부터는 FC의 암시적인 children이 삭제되었다고한다. 그러면 쓸 이유가 더더욱 줄어든다. app.tsx Todos 컴포넌트에 아이들이라는 children 을 내려주고있다. FC 를 사용하면 children 을 암시적으로 갖고있어서 타입설정을 안해줘도 된다고 알고있었는데 에러가 난다. 아마 리액트 18버전부터 변..

컴포넌트를 라우트로 이동시킬때 초기에 컴포넌트를 다 받아오는것이 아닌 해당컴포넌트에서 route 를 불러올때만 임포트 시키도록 하는 레이지로딩 방식이다 사용할 컴포넌트를 React.lazy 에 담아서 변수로 받아온다 React 에서 제공하는 Suspense 를 이용해서 lazy 로 감싼 컴포넌트를 route element 에 넣는다 컴포넌트를 받아오는동안 fallback 을 이용해서 원하는 것을 화면에 노출시킬수있다

axios 로 api 를 요청할때마다 interceptors 를 이용해서 store 의 값을 변경하고싶다 axios 설치 npm i axios axios 를 설정해주는 index.js 사실별거없다 그냥 baseURL 설정해주고 헤더 설정을 해주는정도 setUpInterceptors.js 인수로 store 를 받고 그 store 를 이용해서 사용한다. src/index.js 프로젝트가 랜더링 될때마다 만든 setUpInterceptors.js 에 store 를 넣어서 생성한다. 이렇게 설정하면 axios 로 만든 API 라는 함수를 이용해서 API 요청을 보내면 응답이 올때마다 store 에 만들어놓은 store.dipatch(cartActions.test()) 가 실행되게 된다.

useReducer 는 useState의 고급버전이라고 생각하면 될것같다. useState 에서 리액트 상태 업데이트순서 문제라던지 변경돼야하는 useState 를 다른 여러개의 state 를 이용해야할때 또는 여러개의 state를 관리하고 싶을때 사용한다 ( 여러개의 state 상태 스냅샷이 독립적일때 ) 사용법은 Redux 에서 reducer 를 사용하듯 action 으로 분기처리하면서 사용한다

만약 ip 또는 pw 의 input 에 타이핑을할때마다 api 호출을 해야되는 상황이라면 input 에 onChange 될때마다 api 호출하는것이 아닌 어느정도 타이핑을 기다린후 사용자가 타이핑을 멈췄을때 api 를 호출하는것이 디바운싱 기능이다. 디바운싱의 의미는 디바운싱(Debouncing) : 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로, 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용되곤 한다. 아래는 로그인을 할때 디바운싱을 통한 간단한 id,pw 의 검증 예제이다. email 과 password 가 바뀔때마다 useEffect가 실행되는데 setTimeout 을 주어서 0.5초 안에 useEffect가 실행되면 cleanUp 시켜버린다. 디바운싱과..

Modal 은 구조적의미상으로도 그렇고 react 랜더링 상으로도 (modal 에 백그라운드가 있을경우 겹치거나 중첩되면 정상적인 오버레이로 인식못할수있음) 엘리먼트들 사이에서 랜더링 되기보단 별로 상위 엘리먼트에서 동작해야 한다 index.html 에 지정하고싶은 위치에 id 로 엘리먼트를 만든다. 예제 1) ReactDom 을 import 해온후 그안에 createPortal(보낼컴포넌트,보낼위치) 를 사용하면 된다. 예제 2)