따라서 하신다면 https://hippoman.tistory.com/14 이전 포스팅을 봐주세요. Web에서는 흔히 VirtualList 라고 부르며, 안드로이드에서는 RecyclerView, Recycle ListView 라고 한다. 왜 이런 VirutalList 등을 사용해야 하는지는 브라우저에 동작 방법을 이해하고 있다면, 쉽게 알 수 있습니다.(NAVER D2 참고!) 만약 Scroll에 Row에 해당되는 Dom이 20,000개 정도라면, 이걸 단순 화면에 for...문으로 그리면 정말 말도 안돼며, 최적화 한다고 500개씩 로드 했다(Lazy) 하더라도 그건 초기 그리는 속도만 향상될 뿐이지, 전체적인 성능에는 큰 도움이 되지 않습니다. 오늘은 Mobx 를 사용해서 이런 VirtualList 를..

현재 게시물은 이전 포스팅에 이어서 작성된 내용입니다. https://hippoman.tistory.com/13 Redux 를 실무에서 사용하다보면 Middleware에 기능을 상당히 많이 사용하게 됩니다. Middleware 를 많이 사용하는 이유는 간단하게 아래 Flowchart 구성대로면, Store 는 View 에게 전달하고, View는 다시 Action 을 호출한다. 즉, View = Controller 가 되는 대 참사가 됩니다. flowchart LR Action --> Dispatch --> Store --> View -->Action 매우 안좋은 코드 예 Redux Store 에 Login 정보가 변경되는 상태를 View 내부에서 useEffect를 이용해 상태를 확인해 다른 페이지로 변..

SPA 로 개발하면, page 등 이동시 데이터를 변경 해줘야하는 일이 많다. 물론 page state/params 등을 이용하면 간단하게 상태 등을 전달할 수 있지만, Redux가 있다면 훨씬 유용하게 사용할 수 있습니다. 이번 포스팅은 2번으로 놔눠 작성할 예정입니다. 현재 예제는 이전에 포스팅한 https://github.com/shingidad/hello-vite-react 를 기반으로 작성했습니다. CRA나 Vite 를 기반으로 작성되있습니다. yarn add react-router-dom connected-react-router typesafe-actions redux react-redux react-router yarn add history@^4.10.1 yarn add -D @types/r..

vite 이 cra 보다 빠른건 당연하다. 그 이유는 vite에 번들은 Esbuild 으로 개발되있기에 속도가 빠를 수 밖에 없다. STEP-1 : Project Init hello-vite 로 프로젝트를 만듭니다. npm init vite@latest hello-vite --template react-ts 결과 npx: 6개의 패키지를 2.587초만에 설치했습니다. Scaffolding project in /Users/kimdonghyun/Workspace/Private/2_Study/hello-vite... Done. Now run: cd hello-vite npm install npm run dev hello-vite 폴더로 이동 cd hello-vite STEP-2 : module Install ..