[WIL] 항해플러스 프론트엔드 6기 4주차 회고

N번의 커밋과 리셋 - 잘못된 걸 알고 초기화로 돌아가 시간 내 될 때까지~

 

네 번째 도전기 - 더티코드에서 클린코드를 향한 여정

Chapter 1을 마무리하고 새로운 시작인 Chapter 2에 접어들었습니다. 그동안 1-3주차에서 SPA, Virtual DOM, React 내부 원리를 구현해보며 "이게 어떻게 돌아가는 거지?"라는 궁금증을 해소했다면, 이번 주차는 "이 코드가 왜 이렇게 복잡한 거지?"라는 새로운 궁금증을 마주하게 된 시간이었습니다.

처음 main.original.js 파일을 접했을 때, p, q, amt, sel 같은 모호한 변수명과 500줄이 넘는 calcCart 함수를 보고 "이게 정말 동작하는 코드일까?"라는 의심이 들었습니다. 퍼블리셔로서 자바스크립트를 사용해왔지만, 이렇게 가독성과 유지보수성이 떨어지는 코드를 보니 당혹스러웠고, 어디서부터 손을 대야 할지 막막함을 느꼈습니다.

이러한 막막함 속에서 멘토링 시간에 받은 이력서 첨삭은 앞으로의 성장 방향에 대한 중요한 이정표가 되어주었습니다. 이력서의 구성, 경력 기술 내용, 그리고 커리어 방향성에 대한 피드백을 통해 제가 나아가야 할 길을 명확히 할 수 있었습니다.

---

과제를 통해 얻은 것들

점진적 리팩터링의 현실

77번의 커밋을 통해 점진적으로 코드를 개선해 나간 경험은 매우 소중했습니다. AI가 제안하는 단계적 접근만으로는 충분하지 않았고, 충돌이 발생해 여러 번 처음으로 돌아가야 했습니다. 이 과정에서 "점진적 개선은 예상보다 훨씬 더 작고 세세한 단위로 이루어져야 한다"는 것을 깨달았습니다.

특히 순환 참조로 인한 createSetupEventListeners 초기화 문제를 해결하면서 코드의 의존성과 영향 범위를 파악하는 것이 얼마나 중요한지 실감했습니다. 한 번에 여러 변수를 정리하려다 전체 로직이 무너지는 경험을 통해, 신중한 접근의 필요성을 배웠습니다.

함수 분해와 모듈화의 중요성

516줄짜리 calcCart 함수를 작은 함수들로 분해하면서 코드의 가독성과 유지보수성이 얼마나 향상되는지 체감했습니다.

// Before: 516줄의 거대한 함수
function calcCart() {
  // 모든 로직이 한 곳에...
}

// After: 작은 함수들로 분해
function extractCartItems() { /* ... */ }
function updateQuantityStyles() { /* ... */ }
function updateGlobalState() { /* ... */ }

calculateCartItems를 calculateItemTotal과 updateCartAccumulator로 분리하고, forEach를 reduce 패턴으로 변경하면서 함수형 프로그래밍의 장점을 실감했습니다.

비즈니스 로직과 UI 로직의 분리

액션, 계산, 데이터의 분리라는 함수형 사고의 핵심을 calculateCartStatePure 함수를 통해 경험했습니다. UI 업데이트 로직과 분리된 이 순수 함수는 계산에만 집중함으로써 코드의 재사용성과 테스트 용이성을 크게 높여주었습니다.

// 순수 함수: UI 업데이트 없이 계산만
export const calculateCartStatePure = (cartItems, products) => {
  // 순수한 계산 로직만
};

// UI 업데이트 전용 함수
export const updateCartState = (cartState, updateFunctions) => {
  // UI 업데이트 로직만
};

DOM 추상화와 안전성 확보

domElements.js에서 20개 이상의 안전한 래퍼 함수들을 만들어 DOM 조작의 안전성을 높였습니다. 직접 DOM 조작을 제거하고 헬퍼 함수로 통일하면서 코드의 안정성이 크게 향상되었습니다.

// Before: 직접 DOM 조작
document.getElementById('cart-total').textContent = total;

