[항해플러스] 클린코드 (진짜진짜 더러운 코드 개선하기)

이번 주 과제

굉장히 더럽고 더럽고 더럽고 더럽고 더러운 코드를 개선하는 게 이번주의 과제였다. javsacript로 1차 개선한 후 개선된 코드에 2차로 react + typescript를 입히면 되는 과제였다. 말만 들으면 '개선' 및 기존 기능 테스트 통과라는 것 외에 크게 요구사항이 없기 때문에 처음에는 이전 과제들에 비해할 만하겠다!라고 생각했지만, 일주일이 지나고 나니 그 어떤 주차보다 시간이 부족하고 어려웠던 주차였다. PR을 올려주신 다른 분들의 리뷰도 봤을 때 전반적으로 다들 비슷한 생각이신 것 같았다.

평일 QA 때 어쩌다 보니 이런저런 질문들을 많이 드리면서 코치님께 '개선 전 코드는 어떻게 만드셨나요?'라고 여쭤봤는데, 의외로 AI는 덜 더럽게 만들어줘서 손수 더럽게 만들어주셨다고 했다. 사람을 괴롭히는 방법은 사람이 제일 잘 안다면서 기뻐하시던(?) 코치님... 그 순간만큼은 코치님이 악마로 보였다.

리팩터링 해야 하는 페이지이다. 단순해보이지만 굉장히 많은 기능과 더러운 코드들이 마구 섞여있던...

 

이번 주 알게 된 내용

리팩터링 과제를 하면서 변수명부터 시작해서 lint 설정 구조 고민 등 정말 많은 고민들을 했지만, 그중에서도 가장 인상 깊고 와닿았던 '좋은 함수란 무엇인가?'에 대한 부분을 정리했다.

좋은 함수란 무엇인가?

과제를 할 때는 기능을 분리하는 것에 초점을 두었다. 그래서 여러 역할을 하는 함수들을 쪼개고, 재활용할 수 있는 로직을 분리하고, 또 뷰와 비즈니스 로직을 분리하는 것에 대한 고민을 했다. 그리고 이렇게 하는 것이 이전보다 낫다는 것은 분명한데, '과연 내가 잘 짠 게 맞을까?'라는 고민들이 들기 시작했다. 그래서 동료 피드백도 받아봤고 다른 팀원분들은 어떻게 구현하시는지에 대해서도 참고를 했는데, 여전히 뭔가 시원하게 해결되지는 않은 것 같았다. 그러다가 다른 팀 멘토링을 우연히 듣게 되었는데, 함수는 인자와 리턴값이 있어야 하고 UI를 직접 변경하는 곳을 제외하고는 값을 변경하면 안 된다는 말을 들었다. 이전까지 함수에 인자를 넣어야 한다라는 말이 '왜'라는 부분에서는 잘 이해가 되지 않았는데, 리팩터링을 하고 나니 그 의미가 잘 전달이 되었다.

함수를 분리함에 있어서 함수명도 물론 이 함수가 어떤 역할을 하는지에 대해 알려주지만, 어떤 인자를 넘기냐는 것도 한번 더 함수에 들어가지 않고도 겉으로 역할을 파악할 수 있다는 것을 알게 됐다. 또 input/output에 대한 기대가 명확하다면 이걸로 테스트가 더 용이한 코드를 짤 수 있기 때문에 이런 측면에서도 흐름 파악에 도움이 된다는 것을 느꼈다. 그리고 값을 변경하게 된다면 이미 그 함수는 여러 역할을 수행하고 있는 것이기 때문에 앞에서 리턴한 값을 가지고 또 다른 함수를 호출하여 업데이트를 하도록 구조를 짜는 것이 훨씬 깔끔할 것이다.

 

좋은 함수란
- 인자가 있어야 한다.
- 리턴값이 있어야 한다.
- 값을 변경해서는 안 된다.

이번 주 멘토링 회고

