배포 경로
과제 체크포인트
기본과제
- 코드가 Prettier를 통해 일관된 포맷팅이 적용되어 있는가?
- 적절한 줄바꿈과 주석을 사용하여 코드의 논리적 단위를 명확히 구분했는가?
- 변수명과 함수명이 그 역할을 명확히 나타내며, 일관된 네이밍 규칙을 따르는가?
- 매직 넘버와 문자열을 의미 있는 상수로 추출했는가?
- 중복 코드를 제거하고 재사용 가능한 형태로 리팩토링했는가?
- 함수가 단일 책임 원칙을 따르며, 한 가지 작업만 수행하는가?
- 조건문과 반복문이 간결하고 명확한가? 복잡한 조건을 함수로 추출했는가?
- 코드의 배치가 의존성과 실행 흐름에 따라 논리적으로 구성되어 있는가?
- 연관된 코드를 의미 있는 함수나 모듈로 그룹화했는가?
- ES6+ 문법을 활용하여 코드를 더 간결하고 명확하게 작성했는가?
- 전역 상태와 부수 효과(side effects)를 최소화했는가?
- 에러 처리와 예외 상황을 명확히 고려하고 처리했는가?
- 코드 자체가 자기 문서화되어 있어, 주석 없이도 의도를 파악할 수 있는가?
- 비즈니스 로직과 UI 로직이 적절히 분리되어 있는가?
- 코드의 각 부분이 테스트 가능하도록 구조화되어 있는가?
- 성능 개선을 위해 불필요한 연산이나 렌더링을 제거했는가?
- 새로운 기능 추가나 변경이 기존 코드에 미치는 영향을 최소화했는가?
- 코드 리뷰를 통해 다른 개발자들의 피드백을 반영하고 개선했는가?
- (핵심!) 리팩토링 시 기존 기능을 그대로 유지하면서 점진적으로 개선했는가?
심화과제
- 변경한 구조와 코드가 기존의 코드보다 가독성이 높고 이해하기 쉬운가?
- 변경한 구조와 코드가 기존의 코드보다 기능을 수정하거나 확장하기에 용이한가?
- 변경한 구조와 코드가 기존의 코드보다 테스트를 하기에 더 용이한가?
- 변경한 구조와 코드가 기존의 모든 기능은 그대로 유지했는가?
- (핵심!) 변경한 구조와 코드를 새로운 한번에 새로만들지 않고 점진적으로 개선했는가?
과제 셀프회고
과제를 하면서 내가 제일 신경 쓴 부분은 무엇인가요?
처음에는 ai 안쓰고 리팩토링 해볼까..? 라고 마음을 먹고 과제를 진행했습니다.(하지만 장렬하게 실패함) 과제를 시작하기 전에 생각해본 리팩토링의 우선순위는 다음과 같았는데요
1. Prettier, Eslint 설정
2. var -> let, const 변경
3. 컴포넌트 분리
4. 매직넘버 상수 추출
5. 네이밍 컨벤션에 따른 변수명, 함수명 설정
6. 중복코드 제거
7. 추상화처리
8. 에러처리 및 안정성 대응
…
6번으로 넘어가는 시점부터 우선순위 설정이 잘못되었나…? 라는 생각이 들기 시작했습니다. 컴포넌트랑 함수가 분리되어 있는 상태에서 중복코드를 찾으려니까 정신이 하나도 없더라고요. 코드를 분리하기 전에 전체 코드에서 동작 원리를 먼저 파악하고 중복 코드 제거, 전역변수 처리를 먼저 한 후에 컴포넌트 및 함수들을 분리했더라면 이리저리 왔다갔다 하면서 코드를 파악하는 불편함을 덜었을텐데… 하지만 이미 늦었고.. 돌아갈순없고… 그래서 AI에게 도움을 받기 시작했습니다. 커서야…내가 다시 더럽혀둔 코드를 정리해줘… 그러다보니 초반 이후부터는 좀 중구난방으로 작업을 하게 된 것 같습니다. AI를 사용하기로 마음먹고 나서 처음 토스 프론트엔드 커서룰을 적용해서 진행했는데, 멘토링 시간에 룰은 200줄을 넘기지 않는 것이 좋다라는 말을 듣고 부리나케 다른 룰을 찾아서 적용해보기도 했습니다.
과제를 다시 해보면 더 잘 할 수 있었겠다 아쉬운 점이 있다면 무엇인가요?
Basic과제부터 틀을 제대로 잡아놔야 advanced에서 조금이라도 수월하게 리팩토링을 할 수 있을 거라고 생각해서 베이직에 시간을 많이 소비해서 오히려 advanced 할 시간이 부족해지니까 AI한테 시키느라 정신없이 과제를 수행하게 된 부분이 아쉽습니다. AI를 쭉 사용하고나서 코드를 보니까 오히려 불필요한 코드들도 많고 더러워진 코드들도 발견할 수 있었는데, 중간에 한번씩 직접 정리를 하고 리팩토링을 하는 과정이 있었으면 좀 더 좋지 않았을까 싶습니다. 그리고 오히려 처음부터 AI를 사용했더라면 중간에 흐름이 변경되지 않고 일관성있게 리팩토링을 할 수 있지 않았을까? 라는 생각도 듭니다.
리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문 편하게 남겨주세요 :)
- 리팩토링 진행의 우선순위를 어떻게 잡았으면 좀 더 안정적인 코드 리팩토링을 할 수 있었을까요?
- AI로 작업을 할 때 중간중간 룰을 바꾸면서 진행하는게 좋지 않은 방법일까요? 아니면 상황에 따라 룰을 변경해도 크게 상관없을까요?
과제 피드백
안녕하세요 효진님! 4주차 과제 잘 진행해주셨네요 ㅎㅎ 너무 고생하셨습니다! 기본과제에 있는 코드를 심화과제에 재활용 하기 위한 노력들이 많이 보이는데요,
utils 폴더에 작성된 다양한 비즈니스 로직을 아예 공용 폴더로 만들어서 기본과제에서도 사용하고 심화과제에서도 사용하는 방식으로 작성이 되었으면 더 좋았을 것 같아요!
특별한 질문은 없어서 피드백은 여기서 마무리하도록 하겠습니다 ㅎㅎ 고생하셨어요!!
안녕하세요 효진님~ 다시 확인해보니 과제에 질문이 생겼네요 ㅎㅎ
리팩토링 진행의 우선순위를 어떻게 잡았으면 좀 더 안정적인 코드 리팩토링을 할 수 있었을까요?
AI를 활용한다면.. 저는 아마 이런 질의를 통해 진행할 것 같아요!
- 현재 테스트 코드와 구현된 코드를 토대로 실제 이 어플리케이션의 요구사항과 엣지케이스를 추출해줘.
- 먼저 현재 코드에서 UI에 대한 부분과 비즈니스(도메인)에 대한 부분을 점진적으로 분리하고 싶어. 어떤 단계로 진행하면 좋을지 알려줄 수 있을까?
- 계획을 잘 세워줬네! 여기서 내가 하면 더 효과적인 부분과 너를 사용하면 더 효과적인 부분을 구분해줄 수 있을까?
- 잘 구분해줬네! 이제 우리가 서로 협업하면서 진행을 해보자.
5. 어느정도 정리가 된 것 같아. 여태까지 진행한 내용을 문서로 만들어줄 수 있을까?
(문서화 진행)
그 다음 이제 새로운 채팅을 하나 만들어주세요.
1. 여태까지 내가 작업한 내용이 XXX.md 에 기록되어있어. 이제 다음 단계를 진행할 차례야. 요구사항/엣지케이스/테스트코드/JS 등을 기반으로 react로 구성하고 싶어. 이 때 재활용할 수 있는 코드가 얼마나 있을까?
2. 그렇다면 재활용할 수 있는 형태가 최대한 많았으면 좋겠어. 이를 토대로 현재 코드를 리팩토링 하고 싶어. 어떤 코드부터 정리하면 좋을지 알려줄 수 있을까? 작업은 내가 해볼게
3.. 현재까지 진행한 내용을 문서로 정리해줘.
다시 새로운 채팅을 만든 후에
1. 여태까지 내가 작업한 내용이 XXXX.md 파일에 있어. 이제 작업을 이어서 해야 돼. 리액트로 코드를 구성해줄 수 있을까? 특히 엣지케이스를 꼼꼼하게 채워주면 좋겠어. 무엇보다 기존 코드를 최대한 재활용하는 방식이어야해!
2. 여태까지 작성된 코드에 대한 단위테스트를 만들고 싶어. UI보단 hook과 function 위주로 테스트를 만들어주고, 엣지케이스가 최대한 많으면 좋겠어.
> AI로 작업을 할 때 중간중간 룰을 바꾸면서 진행하는게 좋지 않은 방법일까요? 아니면 상황에 따라 룰을 변경해도 크게 상관없을까요?
저는 굉장히 자주 바꾸는 편이랍니다 ㅋㅋ 뭔가 마음에 안 들면 그냥 바꿔버린달까...