woowacourse
diff --git a/‎.eslintrc.json‎
Lines changed: 5 additions & 27 deletions b/‎.eslintrc.json‎
Lines changed: 5 additions & 27 deletions
diff --git a/‎.github/workflows/deploy.yml‎
Lines changed: 52 additions & 0 deletions b/‎.github/workflows/deploy.yml‎
Lines changed: 52 additions & 0 deletions
diff --git a/‎.gitignore‎
Lines changed: 3 additions & 0 deletions b/‎.gitignore‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎README.md‎
Lines changed: 84 additions & 0 deletions b/‎README.md‎
Lines changed: 84 additions & 0 deletions
diff --git a/‎__tests__/Application.js‎
Lines changed: 190 additions & 0 deletions b/‎__tests__/Application.js‎
Lines changed: 190 additions & 0 deletions
@@ -8,34 +8,12 @@
     "sourceType": "module"
   },
   "rules": {
-    "no-process-exit": "warn",
-    "no-console": "off",
-    "import/extensions": [
-      "warn",
-      "never",
-      {
-        "js": "always"
-      }
-    ],
-    "no-constant-condition": "off",
-    "func-style": ["off"],
-
     "lines-between-class-members": ["warn", "always", { "exceptAfterSingleLine": true }],
-    "no-unused-vars": "off",
-    "import/no-cycle": "off",
-    "no-new": "off",
-    "no-restricted-syntax": "off",
-    "import/prefer-default-export": "off",
-    "no-return-await": "off",
-    "simple-import-sort/imports": "warn",
-    "simple-import-sort/exports": "warn",
-    "no-empty-function": "off",
-    "class-methods-use-this": "off",
-    "no-useless-constructor": "off",
-    "max-len": "off",
-    "no-continue": "off",
-    "max-params": ["warn", 2],
-    "max-depth": ["warn", 1]
+    // 프로그래밍 요구사항
+    "functional/no-let": "error",
+    "max-depth": ["error", 1],
+    "max-params": ["error", 2],
+    "max-lines-per-function": ["error", 10]
   },
   "settings": {
     "react": {
 
@@ -0,0 +1,52 @@
+name: Deploy static content to Pages
+
+on: push
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+      - name: Use Cache
+        uses: actions/cache@v3
+        id: cache
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install dependencies
+        run: npm ci
+        if: steps.cache.outputs.cache-hit != 'true'
+
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+coverage
+*.css.map
@@ -54,3 +54,87 @@
     다시 시작하시겠습니까? (y/n)
     ```
     - [예외] y/n이 아닐 경우
+
+## 프로젝트 소개
+
+web/App.js에서 핵심 로직을 담당하고 있습니다. App.js에는 크게 두 가지의 메서드가 있습니다.
+
+1. 초기 렌더링 : header, footer, 그리고 로또 구매 폼같은 정적인 요소를 렌더링합니다.
+2. 이벤트 리스너 바인딩 : 로또 구매 폼을 눌렀을 때, 그리고 그 이후 렌더링되는 요소의 이벤트까지 동적인 요소를 담당합니다.
+
+뷰 로직은 InputView.js와 OutputView.js에서 담당하며 App.js에서 이를 호출합니다.
+
+1. web/InputView.js : 문서에서 필요한 input요소를 찾아서 값을 가져와 이를 반환합니다.
+2. web/OutputView.js : 문서에 요소를 추가한다. 이 때 container요소에 새로운 요소를 추가합니다.
+
+### 가장 신경 쓴 부분
+
+1. Step2를 진행하며 가장 신경 쓴 부분은 각 객체의 책임입니다. App.js는 정적 렌더링과 이벤트 바인딩을, Output.js는 사용자에게 보여주는 화면을, Input.js는 사용자로부터 입력받은 데이터를 가져오는 역할을 수행한ㄷ
+
+## 리뷰 요청 & 논의하고 싶은 내용
+
+<!-- PR 작성자로서, 코드만으로는 알기 어려운 작성자의 의도와 문제 해결 과정에 대해 공유해 주세요.
+
+이 PR에서 달성해야 하는 학습 목표를 잘 달성하고 있는지 스스로 확인하며, 피드백 받을 수 있는 내용일지 점검해 보세요.
+리뷰어에게 정답을 묻기보다 고민하고 의사 결정한 과정에 대해 공유하고 이에 대한 피드백을 받으며 대화해보기를 권장합니다. -->
+
+### 1) 이번 단계에서 가장 많이 고민했던 문제와 해결 과정에서 배운 점
+
+<!-- 구현 과정에서 가장 어려웠던 점이나 많이 고민한 점은 무엇인가요?
+이를 해결하기 위해 어떤 방법들을 검토하고 시도했으며, 그 과정에서 새롭게 배운 점이 있나요? -->
+
+1. 콜백 패턴 때문에 가독성이 떨어진다.
+
+   프로그램 흐름 순서는 다음과 같습니다.
+
+   사용자가 구매 금액을 입력하면 → 구매한 로또를 보여주고, 로또 번호를 입력하면 → 결과를 보여준다.
+
+   순차적인 방식이기에 이벤트 핸들러를 폼에 달고, 그 다음 보여주는 폼에 이벤트 핸들러는 방식으로 구현을 할 수밖에 없다는 생각을 했습니다. 이 이벤트 핸들러를 어떻게 하면 조금이라도 더 가독성을 좋게 할 수 있을까 하다가 JavaScript의 함수 호이스팅을 활용해서 함수를 더 뒤에 작성하는 방식으로 작성을 했습니다. 이벤트 핸들러에서 함수를 전달하고, 그 다음 함수를 작성하는 방식입니다.
+
+   이렇게 함으로써 조금이라도 가독성을 개선시킬 수 있을 것이라 생각했습니다. 그럼에도 콜백 함수에서 콜백 함수를 호출하는 것이기에 가독성이 여전히 떨어진다고 느꼈습니다.
+
+   ⇒ 이를 App.js클래스의 상태 관리와 메서드 분리를 통해서 개선을 했습니다.
+
+   ⇒ window에 이벤트 리스너를 등록하는 이벤트 위임을 통해, 이전 요소의 렌더링 여부와 관계없이 이벤트 리스너를 등록할 수 있어 호출(attach..)만 하면 됩니다. 이를 통해 콜백 패턴의 문제를 해결했습니다.
+
+2. 컴포넌트 단위로 나누어야할까?
+
+   리액트를 사용한다면 페이지를 컴포넌트 단위로 나누고, 컴포넌트를 조합해 코드를 작성했을 것입니다. 하지만 현재 작성한 코드의 구조는 컴포넌트 단위로 나누기보다는, App.js 내에서 OutputView를 호출해 필요한 요소를 브라우저에 추가하는 방식으로 구현이 되었습니다. 그래서 클래스형 기반의 컴포넌트를 만들고, 이를 조합해 사용하는 방식으로 구현할까 고민을 했습니다.
+
+   하지만 이번 로또 2단계 과제 구현의 목표는 `UI와 도메인 영역을 분리할 수 있는 설계`와 `목적에 맞게 객체와 함수를 활용`, `단위 테스트 기반으로 점진적인 리팩터링`이었습니다. 이러한 목표에 컴포넌트로 나누고 이를 조합하는 방식은 목표와 떨어진다고 판단했습니다. 그래서 이번 과제제의 목표를 이루는데 중점을 두었습니다.
+
+   UI와 도메인 영역은 각각 InputView, OutputView, 그리고 도메인 영역은 스텝 1에서 구현한 도메인 로직을 활용했습니다.
+
+3. DOM을 직접 만들고 삽입하는게 맞을까?
+
+   처음에는 일일이 document.createElement로 요소를 생성하고 이를 삽입하는 방식으로 구현을 했습니다다. 이렇게 구현을 하니 가독성이 매우 떨어지는 것이 느껴졌습니다. 전체적인 구조가 전혀 보이지 않았습니다. 예를 들어 아래와 같습니다.
+
+   ```jsx
+   const todoItem = document.createElement('li');
+   const checkbox = document.createElement('input');
+   checkbox.type = 'checkbox';
+   checkbox.className = 'todo-checkbox';
+
+   todoItem.appendChild(checkbox);
+   todoItem.appendChild(todoText);
+   ```
+
+   위와 같은 방식은 너무 명령적이고, 가독성이 떨어진다고 판단했습니다. 그래서 아래와 같이 innerHTML을 활용한 코드로 수정했습니다.
+
+   ```jsx
+   todoList.innerHTML += `
+     <li>
+       <input type="checkbox" class="todo-checkbox">
+     </li>
+   `;
+   ```
+
+4. index.html에 초기 html이 있는게 맞을까?
+
+   처음에 보여주는 html을 index.html에 작성했습니다. 그리고 그 이후에는 돔을 javascript로 추가하는 방식이었습니다. 그런데 이 방식이 과연 더 적절할까 고민을 했습니다. 초반에 html이 있다는 말은, 그 요소들은 html에 기본적으로 있다는 것을 의미합니다. 물론 이 또한 JavaScript를 이용해 동적으로 수정이 가능하며 있어도 무방합니다.
+
+   그럼에도 javascript로 전부 동적으로 수정할 수 있다고 개발자에게 알리기 위해 모든 요소를 javascript로 삽입하는 방식을 채택했습니다.
+
+5. class와 id는 어느 상황에 써야할까?
+
+   처음에는 id와 class를 혼합해서 사용해 혼란스러웠습니다. 일관된 규칙이 없었습니다. 그래서 이 둘의 규칙을 만들어야겠다고 생각했고, id는 페이지 내에서 유일한 app, container같은 요소에만 사용했고 그 외에는 class를 사용했습니다.
@@ -0,0 +1,190 @@
+import App from '../src/command/App.js';
+import InputView from '../src/command/views/InputView.js';
+import { ERROR_MESSAGES, NO, YES } from '../src/lib/constants';
+import * as utils from '../src/lib/utils.js';
+
+const mockReadLineAsync = (mockValues) => {
+  mockValues.forEach((mockValue) => jest.spyOn(InputView, 'readLineAsync').mockResolvedValueOnce(mockValue));
+};
+
+const mockGenerateUniqueNumbers = (mockValues) => {
+  mockValues.forEach((mockValue) => jest.spyOn(utils, 'generateUniqueNumbers').mockReturnValueOnce(mockValue));
+};
+
+describe('Application', () => {
+  let consoleLogSpy;
+  beforeEach(() => {
+    consoleLogSpy = jest.spyOn(console, 'log');
+  });
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('기능 요구사항 테스트', () => {
+    it('정상적인 경우의 출력을 테스트한다.', async () => {
+      mockReadLineAsync(['5000', '1,2,3,4,5,6', '7', NO]);
+      mockGenerateUniqueNumbers([
+        [1, 2, 3, 4, 5, 6],
+        [1, 2, 3, 4, 5, 11],
+        [1, 2, 3, 4, 11, 12],
+        [1, 2, 3, 11, 12, 13],
+        [1, 2, 11, 12, 13, 14],
+      ]);
+
+      const app = new App();
+      await app.run();
+
+      [
+        '5개를 구매했습니다.',
+        [1, 2, 3, 4, 5, 6],
+        [1, 2, 3, 4, 5, 11],
+        [1, 2, 3, 4, 11, 12],
+        [1, 2, 3, 11, 12, 13],
+        [1, 2, 11, 12, 13, 14],
+        '3개 일치 (5,000원) - 1개',
+        '4개 일치 (50,000원) - 1개',
+        '5개 일치 (1,500,000원) - 1개',
+        '5개 일치, 보너스 볼 일치 (30,000,000원) - 0개',
+        '6개 일치 (2,000,000,000원) - 1개',
+        '총 수익률은 40031100%입니다.',
+      ].forEach((expectedConsoleLogMessage) => {
+        expect(consoleLogSpy).toHaveBeenCalledWith(expectedConsoleLogMessage);
+      });
+    });
+
+    it('로또 구입 금액을 입력하면 구입 금액에 해당하는 만큼 로또를 발행해야 한다.', async () => {
+      mockReadLineAsync(['1000', '1,2,3,4,5,6', '7', NO]);
+
+      const app = new App();
+      await app.run();
+
+      ['1개를 구매했습니다.'].forEach((expectedConsoleLogMessage) => {
+        expect(consoleLogSpy).toHaveBeenCalledWith(expectedConsoleLogMessage);
+      });
+    });
+
+    it('로또 번호는 오름차순으로 정렬하여 보여준다.', async () => {
+      mockReadLineAsync(['1000', '1,2,3,4,5,6', '7', NO]);
+      mockGenerateUniqueNumbers([[3, 2, 5, 4, 1, 6]]);
+
+      const app = new App();
+      await app.run();
+
+      [[1, 2, 3, 4, 5, 6]].forEach((expectedConsoleLogMessage) => {
+        expect(consoleLogSpy).toHaveBeenCalledWith(expectedConsoleLogMessage);
+      });
+    });
+
+    it('재시작시 게임을 다시 시작한다.', async () => {
+      mockReadLineAsync(['1000', '1,2,3,4,5,6', '7', YES, '1000', '1,2,3,4,5,6', '7', NO]);
+      mockGenerateUniqueNumbers([
+        [1, 2, 3, 4, 5, 7],
+        [1, 2, 3, 4, 5, 8],
+      ]);
+
+      const app = new App();
+      await app.run();
+
+      [
+        [1, 2, 3, 4, 5, 7],
+        [1, 2, 3, 4, 5, 8],
+      ].forEach((expectedConsoleLogMessage) => {
+        expect(consoleLogSpy).toHaveBeenCalledWith(expectedConsoleLogMessage);
+      });
+    });
+  });
+
+  describe('예외 사항 처리', () => {
+    describe('구입금액', () => {
+      it('구입 금액은 양의 정수여야한다.', async () => {
+        mockReadLineAsync(['0', '1000', '1,2,3,4,5,6', '7', NO]);
+        mockGenerateUniqueNumbers([[3, 2, 5, 4, 1, 6]]);
+
+        const app = new App();
+        await app.run();
+
+        [ERROR_MESSAGES.purchaseAmount.positiveInteger].forEach((expectedConsoleLogMessage) => {
+          expect(consoleLogSpy).toHaveBeenCalledWith(expectedConsoleLogMessage);
+        });
+      });
+      it('구입 금액은 1000으로 나누어 떨어져야한다.', async () => {
+        mockReadLineAsync(['10', '1000', '1,2,3,4,5,6', '7', NO]);
+        mockGenerateUniqueNumbers([[3, 2, 5, 4, 1, 6]]);
+
+        const app = new App();
+        await app.run();
+
+        [ERROR_MESSAGES.purchaseAmount.thousandUnit].forEach((expectedConsoleLogMessage) => {
+          expect(consoleLogSpy).toHaveBeenCalledWith(expectedConsoleLogMessage);
+        });
+      });
+    });
+
+    describe('당첨 번호', () => {
+      it('당첨 번호는 중복되지 않은 숫자여야한다.', async () => {
+        mockReadLineAsync(['1000', '1,2,3,4,5,5', '1,2,3,4,5,6', '7', NO]);
+        mockGenerateUniqueNumbers([[3, 2, 5, 4, 1, 6]]);
+
+        const app = new App();
+        await app.run();
+
+        [ERROR_MESSAGES.winNumber.unique].forEach((expectedConsoleLogMessage) => {
+          expect(consoleLogSpy).toHaveBeenCalledWith(expectedConsoleLogMessage);
+        });
+      });
+      test.each(['1,2,3,4,5,6,7', '1,2,3,4,5', '1,2,3,4,5,46', '0,1,2,3,4,5'])(
+        '당첨 번호은 6개의 1-45 사이의 정수여야한다.',
+        async (value) => {
+          mockReadLineAsync(['1000', value, '1,2,3,4,5,6', '7', NO]);
+          mockGenerateUniqueNumbers([[3, 2, 5, 4, 1, 6]]);
+
+          const app = new App();
+          await app.run();
+
+          [ERROR_MESSAGES.winNumber.range].forEach((expectedConsoleLogMessage) => {
+            expect(consoleLogSpy).toHaveBeenCalledWith(expectedConsoleLogMessage);
+          });
+        },
+      );
+    });
+
+    describe('보너스 번호', () => {
+      it('보너스 번호는 당첨 번호와 중복되면 안된다.', async () => {
+        mockReadLineAsync(['1000', '1,2,3,4,5,6', '6', '7', NO]);
+        mockGenerateUniqueNumbers([[3, 2, 5, 4, 1, 6]]);
+
+        const app = new App();
+        await app.run();
+
+        [ERROR_MESSAGES.bonusNumber.unique].forEach((expectedConsoleLogMessage) => {
+          expect(consoleLogSpy).toHaveBeenCalledWith(expectedConsoleLogMessage);
+        });
+      });
+      test.each(['0', '46', 'a', '1,2'])('보너스 번호는 1개의 1-45 사이의 정수여야한다.', async (value) => {
+        mockReadLineAsync(['1000', '1,2,3,4,5,6', value, '7', NO]);
+        mockGenerateUniqueNumbers([[3, 2, 5, 4, 1, 6]]);
+
+        const app = new App();
+        await app.run();
+
+        [ERROR_MESSAGES.bonusNumber.range].forEach((expectedConsoleLogMessage) => {
+          expect(consoleLogSpy).toHaveBeenCalledWith(expectedConsoleLogMessage);
+        });
+      });
+    });
+
+    describe('재시작 여부', () => {
+      test.each(['Y', 'N', 'Of Course! Why Not?'])(`재시작 여부는 ${YES} 또는 ${NO}이어야한다.`, async (value) => {
+        mockReadLineAsync(['1000', '1,2,3,4,5,6', '7', value, NO]);
+        mockGenerateUniqueNumbers([[3, 2, 5, 4, 1, 6]]);
+
+        const app = new App();
+        await app.run();
+
+        [ERROR_MESSAGES.retry.yesOrNo].forEach((expectedConsoleLogMessage) => {
+          expect(consoleLogSpy).toHaveBeenCalledWith(expectedConsoleLogMessage);
+        });
+      });
+    });
+  });
+});