[1팀 김휘린] Chapter 2-1. 클린코드와 리팩토링

.eslintignore

@@ -0,0 +1,11 @@
+node_modules
+dist
+build
+coverage
+.git
+.DS_Store
+*.log
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+*.html 

.eslintrc.json

@@ -0,0 +1,41 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": ["eslint:recommended", "prettier"],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-unused-vars": "warn",
+    "no-console": "warn",
+    "prefer-const": "error",
+    "no-var": "error",
+    "object-shorthand": "error",
+    "prefer-template": "error",
+    "template-curly-spacing": "error",
+    "arrow-spacing": "error",
+    "no-duplicate-imports": "error",
+    "no-useless-rename": "error",
+    "prefer-destructuring": "warn",
+    "no-magic-numbers": "warn",
+    "complexity": ["warn", 10],
+    "max-depth": ["warn", 4],
+    "max-lines-per-function": ["warn", 50],
+    "max-params": ["warn", 4]
+  },
+  "overrides": [
+    {
+      "files": ["**/*.test.js", "**/__tests__/**/*.js"],
+      "env": {
+        "jest": true
+      },
+      "rules": {
+        "no-console": "off"
+      }
+    }
+  ]
+}

.github/workflows/ci.yml

@@ -17,16 +17,24 @@ jobs:
         with:
           fetch-depth: 0
           ref: ${{ github.event.pull_request.head.sha }}
-
       - uses: actions/setup-node@v4
         with:
-          node-version: 22
-
-      - uses: pnpm/action-setup@v2
-        with:
-          version: latest
-
+          node-version: 20
       - name: test basic
         run: |
-          pnpm install
-          pnpm run test:basic
+          npm install
+          npm run test:basic
+ advanced:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.sha }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: advanced-test
+        run: |
+          npm install
+          npm run test:advanced

.prettierignore

@@ -0,0 +1,10 @@
+node_modules
+dist
+build
+coverage
+.git
+.DS_Store
+*.log
+pnpm-lock.yaml
+package-lock.json
+yarn.lock 

.prettierrc

@@ -0,0 +1,15 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": false,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "proseWrap": "preserve"
+}

README.md

@@ -5,6 +5,7 @@
 이번 과제는 더티코드를 클린코드의 형태로 개선을 하는 과제입니다. 주어진 테스트를 통과하면서 원래 기능과 동일한 동작을 하는 코드를 만들어주세요. basic과제는 제공되는 더티코드를 클린코드와 리팩토링 원칙에 입각해서 더 나은 코드로 만들어보세요. 주어진 테스트를 참고삼아 좋은 이름, 좋은 모양, 좋은 구조를 가지는 코드로 만들어 보세요.
 
 [목표]
+
 - /basic 디렉토리에 있는 더티코드를 클린코드로 리팩토링
 - 바닐라스크립트를 사용해서 작성된 코드를 클린코드와 리팩토링 원칙에 입각해서 더 나은 코드로 개선
 - 추후 React + Typescript로 고도화 리팩토링을 할 예정이니 이를 꼭 염두에 두고 React로 바꿔도 코드가 많이 변경되지 않도록 리팩토링
@@ -17,26 +18,65 @@
 - = 어플리케이션 요구사항을 모두 만족할 것 (/docs/PRD.md 참고)
 
 [과제의 취지]
+
 - 나쁜 코드를 몸으로 충분히 느껴보고, 왜 나쁜 코드를 쓰는 것이 나쁜지 이해하기
 - 나쁘지 않은 코드만으로 충분하지 않다는 것을 이해하기
 - 더 좋은 코드란 무엇인지를 고민하며 나의 코드 취향과 코드 감각 이해하기
 
-
 ## 심확과제: 유지보수 하기 좋은 코드만들기
 
 심화과제는 **기본과제에서 작성한 코드를 기술고도화를 하는 것입니다.** 바닐라 자바스크립트로 되어 있는 코드를 유지보수하기에 유리한 기술스택(React + Typescript)으로 고도화 리팩토링을 진행해주세요.
 우리의 목표는 앞으로 유지보수를 더 잘할 수 있도록 하기 위함입니다. 최소 React와 Typescript를 이용한 코드로 개선해주세요. 그 밖의 기술선택과 폴더/파일 구조, 테스트 코드등은 자유입니다.
 
 [목표]
+
 - /advanced 디렉토리에 있는 기본과제 코드를 React + Typescript로 고도화 리팩토링
 - /basic 기본과제에서 작성한 코드를 복사해서 /advanced 디렉토리에서 고도화 리팩토링 진행
 - 기본과제에서 작성한 코드를 React + Typescript로 고도화 리팩토링
 
 [과제의 취지]
+
 - React가 어떻게 유지보수하기 좋은 코드로 만들어주는지 이해하기
 - Typescript가 어떻게 유지보수하기 좋은 코드로 만들어주는지 이해하기
 - 내가 추구하는 좋은 코드와 React가 추구하는 코드와 어떻게 다른지 이해하기
 
