🍝 나 (aka. Spaghetti Chef) + AI = 🗑️

유쾌한_클린코드

클린 코드라는 것을 직접적으로 체험 해보지 못 했었다. 회사 업무에서도 마냥 흘려 듣기만 했다.
그리고 내가 코드를 짜면서도 '그냥 보기 좋고 깔끔하게 짜면 되는거 아냐?'
(개발자가 봤을 때 불편하지 않게..) 라는 생각으로 코드를 만들었다.

과제를 하면서 정말 더닝크루거효과 를 제대로 느꼈다.
(나는 정말 무식하게 용감하게 코드를 짰구나. 정말 앞뒤 맥락 없이!)

그리고 이번 주차 과제를 하면서 클린코드로 만들기 위한 리팩토링을 진행을
AI-FULL-DRIVEN 정말 모든 행위를 AI로 진행했다.(의존이 맞다.) 테오 멘토링에서 아마 그렇게 하면 정말 절망을 맛 볼 것이다. 라고 했는데 속으론 에이..아무리 그래도 잘 해주겠지. 라는 마인드로 과제에 임하고 있었다.

그리고 진짜 코드가 절망이긴하다....
이런 절망을 품으면서 어떻게 내가 4주차를 이어나갔는지 설명하겠다.

👨‍💻 🔁 🤖 나는 AI 를 어떻게 활용 했을까?

코드 컨벤션 주입 💉

처음에는 Gemini CLI 를 활용하여 1~3주차 처럼 과제를 진행하려고 했다.
우리 5팀 유현님도 Gemini 활용법에 대해서 디스코드에 남겨줘서 활용을 해보려고 헀는데.. 도저히 진도를 못 나가서 커서를 구독하게 됐다. (그냥 내가 활용 못하는건데 도구 탓 하는거 맞음 ㅎㅎㅎ)

커서에는 컨텍스트를 설정할 수 있는 옵션이 있다. (토큰을 많이 먹는 옵션..돈과 편리함 등가교환..)

컨텍스트 알고리즘

