과제 체크포인트
배포 url https://tooth-is-silver.github.io/front_6th_chapter2-1/
기본과제
- 코드가 Prettier를 통해 일관된 포맷팅이 적용되어 있는가?
- 적절한 줄바꿈과 주석을 사용하여 코드의 논리적 단위를 명확히 구분했는가?
- 변수명과 함수명이 그 역할을 명확히 나타내며, 일관된 네이밍 규칙을 따르는가?
- 매직 넘버와 문자열을 의미 있는 상수로 추출했는가?
- 중복 코드를 제거하고 재사용 가능한 형태로 리팩토링했는가?
- 함수가 단일 책임 원칙을 따르며, 한 가지 작업만 수행하는가?
- 조건문과 반복문이 간결하고 명확한가? 복잡한 조건을 함수로 추출했는가?
- 코드의 배치가 의존성과 실행 흐름에 따라 논리적으로 구성되어 있는가?
- 연관된 코드를 의미 있는 함수나 모듈로 그룹화했는가?
- ES6+ 문법을 활용하여 코드를 더 간결하고 명확하게 작성했는가?
- 전역 상태와 부수 효과(side effects)를 최소화했는가?
- 에러 처리와 예외 상황을 명확히 고려하고 처리했는가?
- 코드 자체가 자기 문서화되어 있어, 주석 없이도 의도를 파악할 수 있는가?
- 비즈니스 로직과 UI 로직이 적절히 분리되어 있는가?
- 코드의 각 부분이 테스트 가능하도록 구조화되어 있는가?
- 성능 개선을 위해 불필요한 연산이나 렌더링을 제거했는가?
- 새로운 기능 추가나 변경이 기존 코드에 미치는 영향을 최소화했는가?
- 코드 리뷰를 통해 다른 개발자들의 피드백을 반영하고 개선했는가?
- (핵심!) 리팩토링 시 기존 기능을 그대로 유지하면서 점진적으로 개선했는가?
심화과제
- 변경한 구조와 코드가 기존의 코드보다 가독성이 높고 이해하기 쉬운가?
- 변경한 구조와 코드가 기존의 코드보다 기능을 수정하거나 확장하기에 용이한가?
- 변경한 구조와 코드가 기존의 코드보다 테스트를 하기에 더 용이한가?
- 변경한 구조와 코드가 기존의 모든 기능은 그대로 유지했는가?
- (핵심!) 변경한 구조와 코드를 새로운 한번에 새로만들지 않고 점진적으로 개선했는가?
과제 셀프회고
과제를 하면서 내가 제일 신경 쓴 부분은 무엇인가요?
- AI한테 어떤 룰을 적용해야할까?
- 토스 프론트엔드 가이드라인 기반으로 만든 Cursor rule을 적용했었는데 추후 멘토링시 자잘한 파일로 짧은 룰을 여러개 적용하는 것이 훨씬 AI를 똑똑하게 사용하는 방법이라고 조언 받아 클로드 코드 룰을 다음과 같이 정의하였다.
- 디스코드에 박지수 학메가 공유해준 정석호 학메의 프롬프트 첨부 (커서 룰이지만 클로드 코드에도 동일하게 적용)
- 과제 내부 docs 폴더의 md파일을 참고하여 ✅ 좋은 예를 참고하도록 적용했다.
- 그 외에 중요하다고 생각하는 부분, 혹은 가져가고 싶은 폴더 구조(리액트 마이그레이션 대비하여 context나 비즈니스 로직이 담긴 hooks폴더를 만들기, handler와 ui 분리 등)를 참고하도록 적용했다.
- 디스코드에 박지수 학메가 공유해준 정석호 학메의 프롬프트 첨부 (커서 룰이지만 클로드 코드에도 동일하게 적용)
- 마이그레이션을 어떻게 하면 잘 할수있을까?
- 고민 1 : 1차 시도에서 전체 파일을 전달해서 어떻게 정리할지 가늠해보려고 했으나 너무나도 더러운(...) 코드다보니 한 채팅에서 해결을 못하고 리팩토링시 에러가 나거나 놓치는 부분이 많다는 것을 느꼈다.
- 고민 2 : 2차 시도때 UI 분리, 상수 분리, 핸들러 분리, DOM 분리 식으로 진행하여 차근차근 하나씩 해결해 나가고자 하였다. 하지만 AI가 놓치고 작업하지 않거나 기존 코드를 너무 존중해줘서 수작업이 필요한 상황이 많이 발생되었다.
- 고민 3 : advanced 리액트 마이그레이션 과정으로 넘어가고자 했으나, basic의 틀을 잘 잡고 진행해야 마이그레이션을 수월하게 할 수 있을거라 생각되어 다시 3차 시도로 basic부터 시작하였다. 사용하지 않는 코드들을 모두 제거하고 오버엔지니어링 진행되는 부분을 수작업으로 한땀한땀 체크하면서 작업 사항을 모두 확인했다.
- 해결 : basic을 좀 더 다듬고 그 기반으로 advanced를 진행하니 1,2차 시도때보다 훨씬 리액트스럽게 진행되었다.
과제를 다시 해보면 더 잘 할 수 있었겠다 아쉬운 점이 있다면 무엇인가요?
리팩토링은 너무 큰 단위 말고 내가 잘 아는 작은 단위부터 시작하는게 제일 좋다는 것을 경험했다. basic 과제 진행시 바닐라 자바스크립트의 경우에 리액트로 치면 컴포넌트와 state간의 정확한 분리가 어려워 UI를 어디까지 보고 핸들러를 분리해야할지 고민이 많았다. 기존 origin 파일로 실행된 사이트의 UI를 보면서 도메인을 이해하고 분리하려고 노력했다. 예를 들어 장바구니에 담기는 이벤트나 수량이 증가,감소하는 이벤트, 장바구니에서 상품이 제거되는 이벤트, 특정 수량 이상일 경우 출력되는 텍스트들과 할인율... 마치 UI/UX 기획서를 뜯어보는 듯한 느낌이었다.
그래서 다음에 진행한다면 작은 단위에서 진행하되 비즈니스 로직(도메인)에 따라서 진행해보고 싶다. 도메인에 맞춰서 하나씩 나누다보면 저절로 덩어리로 뭉쳐지고 자연스럽게 분리될 것으로 예상한다. 현재는 일단 핸들러와 ui를 분리하고, 그 이후에 도메인에 맞춰서 개선을 진행했는데 도메인에 맞춰서 덩어리화 한 다음에 도메인 별로 점진적으로 작은 단위부터 개선했다면 좀 더 빠르게 작업했을 것 같다. 이렇게 느낀 이유는, 상수, 핸들러, UI 등 해당 프로세스대로 분리하니 도메인 로직들이 정확히 어디에 어느 부분에서 동작하는지 파악하기가 어려웠다. 너무 더럽고 많은 코드에서 이 코드가 포인트에서 사용되는 코드가 맞는가? 라고 판단했을때 확실치 않았다.
리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문 편하게 남겨주세요 :)
-
멘토링 때 답변 못받고 넘어간 부분인데, 코치님이 리팩토링을 진행하신다면 어떤 절차대로 진행하실지 궁금합니다!
-
AI를 적극적으로 활용하는건 너무 좋았는데, 열심히 쓰다보니 이게 맞나..? 해당 주차에서 내가 얻어가는게 뭐가 있을까, AI활용성 고민과 AI로의 문제해결 밖에 안남은 것 같은데 만약 복기하게 된다면 어떻게 복기하면 좋을지 고민입니다.
과제 피드백
안녕하세요 가은님! 4주차 과제 잘 진행해주셨네요 ㅎㅎ 고생하셨습니다!
멘토링 때 답변 못받고 넘어간 부분인데, 코치님이 리팩토링을 진행하신다면 어떤 절차대로 진행하실지 궁금합니다!
AI를 활용한다면.. 아마 이런 질의를 통해 진행할 것 같아요!
- 현재 테스트 코드와 구현된 코드를 토대로 실제 이 어플리케이션의 요구사항과 엣지케이스를 추출해줘.
- 먼저 현재 코드에서 UI에 대한 부분과 비즈니스(도메인)에 대한 부분을 점진적으로 분리하고 싶어. 어떤 단계로 진행하면 좋을지 알려줄 수 있을까?
- 계획을 잘 세워줬네! 여기서 내가 하면 더 효과적인 부분과 너를 사용하면 더 효과적인 부분을 구분해줄 수 있을까?
- 잘 구분해줬네! 이제 우리가 서로 협업하면서 진행을 해보자.
5. 어느정도 정리가 된 것 같아. 여태까지 진행한 내용을 문서로 만들어줄 수 있을까?
(문서화 진행)
그 다음 이제 새로운 채팅을 하나 만들어주세요.
1. 여태까지 내가 작업한 내용이 XXX.md 에 기록되어있어. 이제 다음 단계를 진행할 차례야. 요구사항/엣지케이스/테스트코드/JS 등을 기반으로 react로 구성하고 싶어. 이 때 재활용할 수 있는 코드가 얼마나 있을까?
2. 그렇다면 재활용할 수 있는 형태가 최대한 많았으면 좋겠어. 이를 토대로 현재 코드를 리팩토링 하고 싶어. 어떤 코드부터 정리하면 좋을지 알려줄 수 있을까? 작업은 내가 해볼게
3.. 현재까지 진행한 내용을 문서로 정리해줘.
다시 새로운 채팅을 만든 후에
1. 여태까지 내가 작업한 내용이 XXXX.md 파일에 있어. 이제 작업을 이어서 해야 돼. 리액트로 코드를 구성해줄 수 있을까? 특히 엣지케이스를 꼼꼼하게 채워주면 좋겠어. 무엇보다 기존 코드를 최대한 재활용하는 방식이어야해!
2. 여태까지 작성된 코드에 대한 단위테스트를 만들고 싶어. UI보단 hook과 function 위주로 테스트를 만들어주고, 엣지케이스가 최대한 많으면 좋겠어.
...
아마 요로코롬 진행했을 것 같아요 ㅎㅎ
> AI를 적극적으로 활용하는건 너무 좋았는데, 열심히 쓰다보니 이게 맞나..? 해당 주차에서 내가 얻어가는게 뭐가 있을까, AI활용성 고민과 AI로의 문제해결 밖에 안남은 것 같은데 만약 복기하게 된다면 어떻게 복기하면 좋을지 고민입니다.
이번 과제의 핵심이 저는 리팩토링이라고 생각해요. 이걸 AI의 도움을 받아서 해결하는거죠. 그렇다면 리팩토링에서 제일 중요한게 뭘까!? 에 대한 질문을 해보시면 좋아요.
가령, 내가 리팩토링을 통해 달성하고자 하는 목표가 무엇인지.
어떤 구조가 되길 원하는지
어떤 요구사항을 잘 수용할 수 있는지
어떤 요구사항에 대해서는 수용하기가 어려운지
그렇다면 어떻게 또 코드가 구성이 되어있어야 요구사항을 수용하기가 쉬운지
이런 지점들이랍니다!
이러한 목표를 달성하기 위해 AI에게 어떻게 질의하고 기록해야 매끄럽게 흘러갈 수 있을지 고민해보시면 좋아요!