1. 스토리 및 실습 배경

우여곡절 끝에 화면도 잘 뜨고 에러도 나지 않는 코드를 완성했습니다. 작동은 잘 되니 모든 게 끝났다고 생각했으나, 팀장님이 코드를 확인하고 한숨을 쉬었습니다. "여기에 쓴 중복 함수들이 너무 많고, 변수명이 무엇을 의미하는지 도무지 모르겠어요. 이대로 배포하면 한 달만 지나도 본인도 고치기 힘든 쓰레기 코드가 될 겁니다."

프로그램이 정상 작동하는 것은 개발의 '최소 요건'일 뿐이며, 코드가 난잡하고 스파게티처럼 꼬여 있다면 비즈니스 확장에 발목을 잡게 됩니다. 이번 실습에서는 Codex에게 작성된 코드를 리뷰받아, 중복된 로직을 재사용 가능한 함수로 묶고, 직관적인 네이밍 규칙(Naming Convention)을 적용하여 가독성과 유지보수성이 극대화된 클린 코드(Clean Code)로 정돈하는 실습을 진행합니다.

2. 학습 목표

• 동작만 하는 복잡한 코드와 읽기 쉬운 유지보수형 코드의 구조적 차이를 이해할 수 있다.
• 중복되는 기능과 하드코딩된 값들을 추출하여 재사용 구조로 개선할 수 있다.
• AI의 코드 리뷰 제안을 바탕으로 변수/함수 이름을 명확하게 변경하고 리팩토링할 수 있다.

실습 자료 다운로드

Codex 요청 프롬프트

Task 03 Prompt
제공된 day6_dirty_code.js 파일의 소스를 분석하여, 1) 중복된 마크업 바인딩 로직을 공통 유틸 함수로 분리하고, 2) 모호한 변수명(ex: a, temp, fn)을 실무용 단어로 교정하고, 3) 향후 유지보수가 쉽도록 적절한 한 줄 주석을 작성하여 개선된 버전의 클린 코드로 리팩토링해 주세요.

4. 결과물 예시

Codex는 회의 기록을 분석해 아래와 같이 정규화된 데이터 엔티티 매핑 및 Mermaid ERD 스크립트를 출력합니다.

5. AI 활용 포인트

• 코드 스멜(Code Smell) 감지: 가독성이 떨어지는 긴 메서드, 중복된 분기문, 부적절한 매개변수 구조를 찾아냅니다.
• 주석 자동 생성: 핵심 알고리즘이나 상태 판단 구문에 복잡한 설명 대신 타 개발자가 한눈에 파악할 수 있는 요약 주석을 추가합니다.