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

m.logPrint() is working!

<eq> and <eqq> tags are rendered to MathJax format, being enclosed by \ ( \ ) and \ [ \ ].

docuK1 scripts started!
If this log is not closed automatically, there must be an error somewhere in your document or scripts.

Table of Contents is filled out.

Auto numberings of sections (div.sec>h2, div.subsec>h3, div.subsubsec>h4), <eqq> tags, and <figure> tags are done.

<cite> and <refer> tags are rendered to show bubble reference.

<codeprint> tags are printed to corresponding <pre> tags, only when the tags exist in the document.


Current styles (dark/bright mode, font-family, font-size, line-height) are shown.

kakao.js with id="kakao-js-sdk" is loaded.

New ShortKeys (T: Table of Contents, F: Forward Section, D: Previous Section, L: To 전체목록/[Lists]) are set.

m.delayPad=512;
m.wait=1024;
wait 1115ms.

▼ Hide

Toggle a mess

Go (FS)

TofC

DocuK Log

Backward

Forward

RRA

Lists

CmtZ

CmtX

Handle CmtZ

Log in

▲

Go: Fuzzy search

out focus

[--The following is copied!--]

• Creative Commons
• 저작자표시 - 적절한 출처와, 해당 라이센스 링크를 표시하고, 변경이 있는 경우 공지해야 합니다. 합리적인 방식으로 이렇게 하면 되지만, 이용 허락권자가 귀하에게 권리를 부여한다거나 귀하의 사용을 허가한다는 내용을 나타내서는 안 됩니다.
• 비영리 - 이 저작물은 영리 목적으로 이용할 수 없습니다.
• 변경금지 - 이 저작물을 리믹스, 변형하거나 2차적 저작물을 작성하였을 경우 그 결과물을 공유할 수 없습니다.

이 글이 도움이 되셨다면, 광고 클릭 한번씩만 부탁드립니다 =ㅂ=ㅋ.
(If this article was helpful, please click the ad once. Thank you. ;)

Dark Bright

Mode: Bright; Font: Noto Sans KR; font-size: 18.0px (10.0); line-height: 1.6;
width: 1280, height: 720, version: 3.3.3
Canonical URI: https://kipid.tistory.com/entry/React-사용-설정하기-esbuild-with-TypeScript
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/333
document.referrer: Empty

This document is rendered by docuK (See also SEE (Super Easy Edit) of docuK and pure SEE).

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

우선 node.js

[01]

Ref. [01] nodejs.org

를 깔자. 그리고 프로젝트 폴더로 들어가서 (Terminal / Cmd) 에서 다음과 같은 명령어를 친다. (Bundler 로는 가장 빠르다고 알려진 esbuild

[02]

Ref. [02] esbuild.github.io/ :: esbuild - An extremely fast bundler for the web

[03]

Ref. [03] geundung.dev :: esbuild 기반 React Native 번들러 개발기
// 토스 개발자로 알고 있음. 유튜브 링크도 있었던거 같긴 한데... Tree Shacking 도 지원하고 multi thread 로 돌아가서 esbuild 가 다른 bundler 보다 훨씬 빠르고 좋다는 결론.

를 깔자.)

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 이 잘 설정되어 있다면,

npm install

npm install --upgrade
// 최신 버전으로 다시 깔기.

만 치면 알아서 다 깔리는듯?

TPH1.Posting History

▼ Show/Hide

• 2024-03-30 : First posting.

▲ Hide

Table of Contents

PH1.Posting History

1.package.json

RRA1.References and Related Articles

T1.package.json

▼ Show/Hide

{
  "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"
  }
}

위 세팅으로부터 아래와 같은 명령어를 쓸 수 있게 됨.

npm run build

npm run test

▲ Hide

TRRA1.References and Related Articles

▼ Show/Hide

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

▲ Hide

Toggle a mess

* 홍보/Promoting Recoeve.net (3S | Slow/Sexy/Sincere SNS)

유튜브 음악, K-Pop MV 들을 광고없이 목록재생 해서 보세요.
접속하셔서 가입 후 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.

Cat=[Music/Break]--K-Pop of kipid's Recoeve.net

Toggle a mess

이 글이 도움이 되셨다면, 광고 클릭 한번씩만 부탁드립니다 =ㅂ=ㅋ.
(If this article was helpful, please click the ad once. Thank you. ;)