정적타입 도입을 위한 Typescript 마이그레이션 및 리팩토링(migration/typescript)

.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["prettier"],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "rules": {
+    "prettier/prettier": "error",
+    "no-unused-vars": "warn",
+    "no-console": "off"
+  }
+}

.gitignore

@@ -1,2 +1,6 @@
 dev/train/trainData/mnist/mnistTraindata_large.js
 dev/train/trainData/mnist/mnist_train.csv
+node_modules
+dist
+build
+*.min.js

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 100,
+  "tabWidth": 4,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "semi": true
+}

dev/train/Trainer.js

@@ -1,27 +1,44 @@
-import { NeuralNetworkBase } from "../../src/core/NeuralNetworkBase.js";
+import { NeuralNetworkBase } from '../../src/core/NeuralNetworkBase.ts';
 
 // matrix operations
-import {matrixMultiply, transposeMatrix} from "../../src/core/ops/matrixOps.js";
+import { matrixMultiply, transposeMatrix } from '../../src/core/ops/matrixOps.ts';
 
 export class Trainer extends NeuralNetworkBase {
-    train(inputs, targets){
+    train(inputs, targets) {
         // CNN operations
         const { finalOutputs, hiddenOutputs } = this.feedForward(inputs);
         // calculate errors
-        const output_errors = targets.map((v, idx) => v - finalOutputs[idx]).map(v => [v]); // 출력 계층의 오차를 목표값 - 출력값으로 지정
+        const output_errors = targets.map((v, idx) => v - finalOutputs[idx]).map((v) => [v]); // 출력 계층의 오차를 목표값 - 출력값으로 지정
         const hidden_errors = matrixMultiply(transposeMatrix(this.W_hiddenToOutput), output_errors); // 은닉 계층의 오차를 은닉-> 출력 계층의 가중치값과(W_hiddenToOutput.T) 출력 계층의 오차들을 재조합하여 계산
 
         // activation function derivative
-        const activationDerivative_HtO = finalOutputs.map(v => 1.0 - v).map((v, idx) => v * finalOutputs[idx]); // hidden to output derivative
-        const outputGradient = activationDerivative_HtO.map((v, idx) => v * output_errors[idx]).map(v => [v]);
-        const W_HtO_Update = matrixMultiply(outputGradient, transposeMatrix(hiddenOutputs)).map(array => array.map(v => v * this.learningRate)); // 오차값을 이용해 은닉 계층과 출력 계층간의 가중치 업데이트
+        const activationDerivative_HtO = finalOutputs
+            .map((v) => 1.0 - v)
+            .map((v, idx) => v * finalOutputs[idx]); // hidden to output derivative
+        const outputGradient = activationDerivative_HtO
+            .map((v, idx) => v * output_errors[idx])
+            .map((v) => [v]);
+        const W_HtO_Update = matrixMultiply(outputGradient, transposeMatrix(hiddenOutputs)).map(
+            (array) => array.map((v) => v * this.learningRate),
+        ); // 오차값을 이용해 은닉 계층과 출력 계층간의 가중치 업데이트
 
-        const activationDerivative_ItH = hiddenOutputs.map(v => 1.0 - v).map((v, idx) => v * hiddenOutputs[idx]);
-        const hiddenGradient = activationDerivative_ItH.map((v, idx) => v * hidden_errors[idx]).map(v => [v]);
-        const W_ItH_update = matrixMultiply(hiddenGradient, transposeMatrix(inputs.map(v => [v]))).map(array => array.map(v => v * this.learningRate));
+        const activationDerivative_ItH = hiddenOutputs
+            .map((v) => 1.0 - v)
+            .map((v, idx) => v * hiddenOutputs[idx]);
+        const hiddenGradient = activationDerivative_ItH
+            .map((v, idx) => v * hidden_errors[idx])
+            .map((v) => [v]);
+        const W_ItH_update = matrixMultiply(
+            hiddenGradient,
+            transposeMatrix(inputs.map((v) => [v])),
+        ).map((array) => array.map((v) => v * this.learningRate));
 
         // update weights
-        this.W_hiddenToOutput = this.W_hiddenToOutput.map((row, i)=> row.map((v, j) => v + W_HtO_Update[i][j]));
-        this.W_inputToHidden = this.W_inputToHidden.map((row, i)=> row.map((v, j) => v + W_ItH_update[i][j]));
+        this.W_hiddenToOutput = this.W_hiddenToOutput.map((row, i) =>
+            row.map((v, j) => v + W_HtO_Update[i][j]),
+        );
+        this.W_inputToHidden = this.W_inputToHidden.map((row, i) =>
+            row.map((v, j) => v + W_ItH_update[i][j]),
+        );
     }
-}
+}

public/index.html → index.html

@@ -6,9 +6,8 @@
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Neural Network Visualization</title>
-    <script type="module" src="../src/index.js"></script>
-    <script src="../modernizr-custom.js"></script>
-    <script src="../modernizr-custom.js"></script>
+    <script type="module" src="src/main.ts"></script>
+    <script src="modernizr-custom.js"></script>
     <link rel="stylesheet" href="/src/view/styles/settings.css">
 </head>
 <body>
@@ -21,9 +20,7 @@
             <canvas id="perceptron"></canvas>
         </section>
         <section id="userInputSection">
-            <canvas style="position: fixed; left:0; top: 0;" id="resizeCanvas"></canvas>
-            <canvas style="position: fixed;" id="alignCanvas"></canvas>
-            <canvas id="pathTrackingCanvas"></canvas>
+            <button id="clear">clear canvas</button>
             <canvas class="userInputCanvas" id="userInputCanvas"></canvas>
         </section>
     </div>

jsconfig.json

@@ -1,9 +1,8 @@
 {
   "compilerOptions": {
-    "baseUrl": "src",
+    "baseUrl": "./src",
     "paths": {
-      "@controller/*": ["controller/*"],
-      "@view/*": ["view/*"]
+      "@/*": ["*"]
     }
   },
   "include": ["src"]

package.json

@@ -3,9 +3,22 @@
   "version": "1.0.0",
   "type": "module",
   "description": "",
-  "main": "public/index.html",
+  "main": "index.html",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write ."
   },
-  "private": true
-}
+  "private": true,
+  "devDependencies": {
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.3",
+    "prettier": "3.6.2",
+    "vite": "^7.0.6"
+  }
+}