[5팀 박소미] [Chapter 2-1] 클린코드와 리팩토링

[confidential-nt]

과제 체크포인트

기본과제

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

심화과제

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

과제 셀프회고

과제에서 좋았던 부분

• 제대로 엉망인 코드를 개선하는 경험

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

• MVC 패턴의 등장 이유를 몸소 느끼게 됨
• 일단 침착하고 용감하게, 가장 거슬리면서도 가장 바꾸기 쉬운 것부터 리팩토링 해야함
• 여기저기서 꼬인 느낌... 하나의 책임을 하지 못함: 건드렸다가 와장창 무너지는 건 일단 맨 나중에 리팩토링 해야함

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

• 테오가 강조한 적 있었던 나름의 그라데이션 사고, 데이터, 추상화적 사고 적용

  • 화면, 이벤트, 데이터 분석 => 어떤 데이터가 필요한지, 어떻게 계층을 나눠야할지 보이더라
  • 그러나 초기에 ui 는 어떻게 추상화, 흐름을 가져가야할지 모르겠었음. 그런데 나중에 알아보니 MVC 패턴을 비슷하게 적용하면 되는 거였는데 이미 먼 길을 와버려서.. 적용하기 힘든 코드가 되어버렸다. ui에 대해선 좀 더 깊이 생각해보고 구현할 걸...

• 정신없이 구현해서 통일성이 부족

• typescript 사용 절실

• 리액트로 마이그레이션 힘들듯 : 근데 애초에 마이그레이션을 해본적이 없기 때문에 마이그레이션한다의 의미를 파악하지 못함 => 그래서 코드가 취지에 맞지 않게 작성된듯하다. ㅠㅠ

• 테스트 가능성은 딱히 챙기지 못한듯 하다.

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

• 이렇게 어디가 어떻게 연결되고 흘러가는지 파악하기 힘든 코드에서 길을 잃지 않고 각 코드 및 계층들의 독립성, 확장성, 단일책임 원칙 등을 보장할 수 있는 방법은 무엇일까요?