AI 에게 프로젝트의 맥락을 파악하게 해서 원하는 혹은 그 뒤에 올 정보들을 제공해준다. 그래서 docs/** 하위 필수 요구사항 및 클린코드에 해당하는 문서를 취합한 파일, 2팀 도은 이 만든 가이드라인 그리고 토스 프론트엔드 가이드라인 기반으로 만든 Cursor rule을 활용했다.
그리고 진도를 빨리 빼기위해 agent 모드를 활용하여 이번 과제에 임했는데 다음에는 ask 모드를 이용하여 과제를 진행해보겠다. 궁금하다. 과연 퀄리티가 달라질지......

기본 개념

🔍 주요 차이점

🔗 컨텍스트 작업

마일스톤 🗿

머릿말에서도 애기했지만 나는 AI-FULL-DRIVEN 으로 과제를 진행을 했어서 내 스스로가 코드를 바꾼적이 단 한번도 없다. 진짜로.... 맹세코.....
이런 이유로 나는 안전장치가 너무나 필요했다. 이건 AI 활용보다는 활용을 잘하기 위한 나의 동작을 제어했다. (Cursor Rules 처럼)

나는 컨벤션에 맞게 또는 그 상황에 맞는 유연한 방식으로 기능별 또는 구조별로 커밋을 진행했고 방향성을 잃지 않기 위해서 AI에게 현재 하는 작업과 이전의 작업을 비교하면서 앞으로의 작업을 도출해냈다. 그리고 커밋을 하기 전에 꼭 테스트를 진행하여 요구사항을 만족하도록 했다.

테오의 마일스톤 설명

나의 커밋 내역과 단계별 진행 사항 요약본

🔗 4주차 과제 커밋 내역 (클린코드)

🔧 리팩토링 기간 (7월 28일 ~ 8월 1일)

📌 시작점
처음 코드를 봤을 때 구조가 꽤 복잡했고, main 함수 하나에 이벤트 처리부터 상태 변경, 
비즈니스 로직까지 전부 몰려 있었음. 가독성도 떨어졌고 유지보수가 어려운 상태.

🧹 1 단계 – 코드 정비 & 구조 개선

* Prettier + Airbnb ESLint로 스타일 통일

* 전역 변수 제거, 변수 선언부 변경 (var ➡️ let, const)

* 함수/변수명 의미 있게 변경

* main 함수에서 이벤트 핸들러랑 로직 분리 시도

🧩 2 단계 – 모듈화 진행

* 상태 직접 접근 대신 get/set 함수 도입

* 타이머, 포인트, 할인 로직을 각각 모듈로 분리
(promotionScheduler, discountService, loyaltyService)

* 중복된 DOM 조작 헬퍼 함수로 정리

* innerHTML → DocumentFragment로 성능 개선

⚛️ 3 단계 – React + TypeScript 도입

* Vite 기반 React/TS 환경 구축

* 기존 JS 로직은 그대로 두고, UI만 React로 마이그레이션

* CartItem, OrderSummary 등 컴포넌트 분리

* GitHub Actions로 자동 배포 구성

🧼 4 단계 – 코드 품질 향상

* 매직 넘버 제거, 상수로 정리

* 커스텀 훅 (useCart, useModal) 도입

* 비즈니스 규칙 businessRules.ts로 중앙화

* 타입 강화: any 제거 + 명확한 타입 설계

* 중복 에러 처리 통일 & 긴 함수 분할

Histroy 관리 📑

해당 작업은 어쩌면 나에게 진짜 제일 중요한 작업이라고 볼 수 있었다.
내가 생각하기에 AI-FULL-DRIVEN 에서 제일 중요한건 계속 얘기하지만 방향성을 잃지 않는 것이다. 요구사항과 현재 과제의 목적을 잃지 않기 위해서 기록에 신경을 많이 썼다.

한 가지 아쉬운건 나의 색깔을 넣어서 히스토리 관리를 했다면 데이터를 토대로 나에게 더 친숙한 방향으로 또는 더 맞는 방향으로 AI가 추천해주지 않았을까? 하는 생각이 있다.

워크 플로어 〰️

1. 구조 변경 및 기능 구현이 됐다.
2. 테스트를 실행한다.
3. 테스트 실패 시 다시 테스트 통과를 위한 원인 파악
4. 구조 변경 또는 기능 구현에 영향이 없는지 파악 및 수정
5. 테스트 성공
6. 히스토리 작성
7. 커밋

회고를 쓰면서 AI 활용에 관한 글을 찾았습니다.
다들 가볍게 읽어보고 활용은 판단에 맡기겠습니다. 실천은 본인 몫이기에!..
그리고 더 좋은 활용법이 있다면 댓글로 남겨주세요!

🔗 AI시대 개발자가 인간 클립보드 되지 않는 법

글을 읽고 느낀 점.
"아 누군가 나와 비슷하게 생각하고 있구나."
"내가 AI를 활용하는 방식이 크게 엇나가지 않았구나. 그리고 실천해 볼만한 게 더 있구나."

🫣 그리고... 다른 측면의 무식하고 용감했던 주말..

그리고.. 또 다른 무식하고 용감(?)한 행동... 저때 왜 그랬는지 진짜 모르겠다. 과제의 스트레스 였는지? 아니면 그 동안 과제 하느라 잠을 못 자서 나사가 빠졌던거지?

저러고 화면 공유로 콘서트🎸를 열었다.(유튜브 틀었음)
듣기 싫었을 수도 있는데 환호해주셔서 감사합니다.
6기 여러분들 ㅎㅎ..🤘 (실제론 더 많은 사람들이 모였잖슴~~ 환호해줬잖슴~~)

✅ Keep: 이번주 내가 잘한 것들

• cursor 결제... (신의 한수)
• 독서모임 참여
• AI 비판적으로 사용을 나름대로 실천하고 있었음
  

❗ Problem: 탈탈 털린 순간

• 회고에는 쓰지 않았지만 배포 프로세스를 정확히 알지 못해서 몇 시간을 날려먹음.

💡 Try: 노력, 다짐, 실행

• 의존이 아닌 '학습'의 관점으로 접근하기
  • ask 모드 활용
• 비판적으로 AI 사용을 더 실천하기

🧠 이번 주 한 줄 회고:

💬: 인간 클립보드 될꺼야???

▶ 허정석님의 추천 코드 : Vo6fpd