diff --git a/week01/.gitignore b/week01/.gitignore new file mode 100644 index 0000000..ec899fd --- /dev/null +++ b/week01/.gitignore @@ -0,0 +1,34 @@ +# dependencies (bun install) +node_modules + +# output +out +dist +*.tgz + +# code coverage +coverage +*.lcov + +# logs +logs +_.log +report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json + +# dotenv environment variable files +.env +.env.development.local +.env.test.local +.env.production.local +.env.local + +# caches +.eslintcache +.cache +*.tsbuildinfo + +# IntelliJ based IDEs +Andy/.idea + +# Finder (MacOS) folder config +.DS_Store diff --git a/week01/.idea/modules.xml b/week01/.idea/modules.xml new file mode 100644 index 0000000..42358e3 --- /dev/null +++ b/week01/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/week01/.idea/workspace.xml b/week01/.idea/workspace.xml new file mode 100644 index 0000000..391dfb9 --- /dev/null +++ b/week01/.idea/workspace.xml @@ -0,0 +1,137 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { + "lastFilter": { + "state": "OPEN", + "assignee": "AndyH0ng" + } +} + { + "selectedUrlAndAccountId": { + "url": "https://github.com/AndyH0ng/react-study.git", + "accountId": "bdb3ba55-51fa-4a5b-82fb-8cf70e5607e6" + } +} + { + "associatedIndex": 3 +} + + + + { + "keyToString": { + "ModuleVcsDetector.initialDetectionPerformed": "true", + "RunOnceActivity.ShowReadmeOnStart": "true", + "RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager.252": "true", + "RunOnceActivity.git.unshallow": "true", + "RunOnceActivity.typescript.service.memoryLimit.init": "true", + "git-widget-placeholder": "main", + "javascript.preferred.runtime.type.id": "bun", + "last_opened_file_path": "/opt/homebrew/bin/bun", + "node.js.detected.package.eslint": "true", + "node.js.selected.package.eslint": "(autodetect)", + "nodejs_interpreter_path": "/opt/homebrew/bin/bun", + "nodejs_package_manager_path": "bun", + "settings.editor.selected.configurable": "io.github.pandier.intellijdiscordrp.settings.DiscordSettingsConfigurable", + "ts.external.directory.path": "/Applications/WebStorm.app/Contents/plugins/javascript-plugin/jsLanguageServicesImpl/external", + "vue.rearranger.settings.migration": "true" + } +} + + + + + + + + + + + + + + + 1772945183922 + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/week01/Andy/CLAUDE.md b/week01/Andy/CLAUDE.md new file mode 100644 index 0000000..764c1dd --- /dev/null +++ b/week01/Andy/CLAUDE.md @@ -0,0 +1,106 @@ + +Default to using Bun instead of Node.js. + +- Use `bun ` instead of `node ` or `ts-node ` +- Use `bun test` instead of `jest` or `vitest` +- Use `bun build ` instead of `webpack` or `esbuild` +- Use `bun install` instead of `npm install` or `yarn install` or `pnpm install` +- Use `bun run + + +``` + +With the following `frontend.tsx`: + +```tsx#frontend.tsx +import React from "react"; +import { createRoot } from "react-dom/client"; + +// import .css files directly and it works +import './index.css'; + +const root = createRoot(document.body); + +export default function Frontend() { + return

Hello, world!

