HTML+Javascript+CSS 기본 실습

IT기술 2025. 3. 24. 08:24

🧑‍💻 코드 리뷰 – To-Do List 프로젝트 전체 점검 ✅📋
구성: HTML + CSS + JS
기능: 기본적인 체크박스 기반 할 일 리스트 + 선택 삭제 + 전체 삭제

1️⃣ HTML 리뷰

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>To-Do List</title>
  <link rel="stylesheet" href="style.css">


</head>
<body>
  <h1>📋 할 일 리스트</h1>

  <div class="input-area">
    <input type="text" id="todoInput" placeholder="할 일을 입력하세요">
    <button onclick="addItem()">➕ 추가</button>
    <!-- <button onclick="addItem()">➕ 아이템 추가</button> -->
    <button onclick="removeItem()">❌ 삭제</button>
    <button onclick="removeAllItem()">❌ 전체삭제</button>
  </div>

  <ul id="todoList"></ul>

  <script src="script.js"></script>
</body>
</html>

✅ 장점

구조 간결, 시맨틱 태그 사용 적절 (<input>, <button>, <ul>)
lang="ko" 및 charset="UTF-8" 세팅 완벽
버튼 텍스트 + 이모지 사용은 UX 측면에서 직관적 👌

🔧 개선 제안

위치 개선 포인트 이유

<button onclick="...">	onclick 대신 addEventListener를 JS에서 사용	유지보수성 향상, HTML 분리 원칙
<script src="script.js">	defer 속성 추가 추천	DOM 로드 이후 실행되도록 보장 (<script defer src="...">)

2️⃣ JS 리뷰

function addItem() {
    const input = document.getElementById("todoInput");
    const text = input.value.trim();

    if (text === "") {
        alert("할 일을 입력해 주세요!");
        return;
    }

    //체크박스 선언
    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";

    //리스트
    const list = document.getElementById("todoList");

    //리스트 아이템
    const item = document.createElement("li");
    //item.textContent = text;

    //아이템 텍스트
    const textNode = document.createTextNode(" " + text);

    // // 클릭하면 삭제
    // item.addEventListener("click", function () {
    //     list.removeChild(item);
    // });

    item.appendChild(checkbox);
    item.appendChild(textNode);
    
    list.appendChild(item);
    input.value = "";  // 입력창 초기화
}


function removeItem() {
    console.log("삭제 함수 실행됨");
    const list = document.getElementById("todoList");
    const items = list.querySelectorAll("li");

    items.forEach(item => {
        console.log("삭제 for each문 실행중");
        const checkbox = item.querySelector("input[type='checkbox']");
        if (checkbox && checkbox.checked) {
            list.removeChild(item);
        }
    });
}


function removeAllItem() {
    console.log("전체삭제 함수 실행됨");

    // 1. UL 가져오기
    const list = document.getElementById("todoList");

    // 전체 Item 삭제
    while (list.firstChild) {
        list.removeChild(list.firstChild);
    }


    // // 2. 모든 할 일 항목(li) 가져오기
    // const items = list.querySelectorAll("li");

    // // 3. 항목들 하나씩 확인
    // items.forEach(item => {
    //     console.log("전체삭제 for each문 실행 중.")
    //     const checkbox = item.querySelector("input[type='checkbox']");

    //     // 4. 체크되어 있으면 삭제
    //     if (checkbox && checkbox.checked) {
    //         list.removeChild(item);
    //     }
    // });
}
    


    // // 클릭하면 삭제
    // item.addEventListener("click", function () {
    //     list.removeChild(item);
    // });

✅ 기능 구현 훌륭한 점

공백 입력 방지 로직 (trim())
체크박스 생성 및 li에 동적 추가
선택 삭제와 전체 삭제 모두 별도 함수로 분리 💡
console.log()로 디버깅 포인트 확인 가능

🔧 개선 제안

위치 개선 포인트 이유

onclick="addItem()" 등	JS 내부에서 addEventListener를 통해 바인딩하는 방식 권장	HTML과 JS 분리, 재사용성 증가
list.removeChild(item)	forEach로 루프 돌며 삭제할 경우, 역순으로 제거해야 안전	현재는 정상 작동하나 DOM 변경 중 순회는 버그 유발 가능성
checkbox 태그 분리 선언	별도 함수로 빼서 추후 UI 확장 대비	예: createTodoItem(text) 등

