React 사용 설정하기 (esbuild) with TypeScript

# React 사용 설정하기 (esbuild) with TypeScript 우선 node.js 를 깔자. 그리고 프로젝트 폴더로 들어가서 (Terminal / Cmd) 에서 다음과 같은 명령어를 친다. (Bundler 로는 가장 빠르다고 알려진 esbuild 를 깔자.) ```[.linenums] npm init -y npm install --save-exact --save-dev esbuild npm install react react-dom jquery immer use-immer npm install typescript typescript@next @types/react @types/react-dom @types/jquery ts-loader @babel/preset-typescript --save-dev // type JQuery for $("#some-id .some-class") object. tsc --init ```/ 파일 package.json 이 잘 설정되어 있다면, ```[.linenums] npm install npm install --upgrade // 최신 버전으로 다시 깔기. ```/ 만 치면 알아서 다 깔리는듯? ## PH

• 2024-03-30 : First posting.

## TOC ## package.json ```[.linenums.lang-json] { "name": "user-page-tsx", "version": "1.0.0", "main": "index.js", "scripts": { "build": ".\\node_modules\\.bin\\esbuild .\\src\\index.js --loader:.js=jsx --bundle --minify --outfile=.\\dist\\esb-user-page-tsx.js", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "description": "", "devDependencies": { "@babel/preset-typescript": "^7.24.6", "@types/jquery": "^3.5.30", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "esbuild": "0.21.4", "ts-loader": "^9.5.1", "typescript": "^5.5.0-dev.20240601" }, "dependencies": { "immer": "^10.1.1", "jquery": "^3.7.1", "react": "^18.3.1", "react-dom": "^18.3.1", "use-immer": "^0.9.0" } } ```/ 위 세팅으로부터 아래와 같은 명령어를 쓸 수 있게 됨. ```[.linenums] npm run build npm run test ```/ ## RRA

1. nodejs.org
2. esbuild.github.io/ :: esbuild - An extremely fast bundler for the web
3. geundung.dev :: esbuild 기반 React Native 번들러 개발기
   // 토스 개발자로 알고 있음. 유튜브 링크도 있었던거 같긴 한데... Tree Shacking 도 지원하고 multi thread 로 돌아가서 esbuild 가 다른 bundler 보다 훨씬 빠르고 좋다는 결론.
4. react.dev/learn