AI랑 같이하는 코딩

17일차에서는 기능이 늘어나며 복잡해진 코드를 파일별로 정리합니다. 지금까지 빠르게 기능을 붙였다면, 오늘은 유지보수하기 쉬운 구조로 다듬는 날입니다. 파일 분리와 역할 분리를 해두면 이후 수정 속도와 안정성이 크게 좋아집니다.

특히 초보자에게 리팩토링은 "어려운 최적화"가 아니라 코드를 읽기 쉬운 상태로 정돈하는 습관이라는 점이 중요합니다.

1. 오늘 만들 기능 소개

오늘 목표는 HTML, CSS, JavaScript 파일을 역할 중심으로 정리하고, 중복 코드와 길어진 이벤트 로직을 함수 단위로 분리하는 것입니다. 기능 추가는 잠시 멈추고 구조를 개선해 "고치기 쉬운 웹앱"으로 바꿉니다.

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

AI에게 현재 파일 구조와 원하는 정리 기준을 같이 주면 효과적입니다.

하루 관리 웹앱 17일차 리팩토링 작업이야.
현재 index.html, style.css, script.js를 유지하면서,
script.js의 중복 코드를 함수로 분리하고 이름을 읽기 쉽게 정리해줘.
기능은 바꾸지 말고 구조만 개선하는 방향으로 수정안을 제안해줘.

3. 코드 작성과 실행 과정

먼저 `script.js`에서 공통 동작(요소 선택, 저장 호출, 렌더링)을 함수로 묶습니다. 이벤트 등록 코드는 하단에 모으고, 데이터 처리 로직은 상단 함수 영역으로 분리하면 읽기 쉬워집니다. CSS도 컴포넌트별 블록(레이아웃, 카드, 버튼, 상태 클래스)로 구획을 나눠 정리합니다.

4. 코드 이해하기

오늘 핵심은 "기능 동일, 구조 개선"입니다. 리팩토링에서는 동작 결과가 바뀌면 안 되므로, 작은 단위로 나눠 수정하고 매 단계마다 브라우저에서 확인하는 방식이 안전합니다.

좋은 리팩토링은 코드 줄 수보다 의도를 빨리 읽을 수 있는가로 판단합니다. 함수명과 변수명을 명확히 정리하는 것만으로도 유지보수 비용이 크게 줄어듭니다.

5. 오늘 만든 내용 정리

오늘은 기능을 추가하지 않고 코드 구조를 정리해 안정성을 높였습니다. 이제 다음 기능을 붙일 때 충돌 위험이 줄고, 에러 발생 시 원인 추적도 쉬워졌습니다. 다음 18일차에서는 앱 이름과 브랜딩을 정해 완성도를 더 끌어올리겠습니다.

6. 자주 묻는 질문

7. 다음 단계로 이어가기