따라서 하신다면 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..

Typescript로 프로젝트를 만들면 tsc 속도가 마음에 들지 않고, esbuild 가 속도가 워낙 좋다보니 etcs 라는 패키지를 발견해서 적용해봤다. 프로젝트 주요 적용 사항 eslint prettier babel nodemon path alias 속도는 우선 너무 만족 스러웠다. 1. 기본 javascript 모듈만 사용후 싱글 파일로만 실행 import http from 'http'; const PORT = process.env.PORT || 3000; const server = http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello World'); }); serve..

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 ..

TypeScript Module 중 TypeORM 을 사용해서 개발하는 경우가 상당히 많다. 그러면 실제 Table에 Column 명은 Snake case로 입력해 Class 변수 명과 달라지는 경우가 있다. 그렇다고 Class 변수에 CamelCase 를 포기하는건 더욱 싫다. import { Column, CreateDateColumn, PrimaryColumn, UpdateDateColumn, } from 'typeorm'; export class Post { @PrimaryColumn() public id: string; @Column() public title: string; // 변수명은 `createdAt` column 명은 `created_at` @CreateDateColumn({ name..

개발자 일을 하다보면 문서 작성하는 일이 정말 많다.(MS Word, MS Excel, MS Project, MS PowerPoint... 등) Markdown(MD) 이 생기고 나서는 하루도 Markdown 을 사용하지 않는 일이 없을 정도로 매우 많다. Markdown 사랑합니다! 나중에 Markdown 으로 무엇을 할 수 있는지 자세히 포스팅 하겠습니다. 그중에서도 협업 중 로직에 대해서 공유할때,다이어그램은 필수 요소인데요. Markdown 내 코드 블럭에 mermaid-js 로 다이어 그램을 공유할 수 있습니다! 링크 : https://mermaid-js.github.io/ Redirecting to https://mermaid-js.github.io/mermaid/#/ mermaid-js.gi..

요즘 TypeScript 로 개발을 하다보니 주석에 타입을 세부적으로 하는 일이 많이 줄어 들었다. 하지만, 현재 서비스 중인 상태라면 TypeCheck 를 반영 하기에는 일정이 없고, 코드는 any 지옥 이라면 정말 힘들다. 이럴 경우에는 Javascript에 주석만 잘 쓰더라도 정말 좋아진다. 1. type /** * @type {Number} */ var hiNumber; // => number /** * @type {?Number} */ var hiMaybeNumber; // => undefined or number /** * @type {Array.} */ var arrayNumber; // => [number, number, number, ...] 2. typedef + type /** * @..

minikube start --driver=docker # result.... # 😄 Darwin 11.6 (arm64) 의 minikube v1.23.1 #✨ 기존 프로필에 기반하여 docker 드라이버를 사용하는 중 # 👍 minikube 클러스터의 minikube 컨트롤 플레인 노드를 시작하는 중 # 🚜 베이스 이미지를 다운받는 중 ... # 🔄 Restarting existing docker container for "minikube" ... # 🐳 쿠버네티스 v1.22.1 을 Docker 20.10.8 런타임으로 설치하는 중 # 🔎 Kubernetes 구성 요소를 확인... # ▪ Using image kubernetesui/metrics-scraper:v1.0.7 # ▪ Using image ..

User 확인 use mysql; select user, host from user; MySQL User 생성 CREATE USER '$USER'@'%' IDENTIFIED WITH mysql_native_password BY '$PASSWORD'; Super 권한 주기 GRANT ALL PRIVILEGES ON *.* TO '$USER'@'%' WITH GRANT OPTION; FLUSH PRIVILEGES;