1~3주 차까지는 준일 코치님께 멘토링을 받다가 이번주부터는 테오 코치님께 멘토링을 신청했다. 두 분의 성향과 진행방식이 달라 신선하게 다가왔는데, 테오 코치님 멘토링은 특이하게 Figjam으로 진행해서 또 다른 재미가 있었다. 어쩌다 보니 앞 팀 멘토링이 길어져 11시 40분 정도부터 멘토링을 진행했는데 시간 가는 줄 모르고 재밌게 질문내용에 대해 듣다 보니 거의 2시가 다 되어 있었다.

이거 외에도 캡처하지 못한 부분이 더 있다는 게 충격적ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

모든 개발이 그렇지만 이번 주차는 특히 정답이 없는 과제였기 때문에 이번 멘토링 때는 개발 관련 질문에 더해 이력서와 관련된 질문도 같이 했다. 노션으로 작성해 둔 이력서가 있는데 노션 이력서 자체를 선호하지 않는다는 말을 듣기도 했었고 어떤 식으로 수정을 하면 좋을까 싶어 질문을 드렸다. 다행히 노션 자체를 싫어한다기보다는, 이력서임에도 불필요하게 타고 들어가야 하는 링크가 너무 많아서 그게 싫은 거다라는 말씀을 듣고 안도의 한숨을 내쉬었다. 그 외에도 내 이력을 어떤 것들을 채워놔야 할 지에 대한 큰 틀을 잡을 수 있어 도움이 많이 된 시간이었다.

이 외에도 다른 분들의 질문 중 지칠 때 어떻게 하는지, 개발이 잘 안 되는 날에 어떻게 하시는지 등에 대한 답변을 해주셨는데 힐링이 되면서도 현실적으로 도움이 될만한 것들을 많이 이야기해 주셔서 힐링되는 시간이었다. 사실 약간 E의 성향에 가까운 해결책들이라 I이신 분들이 들으셨을 때 약간의 충격을 받으신 것 같기도 했지만 그만큼 비슷한 성향인 나에겐 도움이 많이 된 조언이었다. 그리고 곁에서 봤을 때는 J처럼 보일만큼 고정 스케줄을 정해놓지만 실제로는 아무 계획 없을 때의 나를 믿지 못해서 다른 사람과 함께 하는 계획을 짜신다는 말씀도 격한 공감이 되었다. 새벽 감성과 잠에 취한 멘토링 시간이었지만 그만큼 늦은 시간까지 좋은 말을 많이 해주시고 재밌었어서 다음 멘토링도 잘 예약해 봐야겠다...!라는 생각으로 불타올랐다.

온갖 낙서와 짤이 함께하는 멘토링

 

이번 주 리뷰 및 칭찬노트

- 이번주도 잠과 맞바꾼 기본과제와 심화과제를 모두 제출했다!!! 심지어 동료 피드백도 받아서 반영했는데 열심히 해냈다는 생각이 들어 아주 뿌듯하다.

- 아무리 지쳐도 코드리뷰는 놓칠 수 없지!!라는 생각으로 다른 분들 코드를 열심히 본 나 자신 칭찬한다!

- 리팩터링 한 과정들을 readme에 정리했다. 같이 논의한 내용은 물론 고민한 흔적들을 남겨놓음으로써 추후 회사에서도 근거를 가지고 컨벤션이나 구조들을 정하는 데에 도움이 될 거라 생각한다.

README.md 일부

4주 차 PR - https://github.com/hanghae-plus/front_3rd_chapter2-1/pull/4

4주 차 개인레포 - https://github.com/soyoonJ/front_3rd_chapter2-1/tree/main

[17팀 정소윤] Chapter 2-1. 클린코드 by soyoonJ · Pull Request #4 · hanghae-plus/front_3rd_chapter2-1

 

 

항해 추천인 코드 (20만원 할인) - IXtXJj