AI랑 같이하는 코딩

15일차에서는 할 일 검색과 상태 필터 기능을 추가합니다. 항목이 많아질수록 원하는 할 일을 찾기 어려워지기 때문에, 키워드 검색 + 완료/미완료 필터는 사용성을 크게 높여줍니다.

오늘 구현의 핵심은 목록 전체를 다시 만들지 않고, 조건에 맞는 항목만 보여주거나 숨기는 방식으로 가볍게 처리하는 것입니다.

1. 오늘 만들 기능 소개

오늘은 두 가지를 만듭니다. 첫째, 입력한 키워드가 포함된 할 일만 보여주는 검색 기능. 둘째, 전체/완료/미완료 조건으로 목록을 나눠 보는 상태 필터입니다.

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

검색 기준과 필터 종류를 함께 요청하면 구현이 빠릅니다.

하루 관리 웹앱 15일차 작업이야.
할 일 목록에 검색 입력창을 추가하고, 입력 키워드로 항목을 필터링해줘.
또한 전체/완료/미완료 버튼 필터를 만들어 조건에 맞는 항목만 표시해줘.
검색어와 상태 필터가 동시에 적용되도록 JavaScript 코드를 작성해줘.

3. 코드 작성과 실행 과정

먼저 검색 입력창과 필터 버튼 3개를 UI에 추가합니다. JavaScript에서는 현재 검색어와 현재 필터 상태를 변수로 관리하고, 목록 항목을 순회하며 조건 일치 여부에 따라 `display`를 제어합니다.

4. 코드 이해하기

오늘 핵심은 "상태 조합"입니다. 검색 조건과 완료 상태 조건을 각각 계산한 뒤, 두 조건이 모두 true일 때만 보여주는 방식으로 작성하면 로직이 명확해집니다.

필터 기능은 데이터 변경보다 표시 규칙 변경이라는 점이 중요합니다. 원본 목록을 지우지 않고 보여주는 방식으로 처리해야 안정적으로 동작합니다.

5. 오늘 만든 내용 정리

오늘은 검색과 상태 필터를 추가해 목록 탐색 효율을 높였습니다. 할 일이 많아져도 원하는 항목을 빠르게 찾을 수 있어 실제 사용성이 크게 개선됐습니다. 다음 16일차에서는 모바일 화면 최적화를 적용해 어디서든 보기 좋은 웹앱으로 확장해보겠습니다.

6. 자주 묻는 질문

7. 다음 단계로 이어가기