+## 개발 환경 설정
+
+### 코드 품질 도구
+
+이 프로젝트는 Prettier와 ESLint를 사용하여 코드 품질을 관리합니다.
+
+#### 설치된 도구들
+
+- **Prettier**: 코드 포맷팅
+- **ESLint**: 코드 품질 검사 및 자동 수정
+
+#### 사용 가능한 스크립트
+
+```bash
+# 코드 품질 검사
+pnpm run code:check
+
+# 코드 자동 수정
+pnpm run code:fix
+
+# ESLint만 실행
+pnpm run lint
+pnpm run lint:fix
+
+# Prettier만 실행
+pnpm run format
+pnpm run format:check
+```
+
+#### VS Code 설정
+
+VS Code에서 자동 포맷팅과 린팅을 사용하려면 다음 확장 프로그램을 설치하세요:
+
+- ESLint (`dbaeumer.vscode-eslint`)
+- Prettier (`esbenp.prettier-vscode`)
+
+설치 후 파일 저장 시 자동으로 포맷팅과 린팅이 적용됩니다.
 
 ## 요청사항
 

docs/basic.md

@@ -0,0 +1,69 @@
+## 기본과제: 더티코드 개선
+
+이번 과제는 더티코드를 클린코드의 형태로 개선을 하는 과제입니다. 주어진 테스트를 통과하면서 원래 기능과 동일한 동작을 하는 코드를 만들어주세요. basic과제는 제공되는 더티코드를 클린코드와 리팩토링 원칙에 입각해서 더 나은 코드로 만들어보세요. 주어진 테스트를 참고삼아 좋은 이름, 좋은 모양, 좋은 구조를 가지는 코드로 만들어 보세요.
+
+### **1) 과제 세부 내용**
+
+[목표]
+
+- /basic 디렉토리에 있는 더티코드를 클린코드로 리팩토링
+- 바닐라스크립트를 사용해서 작성된 코드를 클린코드와 리팩토링 원칙에 입각해서 더 나은 코드로 개선
+- 추후 React + Typescript로 고도화 리팩토링을 할 예정이니 이를 꼭 염두에 두고 React로 바꿔도 코드가 많이 변경되지 않도록 리팩토링
+
+[필수조건]
+
+- Prettier와 ESLint를 설치해서 적용할 것
+- 테스트 코드 모두 통과할 것
+- = 기존 기능과 동일하게 동작할 것
+- = 어플리케이션 요구사항을 모두 만족할 것 (/docs/PRD.md 참고)
+
+[과제의 취지]
+
+- 나쁜 코드를 몸으로 충분히 느껴보고, 왜 나쁜 코드를 쓰는 것이 나쁜지 이해하기
+- 나쁘지 않은 코드만으로 충분하지 않다는 것을 이해하기
+- 더 좋은 코드란 무엇인지를 고민하며 나의 코드 취향과 코드 감각 이해하기
+
+### **2) 체크리스트**
+
+- 코드가 Prettier를 통해 일관된 포맷팅이 적용되어 있는가?
+- 적절한 줄바꿈과 주석을 사용하여 코드의 논리적 단위를 명확히 구분했는가?
+- 변수명과 함수명이 그 역할을 명확히 나타내며, 일관된 네이밍 규칙을 따르는가?
+- 매직 넘버와 문자열을 의미 있는 상수로 추출했는가?
+- 중복 코드를 제거하고 재사용 가능한 형태로 리팩토링했는가?
+- 함수가 단일 책임 원칙을 따르며, 한 가지 작업만 수행하는가?
+- 조건문과 반복문이 간결하고 명확한가? 복잡한 조건을 함수로 추출했는가?
+- 코드의 배치가 의존성과 실행 흐름에 따라 논리적으로 구성되어 있는가?
+- 연관된 코드를 의미 있는 함수나 모듈로 그룹화했는가?
+- ES6+ 문법을 활용하여 코드를 더 간결하고 명확하게 작성했는가?
+- 전역 상태와 부수 효과(side effects)를 최소화했는가?
+- 에러 처리와 예외 상황을 명확히 고려하고 처리했는가?
+- 코드 자체가 자기 문서화되어 있어, 주석 없이도 의도를 파악할 수 있는가?
+- 비즈니스 로직과 UI 로직이 적절히 분리되어 있는가?
+- 객체지향 또는 함수형 프로그래밍 원칙을 적절히 적용했는가?
+- 코드의 각 부분이 테스트 가능하도록 구조화되어 있는가?
+- 성능 개선을 위해 불필요한 연산이나 렌더링을 제거했는가?
+- 새로운 기능 추가나 변경이 기존 코드에 미치는 영향을 최소화했는가?
+- 리팩토링 시 기존 기능을 그대로 유지하면서 점진적으로 개선했는가?
+- 코드 리뷰를 통해 다른 개발자들의 피드백을 반영하고 개선했는가?
+
+### 3) 코드를 작성하면서 생각해볼 것
+
+- **가독성**: 좋은 코드는 읽기 쉽고 이해하기 쉽습니다.
+- **유지보수성**: 좋은 코드는 수정사항에 대응하기 쉬우며, 수정에 독립적이고 찾기 쉽습니다.
+- **확장성**: 좋은 코드는 새로운 기능을 추가할 때, 기존 코드를 크게 수정하지 않을 수 있습니다.
+- **견고성**: 좋은 코드는 에러가 발생했을 경우에도 동작하거나 대응하고, 에러를 발견하기 쉽습니다.
+- **“테스트 가능성**: 좋은 코드는 테스트를 작성하기 쉬우며, 단위별 테스트를 할 수 있습니다.”
+- **자기문서화**: 좋은 코드는 요구사항을 코드 자체로 이해할 수 있게 합니다.
+- **일관성**: 좋은 코드는 같은 규칙과 철학으로 작성되어 예측이 가능합니다.
+
+왜 이 코드가 더 좋아졌는지를 위 기준에 의거해서 설명할 수 있도록 합시다. 그리고 구체적인 방법들은 리팩토링 2판이나 GPT를 통해서 방법들을 함께 찾아보고 논의해보세요.
+
+### 4) 이후 심화과제가 React로 고도화라는 점 잊지 마세요!
+
+리팩토링의 방향성은 React와 닮아야 할 것입니다. React로 바꿀때 최대한 코드의 변경이 없으면 좋겠다고 생각하면서 작성해주세요.
+
+### 5) 테스트 코드를 통해서 사이드 이펙트 점검
+
+리팩토링은 기존 로직에는 변화가 없도록 하는 것이 핵심! 언제나 테스트 코드가 잘 동작하고 있는지 확인을 합시다.
+
+![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/83c75a39-3aba-4ba4-a792-7aefe4b07895/3ee10077-d31c-492a-ae5f-c71c94bbb39b/Untitled.png)

