AI랑 같이하는 코딩

7일차에서는 할 일 항목에 완료 체크와 삭제 기능을 붙입니다. 6일차에 "추가"까지 됐다면, 오늘은 목록을 실제로 관리할 수 있게 만드는 단계입니다. 완료 상태 전환 + 개별 삭제가 들어가면 웹앱 사용감이 한 단계 올라갑니다.

이 단계의 핵심은 "클릭한 항목만 정확히 제어"하는 흐름입니다. 초보자도 이벤트 타겟 개념을 한 번 익혀두면 이후 필터, 진행률, 저장 기능으로 확장할 때 훨씬 유리합니다.

1. 오늘 만들 기능 소개

오늘 기능은 두 가지입니다. 첫째, 체크박스를 눌러 완료 상태를 표시하고 완료 항목 스타일(예: 취소선, 색상 변경)을 적용합니다. 둘째, 삭제 버튼을 눌렀을 때 해당 항목만 목록에서 제거합니다.

이 두 기능이 들어가면 웹앱이 단순 메모장이 아니라 "작업 관리 도구"처럼 동작하기 시작합니다. 무엇을 끝냈는지 시각적으로 확인할 수 있고, 필요 없는 항목도 즉시 정리할 수 있어 사용성이 크게 좋아집니다.

2. AI에게 요청할 프롬프트

오늘은 AI에게 "각 항목 내부 구조"를 구체적으로 요청하는 것이 중요합니다. 체크박스, 텍스트, 삭제 버튼이 한 묶음으로 생성되게 지시하면 코드가 깔끔해집니다.

하루 관리 웹앱 7일차 작업이야.
추가된 할 일 li 안에 체크박스, 텍스트 span, 삭제 버튼을 함께 넣어줘.
체크박스를 누르면 완료 클래스(completed)를 토글하고,
삭제 버튼을 누르면 클릭한 li만 삭제되게 JavaScript 코드를 작성해줘.

받은 코드에서 클래스명(`completed`)과 버튼 클래스명(`delete-btn`)을 통일해두면, CSS 적용과 디버깅이 훨씬 쉬워집니다.

3. 코드 작성과 실행 과정

먼저 6일차의 항목 추가 코드에서 `li.textContent = ...` 방식 대신, `li` 안에 체크박스 input, 텍스트 span, 삭제 button을 생성해 붙이는 구조로 바꿉니다. 이후 체크박스 change 이벤트에서 `li.classList.toggle('completed')`를 적용하고, 삭제 버튼 click 이벤트에서 해당 `li.remove()`를 실행합니다.

테스트할 때는 할 일을 3개 이상 추가한 뒤, 1개는 완료 체크, 1개는 삭제, 1개는 그대로 두는 식으로 각각 검증해보세요. 직접 바꿔보기 미션으로 완료 항목의 불투명도를 낮추거나 삭제 버튼 색상을 바꿔보면 "동작 + 스타일" 조합 감각을 빠르게 익힐 수 있습니다.

4. 코드 이해하기

오늘의 핵심 개념은 "DOM 항목 단위 제어"입니다. 목록 전체를 다시 그리기보다, 클릭한 li만 대상으로 조작하는 방식이 성능과 가독성 모두에 유리합니다. 특히 `closest`, `parentElement`, `remove` 같은 메서드는 이후 기능 확장에서 자주 쓰입니다.

또한 완료 상태를 별도 변수로 저장하지 않고 클래스 토글로 표현하는 패턴은 매우 실용적입니다. 상태를 클래스에 반영하면 CSS와 JavaScript 역할이 자연스럽게 분리되어 유지보수가 쉬워집니다.

5. 오늘 만든 내용 정리

오늘은 할 일 항목에 완료 체크와 삭제 기능을 추가해 목록 관리의 핵심 동작을 완성했습니다. 이제 웹앱은 단순 추가를 넘어 실제로 정리 가능한 상태가 되었고, 사용자는 완료한 일과 남은 일을 직관적으로 구분할 수 있습니다. 다음 8일차에서는 localStorage를 연결해 새로고침 후에도 목록이 유지되게 확장해보겠습니다.

6. 자주 묻는 질문

7. 다음 단계로 이어가기