과제 체크포인트
배포링크 https://amelia-shin.github.io/front_6th_chapter2-1/
기본과제
- 코드가 Prettier를 통해 일관된 포맷팅이 적용되어 있는가?
- 적절한 줄바꿈과 주석을 사용하여 코드의 논리적 단위를 명확히 구분했는가?
- 변수명과 함수명이 그 역할을 명확히 나타내며, 일관된 네이밍 규칙을 따르는가?
- 매직 넘버와 문자열을 의미 있는 상수로 추출했는가?
- 중복 코드를 제거하고 재사용 가능한 형태로 리팩토링했는가?
- 함수가 단일 책임 원칙을 따르며, 한 가지 작업만 수행하는가?
- 조건문과 반복문이 간결하고 명확한가? 복잡한 조건을 함수로 추출했는가?
- 코드의 배치가 의존성과 실행 흐름에 따라 논리적으로 구성되어 있는가?
- 연관된 코드를 의미 있는 함수나 모듈로 그룹화했는가?
- ES6+ 문법을 활용하여 코드를 더 간결하고 명확하게 작성했는가?
- 전역 상태와 부수 효과(side effects)를 최소화했는가?
- 에러 처리와 예외 상황을 명확히 고려하고 처리했는가?
- 코드 자체가 자기 문서화되어 있어, 주석 없이도 의도를 파악할 수 있는가?
- 비즈니스 로직과 UI 로직이 적절히 분리되어 있는가?
- 코드의 각 부분이 테스트 가능하도록 구조화되어 있는가?
- 성능 개선을 위해 불필요한 연산이나 렌더링을 제거했는가?
- 새로운 기능 추가나 변경이 기존 코드에 미치는 영향을 최소화했는가?
- 코드 리뷰를 통해 다른 개발자들의 피드백을 반영하고 개선했는가?
- (핵심!) 리팩토링 시 기존 기능을 그대로 유지하면서 점진적으로 개선했는가?
심화과제
- 변경한 구조와 코드가 기존의 코드보다 가독성이 높고 이해하기 쉬운가?
- 변경한 구조와 코드가 기존의 코드보다 기능을 수정하거나 확장하기에 용이한가?
- 변경한 구조와 코드가 기존의 코드보다 테스트를 하기에 더 용이한가?
- 변경한 구조와 코드가 기존의 모든 기능은 그대로 유지했는가?
- (핵심!) 변경한 구조와 코드를 새로운 한번에 새로만들지 않고 점진적으로 개선했는가?
과제 셀프회고
과제를 하면서 내가 제일 신경 쓴 부분은 무엇인가요?
AI에게 질문 잘하기! 명확하게 설명하지 못하면 내가 원하는 코드를 제대로 구현해주지 않습니다. 질문할 때, 내가 뭘 원하고 AI가 어떻게 해줬으면 좋겠고 그 외 추가 조건이 있다면 자세하게 질문을 해줘야 제가 원하는 코드에 그나마 가까운 대답을 던져줬습니다.
과제를 다시 해보면 더 잘 할 수 있었겠다 아쉬운 점이 있다면 무엇인가요?
아쉬운 점이 너무 많습니다.. 처음에는 변수 타입 지정부터 함수 분리 까지 AI를 잘 활용하고 질문&지적 하며 코드 적용을 잘 하고 있다 생각했는데, 점점 시간이 지나갈 수록 우선순위가 잘 안지켜지고 테스트통과에 통과가 목표가 되어, 우선 구조부터 잡고 나중에 리팩터링을 하자. 식으로 과제를 진행하게 되었습니다.
이번 과제가 끝나더라도, 추후 처음부터 다시 천천히 리팩토링을 진행하며 테스트 코드에 연연하지 않고 AI를 적절히 잘 활용하여 클린코드를 해보고싶습니다.
리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문 편하게 남겨주세요 :)
Q1. 줄바꿈 -> 변수타입/변수명 수정 -> 함수 분리 -> 이벤트 분리 -> DOM조작 분리(UI) 순으로 진행해보았는데요. 어떤 순서로 진행하는게 더 나았을지, 앞으로 코드 리팩토링 할 때 어떤 순서로 진행하면 좋을지 궁금합니다.
과제 피드백
수고했습니다! AI에게 질문을 잘하는게 중요하죠. 이번 과제에서 특히나 내가 목적지를 모른채로 해달라고 큰일(?) 날 수 있다는 걸 꼭 알려주고 싶었어요. AI를 잘쓴다라는 건 AI를 잘 아는게 아니라 내가 필요한 관련 지식을 잘 설명하는 능력이라 생각해요.
처음에는 계획했던 대로 진행을 했지만 점점 테스트 통과가 목표에 급급해서 아쉽다해서 테스트 코드에 연연하지 않고 리팩토링을 해야겠다 생각을 했다 하지만 테스트 코드가 없이 리팩토링을 하는건 훨씬 더 어려운 작업이랍니다.
내가 수정한 코드가 문제가 없을 거라는 확신을 가진채로 코드 수정을 해야 하니까요. 내가 한땀 한땀 수정을 한다면 이 코드는 이렇게 변경을 해도 버그가 없을거야 라고 진행할 수도 있겠지만 AI를 활용한다면 AI가 수정한 코드가 문제가 없을거라고 확신하면서 리팩토링을 하는게 참 어렵죠.
물론 그 또한 본인이 느껴보는게 제일 좋죠. 테스트 코드가 없는 상태에서 리팩토링을 한번 도전해보는 것도 흥미로운 경험이 될거에요. 코딩은 학문이 아니라 운동의 일종이라 결국 실습하고 경험을 해봐야 성장할 수 있을테니까요.
어떤 순서인지는 중요하진 않아요. 다만 너무 큰 구조 변경을 한번에 하려고 하기 보다는 이런 수정은 해도 코드에 전혀 문제가 생기지 않는 작업을 시작으로 언제든 분리가 가능할 수 있도록 엉켜있는 걸 풀어 두는게 중요해요. 그래서 줄바꿈, 주석 추가, var -> const, 템플릿 변경, 코드 순서 변경, 이름 변경등 코드의 영향을 주지 않는데 코드가 더 나아지는걸 우선으로 함수 빼내기, 순수함수로 만들기, 등등으로 결합도를 낮추는 작업을 하고 나면 이제 서로 연관이 있는 것끼리 한 곳에 두는 응집도를 높이는 방향으로 진행하게 됩니다.
수고많았어요! 5주차 과제도 화이팅입니다!