feat: 접근제한자 설정

Author: bgyoons

src/App.ts

@@ -6,13 +6,13 @@ import { setItem } from "./utils/storage.js";
 import { TodoCount as TodoCnt, TodoItem } from "./types/todo.js";
 
 export default class App {
-  todoList: TodoList;
-  todoCount: TodoCount;
+  private readonly todoList: TodoList;
+  private readonly todoCount: TodoCount;
 
   constructor(
-    protected readonly $target: HTMLElement,
-    protected readonly initialState: TodoItem[],
-    protected readonly initialCount: TodoCnt
+    private readonly $target: HTMLElement,
+    private readonly initialState: TodoItem[],
+    private readonly initialCount: TodoCnt
   ) {
     new Header(this.$target, "Todo List");
 
@@ -27,14 +27,14 @@ export default class App {
     this.todoList = new TodoList(
       this.$target,
       this.initialState,
-      (state: TodoItem[]) => this.updateCount(state)
+      (state: TodoItem[]) => this.#updateCount(state)
     );
 
     this.todoCount = new TodoCount(this.$target, this.initialCount);
   }
 
   // 카운트 업데이트
-  updateCount(todoList: TodoItem[]) {
+  #updateCount(todoList: TodoItem[]) {
     const done = todoList.filter((todo) => todo.isCompleted).length;
     const nextState = { total: todoList.length, done };
     this.todoCount.setState(nextState);

src/components/Header.ts

@@ -1,5 +1,5 @@
 export default class Header {
-  $header = document.createElement("h1");
+  private readonly $header = document.createElement("h1");
 
   constructor(
     private readonly $target: HTMLElement,
@@ -9,7 +9,7 @@ export default class Header {
     this.render();
   };
 
-  render() {
+  private render() {
     this.$header.textContent = this.text;
   }
 };

src/components/TodoCount.ts

@@ -1,8 +1,8 @@
 import { TodoCount as TodoCnt } from "../types/todo.js";
 
 export default class TodoCount {
-  $container = document.createElement("div");
-  state: TodoCnt;
+  private readonly $container = document.createElement("div");
+  private state: TodoCnt;
 
   constructor(
     private readonly $target: HTMLElement,
@@ -22,7 +22,7 @@ export default class TodoCount {
     this.render();
   };
 
-  render() {
+  private render() {
     this.$container.textContent = `완료 ${this.state.done}개 / 총 ${this.state.total}개`;
   };
 }

src/components/TodoForm.ts

@@ -1,7 +1,7 @@
 
 export default class TodoForm {
-  $form = document.createElement("form");
-  isInit = false;
+  private readonly $form = document.createElement("form");
+  private isInit = false;
 
   constructor(
     private readonly $target: HTMLElement,
@@ -11,7 +11,7 @@ export default class TodoForm {
     this.render();
   }
 
-  render() {
+  private render() {
     this.$form.innerHTML = `
       <input type="text" placeholder="할 일을 입력하세요" name="todo" />
       <button>추가</button>

src/components/TodoList.ts

@@ -4,7 +4,7 @@ import { TodoItem } from "../types/todo.js";
 
 export default class TodoList {
   state: TodoItem[] = [];
-  $todoList = document.createElement("div");
+  private readonly $todoList = document.createElement("div");
 
   constructor(
     private readonly $target: HTMLElement,
@@ -51,7 +51,7 @@ export default class TodoList {
     this.render();
   };
 
-  render() {
+  private render() {
     this.$todoList.innerHTML = `
       <ul>
         ${this.state