eslint.config.js

@@ -0,0 +1,67 @@
+import js from "@eslint/js";
+import prettier from "eslint-config-prettier";
+
+export default [
+  js.configs.recommended,
+  prettier,
+  {
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: {
+        browser: "readonly",
+        node: "readonly",
+        document: "readonly",
+        window: "readonly",
+        console: "readonly",
+        alert: "readonly",
+        setTimeout: "readonly",
+        setInterval: "readonly",
+        Math: "readonly",
+        Date: "readonly",
+        parseInt: "readonly",
+      },
+    },
+    rules: {
+      "no-unused-vars": "warn",
+      "no-console": "warn",
+      "prefer-const": "error",
+      "no-var": "error",
+      "object-shorthand": "error",
+      "prefer-template": "error",
+      "template-curly-spacing": "error",
+      "arrow-spacing": "error",
+      "no-duplicate-imports": "error",
+      "no-useless-rename": "error",
+      "prefer-destructuring": "warn",
+      "no-magic-numbers": "warn",
+      complexity: ["warn", 10],
+      "max-depth": ["warn", 4],
+      "max-lines-per-function": ["warn", 50],
+      "max-params": ["warn", 4],
+    },
+  },
+  {
+    files: ["**/*.test.js", "**/__tests__/**/*.js"],
+    languageOptions: {
+      globals: {
+        jest: "readonly",
+      },
+    },
+    rules: {
+      "no-console": "off",
+    },
+  },
+  {
+    ignores: [
+      "node_modules/**",
+      "dist/**",
+      "build/**",
+      "coverage/**",
+      "*.html",
+      "pnpm-lock.yaml",
+      "package-lock.json",
+      "yarn.lock",
+    ],
+  },
+];

package.json

@@ -11,14 +11,27 @@
     "start:advanced": "vite serve --open ./index.advanced.html",
     "test": "vitest",
     "test:basic": "vitest basic.test.js",
-    "test:advanced": "vitest advanced.test.js",
-    "test:ui": "vitest --ui"
+    "test:advanced": "vitest src/advanced/",
+    "test:ui": "vitest --ui",
+    "lint": "eslint src/**/*.js",
+    "lint:fix": "eslint src/**/*.js --fix",
+    "format": "prettier --write src/**/*.js",
+    "format:check": "prettier --check src/**/*.js",
+    "code:check": "npm run lint && npm run format:check",
+    "code:fix": "npm run lint:fix && npm run format"
   },
   "devDependencies": {
+    "@eslint/js": "^9.32.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.1",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
+    "@typescript-eslint/parser": "^8.38.0",
     "@vitest/ui": "^3.2.4",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.3",
     "jsdom": "^26.1.0",
+    "prettier": "^3.6.2",
     "vite": "^7.0.5",
     "vitest": "^3.2.4"
   }