; +} + +root.render(); +``` + +Then, run index.ts + +```sh +bun --hot ./index.ts +``` + +For more information, read the Bun API docs in `node_modules/bun-types/docs/**.mdx`. diff --git a/week01/Andy/build.ts b/week01/Andy/build.ts new file mode 100644 index 0000000..51780d0 --- /dev/null +++ b/week01/Andy/build.ts @@ -0,0 +1,160 @@ +#!/usr/bin/env bun +import plugin from "bun-plugin-tailwind"; +import { existsSync } from "fs"; +import { rm } from "fs/promises"; +import path from "path"; + +if (process.argv.includes("--help") || process.argv.includes("-h")) { + console.log(` +🏗️ Bun Build Script + +Usage: bun run build.ts [options] + +Common Options: + --outdir Output directory (default: "dist") + --minify Enable minification (or --minify.whitespace, --minify.syntax, etc) + --sourcemap Sourcemap type: none|linked|inline|external + --target Build target: browser|bun|node + --format Output format: esm|cjs|iife + --splitting Enable code splitting + --packages Package handling: bundle|external + --public-path Public path for assets + --env Environment handling: inline|disable|prefix* + --conditions Package.json export conditions (comma separated) + --external External packages (comma separated) + --banner Add banner text to output + --footer Add footer text to output + --define Define global constants (e.g. --define.VERSION=1.0.0) + --help, -h Show this help message + +Example: + bun run build.ts --outdir=dist --minify --sourcemap=linked --external=react,react-dom +`); + process.exit(0); +} + +const toCamelCase = (str: string): string => str.replace(/-([a-z])/g, (_, letter: string) => letter.toUpperCase()); + +const parseValue = (value: string): any => { + if (value === "true") return true; + if (value === "false") return false; + + if (/^\d+$/.test(value)) return parseInt(value, 10); + if (/^\d*\.\d+$/.test(value)) return parseFloat(value); + + if (value.includes(",")) return value.split(",").map(v => v.trim()); + + return value; +}; + +function parseArgs(): Partial { + const config: Record = {}; + const args = process.argv.slice(2); + + for (let i = 0; i < args.length; i++) { + const arg = args[i]; + if (arg === undefined) continue; + if (!arg.startsWith("--")) continue; + + if (arg.startsWith("--no-")) { + const key = toCamelCase(arg.slice(5)); + config[key] = false; + continue; + } + + if (!arg.includes("=") && (i === args.length - 1 || args[i + 1]?.startsWith("--"))) { + const key = toCamelCase(arg.slice(2)); + config[key] = true; + continue; + } + + let key: string; + let value: string; + + if (arg.includes("=")) { + [key, value] = arg.slice(2).split("=", 2) as [string, string]; + } else { + key = arg.slice(2); + value = args[++i] ?? ""; + } + + key = toCamelCase(key); + + if (key.includes(".")) { + const parts = key.split("."); + if (parts.length > 2) { + console.warn( + `Warning: Deeply nested option "${key}" is not supported. Only single-level nesting (e.g., --minify.whitespace) is allowed.`, + ); + continue; + } + const parentKey = parts[0]!; + const childKey = parts[1]!; + const existing = config[parentKey]; + if (typeof existing !== "object" || existing === null || Array.isArray(existing)) { + config[parentKey] = {}; + } + (config[parentKey] as Record)[childKey] = parseValue(value); + } else { + config[key] = parseValue(value); + } + } + + return config as Partial; +} + +const formatFileSize = (bytes: number): string => { + const units = ["B", "KB", "MB", "GB"]; + let size = bytes; + let unitIndex = 0; + + while (size >= 1024 && unitIndex < units.length - 1) { + size /= 1024; + unitIndex++; + } + + return `${size.toFixed(2)} ${units[unitIndex]}`; +}; + +console.log("\n🚀 Starting build process...\n"); + +const cliConfig = parseArgs(); +const outdir = cliConfig.outdir || path.join(process.cwd(), "dist"); + +if (existsSync(outdir)) { + console.log(`🗑️ Cleaning previous build at ${outdir}`); + await rm(outdir, { recursive: true, force: true }); +} + +const start = performance.now(); + +const entrypoints = [...new Bun.Glob("**.html").scanSync("src")] + .map(a => path.resolve("src", a)) + .filter(dir => !dir.includes("node_modules")); +console.log(`📄 Found ${entrypoints.length} HTML ${entrypoints.length === 1 ? "file" : "files"} to process\n`); + +const result = await Bun.build({ + entrypoints, + outdir, + plugins: [plugin], + minify: true, + target: "browser", + sourcemap: "linked", + define: { + "process.env.NODE_ENV": JSON.stringify("production"), + }, + ...cliConfig, +}); + +const end = performance.now(); + +const outputTable = result.outputs.map(output => ({ + File: path.relative(process.cwd(), output.path), + Type: output.kind, + Size: formatFileSize(output.size), +})); + +console.table(outputTable); +const buildTime = (end - start).toFixed(2); + +console.log(`\n✅ Build completed in ${buildTime}ms\n`); diff --git a/week01/Andy/bun-env.d.ts b/week01/Andy/bun-env.d.ts new file mode 100644 index 0000000..72f1c26 --- /dev/null +++ b/week01/Andy/bun-env.d.ts @@ -0,0 +1,17 @@ +// Generated by `bun init` + +declare module "*.svg" { + /** + * A path to the SVG file + */ + const path: `${string}.svg`; + export = path; +} + +declare module "*.module.css" { + /** + * A record of class names to their corresponding CSS module classes + */ + const classes: { readonly [key: string]: string }; + export = classes; +} diff --git a/week01/Andy/bun.lock b/week01/Andy/bun.lock new file mode 100644 index 0000000..de2b123 --- /dev/null +++ b/week01/Andy/bun.lock @@ -0,0 +1,71 @@ +{ + "lockfileVersion": 1, + "configVersion": 1, + "workspaces": { + "": { + "name": "bun-react-template", + "dependencies": { + "bun-plugin-tailwind": "^0.1.2", + "react": "^19", + "react-dom": "^19", + "tailwindcss": "^4.1.11", + }, + "devDependencies": { + "@types/bun": "latest", + "@types/react": "^19", + "@types/react-dom": "^19", + }, + }, + }, + "packages": { + "@oven/bun-darwin-aarch64": ["@oven/bun-darwin-aarch64@1.3.10", "", { "os": "darwin", "cpu": "arm64" }, "sha512-PXgg5gqcS/rHwa1hF0JdM1y5TiyejVrMHoBmWY/DjtfYZoFTXie1RCFOkoG0b5diOOmUcuYarMpH7CSNTqwj+w=="], + + "@oven/bun-darwin-x64": ["@oven/bun-darwin-x64@1.3.10", "", { "os": "darwin", "cpu": "x64" }, "sha512-Nhssuh7GBpP5PiDSOl3+qnoIG7PJo+ec2oomDevnl9pRY6x6aD2gRt0JE+uf+A8Om2D6gjeHCxjEdrw5ZHE8mA=="], + + "@oven/bun-darwin-x64-baseline": ["@oven/bun-darwin-x64-baseline@1.3.10", "", { "os": "darwin", "cpu": "x64" }, "sha512-w1gaTlqU0IJCmJ1X+PGHkdNU1n8Gemx5YKkjhkJIguvFINXEBB5U1KG82QsT65Tk4KyNMfbLTlmy4giAvUoKfA=="], + + "@oven/bun-linux-aarch64": ["@oven/bun-linux-aarch64@1.3.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-OUgPHfL6+PM2Q+tFZjcaycN3D7gdQdYlWnwMI31DXZKY1r4HINWk9aEz9t/rNaHg65edwNrt7dsv9TF7xK8xIA=="], + + "@oven/bun-linux-aarch64-musl": ["@oven/bun-linux-aarch64-musl@1.3.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-Ui5pAgM7JE9MzHokF0VglRMkbak3lTisY4Mf1AZutPACXWgKJC5aGrgnHBfkl7QS6fEeYb0juy1q4eRznRHOsw=="], + + "@oven/bun-linux-x64": ["@oven/bun-linux-x64@1.3.10", "", { "os": "linux", "cpu": "x64" }, "sha512-bzUgYj/PIZziB/ZesIP9HUyfvh6Vlf3od+TrbTTyVEuCSMKzDPQVW/yEbRp0tcHO3alwiEXwJDrWrHAguXlgiQ=="], + + "@oven/bun-linux-x64-baseline": ["@oven/bun-linux-x64-baseline@1.3.10", "", { "os": "linux", "cpu": "x64" }, "sha512-oqvMDYpX6dGJO03HgO5bXuccEsH3qbdO3MaAiAlO4CfkBPLUXz3N0DDElg5hz0L6ktdDVKbQVE5lfe+LAUISQg=="], + + "@oven/bun-linux-x64-musl": ["@oven/bun-linux-x64-musl@1.3.10", "", { "os": "linux", "cpu": "x64" }, "sha512-poVXvOShekbexHq45b4MH/mRjQKwACAC8lHp3Tz/hEDuz0/20oncqScnmKwzhBPEpqJvydXficXfBYuSim8opw=="], + + "@oven/bun-linux-x64-musl-baseline": ["@oven/bun-linux-x64-musl-baseline@1.3.10", "", { "os": "linux", "cpu": "x64" }, "sha512-/hOZ6S1VsTX6vtbhWVL9aAnOrdpuO54mAGUWpTdMz7dFG5UBZ/VUEiK0pBkq9A1rlBk0GeD/6Y4NBFl8Ha7cRA=="], + + "@oven/bun-windows-aarch64": ["@oven/bun-windows-aarch64@1.3.10", "", { "os": "win32", "cpu": "arm64" }, "sha512-GXbz2swvN2DLw2dXZFeedMxSJtI64xQ9xp9Eg7Hjejg6mS2E4dP1xoQ2yAo2aZPi/2OBPAVaGzppI2q20XumHA=="], + + "@oven/bun-windows-x64": ["@oven/bun-windows-x64@1.3.10", "", { "os": "win32", "cpu": "x64" }, "sha512-qaS1In3yfC/Z/IGQriVmF8GWwKuNqiw7feTSJWaQhH5IbL6ENR+4wGNPniZSJFaM/SKUO0e/YCRdoVBvgU4C1g=="], + + "@oven/bun-windows-x64-baseline": ["@oven/bun-windows-x64-baseline@1.3.10", "", { "os": "win32", "cpu": "x64" }, "sha512-gh3UAHbUdDUG6fhLc1Csa4IGdtghue6U8oAIXWnUqawp6lwb3gOCRvp25IUnLF5vUHtgfMxuEUYV7YA2WxVutw=="], + + "@types/bun": ["@types/bun@1.3.10", "", { "dependencies": { "bun-types": "1.3.10" } }, "sha512-0+rlrUrOrTSskibryHbvQkDOWRJwJZqZlxrUs1u4oOoTln8+WIXBPmAuCF35SWB2z4Zl3E84Nl/D0P7803nigQ=="], + + "@types/node": ["@types/node@25.3.5", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-oX8xrhvpiyRCQkG1MFchB09f+cXftgIXb3a7UUa4Y3wpmZPw5tyZGTLWhlESOLq1Rq6oDlc8npVU2/9xiCuXMA=="], + + "@types/react": ["@types/react@19.2.14", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w=="], + + "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="], + + "bun": ["bun@1.3.10", "", { "optionalDependencies": { "@oven/bun-darwin-aarch64": "1.3.10", "@oven/bun-darwin-x64": "1.3.10", "@oven/bun-darwin-x64-baseline": "1.3.10", "@oven/bun-linux-aarch64": "1.3.10", "@oven/bun-linux-aarch64-musl": "1.3.10", "@oven/bun-linux-x64": "1.3.10", "@oven/bun-linux-x64-baseline": "1.3.10", "@oven/bun-linux-x64-musl": "1.3.10", "@oven/bun-linux-x64-musl-baseline": "1.3.10", "@oven/bun-windows-aarch64": "1.3.10", "@oven/bun-windows-x64": "1.3.10", "@oven/bun-windows-x64-baseline": "1.3.10" }, "os": [ "linux", "win32", "darwin", ], "cpu": [ "x64", "arm64", ], "bin": { "bun": "bin/bun.exe", "bunx": "bin/bunx.exe" } }, "sha512-S/CXaXXIyA4CMjdMkYQ4T2YMqnAn4s0ysD3mlsY4bUiOCqGlv28zck4Wd4H4kpvbekx15S9mUeLQ7Uxd0tYTLA=="], + + "bun-plugin-tailwind": ["bun-plugin-tailwind@0.1.2", "", { "peerDependencies": { "bun": ">=1.0.0" } }, "sha512-41jNC1tZRSK3s1o7pTNrLuQG8kL/0vR/JgiTmZAJ1eHwe0w5j6HFPKeqEk0WAD13jfrUC7+ULuewFBBCoADPpg=="], + + "bun-types": ["bun-types@1.3.10", "", { "dependencies": { "@types/node": "*" } }, "sha512-tcpfCCl6XWo6nCVnpcVrxQ+9AYN1iqMIzgrSKYMB/fjLtV2eyAVEg7AxQJuCq/26R6HpKWykQXuSOq/21RYcbg=="], + + "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="], + + "react": ["react@19.2.4", "", {}, "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ=="], + + "react-dom": ["react-dom@19.2.4", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.4" } }, "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ=="], + + "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="], + + "tailwindcss": ["tailwindcss@4.2.1", "", {}, "sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw=="], + + "undici-types": ["undici-types@7.18.2", "", {}, "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="], + } +} diff --git a/week01/Andy/bunfig.toml b/week01/Andy/bunfig.toml new file mode 100644 index 0000000..8877354 --- /dev/null +++ b/week01/Andy/bunfig.toml @@ -0,0 +1,4 @@ + +[serve.static] +plugins = ["bun-plugin-tailwind"] +env = "BUN_PUBLIC_*" \ No newline at end of file diff --git a/week01/Andy/package.json b/week01/Andy/package.json new file mode 100644 index 0000000..94c15aa --- /dev/null +++ b/week01/Andy/package.json @@ -0,0 +1,22 @@ +{ + "name": "bun-react-template", + "version": "0.1.0", + "private": true, + "type": "module", + "scripts": { + "dev": "node_modules/.bin/bun --hot src/index.ts", + "start": "NODE_ENV=production bun src/index.ts", + "build": "node_modules/.bin/bun run build.ts" + }, + "dependencies": { + "bun-plugin-tailwind": "^0.1.2", + "react": "^19", + "react-dom": "^19", + "tailwindcss": "^4.1.11" + }, + "devDependencies": { + "@types/react": "^19", + "@types/react-dom": "^19", + "@types/bun": "latest" + } +} diff --git a/week01/Andy/src/App.tsx b/week01/Andy/src/App.tsx new file mode 100644 index 0000000..7558dd4 --- /dev/null +++ b/week01/Andy/src/App.tsx @@ -0,0 +1,134 @@ +import { useState } from "react"; +import "./index.css"; + +import { Step1_Monolithic } from "./todo/Step1_Monolithic.tsx"; +import { Step2_PresentationalContainer } from "./todo/Step2_PresentationalContainer.tsx"; +import { Step3_CustomHook } from "./todo/Step3_CustomHook.tsx"; +import { Step4_CompoundComponent } from "./todo/Step4_CompoundComponent.tsx"; +import { MyPractice } from "./practice/MyPractice.tsx"; + +const STEPS = [ + { + id: 1, + label: "Step 1", + title: "Monolithic", + desc: "UI + 상태 + 로직이 한 컴포넌트에", + component: Step1_Monolithic, + color: "yellow", + }, + { + id: 2, + label: "Step 2", + title: "Presentational / Container", + desc: "UI 컴포넌트와 데이터 컨테이너 분리", + component: Step2_PresentationalContainer, + color: "blue", + }, + { + id: 3, + label: "Step 3", + title: "Custom Hook", + desc: "Container를 Hook으로 대체", + component: Step3_CustomHook, + color: "green", + }, + { + id: 4, + label: "Step 4", + title: "Compound Component", + desc: "Context + 서브컴포넌트로 구조 제어", + component: Step4_CompoundComponent, + color: "purple", + }, + { + id: 5, + label: "실습", + title: "내 실습", + desc: "src/practice/MyPractice.tsx 에서 직접 작성", + component: MyPractice, + color: "orange", + }, +] as const; + +type StepColor = (typeof STEPS)[number]["color"]; + +const COLOR_MAP: Record = { + yellow: { + tab: "hover:border-yellow-500/50 hover:text-yellow-300", + active: "border-yellow-500 text-yellow-300 bg-yellow-500/10", + dot: "bg-yellow-400", + }, + blue: { + tab: "hover:border-blue-500/50 hover:text-blue-300", + active: "border-blue-500 text-blue-300 bg-blue-500/10", + dot: "bg-blue-400", + }, + green: { + tab: "hover:border-green-500/50 hover:text-green-300", + active: "border-green-500 text-green-300 bg-green-500/10", + dot: "bg-green-400", + }, + purple: { + tab: "hover:border-purple-500/50 hover:text-purple-300", + active: "border-purple-500 text-purple-300 bg-purple-500/10", + dot: "bg-purple-400", + }, + orange: { + tab: "hover:border-orange-500/50 hover:text-orange-300", + active: "border-orange-500 text-orange-300 bg-orange-500/10", + dot: "bg-orange-400", + }, +}; + +export function App() { + const [activeStep, setActiveStep] = useState(1); + + const current = STEPS.find((s) => s.id === activeStep)!; + const ActiveComponent = current.component; + + return ( +
+ {/* Header */} +
+

Compound Component 실습

+

+ SRP → Presentational/Container → Custom Hook → Compound Component +

+
+ + {/* Step Tabs */} +
+ {STEPS.map((step) => { + const colors = COLOR_MAP[step.color]; + const isActive = step.id === activeStep; + return ( + + ); + })} +
+ + {/* Step Description */} +
+

{current.desc}

+
+ + {/* Content */} + +
+ ); +} + +export default App; diff --git a/week01/Andy/src/frontend.tsx b/week01/Andy/src/frontend.tsx new file mode 100644 index 0000000..c7e61bc --- /dev/null +++ b/week01/Andy/src/frontend.tsx @@ -0,0 +1,20 @@ +/** + * This file is the entry point for the React app, it sets up the root + * element and renders the App component to the DOM. + * + * It is included in `src/index.html`. + */ + +import { createRoot } from "react-dom/client"; +import { App } from "./App.tsx"; + +function start() { + const root = createRoot(document.getElementById("root")!); + root.render(); +} + +if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", start); +} else { + start(); +} diff --git a/week01/Andy/src/index.css b/week01/Andy/src/index.css new file mode 100644 index 0000000..f92c3c6 --- /dev/null +++ b/week01/Andy/src/index.css @@ -0,0 +1,50 @@ +@import "../node_modules/tailwindcss/dist/lib.d.mts"; + +@layer base { + :root { + @apply text-[rgba(255,255,255,0.87)] bg-[#242424] font-sans; + } + + body { + @apply grid place-items-center min-w-[320px] min-h-screen relative m-0; + } +} + +body::before { + content: ""; + position: fixed; + inset: 0; + z-index: -1; + opacity: 0.05; + background: url("logo.svg"); + background-size: 256px; + transform: rotate(-12deg) scale(1.35); + animation: slide 30s linear infinite; + pointer-events: none; +} + +@keyframes slide { + from { + background-position: 0 0; + } + to { + background-position: 256px 224px; + } +} + +@keyframes spin { + from { + transform: rotate(0); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion) { + *, + ::before, + ::after { + animation: none !important; + } +} diff --git a/week01/Andy/src/index.html b/week01/Andy/src/index.html new file mode 100644 index 0000000..c3d0350 --- /dev/null +++ b/week01/Andy/src/index.html @@ -0,0 +1,13 @@ + + + + + + + Bun + React + + +
+ + + diff --git a/week01/Andy/src/index.ts b/week01/Andy/src/index.ts new file mode 100644 index 0000000..863f069 --- /dev/null +++ b/week01/Andy/src/index.ts @@ -0,0 +1,41 @@ +import { serve } from "bun"; +import index from "./index.html"; + +const server = serve({ + routes: { + // Serve index.html for all unmatched routes. + "/*": index, + + "/api/hello": { + async GET(req) { + return Response.json({ + message: "Hello, world!", + method: "GET", + }); + }, + async PUT(req) { + return Response.json({ + message: "Hello, world!", + method: "PUT", + }); + }, + }, + + "/api/hello/:name": async req => { + const name = req.params.name; + return Response.json({ + message: `Hello, ${name}!`, + }); + }, + }, + + development: process.env.NODE_ENV !== "production" && { + // Enable browser hot reloading in development + hmr: true, + + // Echo console logs from the browser to the server + console: true, + }, +}); + +console.log(`🚀 Server running at ${server.url}`); diff --git a/week01/Andy/src/logo.svg b/week01/Andy/src/logo.svg new file mode 100644 index 0000000..7ef1500 --- /dev/null +++ b/week01/Andy/src/logo.svg @@ -0,0 +1 @@ +Bun Logo \ No newline at end of file diff --git a/week01/Andy/src/practice/MyPractice.tsx b/week01/Andy/src/practice/MyPractice.tsx new file mode 100644 index 0000000..1b9c0d6 --- /dev/null +++ b/week01/Andy/src/practice/MyPractice.tsx @@ -0,0 +1,167 @@ +import { createContext, useContext, useState, type ReactNode } from "react"; + +// Type + +type Todo = { id: number; text: string; completed: boolean }; + +// Context + +type TodoContextValue = { + todos: Todo[]; + input: string; + setInput: (v: string) => void; + addTodo: () => void; + toggleTodo: (id: number) => void; + deleteTodo: (id: number) => void; +}; + +const TodoContext = createContext(null); + +function useTodoContext() { + const ctx = useContext(TodoContext); + if (!ctx) throw new Error("TodoList 컴포넌트 안에서만 사용할 수 있습니다."); + return ctx; +} + +// Compound Component + +type TodoListProps = { + initialTodos?: Todo[]; + children: ReactNode; +}; + +function TodoList({ initialTodos = [], children }: TodoListProps) { + const [todos, setTodos] = useState(initialTodos); + const [input, setInput] = useState(""); + + function addTodo() { + const text = input.trim(); + if (!text) return; + setTodos((prev) => [...prev, { id: Date.now(), text, completed: false }]); + setInput(""); + } + + function toggleTodo(id: number) { + setTodos((prev) => + prev.map((t) => (t.id === id ? { ...t, completed: !t.completed } : t)) + ); + } + + function deleteTodo(id: number) { + setTodos((prev) => prev.filter((t) => t.id !== id)); + } + + return ( + +
{children}
+ + ); +} + +// Sub-components + +TodoList.Header = function Header({ title }: { title: string }) { + const { todos } = useTodoContext(); + const done = todos.filter((t) => t.completed).length; + + return ( +
+

{title}

+ + {done} / {todos.length} 완료 + +
+ ); +}; + +TodoList.AddForm = function AddForm() { + const { input, setInput, addTodo } = useTodoContext(); + + return ( +
+ setInput(e.target.value)} + onKeyDown={(e) => e.key === "Enter" && addTodo()} + placeholder="할 일 추가..." + className="flex-1 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-sm outline-none focus:border-white/50" + /> + +
+ ); +}; + +TodoList.Empty = function Empty({ message = "할 일이 없습니다." }: { message?: string }) { + return ( +

{message}

+ ); +}; + +TodoList.Item = function Item({ + todo, + onToggle, + onDelete, +}: { + todo: Todo; + onToggle: (id: number) => void; + onDelete: (id: number) => void; +}) { + return ( +
  • + onToggle(todo.id)} + className="w-4 h-4 accent-blue-500" + /> + + {todo.text} + + +
    • + ); +}; + +TodoList.Items = function Items() { + const { todos, toggleTodo, deleteTodo } = useTodoContext(); + + if (todos.length === 0) return ; + + return ( +
      + {todos.map((todo) => ( + + ))} +
    + ); +}; + + + +const INITIAL_TODOS: Todo[] = [ + { id: 1, text: "SRP 개념 이해하기", completed: true }, + { id: 2, text: "Presentational/Container 패턴 학습", completed: false }, + { id: 3, text: "Compound Component 실습", completed: false }, +]; + +export function MyPractice() { + return ( + + + + + + ); +} diff --git a/week01/Andy/src/todo/Step1_Monolithic.tsx b/week01/Andy/src/todo/Step1_Monolithic.tsx new file mode 100644 index 0000000..f785443 --- /dev/null +++ b/week01/Andy/src/todo/Step1_Monolithic.tsx @@ -0,0 +1,98 @@ +/** + * Step 1: Monolithic Component + * + * 하나의 컴포넌트에 UI, 상태, 로직이 모두 섞여 있다. + * actor가 여럿이라 변경 이유가 여러 개다. + * - 디자인 바뀌면 → JSX 수정 + * - 필터 로직 바뀌면 → 상태/핸들러 수정 + * - 저장 방식 바뀌면 (API/localStorage) → fetch 로직 수정 + */ + +import { useState } from "react"; + +type Todo = { id: number; text: string; completed: boolean }; + +export function Step1_Monolithic() { + const [todos, setTodos] = useState([ + { id: 1, text: "SRP 개념 이해하기", completed: true }, + { id: 2, text: "Presentational/Container 패턴 학습", completed: false }, + { id: 3, text: "Compound Component 실습", completed: false }, + ]); + const [input, setInput] = useState(""); + + function addTodo() { + const text = input.trim(); + if (!text) return; + setTodos((prev) => [...prev, { id: Date.now(), text, completed: false }]); + setInput(""); + } + + function toggleTodo(id: number) { + setTodos((prev) => + prev.map((t) => (t.id === id ? { ...t, completed: !t.completed } : t)) + ); + } + + function deleteTodo(id: number) { + setTodos((prev) => prev.filter((t) => t.id !== id)); + } + + return ( +
    +
    + ⚠️ UI / 상태 / 로직이 하나의 컴포넌트에 뒤섞여 있습니다. +
    + +

    📋 Todo List

    + + {/* Add Form */} +
    + setInput(e.target.value)} + onKeyDown={(e) => e.key === "Enter" && addTodo()} + placeholder="할 일 추가..." + className="flex-1 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-sm outline-none focus:border-white/50" + /> + +
    + + {/* List */} + {todos.length === 0 ? ( +

    할 일이 없습니다.

    + ) : ( +
      + {todos.map((todo) => ( +
    • + toggleTodo(todo.id)} + className="w-4 h-4 accent-blue-500" + /> + + {todo.text} + + +
      • + ))} +
    + )} +
    + ); +} diff --git a/week01/Andy/src/todo/Step2_PresentationalContainer.tsx b/week01/Andy/src/todo/Step2_PresentationalContainer.tsx new file mode 100644 index 0000000..44d8417 --- /dev/null +++ b/week01/Andy/src/todo/Step2_PresentationalContainer.tsx @@ -0,0 +1,139 @@ +/** + * Step 2: Presentational / Container Pattern + * + * actor별로 컴포넌트를 분리한다. + * + * Presentational (TodoView, TodoItem): + * - UI만 담당. 데이터가 어디서 오는지 모른다. + * - props로만 데이터를 받는다. + * + * Container (TodoContainer): + * - 상태와 로직만 담당. UI가 어떻게 생겼는지 모른다. + * - Presentational에게 데이터와 핸들러를 내려준다. + */ + +import { useState } from "react"; + +// ─── Types ─────────────────────────────────────────────────────────────────── + +type Todo = { id: number; text: string; completed: boolean }; + +// ─── Presentational Components ──────────────────────────────────────────────── + +type TodoItemProps = { + todo: Todo; + onToggle: (id: number) => void; + onDelete: (id: number) => void; +}; + +function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) { + return ( +
  • + onToggle(todo.id)} + className="w-4 h-4 accent-blue-500" + /> + + {todo.text} + + +
    • + ); +} + +type TodoViewProps = { + todos: Todo[]; + input: string; + onInputChange: (value: string) => void; + onAdd: () => void; + onToggle: (id: number) => void; + onDelete: (id: number) => void; +}; + +function TodoView({ todos, input, onInputChange, onAdd, onToggle, onDelete }: TodoViewProps) { + return ( +
    +

    📋 Todo List

    + +
    + onInputChange(e.target.value)} + onKeyDown={(e) => e.key === "Enter" && onAdd()} + placeholder="할 일 추가..." + className="flex-1 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-sm outline-none focus:border-white/50" + /> + +
    + + {todos.length === 0 ? ( +

    할 일이 없습니다.

    + ) : ( +
      + {todos.map((todo) => ( + + ))} +
    + )} +
    + ); +} + +// ─── Container Component ────────────────────────────────────────────────────── + +export function Step2_PresentationalContainer() { + const [todos, setTodos] = useState([ + { id: 1, text: "SRP 개념 이해하기", completed: true }, + { id: 2, text: "Presentational/Container 패턴 학습", completed: false }, + { id: 3, text: "Compound Component 실습", completed: false }, + ]); + const [input, setInput] = useState(""); + + function addTodo() { + const text = input.trim(); + if (!text) return; + setTodos((prev) => [...prev, { id: Date.now(), text, completed: false }]); + setInput(""); + } + + function toggleTodo(id: number) { + setTodos((prev) => + prev.map((t) => (t.id === id ? { ...t, completed: !t.completed } : t)) + ); + } + + function deleteTodo(id: number) { + setTodos((prev) => prev.filter((t) => t.id !== id)); + } + + return ( + <> +
    + ✅ UI(TodoView)와 로직(Container)이 분리됐습니다.
    + 단, Container 컴포넌트 자체의 재사용성은 여전히 낮습니다. +
    + + + ); +} diff --git a/week01/Andy/src/todo/Step3_CustomHook.tsx b/week01/Andy/src/todo/Step3_CustomHook.tsx new file mode 100644 index 0000000..021b3b7 --- /dev/null +++ b/week01/Andy/src/todo/Step3_CustomHook.tsx @@ -0,0 +1,131 @@ +/** + * Step 3: Custom Hook + * + * Container 컴포넌트를 Custom Hook으로 대체한다. + * + * useTodos(): + * - 상태와 로직만 담당. + * - 어떤 컴포넌트에서도, 어떤 방식으로도 조합 가능. + * - Container 컴포넌트와 달리 JSX를 반환하지 않아 더 유연하다. + * + * TodoApp: + * - Hook에서 데이터/핸들러를 받아 Presentational 컴포넌트에 전달. + * - 조합의 중심이 컴포넌트 트리가 아니라 함수 호출로 이동한다. + */ + +import { useState } from "react"; + +// ─── Types ─────────────────────────────────────────────────────────────────── + +type Todo = { id: number; text: string; completed: boolean }; + +// ─── Custom Hook (Container 대체) ───────────────────────────────────────────── + +function useTodos(initialTodos: Todo[]) { + const [todos, setTodos] = useState(initialTodos); + const [input, setInput] = useState(""); + + function addTodo() { + const text = input.trim(); + if (!text) return; + setTodos((prev) => [...prev, { id: Date.now(), text, completed: false }]); + setInput(""); + } + + function toggleTodo(id: number) { + setTodos((prev) => + prev.map((t) => (t.id === id ? { ...t, completed: !t.completed } : t)) + ); + } + + function deleteTodo(id: number) { + setTodos((prev) => prev.filter((t) => t.id !== id)); + } + + return { todos, input, setInput, addTodo, toggleTodo, deleteTodo }; +} + +// ─── Presentational Components ──────────────────────────────────────────────── + +type TodoItemProps = { + todo: Todo; + onToggle: (id: number) => void; + onDelete: (id: number) => void; +}; + +function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) { + return ( +
  • + onToggle(todo.id)} + className="w-4 h-4 accent-blue-500" + /> + + {todo.text} + + +
    • + ); +} + +// ─── App ────────────────────────────────────────────────────────────────────── + +const INITIAL_TODOS: Todo[] = [ + { id: 1, text: "SRP 개념 이해하기", completed: true }, + { id: 2, text: "Presentational/Container 패턴 학습", completed: true }, + { id: 3, text: "Custom Hook으로 Container 대체", completed: false }, + { id: 4, text: "Compound Component 실습", completed: false }, +]; + +export function Step3_CustomHook() { + const { todos, input, setInput, addTodo, toggleTodo, deleteTodo } = + useTodos(INITIAL_TODOS); + + return ( + <> +
    + ✅ Container가 useTodos() Hook으로 대체됐습니다.
    + 로직을 어떤 컴포넌트에서도 재사용할 수 있습니다. +
    + +
    +

    📋 Todo List

    + +
    + setInput(e.target.value)} + onKeyDown={(e) => e.key === "Enter" && addTodo()} + placeholder="할 일 추가..." + className="flex-1 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-sm outline-none focus:border-white/50" + /> + +
    + + {todos.length === 0 ? ( +

    할 일이 없습니다.

    + ) : ( +
      + {todos.map((todo) => ( + + ))} +
    + )} +
    + + ); +} diff --git a/week01/Andy/src/todo/Step4_CompoundComponent.tsx b/week01/Andy/src/todo/Step4_CompoundComponent.tsx new file mode 100644 index 0000000..a59301a --- /dev/null +++ b/week01/Andy/src/todo/Step4_CompoundComponent.tsx @@ -0,0 +1,196 @@ +/** + * Step 4: Compound Component Pattern + * + * 복합한 컴포넌트 구조를 Context + 서브컴포넌트로 우아하게 표현한다. + * + * 핵심 개념: + * - 부모 컴포넌트(TodoList)가 Context를 통해 상태를 공유 + * - 서브컴포넌트들(TodoList.Header, .AddForm, .Items, .Empty)이 Context를 직접 소비 + * - 사용처에서 서브컴포넌트를 자유롭게 조합해 구조를 제어할 수 있다 + * + * 사용처는 어떻게 달라지나: + * + * + * + * ← Empty는 Items 내부에서 자동 처리 + * + */ + +import { createContext, useContext, useState, type ReactNode } from "react"; + +// ─── Types ─────────────────────────────────────────────────────────────────── + +type Todo = { id: number; text: string; completed: boolean }; + +// ─── Context ────────────────────────────────────────────────────────────────── + +type TodoContextValue = { + todos: Todo[]; + input: string; + setInput: (v: string) => void; + addTodo: () => void; + toggleTodo: (id: number) => void; + deleteTodo: (id: number) => void; +}; + +const TodoContext = createContext(null); + +function useTodoContext() { + const ctx = useContext(TodoContext); + if (!ctx) throw new Error("TodoList 컴포넌트 안에서만 사용할 수 있습니다."); + return ctx; +} + +// ─── Compound Component ─────────────────────────────────────────────────────── + +type TodoListProps = { + initialTodos?: Todo[]; + children: ReactNode; +}; + +function TodoList({ initialTodos = [], children }: TodoListProps) { + const [todos, setTodos] = useState(initialTodos); + const [input, setInput] = useState(""); + + function addTodo() { + const text = input.trim(); + if (!text) return; + setTodos((prev) => [...prev, { id: Date.now(), text, completed: false }]); + setInput(""); + } + + function toggleTodo(id: number) { + setTodos((prev) => + prev.map((t) => (t.id === id ? { ...t, completed: !t.completed } : t)) + ); + } + + function deleteTodo(id: number) { + setTodos((prev) => prev.filter((t) => t.id !== id)); + } + + return ( + +
    {children}
    +     + ); +} + +// ─── Sub-components ─────────────────────────────────────────────────────────── + +TodoList.Header = function Header({ title }: { title: string }) { + const { todos } = useTodoContext(); + const done = todos.filter((t) => t.completed).length; + + return ( +
    +

    {title}

    + + {done} / {todos.length} 완료 + +
    + ); +}; + +TodoList.AddForm = function AddForm() { + const { input, setInput, addTodo } = useTodoContext(); + + return ( +
    + setInput(e.target.value)} + onKeyDown={(e) => e.key === "Enter" && addTodo()} + placeholder="할 일 추가..." + className="flex-1 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-sm outline-none focus:border-white/50" + /> + +
    + ); +}; + +TodoList.Empty = function Empty({ message = "할 일이 없습니다." }: { message?: string }) { + return ( +

    {message}

    + ); +}; + +TodoList.Items = function Items() { + const { todos, toggleTodo, deleteTodo } = useTodoContext(); + + if (todos.length === 0) return ; + + return ( +
      + {todos.map((todo) => ( + + ))} +
    + ); +}; + +TodoList.Item = function Item({ + todo, + onToggle, + onDelete, +}: { + todo: Todo; + onToggle: (id: number) => void; + onDelete: (id: number) => void; +}) { + return ( +
  • + onToggle(todo.id)} + className="w-4 h-4 accent-blue-500" + /> + + {todo.text} + + +
    • + ); +}; + +// ─── Usage ──────────────────────────────────────────────────────────────────── + +const INITIAL_TODOS: Todo[] = [ + { id: 1, text: "SRP 개념 이해하기", completed: true }, + { id: 2, text: "Presentational/Container 패턴 학습", completed: true }, + { id: 3, text: "Custom Hook으로 Container 대체", completed: true }, + { id: 4, text: "Compound Component 실습", completed: false }, +]; + +export function Step4_CompoundComponent() { + return ( + <> +
    + ✅ <TodoList>가 Context로 상태를 공유합니다.
    + + 서브컴포넌트를 자유롭게 조합해 구조를 제어할 수 있습니다. + +
    + + {/* 사용처: 서브컴포넌트를 원하는 순서로 조합 */} + + + + + + + ); +} diff --git a/week01/Andy/tsconfig.json b/week01/Andy/tsconfig.json new file mode 100644 index 0000000..6f6ad9e --- /dev/null +++ b/week01/Andy/tsconfig.json @@ -0,0 +1,38 @@ +{ + "compilerOptions": { + // Environment setup & latest features + "lib": ["ESNext", "DOM"], + "target": "ESNext", + "module": "Preserve", + "moduleDetection": "force", + "jsx": "react-jsx", + "allowJs": true, + + // Bundler mode + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "noEmit": true, + + // Best practices + "strict": true, + "skipLibCheck": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedIndexedAccess": true, + "noImplicitOverride": true, + + "baseUrl": "..", + "paths": { + "@/*": ["./src/*"] + }, + + // Some stricter flags (disabled by default) + "noUnusedLocals": false, + "noUnusedParameters": false, + "noPropertyAccessFromIndexSignature": false + }, + + "exclude": ["dist", + "node_modules" + ] +} diff --git a/week02/.gitignore b/week02/.gitignore new file mode 100644 index 0000000..628a3ab --- /dev/null +++ b/week02/.gitignore @@ -0,0 +1,34 @@ +# dependencies (bun install) +node_modules + +# output +out +dist +*.tgz + +# code coverage +coverage +*.lcov + +# logs +logs +*.log +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# dotenv environment variable files +.env +.env.development.local +.env.test.local +.env.production.local +.env.local + +# caches +.eslintcache +.cache +*.tsbuildinfo + +# IntelliJ based IDEs +.idea + +# Finder (MacOS) folder config +.DS_Store diff --git a/week02/CLAUDE.md b/week02/CLAUDE.md new file mode 100644 index 0000000..764c1dd --- /dev/null +++ b/week02/CLAUDE.md @@ -0,0 +1,106 @@ + +Default to using Bun instead of Node.js. + +- Use `bun ` instead of `node ` or `ts-node ` +- Use `bun test` instead of `jest` or `vitest` +- Use `bun build ` instead of `webpack` or `esbuild` +- Use `bun install` instead of `npm install` or `yarn install` or `pnpm install` +- Use `bun run + + +``` + +With the following `frontend.tsx`: + +```tsx#frontend.tsx +import React from "react"; +import { createRoot } from "react-dom/client"; + +// import .css files directly and it works +import './index.css'; + +const root = createRoot(document.body); + +export default function Frontend() { + return

    Hello, world!

    ; +} + +root.render(); +``` + +Then, run index.ts + +```sh +bun --hot ./index.ts +``` + +For more information, read the Bun API docs in `node_modules/bun-types/docs/**.mdx`. diff --git a/week02/README.md b/week02/README.md new file mode 100644 index 0000000..37ad10c --- /dev/null +++ b/week02/README.md @@ -0,0 +1,21 @@ +# bun-react-tailwind-template + +To install dependencies: + +```bash +bun install +``` + +To start a development server: + +```bash +bun dev +``` + +To run for production: + +```bash +bun start +``` + +This project was created using `bun init` in bun v1.3.10. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime. diff --git a/week02/build.ts b/week02/build.ts new file mode 100644 index 0000000..51780d0 --- /dev/null +++ b/week02/build.ts @@ -0,0 +1,160 @@ +#!/usr/bin/env bun +import plugin from "bun-plugin-tailwind"; +import { existsSync } from "fs"; +import { rm } from "fs/promises"; +import path from "path"; + +if (process.argv.includes("--help") || process.argv.includes("-h")) { + console.log(` +🏗️ Bun Build Script + +Usage: bun run build.ts [options] + +Common Options: + --outdir Output directory (default: "dist") + --minify Enable minification (or --minify.whitespace, --minify.syntax, etc) + --sourcemap Sourcemap type: none|linked|inline|external + --target Build target: browser|bun|node + --format Output format: esm|cjs|iife + --splitting Enable code splitting + --packages Package handling: bundle|external + --public-path Public path for assets + --env Environment handling: inline|disable|prefix* + --conditions Package.json export conditions (comma separated) + --external External packages (comma separated) + --banner Add banner text to output + --footer Add footer text to output + --define Define global constants (e.g. --define.VERSION=1.0.0) + --help, -h Show this help message + +Example: + bun run build.ts --outdir=dist --minify --sourcemap=linked --external=react,react-dom +`); + process.exit(0); +} + +const toCamelCase = (str: string): string => str.replace(/-([a-z])/g, (_, letter: string) => letter.toUpperCase()); + +const parseValue = (value: string): any => { + if (value === "true") return true; + if (value === "false") return false; + + if (/^\d+$/.test(value)) return parseInt(value, 10); + if (/^\d*\.\d+$/.test(value)) return parseFloat(value); + + if (value.includes(",")) return value.split(",").map(v => v.trim()); + + return value; +}; + +function parseArgs(): Partial { + const config: Record = {}; + const args = process.argv.slice(2); + + for (let i = 0; i < args.length; i++) { + const arg = args[i]; + if (arg === undefined) continue; + if (!arg.startsWith("--")) continue; + + if (arg.startsWith("--no-")) { + const key = toCamelCase(arg.slice(5)); + config[key] = false; + continue; + } + + if (!arg.includes("=") && (i === args.length - 1 || args[i + 1]?.startsWith("--"))) { + const key = toCamelCase(arg.slice(2)); + config[key] = true; + continue; + } + + let key: string; + let value: string; + + if (arg.includes("=")) { + [key, value] = arg.slice(2).split("=", 2) as [string, string]; + } else { + key = arg.slice(2); + value = args[++i] ?? ""; + } + + key = toCamelCase(key); + + if (key.includes(".")) { + const parts = key.split("."); + if (parts.length > 2) { + console.warn( + `Warning: Deeply nested option "${key}" is not supported. Only single-level nesting (e.g., --minify.whitespace) is allowed.`, + ); + continue; + } + const parentKey = parts[0]!; + const childKey = parts[1]!; + const existing = config[parentKey]; + if (typeof existing !== "object" || existing === null || Array.isArray(existing)) { + config[parentKey] = {}; + } + (config[parentKey] as Record)[childKey] = parseValue(value); + } else { + config[key] = parseValue(value); + } + } + + return config as Partial; +} + +const formatFileSize = (bytes: number): string => { + const units = ["B", "KB", "MB", "GB"]; + let size = bytes; + let unitIndex = 0; + + while (size >= 1024 && unitIndex < units.length - 1) { + size /= 1024; + unitIndex++; + } + + return `${size.toFixed(2)} ${units[unitIndex]}`; +}; + +console.log("\n🚀 Starting build process...\n"); + +const cliConfig = parseArgs(); +const outdir = cliConfig.outdir || path.join(process.cwd(), "dist"); + +if (existsSync(outdir)) { + console.log(`🗑️ Cleaning previous build at ${outdir}`); + await rm(outdir, { recursive: true, force: true }); +} + +const start = performance.now(); + +const entrypoints = [...new Bun.Glob("**.html").scanSync("src")] + .map(a => path.resolve("src", a)) + .filter(dir => !dir.includes("node_modules")); +console.log(`📄 Found ${entrypoints.length} HTML ${entrypoints.length === 1 ? "file" : "files"} to process\n`); + +const result = await Bun.build({ + entrypoints, + outdir, + plugins: [plugin], + minify: true, + target: "browser", + sourcemap: "linked", + define: { + "process.env.NODE_ENV": JSON.stringify("production"), + }, + ...cliConfig, +}); + +const end = performance.now(); + +const outputTable = result.outputs.map(output => ({ + File: path.relative(process.cwd(), output.path), + Type: output.kind, + Size: formatFileSize(output.size), +})); + +console.table(outputTable); +const buildTime = (end - start).toFixed(2); + +console.log(`\n✅ Build completed in ${buildTime}ms\n`); diff --git a/week02/bun-env.d.ts b/week02/bun-env.d.ts new file mode 100644 index 0000000..72f1c26 --- /dev/null +++ b/week02/bun-env.d.ts @@ -0,0 +1,17 @@ +// Generated by `bun init` + +declare module "*.svg" { + /** + * A path to the SVG file + */ + const path: `${string}.svg`; + export = path; +} + +declare module "*.module.css" { + /** + * A record of class names to their corresponding CSS module classes + */ + const classes: { readonly [key: string]: string }; + export = classes; +} diff --git a/week02/bun.lock b/week02/bun.lock new file mode 100644 index 0000000..db2339a --- /dev/null +++ b/week02/bun.lock @@ -0,0 +1,71 @@ +{ + "lockfileVersion": 1, + "configVersion": 1, + "workspaces": { + "": { + "name": "bun-react-template", + "dependencies": { + "bun-plugin-tailwind": "^0.1.2", + "react": "^19", + "react-dom": "^19", + "tailwindcss": "^4.1.11", + }, + "devDependencies": { + "@types/bun": "latest", + "@types/react": "^19", + "@types/react-dom": "^19", + }, + }, + }, + "packages": { + "@oven/bun-darwin-aarch64": ["@oven/bun-darwin-aarch64@1.3.10", "", { "os": "darwin", "cpu": "arm64" }, "sha512-PXgg5gqcS/rHwa1hF0JdM1y5TiyejVrMHoBmWY/DjtfYZoFTXie1RCFOkoG0b5diOOmUcuYarMpH7CSNTqwj+w=="], + + "@oven/bun-darwin-x64": ["@oven/bun-darwin-x64@1.3.10", "", { "os": "darwin", "cpu": "x64" }, "sha512-Nhssuh7GBpP5PiDSOl3+qnoIG7PJo+ec2oomDevnl9pRY6x6aD2gRt0JE+uf+A8Om2D6gjeHCxjEdrw5ZHE8mA=="], + + "@oven/bun-darwin-x64-baseline": ["@oven/bun-darwin-x64-baseline@1.3.10", "", { "os": "darwin", "cpu": "x64" }, "sha512-w1gaTlqU0IJCmJ1X+PGHkdNU1n8Gemx5YKkjhkJIguvFINXEBB5U1KG82QsT65Tk4KyNMfbLTlmy4giAvUoKfA=="], + + "@oven/bun-linux-aarch64": ["@oven/bun-linux-aarch64@1.3.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-OUgPHfL6+PM2Q+tFZjcaycN3D7gdQdYlWnwMI31DXZKY1r4HINWk9aEz9t/rNaHg65edwNrt7dsv9TF7xK8xIA=="], + + "@oven/bun-linux-aarch64-musl": ["@oven/bun-linux-aarch64-musl@1.3.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-Ui5pAgM7JE9MzHokF0VglRMkbak3lTisY4Mf1AZutPACXWgKJC5aGrgnHBfkl7QS6fEeYb0juy1q4eRznRHOsw=="], + + "@oven/bun-linux-x64": ["@oven/bun-linux-x64@1.3.10", "", { "os": "linux", "cpu": "x64" }, "sha512-bzUgYj/PIZziB/ZesIP9HUyfvh6Vlf3od+TrbTTyVEuCSMKzDPQVW/yEbRp0tcHO3alwiEXwJDrWrHAguXlgiQ=="], + + "@oven/bun-linux-x64-baseline": ["@oven/bun-linux-x64-baseline@1.3.10", "", { "os": "linux", "cpu": "x64" }, "sha512-oqvMDYpX6dGJO03HgO5bXuccEsH3qbdO3MaAiAlO4CfkBPLUXz3N0DDElg5hz0L6ktdDVKbQVE5lfe+LAUISQg=="], + + "@oven/bun-linux-x64-musl": ["@oven/bun-linux-x64-musl@1.3.10", "", { "os": "linux", "cpu": "x64" }, "sha512-poVXvOShekbexHq45b4MH/mRjQKwACAC8lHp3Tz/hEDuz0/20oncqScnmKwzhBPEpqJvydXficXfBYuSim8opw=="], + + "@oven/bun-linux-x64-musl-baseline": ["@oven/bun-linux-x64-musl-baseline@1.3.10", "", { "os": "linux", "cpu": "x64" }, "sha512-/hOZ6S1VsTX6vtbhWVL9aAnOrdpuO54mAGUWpTdMz7dFG5UBZ/VUEiK0pBkq9A1rlBk0GeD/6Y4NBFl8Ha7cRA=="], + + "@oven/bun-windows-aarch64": ["@oven/bun-windows-aarch64@1.3.10", "", { "os": "win32", "cpu": "arm64" }, "sha512-GXbz2swvN2DLw2dXZFeedMxSJtI64xQ9xp9Eg7Hjejg6mS2E4dP1xoQ2yAo2aZPi/2OBPAVaGzppI2q20XumHA=="], + + "@oven/bun-windows-x64": ["@oven/bun-windows-x64@1.3.10", "", { "os": "win32", "cpu": "x64" }, "sha512-qaS1In3yfC/Z/IGQriVmF8GWwKuNqiw7feTSJWaQhH5IbL6ENR+4wGNPniZSJFaM/SKUO0e/YCRdoVBvgU4C1g=="], + + "@oven/bun-windows-x64-baseline": ["@oven/bun-windows-x64-baseline@1.3.10", "", { "os": "win32", "cpu": "x64" }, "sha512-gh3UAHbUdDUG6fhLc1Csa4IGdtghue6U8oAIXWnUqawp6lwb3gOCRvp25IUnLF5vUHtgfMxuEUYV7YA2WxVutw=="], + + "@types/bun": ["@types/bun@1.3.10", "", { "dependencies": { "bun-types": "1.3.10" } }, "sha512-0+rlrUrOrTSskibryHbvQkDOWRJwJZqZlxrUs1u4oOoTln8+WIXBPmAuCF35SWB2z4Zl3E84Nl/D0P7803nigQ=="], + + "@types/node": ["@types/node@25.5.0", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw=="], + + "@types/react": ["@types/react@19.2.14", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w=="], + + "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="], + + "bun": ["bun@1.3.10", "", { "optionalDependencies": { "@oven/bun-darwin-aarch64": "1.3.10", "@oven/bun-darwin-x64": "1.3.10", "@oven/bun-darwin-x64-baseline": "1.3.10", "@oven/bun-linux-aarch64": "1.3.10", "@oven/bun-linux-aarch64-musl": "1.3.10", "@oven/bun-linux-x64": "1.3.10", "@oven/bun-linux-x64-baseline": "1.3.10", "@oven/bun-linux-x64-musl": "1.3.10", "@oven/bun-linux-x64-musl-baseline": "1.3.10", "@oven/bun-windows-aarch64": "1.3.10", "@oven/bun-windows-x64": "1.3.10", "@oven/bun-windows-x64-baseline": "1.3.10" }, "os": [ "linux", "win32", "darwin", ], "cpu": [ "x64", "arm64", ], "bin": { "bun": "bin/bun.exe", "bunx": "bin/bunx.exe" } }, "sha512-S/CXaXXIyA4CMjdMkYQ4T2YMqnAn4s0ysD3mlsY4bUiOCqGlv28zck4Wd4H4kpvbekx15S9mUeLQ7Uxd0tYTLA=="], + + "bun-plugin-tailwind": ["bun-plugin-tailwind@0.1.2", "", { "peerDependencies": { "bun": ">=1.0.0" } }, "sha512-41jNC1tZRSK3s1o7pTNrLuQG8kL/0vR/JgiTmZAJ1eHwe0w5j6HFPKeqEk0WAD13jfrUC7+ULuewFBBCoADPpg=="], + + "bun-types": ["bun-types@1.3.10", "", { "dependencies": { "@types/node": "*" } }, "sha512-tcpfCCl6XWo6nCVnpcVrxQ+9AYN1iqMIzgrSKYMB/fjLtV2eyAVEg7AxQJuCq/26R6HpKWykQXuSOq/21RYcbg=="], + + "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="], + + "react": ["react@19.2.4", "", {}, "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ=="], + + "react-dom": ["react-dom@19.2.4", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.4" } }, "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ=="], + + "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="], + + "tailwindcss": ["tailwindcss@4.2.1", "", {}, "sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw=="], + + "undici-types": ["undici-types@7.18.2", "", {}, "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="], + } +} diff --git a/week02/bunfig.toml b/week02/bunfig.toml new file mode 100644 index 0000000..8877354 --- /dev/null +++ b/week02/bunfig.toml @@ -0,0 +1,4 @@ + +[serve.static] +plugins = ["bun-plugin-tailwind"] +env = "BUN_PUBLIC_*" \ No newline at end of file diff --git a/week02/package.json b/week02/package.json new file mode 100644 index 0000000..7919c46 --- /dev/null +++ b/week02/package.json @@ -0,0 +1,22 @@ +{ + "name": "bun-react-template", + "version": "0.1.0", + "private": true, + "type": "module", + "scripts": { + "dev": "bun --hot src/index.ts", + "start": "NODE_ENV=production bun src/index.ts", + "build": "bun run build.ts" + }, + "dependencies": { + "bun-plugin-tailwind": "^0.1.2", + "react": "^19", + "react-dom": "^19", + "tailwindcss": "^4.1.11" + }, + "devDependencies": { + "@types/react": "^19", + "@types/react-dom": "^19", + "@types/bun": "latest" + } +} diff --git a/week02/src/APITester.tsx b/week02/src/APITester.tsx new file mode 100644 index 0000000..0f378ae --- /dev/null +++ b/week02/src/APITester.tsx @@ -0,0 +1,63 @@ +import { useRef, type FormEvent } from "react"; + +export function APITester() { + const responseInputRef = useRef(null); + + const testEndpoint = async (e: FormEvent) => { + e.preventDefault(); + + try { + const form = e.currentTarget; + const formData = new FormData(form); + const endpoint = formData.get("endpoint") as string; + const url = new URL(endpoint, location.href); + const method = formData.get("method") as string; + const res = await fetch(url, { method }); + + const data = await res.json(); + responseInputRef.current!.value = JSON.stringify(data, null, 2); + } catch (error) { + responseInputRef.current!.value = String(error); + } + }; + + return ( +
    +
    + + + +
    +