// After: 안전한 래퍼 함수
safeSetTextContent(getCartTotal(), total);

에러 처리와 입력 검증 강화

safeCalculate, safeFindProduct 같은 안전한 함수들을 만들어 예외 상황을 체계적으로 처리했습니다. 모든 매개변수에 타입 검증을 추가하고, 유효성 검사를 강화하면서 코드의 견고성을 높였습니다.

매직 넘버 추출과 상수 관리

constants.js에서 모든 매직 넘버를 추출하면서 코드의 가독성과 유지보수성이 얼마나 향상되는지 체감했습니다.

// Before: 매직 넘버 사용
if (quantity > 10) discount = 0.1;

// After: 의미 있는 상수 사용
if (quantity > QUANTITY_THRESHOLDS.INDIVIDUAL_DISCOUNT) {
  discount = DISCOUNT_RATES.KEYBOARD;
}

팀 컨벤션과 일관성 유지의 힘

과제 시작 전 Prettier, ESLint 설정을 맞추고, 의미 있는 네이밍에 대한 팀 컨벤션을 정한 것은 과제 요구사항을 충족하면서도 실제로 코드 품질 향상에 큰 도움이 되었습니다. 과거 tit 같은 축약형 변수명을 쓰던 습관을 팀원들과의 대화를 통해 돌아보게 되었고, 과제 문서의 요구사항과 맞물려 "이러면 안 되겠구나"라는 깊은 반성을 하게 되었습니다.

또한, 중간 코드 리뷰 직전 잘못된 방향으로 가고 있음을 깨닫고 코드를 리셋했던 경험은 혼자서는 내 관점에 갇히기 쉽다는 것을 일깨워주었습니다. "돌리기 전에 이야기해볼걸"이라는 후회는 앞으로 협업의 중요성을 더욱 강조하는 계기가 되었습니다.

이력서 멘토링을 통해 얻은 방향성

과제와 별개로, 이번 주에는 팀원들과 함께 이력서 첨삭 멘토링을 받았습니다. 저연차 시절 작성했던 이력서이다 보니 구성이나 내용에 대한 피드백이 절실했는데, 멘토님의 객관적인 코칭을 통해 현재 실무 개발자들이 이력서를 어떻게 작성하고 평가하는지 직접 느낄 수 있는 유익한 시간이었습니다.

특히 오랜 퍼블리싱 경력에 대한 진지한 고민을 함께 나누고, 앞으로의 구직 방향에 대해 현실적인 조언을 해주셔서 정말 감사했습니다. 단순히 코드 개선뿐만 아니라, 제 커리어 전체에 대한 방향성을 잡을 수 있었던 소중한 경험이었습니다.

---

KPT 회고

Keep (계속 유지하고 싶은 점)

• 점진적 리팩터링으로 코드의 안정성을 확보하는 습관
• 팀 컨벤션을 지키며 일관성 있는 코드를 작성하는 노력
• 코드 리뷰를 통해 더 나은 방향성을 모색하는 자세
• 모듈화 경험을 컴포넌트 분리에 적극적으로 활용

Problem (개선이 필요한 문제점)

• 의존성 주입 패턴에 대한 더 깊은 이해와 최적화
• 비즈니스 로직과 UI 로직의 분리 기준을 명확히 하는 연습
• 전역 상태 관리의 한계를 극복할 방안 모색

Try (앞으로 시도해 볼 점)

• 4주차의 리팩터링 경험을 바탕으로 5주차 엔티티 분리에 적용
• 함수형 사고를 통해 계산 로직을 더욱 효율적으로 개선
• 커스텀 훅을 활용해 상태 관리의 문제 해결
• 이력서 멘토링에서 받은 피드백을 바탕으로 구체적으로 다듬고, 장기적인 커리어 목표 재정립

* 이 회고는 티스토리에 먼저 작성한 글이며, 벨로그(https://velog.io/@adds9810/WIL-%ED%95%AD%ED%95%B4%ED%94%8C%EB%9F%AC%EC%8A%A4-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-6%EA%B8%B0-4%EC%A3%BC%EC%B0%A8-%ED%9A%8C%EA%B3%A0)에도 함께 공유합니다.