🧠 리팩토링 예시 (이벤트 연결)

document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('button[onclick="addItem()"]').onclick = addItem;
    document.querySelector('button[onclick="removeItem()"]').onclick = removeItem;
    document.querySelector('button[onclick="removeAllItem()"]').onclick = removeAllItem;
});

또는 아예 querySelectorAll('button')로 순회하며 data-action 같은 커스텀 속성으로 처리도 가능해요.

3️⃣ CSS 리뷰

body {
    font-family: sans-serif;
    background-color: #f0f0f0;
    padding: 20px;
  }
  
  .input-area {
    margin-bottom: 20px;
  }
  
  input {
    padding: 10px;
    font-size: 16px;
  }
  
  button {
    padding: 10px;
    font-size: 16px;
    margin-left: 5px;
    background-color: #4CAF50;
    color: white;
    border: none;
  }

  button:hover{
    background: #66BB6A;
    cursor: pointer;
  }
  
  ul {
    list-style: none;
    padding: 0;
  }
  
  li {
    background: white;
    padding: 10px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: 0.2s;
    
    display: flex;
    align-items: center;
    gap: 8px;

  }
  
  li:hover {
    background: #ddd;
  }

✅ 디자인 장점

hover, transition, gap, display: flex 활용으로 UI 깔끔함 🎨
버튼 스타일이 눈에 잘 띔 (색상 일관성 OK)
li 항목도 사용자 피드백 반응 좋음 (hover 색상 변경)

🔧 개선 제안

선택자 개선 포인트 이유

input, button	공통적인 패딩, 폰트 등은 .input-area * 또는 공통 클래스화 추천	CSS 코드 재사용성 향상
배경색 #f0f0f0	다크 모드 대비 시 :root에 변수로 처리 고려	확장성 / 테마 유연성 확보
li:hover	커서 기본 설정 OK지만, 클릭 이벤트가 없으므로 pointer 불필요	UX 명확성

📦 종합 정리

항목 평가

기능 구현	✅ 매우 충실
UI/UX	✅ 직관적이고 깔끔
유지보수성	🟡 개선 여지 있음 (이벤트 바인딩 방식, 구조 분리)
성능/안정성	✅ 현재 구조에서는 충분
확장성	🟡 컴포넌트화나 템플릿화 시도 가능

💡 다음 단계 추천

✅ 개별 아이템에 삭제 버튼 추가
✅ localStorage로 저장해서 새로고침 후에도 유지되도록
✅ 완료 항목 스타일(취소선, 색상 변경 등) 추가
🧩 Vue/React로 리팩토링해보기

필요하면 위 추천 기능들도 빠르게 구현 도와줄게요 🧑‍💻
원하는 기능 키워드만 말해줘!

'IT기술' 카테고리의 다른 글

리터럴 문법 오류 (백틱) (0)	2025.03.24
Javacript 위치 (인라인 스크립트 vs 외부 스크립트) (0)	2025.03.24
DB Migration (MariaDB to MSSQL) (0)	2025.03.14
vlan과 Trunc (0)	2022.05.23
Putty 화면설정 (0)	2022.05.18

ABOUT ME

딘스 딘스

1️⃣ HTML 리뷰

✅ 장점

🔧 개선 제안

2️⃣ JS 리뷰

✅ 기능 구현 훌륭한 점

🔧 개선 제안

🧠 리팩토링 예시 (이벤트 연결)

3️⃣ CSS 리뷰

✅ 디자인 장점

🔧 개선 제안

📦 종합 정리

💡 다음 단계 추천

'IT기술' 카테고리의 다른 글

티스토리툴바

ABOUT ME

1️⃣ HTML 리뷰

✅ 장점

🔧 개선 제안

2️⃣ JS 리뷰

✅ 기능 구현 훌륭한 점

🔧 개선 제안

🧠 리팩토링 예시 (이벤트 연결)

3️⃣ CSS 리뷰

✅ 디자인 장점

🔧 개선 제안

📦 종합 정리

💡 다음 단계 추천

'IT기술' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바