Initial setting for playground (mfa)

.gitignore

@@ -1,2 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
+coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+.next/
+out/
+build
+dist
+
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Misc
 .vscode
 .DS_Store
+*.pem

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm nano-staged

.nanostagedrc

@@ -0,0 +1,6 @@
+{
+  "*.{ts,tsx,json,jsonc}": [
+    "biome format --write",
+    "biome lint"
+  ]
+}

.nvmrc

@@ -0,0 +1 @@
+v20.13.0

README.md

@@ -1,24 +1,28 @@
 # functional-javascript-programming
+
 함수형 자바스크립트 프로그래밍
 
 ![image](https://github.com/user-attachments/assets/d31776df-7a65-4064-8a08-3d256aa3aab7)
 
 # 시간 및 장소
+
 - 시간: 매주 일요일 16시
 - 장소: 디스코드
 
 # 방식
+
 - 주 1회 온라인 환경인 디스코드에서 진행합니다.
 - 최대한 해당 책을 기반으로 코드를 많이 짜보는 것을 목표로 합니다.
 - 스터디 진행 전에 주 차별 챕터를 읽고 정리합니다. 마크 다운 기반으로 정리를 하고 형식은 자유입니다. 논의하고 싶은 사항이 있다면 포함합니다.
 - 정리가 완료되면 스터디 전까지 Github 레포의 해당되는 주차의 폴더에 업로드를 합니다. ([참고](https://github.com/FEBookStudy/Grokking-Simplicity))
-    - 파일 이름 형식: 이름.md
-    - 커밋 형식: `docs: 업데이트 내용`
+  - 파일 이름 형식: 이름.md
+  - 커밋 형식: `docs: 업데이트 내용`
 - 온라인으로 스터디 진행 전에 발표자 1명을 무작위로 선정해 발표를 진행합니다.
 - 발표 후에 궁금한 점, 논의가 필요한 점을 이야기합니다.
-    - 해당 내용은 질문, 논의별 [Issue](https://github.com/FEBookStudy/Grokking-Simplicity/issues)를 생성해 기록합니다.
+  - 해당 내용은 질문, 논의별 [Issue](https://github.com/FEBookStudy/Grokking-Simplicity/issues)를 생성해 기록합니다.
 
 # 발표 방식
+
 - 주차 별 브랜치에 정리한 내용을 commit합니다. (`week-1` 브랜치에 `/docs/1주차/이름.md`)
 - 발표 당일에 `main` 브랜치로 PR을 합니다.
   - CODEOWNERS와 팀 설정으로 reviewer가 1명 자동 선정됩니다. (Load balance)
@@ -27,17 +31,17 @@
 
 # 스터디 상세 일정표
 
-| **주차**  | **날짜**      | **학습 내용**                                  |  
-|---------|-------------|--------------------------------------------|  
-| **0주차** | 11/25 (20시) | OT 및 스터디 방식 상세 논의                          |  
-| **1주차** | 12/8        | 1장 함수형 자바스크립트 소개                           |  
-| **2주차** | 12/15        | 2장 함수형 자바스크립트를 위한 문법 다시 보기                 |  
-| **3주차** | 12/22       | 3장 Underscore.js를 직접 만들며 함수형 자바스크립트의 뼈대 익히기 |  
-| **4주차** | 12/29       | 4장 함수 조립하기                                 |  
-| **5주차** | 1/5       | 5장 Partial.js와 함수 조립                       |  
-| **6주차** | 1/12         | 6장 값에 대해 & 7장 실전에서 함수형 자바스크립트 더 많이 사용하기    |  
-| **7주차** | 1/19        | 8장 함수형으로 만드는 할 일 앱 & 9장 메모이제이션 & 회고        |
-
+| **주차**  | **날짜**     | **학습 내용**                                                     |
+| --------- | ------------ | ----------------------------------------------------------------- |
+| **0주차** | 11/25 (20시) | OT 및 스터디 방식 상세 논의                                       |
+| **1주차** | 12/8         | 1장 함수형 자바스크립트 소개                                      |
+| **2주차** | 12/15        | 2장 함수형 자바스크립트를 위한 문법 다시 보기                     |
+| **3주차** | 12/22        | 3장 Underscore.js를 직접 만들며 함수형 자바스크립트의 뼈대 익히기 |
+| **4주차** | 12/29        | 4장 함수 조립하기                                                 |
+| **5주차** | 1/5          | 5장 Partial.js와 함수 조립                                        |
+| **6주차** | 1/12         | 6장 값에 대해 & 7장 실전에서 함수형 자바스크립트 더 많이 사용하기 |
+| **7주차** | 1/19         | 8장 함수형으로 만드는 할 일 앱 & 9장 메모이제이션 & 회고          |
 
 # 함수형 자바스크립트 서적 깃허브 참고
+
 https://github.com/indongyoo/functional-javascript

biome.json

@@ -0,0 +1,42 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "ignore": ["node_modules", "dist", ".next"],
+    "rules": {
+      "recommended": true,
+      "style": {
+        "useBlockStatements": "error"
+      }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentWidth": 2,
+    "indentStyle": "space",
+    "lineWidth": 100,
+    "ignore": ["node_modules", "dist", ".next"]
+  },
+  "json": {
+    "parser": {
+      "allowTrailingCommas": true
+    },
+    "formatter": {
+      "enabled": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "enabled": true,
+      "quoteStyle": "single",
+      "jsxQuoteStyle": "double",
+      "trailingComma": "all",
+      "semicolons": "asNeeded",
+      "arrowParentheses": "always",
+      "quoteProperties": "asNeeded"
+    }
+  }
+}

cspell.json

@@ -0,0 +1,3 @@
+{
+  "words": ["functional-javascript-programming", "hyobum"]
+}

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "functional-javascript-programming",
+  "private": true,
+  "scripts": {
+    "clean:branch": "git fetch --prune && git branch | grep -v '^*' | xargs git branch -D",
+    "clean:cache": "turbo clean",
+    "build:all": "turbo build",
+    "start": "turbo start",
+    "lint": "turbo lint",
+    "format": "turbo format",
+    "prepare": "husky",
+    "preinstall": "corepack enable"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.7.3",
+    "husky": "^9.0.11",
+    "nano-staged": "^0.8.0",
+    "turbo": "^2.0.7",
+    "typescript": "^5.4.5",
+    "@types/node": "20.13.0"
+  },
+  "packageManager": "pnpm@9.1.0",
+  "engines": {
+    "node": "20.13.0"
+  }
+}

playground/README.md

@@ -1,50 +1 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+# functional-javascript-programming playground

playground/apps/home/README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+});
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from "eslint-plugin-react";
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: "18.3" } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs["jsx-runtime"].rules,
+  },
+});
+```

playground/apps/home/eslint.config.js

@@ -0,0 +1,28 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);

playground/index.html → playground/apps/home/index.html

@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

playground/apps/home/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "home",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "lint": "biome lint ./src",
+    "format": "biome format ./src --write",
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@functional-javascript-programming/utils": "workspace:*",
+    "axios": "^1.7.9",
+    "js-cookie": "^3.0.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.0.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.15.0",
+    "@originjs/vite-plugin-federation": "^1.3.6",
+    "@types/js-cookie": "^3.0.6",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^9.15.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.12.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.15.0",
+    "vite": "^6.0.1"
+  }
+}

playground/src/App.css → playground/apps/home/src/App.css

@@ -1,10 +1,3 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
 .logo {
   height: 6em;
   padding: 1.5em;
@@ -34,9 +27,14 @@
 }
 
 .card {
-  padding: 2em;
+  width: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin: 0 auto;
+  padding: 0;
 }
 
 .read-the-docs {
-  color: #888;
+  color: var(--blue-300);
 }