전체 글

useRef를 이용해서 SearchResult라는 div 엘리먼트에 접근 document에 onCheckClickOutside함수를 가진 이벤트리스너를 달아준다. onCheckClickOutside 함수는 DropDown 메뉴가 열렸을때, searchRef에 이벤트가 주어지지 않을 때를 제외하고 전 영역을 클릭시 ​DropDown 메뉴가 닫힌다. const searchRef = useRef(null); const onReset = useCallback( () => { setSearchValue(''); setOpenDropdown(false); }, [], ); useEffect(() => { const onCheckClickOutside = (e:MouseEvent) => { //!searchRef.c..

목적 리덕스 툴킷은 표준화된 리덕스 로직을 작성하도록 의도되어졌습니다. 리덕스에 대한 세 가지 일반적인 우려를 처리하기 위해 만들어졌습니다. 리덕스 스토어를 구성하는데 너무 복잡하다. 리덕스를 유용하게 사용하기 위해서는 너무 많은 패키지들을 설치해야 한다. 리덕스는 너무 많은 보일러플레이트 코드를 필요로 한다. ConfigureStore configureStore()는 이제 createStore를 포함합니다. 그것은 자동적으로 분해된 리듀서들을 결합시켜줄 수 있습니다. 리덕스 미들웨어도 추가 할 수 있으며 redux-thunk 가 기본으로 포함되고 Redux Devtools Extension의 사용이 가능합니다. import {configureStore} from '@reduxjs/toolkit' imp..

리덕스를 사용하게 되면 어떤 시점에서 dispatch를 통해 리듀서에게 액션을 전달하게 된다. 그에 따라 리듀서는 state에 변화를 일으킨다. 하지만 추가적으로 브라우저에서 서버로 요청을 보내고 응답을 받을 때 즉 비동기적인 작업을 처리할 때를 생각해보아야 한다. 요청을 보내면 항상 100프로 응답이 성공적일 수는 없다. 실패할 수도 있다. 따라서 요청, 응답, 실패시에 따른 처리를 state에 처리해 줄 필요가 있다. 이를 통해 사용자에게 현재 어떤 상태에 있는지를 인지시킬 수 있기 떄문이다. (여기서 인지란 비동기작업이 진행중인지? 작업완료 되었는지? 실패했는지? 를 의미 ) 이때 사용할 수 있는 것이 Redux-Middleware이다. Middleware로 액션을 디스패치 하고 리듀서에서 바로 처..

쿠키의 필요성 요청에는 하나의 단점이 있다. 누가 요청을 보냈는지 모른다. 따라서 요청이 와도 서버는 누구에게 어떻게 응답을 해야할지 모른다. 그래서 쿠키(키=값)으로 누구에게서 요청이 왔는지 파악하여 응답할 수가 있다. 최초 브라우저에서 요청으로 서버에 접근했다면 서버는 응답을 보낼 것이다. 그때 응답으로 쿠키가 동봉된다. 그럼 브라우저에는 쿠키가 있을텐데 이후 요청때마다 쿠키와 함께 동봉되기 때문에 서버는 요청이 누구에게서 왔는지 알게 된다. node에서 쿠키 서버를 만들어보았다. node에서 서버를 만들고 쿠키를 직접 넣을 수가 있다. writeHead는 헤더에 무언가를 입력할 수 있는 메서드이다. {'Set-Cookie': 'mycookie=heedo'}를 통해 쿠키를 직접 넣어본다. const ..

일반적으로 자바스크립트 함수는 실행하면 함수 내부의 로직들이 순차적으로 작동하게 된다. 제너레이터 함수는 기본 함수에서 일시정지 같은 기능을 탑재하고 있다. function* generator(i) { yield i; yield i + 10; } const gen = generator(10); console.log(gen.next()); // expected output: 10 console.log(gen.next()); // expected output: 20 gen 이라는 상수는 generator 함수에 10이라는 인자 값을 전달해서 함수를 실행한다. 일반적인 함수의 관점에서 내부가 10 과 20이 된다는 것을 유추 할 수가 있다. 그렇지만 내부에서 한번에 10과 20이 나오지 않는다. gen.nex..

오류내용 an 타입스크립트 변환중에 sagaTask에서 에러 발생 Property 'sagaTask' does not exist on type 'Store & { dispatch: unknown; }'.ts(2339) 원인 sagaTask에 대한 타입정의가 존재하지 않는다는 에러 해결 redux.d.ts 파일을 만들어서 커스텀하여 sagaTask에 redux-saga에서 제공하는 Task를 타입으로 넣어준다. //redux.d.ts import 'redux'; import { Task } from 'redux-saga'; declare module 'redux' { export interface Store { sagaTask?: Task; } }