[6팀 소수지] [Chapter 2-1] 클린코드와 리팩토링

[devsuzy]

과제 체크포인트

기본과제

• 코드가 Prettier를 통해 일관된 포맷팅이 적용되어 있는가?
• 적절한 줄바꿈과 주석을 사용하여 코드의 논리적 단위를 명확히 구분했는가?
• 변수명과 함수명이 그 역할을 명확히 나타내며, 일관된 네이밍 규칙을 따르는가?
• 매직 넘버와 문자열을 의미 있는 상수로 추출했는가?
• 중복 코드를 제거하고 재사용 가능한 형태로 리팩토링했는가?
• 함수가 단일 책임 원칙을 따르며, 한 가지 작업만 수행하는가?
• 조건문과 반복문이 간결하고 명확한가? 복잡한 조건을 함수로 추출했는가?
• 코드의 배치가 의존성과 실행 흐름에 따라 논리적으로 구성되어 있는가?
• 연관된 코드를 의미 있는 함수나 모듈로 그룹화했는가?
• ES6+ 문법을 활용하여 코드를 더 간결하고 명확하게 작성했는가?
• 전역 상태와 부수 효과(side effects)를 최소화했는가?
• 에러 처리와 예외 상황을 명확히 고려하고 처리했는가?
• 코드 자체가 자기 문서화되어 있어, 주석 없이도 의도를 파악할 수 있는가?
• 비즈니스 로직과 UI 로직이 적절히 분리되어 있는가?
• 코드의 각 부분이 테스트 가능하도록 구조화되어 있는가?
• 성능 개선을 위해 불필요한 연산이나 렌더링을 제거했는가?
• 새로운 기능 추가나 변경이 기존 코드에 미치는 영향을 최소화했는가?
• 리팩토링 시 기존 기능을 그대로 유지하면서 점진적으로 개선했는가?
• 코드 리뷰를 통해 다른 개발자들의 피드백을 반영하고 개선했는가?

심화과제

• 변경한 구조와 코드가 기존의 코드보다 가독성이 높고 이해하기 쉬운가?
• 변경한 구조와 코드가 기존의 코드보다 기능을 수정하거나 확장하기에 용이한가?
• 변경한 구조와 코드가 기존의 코드보다 테스트를 하기에 더 용이한가?
• 변경한 구조와 코드가 기존의 모든 기능은 그대로 유지했는가?
• 변경한 구조와 코드를 새로운 한번에 새로만들지 않고 점진적으로 개선했는가?

과제 셀프회고

과제에서 좋았던 부분

🤩 클린코드와 리팩토링의 중요성

중요하다는 걸 알지만 평소에 기능 구현에 급급해 무심코 지나쳤던 클린코드와 리팩토링의 중요성을 다시금 깨닫게 되었습니다.

🥳 팀원들과의 소통을 통해 서로의 생각 공유

하나의 코드를 가지고 팀원분들과 클린코드에 대해 자유롭게 대화를 나누다 보니 좋은 인사이트를 많이 얻었습니다.

"나는 이렇게 생각했는데, 이렇게 생각 해볼 수도 있구나."
"나와 똑같이 생각하셨네! 신기하다!"
"이건 생각도 못 했는데, 되게 예리하시다!"

이렇게 다른 분들의 의견에 공감도 얻고 새로운 것도 알게되어 재밌고 유익했던 시간이었습니다.

물론 논쟁거리가 될 만한 부분에서는 서로 의견 충돌이 있어 합의하는데 시간이 많이 소요되지만,
이러한 과정을 통해 같이 좋은 방향으로 성장하고 있다는 느낌을 받았습니다.

과제를 하면서 새롭게 알게된 점

🍎 순수함수 만들기

• 함수는 한 가지 작업만 수행하도록 한다.
• 함수의 길이를 20-30줄 이내로 유지한다.
• 함수 하나에 조건문이나 반복문이 중첩되지 않도록 한다.
• 사이드 이펙트를 최소화 한다.
• 추상화 수준을 일관되게 유지한다.

🍏 의미있는 이름 부여하기

• 엘리먼트 객체는 변수명 앞에 $를 붙인다.
• boolean 반환값을 출력하는 변수는 is~ 또는 has~로 시작한다.
• 이벤트 핸들러는 on~ 또는 handle~로 시작한다.
• 변수 앞에 붙이면 좋은 단어들

과제를 진행하면서 아직 애매하게 잘 모르겠다 하는 점, 혹은 뭔가 잘 안되서 아쉬운 것들

🙉 리액트처럼 리팩토링 하기

일단 과제를 받자 마자 main.basic 안에 더티 코드들을 정리하는게 우선이고,
그 다음으로 리액트처럼 리팩토링 해야겠다고 계획을 세웠습니다.

그래서 어느정도 코드 정리를 한 뒤 component 폴더를 만들어 구현 기능을 기준으로 작은 단위로 컴포넌트를 쪼갠 뒤
최대한 리액트처럼 구현하기 위해 선언형 방식으로 UI가 보여지게끔 했습니다.

하지만 저는 자바스크립트와 리액트 둘 다 능숙하지 않다 보니 구현하는 과정에서 구동 방식이 헷갈려 혼돈이 오고 말았습니다..
결국엔 일단 폴더 분리만 해놓은 상태에서 리액트처럼 리팩토링 하는 걸 포기하고,
(해당 코드들은 component 폴더와 main.basic1.js에 남아있습니다.)

한 파일 안에서 구현한 main.basic.js를 제출하게 되었습니다.🥲
그 마저도 만족스럽게 클린코드를 끝 마치지 못해 이도저도 못한 것 같은 아쉬움이 많이 남아있습니다..😖

리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문

기존 더티 코드에 변수가 너무 많다보니 변수 네이밍 짓기, 전역변수 줄이기 등에서 많이 고민했던 것 같습니다.
최대한 전역변수를 사용하지 않기 위해 전역변수를 모두 지우고 지역변수로만 구현했습니다. (엘리멘트를 담은 변수들까지)

예전에 자바스크립트를 배울 때 전역변수의 사용을 지양하는 게 좋다고 인식이 생겨서
전역변수 선언과 참조를 가급적으로 피하고 있는데, 코치님은 어떻게 생각하시는지 궁금합니다!

[Anne-Hyeyeon]

이번 주 많이 바쁘셨을 텐데 고생 많으셨습니다..!! PR 내용도 그렇고 기본과제에 최선을 다 하신 게 느껴집니다 ㅎㅎ 리뷰 시간이 끝나서 응원의 한 마디로 대신하겠습니다 ㅠ_ㅠ ❤️