클린코드와 리팩토링 회고 WIL

anvel·2025년 4월 19일

항해 플러스

목록 보기
16/39

항해 플러스 프론트 엔드 - 클린코드와 리팩토링

이번 클린코드와 리팩토링 과제를 마치며 해당 과제 간 느꼈던 문제와 경험을 기록해보고자 합니다.

과제를 해결하며 겪은 경험

잘못된 초기 목표

먼저, 이번 리팩토링 과제는 사실 현재 업무와 가장 밀접한 상황이 주어졌습니다.

고의적 더티 코드를 기반으로,

  • 직관적인 변수와 함수의 명명,
  • 작은 단위의 기능을 가진 함수,
  • 일관성 있는 포매팅을 하는 과정이었으며

이중 놓쳤던부분은

  • 현재 리액트의 개발 방향성을 가지는 것

추가적으로 심화과정에서는

  • 리팩토링한 리액트 스러운 바닐라 코드를 실제 react-typescript로 전환하는 것

을 목표로하였습니다.

현대의 개발과 비슷할 것이라는 목표를 처음엔 간과하고, DOM을 직접 조작하고 엘리먼트를 더 간결한 코드로 생성하기 위해 과거의 영광이었던 JQuery로 방향을 잡아버렸습니다.

현대 프론트 엔드와는 살짝 동떨어진 기술을 목표로 하는 개발을 1~2일차에 완료하였고, 해당 과정은 아쉽게도 과제에서 목표하는 바와는 약간 동 떨어진 개념이 되었습니다.

어쩌면, 현재 회사 코드 일부가 아직 JQuery를 차용하고 있다보니, 습관적인 코딩이 다시한번 이뤄진 게 아니었나하였습니다.


화요일 이슈

기본 코드중에 화요일에는 추가 할인을 하는 코드가 있었습니다.

  • 상품을 10개 구매하면 각 상품에 따라 할인
  • 상품의 종류에 관계없이 30개 이상이면 총액의 % 할인
  • 화요일에는 추가 할인
  • 일정 이벤트 마다 번개 할인, 제안 할인

월요일 저녁까지 기본과제 리팩토링을 완료하였고, 화요일 아침에 운동을 가기전 잠깐 PC를 실행하였습니다.
아무것도 건들이지 않았으나, 자동적으로 테스트 코드가 한번 실행되었고, 일부 테스트 코드가 실패하는 것을 확인하였습니다.

아마도 해당 과제를 겪은 모든 기수에서 비슷한 상황이 생기지 않았을까. 하는 상황이었는데, 바로 기본적인 테스트 로직인 총액 계산에서 발생하는 문제였습니다.

일정 이벤트가 발생하는 것이 아니라, 화요일이라는 자연의 섭리에 따라 변하는 요소에 대하여도 테스트 코드가 대응을 하는 것에 대하여 간과했던 부분으로, 코드의 모든 커밋을 돌려도 해결되지 않았던 문제였습니다.

오히려 테스트 코드에서 실제 시간이 화요일인 경우의 검증 로직을 커버하지 못했던 상황이었고, 테스트 코드를 수정하여 실제 일자에 맞는 예측값을 확인하도록 수정하였습니다.


팀 컨벤션

이번 과제부터는 개인과제지만, 팀 과의 토의를 통한 코드 컨벤션을 수립하고, 코드를 새로이 수정해보는 시간을 가졌었습니다.

컨벤션을 대부분 지키는 편이었으나, 나도 모르는 새, 이미 보편적으로 사용하는 축약어에 대하여서 '아 나도 축약을 하고 있었구나' 하는 깨달음을 얻었습니다.

과제를 혼자서 진행할 때에는 인식하지 못하던 나의 습관들이 팀원과의 코드리뷰를 통해 알게 되었고, 이번 과제 동안은 최대한 풀어쓰자하는 목표를 지키지 못하고 있었다는 것을 알게 되었습니다.

또한, 기능을 나누는데 있어서 여러명이 보게 되면 더 시야가 넓어져, 더 작은 단위의 기능을 나눌 수 도 있었고, 더 알맞는 이름을 공유하는 시간도 되었습니다.

다행히 컨벤션에 있어서는 모두가 수용할 수 있는 범위 내에서 코딩을 하고 있었구나 하는 자신감도 일부 생기는 계기가 되었습니다.


과제를 진행하며 만족하고 지속할 부분

하루에 3시간 정도는 코딩에 시간을 할애하자는 처음 다짐을 잘 지키고 있는 것 같습니다.

  • 1일 중 2~3시간 과제 할애
  • 2일 단위 코드 회고, 과제 회고, 경험 작성

시도해야할 사항

아직은 글을 쓰는 습관을 기르는 단계라 문장이나 내용의 전반적인 부분에 대하여 만족스럽지 못한 상태입니다. 특히아 오늘 테오의 발제를 들으면서 기승전결이 어떤형태여야 하는 가에 대하여 다시한번 느꼈습니다.

또, 내가 누군가를 가르쳐야 하는 상황이라면 어떤 순서에 맞게 진행을 해야하는 가에 대하여 정립할수 있던것 같아, 이미 한번 썼던 글이라도 나중에 다시 작성해보고자 합니다.

마지막으로 이번주부터 항해의 다른 과정인 Kubernetes와 3주간 병행을 하게 되었는데, 해당 과정도 과제만 제출하기보단, 배우는 과정에서의 경험을 글로써 남겨 보도록 노력해보겠습니다.


마치며

오늘은 5주차 발제를 진행하기위해 오프라인 모임을 하는 날이었습니다. 오프라인에서 랜덤 코드 리뷰를 통해 완전히 다른 팀들과의 대화를 진행했었는데, 확실히 여러 개발자들과 대화를 하면 할 수록 내가 놓치는 부분이나, 조금 더 나은 방향의 코드리뷰가 가능하다는 것을 깨달았고,

추후 과제에서도 체득한 내용들을 바탕으로 클린한 코드를 만들기 위해 진행을 할 것 같습니다.

다시한번 이 과정을 통해 내가 현재 업무에서 갈증을 느끼고 있는 부분들을 해소하는 계기가 되었고, 시니어 개발자들의 경험을 실질적인 예제를 통해 단기 속성 밀접 경험을 하는 알찬 시간이 되지 않았나 싶었습니다.

다시한번 이런 과정을 알게 해주신 분들에게 감사하는 날이었습니다.

감격스럽게도 금주 코드 BP에 선정되었습니다.
실패한 과정이 있었지만, 그 부분조차도 좋게 봐주신 것 같습니디.
앞으로도 과정을 기록하며 단순히 답만 찾기 보다는 '왜'에 중점을 둔 코딩을 하도록 노력하겠습니다.
https://github.com/hanghae-plus/front_5th_chapter2-1/pull/11

1개의 댓글

comment-user-thumbnail
2025년 4월 21일

이얅!!!!!! 역시 갓성진.. 블랙 벳지 가보시죠.

답글 달기