[4주차 회고] 클린코드와 리팩토링

신희원·2025년 8월 10일

이번 주 주제

클린코드 원칙과 리액트 컴포넌트 리팩토링

회사에서 업무를 하면서 항상 내가 짠 코드에 대해 생각을 했다.
더 가독성 있게 짤 수는 없을까? 성능을 더 높일 수 있는 코드를 작성할 수 있지 않을까?
내 코드에 대해 리뷰를 받을 수 있는 환경도 아니었고, 더 좋은 코드가 있을 거 같은데... 생각하면서도 AI한테 물어봐도 만족할 수 있는 답을 받아보지 못했다.

그래서 클린코드와 리팩토링에 대한 주제가 나에게 너무 큰 기대가 되었다.
하지만 결과는 큰 실망만 한 채로 끝났다...
왜냐고? 완전히 바이브코딩으로 진행했기 때문에.

바이브코딩으로 진행해서 문제였다라기 보다는, 과제 테스트 통과를 위해 바이브코딩을 하면서 배워나간점이 없다고 생각이 들어 큰 실망을 했다.
테스트 통과에 급급해 기능이 제대로 동작하는지, AI가 짜준 코드가 정말 맞는건지, 가독성이 정말로 좋은지 확인도 안한채 넘어갔기 때문이다.

이런 실패(?) 과정 덕분에 나는 다음주차 과제를 AI에 너무 의존하지 말고, 도움만 받는 정도로 사용해야겠다. 라는 생각을 가지게 되었고 "앞으로 더 잘할 수 있다" 라고 생각하며 스스로를 토닥였다. (더 잘하면 되지!)

배운 내용 정리 📚

클린코드 핵심 원칙

💡 **클린코드 핵심 원칙 짧게 정리**

의미 있는 이름 사용
함수를 작고 단일 책임을 가지도록 만들기
중복 코드 제거
주석 대신 자체 설명적인 코드 작성
일관된 포맷팅 유지
복잡한 조건문 단순화
적절한 추상화 수준 유지

🧐 리팩토링의 목적

리팩토링의 목적 = 유지보수!
1. 이슈해결을 하기 위해서 코드를 이해하고 투자하는 시간을 줄이기 위해서 하는것
2. 코드를 수정했을때 문제가 없음을 보장하는 시간을 줄이기 위해서 하는것

처음에는 작동하는 코드를 굳이 바꿀 필요가 있을까 의문이 들었다.
하지만 몇 번의 수정과 기능 추가를 거치면서, ‘작동하는 코드’와 ‘좋은 코드’는 다르다는 사실을 깨달았다.

회사에서 MVC 패턴을 이용한 프로젝트를 진행한 적이 있었는데, 기존 구조가 MVC 원칙에 맞지 않아 전반적인 리팩토링을 진행했다.
Model, View, Controller의 역할을 다시 정의하고 각 기능을 해당 계층에 맞게 분리했다.
Model에는 데이터 구조와 비즈니스 로직을, View에는 화면 렌더링과 UI 표현을, Controller에는 두 계층을 연결하는 역할만 맡겨 불필요하게 로직이 섞이지 않도록 했다.

이렇게 구조를 재정리하니 각 부분이 자신의 역할만 수행하도록 단순화되어 코드 이해도가 높아지고, 재사용성이 향상되었다.
특히, 중복된 기능을 공통 모듈로 묶어 여러 Controller나 View에서 재활용할 수 있도록 하면서 기능 변경 시 수정 범위를 최소화하고 버그 발생 가능성도 줄일 수 있었다.

위 같은 경험을 통해 리팩토링은 단순한 코드 정리가 아니라, 유지보수와 확장을 고려한 구조적 개선 작업이라는 점을 깊이 느꼈다.
앞으로는 코드를 처음 작성할 때부터 ‘미래의 나’와 ‘이 코드를 읽을 다른 사람’을 생각하며, 이해하기 쉬운 구조를 잡는 습관을 들이고자 한다.

ESLint

ESLint는 JavaScript 코드의 품질을 향상시키는 강력한 정적 코드 분석 도구
코드 스타일 문제, 잠재적 버그, 안티 패턴 등을 식별하고 수정할 수 있다.

Prettier

Prettier는 코드 포맷터로, 일관된 코드 스타일을 자동으로 적용
들여쓰기, 줄 바꿈, 공백 등의 스타일 문제를 자동으로 해결해준다.

어려웠던 점 🤯

AI를 잘 사용하는 법...
AI한테 어떻게 잘 질문해야 내가 원하는 것만 쏙쏙 뽑아낼 수 있을까?

바이브코딩을 하면서도 정말 어려웠다.
기존의 코드는 최대한 많이 건들지 않으며 필요한 부분만 쏙쏙 바꾸고 싶었는데, AI가 맘대로 UI도 바꿔버리고 기능 테스트시 버그도 만들고...

이번에 심지어 Cursor 도 결제했는데 (다행히 무료체험이 있어서 공짜였음)
최대한 작은 단계별로 진행하면서 나를 이해시켜줘. 라고 질문을 하니까
토큰은 최대한으로 잡아먹으면서 스텝별로 나를 이해시켜주는게 아니라 AI 혼자 진행하고 있었다. (답답쓰)
-> 결국 토큰 5시간만에 다 써버린;;;

깨달은 점 💡

다른 사람들은 AI를 어떻게 사용하고 있을까?에 대해 팀 회의를 하였다.

정리 된 내용!

롤플레잉 (구원자 스타일)
a. 내가 굉장히 위험한 상황에 처해있다는 것을 어필한다…. 뒤에서 누가 총을 겨누고 있다던지…. 뭐 그런거 다들 알잖슴~~

git diff 커밋A 커밋B 명령어 때린 뒤에 변경점에 대해서 문서화 > PR 또는 기업 과제 작성 시 활용 (비서 스타일)

코딩스타일을 지침서에 넣는다 (가이드 스타일)

구현한 코드 프로세스 도식화 (가이드 스타일)

AI에게 공부한 내용을 먹이고 간단한 퀴즈를 내달라고 합니다. (선생님 스타일)

다른 사람들 내용에서 또 좋다고 생각한 방법

요구 사항 상세하게 설명하기
a. AI가 알아듣기 좋은 형태로 요청하기 (커서룰, mdc파일, MCP 활용 등)

한 번에 큰 단위로 요청하지 말고 나누어 요청하기

목적에 따라 모델 바꿔가면서 요청하기

GPT와 제미나이 병행 사용, 같은 질문 반복 비교하며 "AI끼리 싸움 붙임"

하기 전에 AI 로 구현사항 정리 + 컨벤션 작성 > 그후에 입력

다들 다양하게 AI를 활용하고 있었기에 배울 게 많았다.
이후 나도 롤플레잉 적용하면서 진행하구 있다.
나는 리액트 초보고(인턴이고) 너는 리액트 고수(시니어)야. ~~에 대해서 자세하고 쉽게 설명해주고 나를 이해시켜줘.