현재 게시물은 이전 포스팅에 이어서 작성된 내용입니다. 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를 이용해 상태를 확인해 다른 페이지로 변..

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