[6팀 김혜연] [Chapter 2-1] 클린코드와 리팩토링

[Anne-Hyeyeon]

과제 체크포인트

기본과제

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

심화과제

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

과제 셀프회고

과제에서 좋았던 부분

• 클린코드에 관한 지식을 과제를 통해 직접 적용하며 익힐 수 있어서 좋았습니다.
• 발제 자료를 확실히 이해하고 싶어 오랜만에 노트정리를 진행했는데 뭔가 힐링이 되었습니다 (?) TMI...

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

• 클린코드, 이래서 필요하구나!
• Early Return에 대한 개념
• Side Effect를 최대한 발생시키지 않고 순수함수를 사용해야 한다는 사실

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

�- 아직도 헷갈리는 추상화의 개념

• 복잡한 로직을 아름답게 분리하는 방법
• 타입스크립트, 리액트 관련 config 파일 내용
• 성능 최적화 방법
• 폴더 구조(매 과제마다 헷갈리는 것 같다)

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

• 과제 셀프 체크리스트에 에러 처리에 관한 내용이 있는데요. AI에게 질문해 보니 'initializeApp' 부분에 에러 처리를 하는 예시를 보여 주었습니다. 혹시 금번 과제에 있는 함수에 모두 에러 처리를 하는 편이 좋은지, 아니면 에러 처리가 반드시 필요한 부분에만 하는 게 좋은지 궁금합니다. 그리고 에러 처리가 필요한 함수의 기준도 알고 싶습니다.

• basic 코드가 테스트를 모두 통과했는데, 깃헙 CI에서는 통과하지 못했다고 나옵니다.

npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/eslint-plugin-react-hooks
npm error   dev eslint-plugin-react-hooks@"^5.1.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer eslint-plugin-react-hooks@"^4.3.0" from eslint-config-airbnb@1[9](https://github.com/hanghae-plus/front_4th_chapter2-1/actions/runs/12693428133/job/35380978151?pr=33#step:4:10).0.4
npm error node_modules/eslint-config-airbnb
npm error   dev eslint-config-airbnb@"^19.0.4" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

혹시 이 경우에도 과제 Fail이 될까요?

[JunilHwang]

안녕하세요 혜연님~
ci는 npm 기준인데, �변경사항에서는 pnpm 기준으로 실행하고 있어서 차이가 좀 있는 것 같네요 ㅠㅠ
일단 테스트와 관련해서는 문제 없도록 피드백 남기겠습니다.

대신 원인 파악은 해주시면 좋겠어요!