과제 체크포인트

배포링크

https://legitgoons.github.io/front_6th_chapter2-1/

기본과제

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

심화과제

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

과제 셀프회고

기본 과제 진행 과정 심화 과제 진행 과정

이번 과제 진행기,,

• 이번주는 AI를 적극적으로 도입해서 사용해보았습니다. 1주차보다 2주차에서, 2주차보다 3주차에서, 그리고 3주차보다 이번 주차에서 더 AI를 적극적으로 사용하게 되었네요.
• 우선 ESlint와 Prettier를 설정하고 나서, Cursor Rules(토스 펀더멘탈과 도은님이 디스코드에 올려주신 Rule 사용)를 세팅했고,,, 이 다음에 어떻게 해야할지 막막해서 다른 분들이 어떻게 하는지 여쭤보러 다녔습니다.
• 성진님과 지훈님이 AI에게 docs를 참조해서 개선이 필요한 포인트를 mark down으로 작성시킨 후 진행하고 있다. 라고 하시더라구요. 바로 따라해서 도입했습니다.
  • 이 부분이 정말 좋았는데, 과제를 하는 동안 늘 Task 분리가 어려워서 고생했었거든요. 추후에도 계속 사용하려고 합니다.
  • 물론 과제의 상세한 요구사항과 클린코드에 대한 지침이 충분해서 가능했을테니, 좀 더 요구사항과 명확한 지침 작성의 중요성을 느꼈습니다.
• 단계별로 나눠둔 checklist를 포함한 문서를 작성해주자, 이를 기반으로 다시 AI에게 코딩을 시켰습니다.
  • 그렇다고 무지성 바이브코딩은 안되니까, 코드를 작성하기 전에 이 코드를 작성했을때의 장점과 단점이 뭔지 작성하도록 시켰고, 이해가 잘 안가면 다시 되물어보면서 해당 작업이 필요여부를 판단하려고 했습니다. 작업이 필요하다면 해당 작업을 진행하고, 문서를 업데이트 한 후 커밋하도록 했습니다.

AI를 적극적으로 사용하고 느낀 점

1. 확실히 AI를 쓰면 코딩할 때 편하다.

• AI를 사용하는 동안에는 제가 생각을 덜해도 됩니다. 코드를 귀찮게 하나하나 읽으면서 이해하지 않아도 되고, 또 직접 수정할 필요도 없었습니다. 제가 할 일은 AI한테 일을 어떻게 해야할지 생각하고, 그에 따라서 진행하라는 명령 뿐이였습니다.
• AI를 사용해서 나아가는 길은 편했습니다. 전기 자전거를 요즘 자주 타는데요. 페달을 살짝만 밟아도 슝슝 나갑니다. AI를 사용해서 코딩을 할 때마다 전기 자전거를 떠올리곤 합니다. 약간의 노력만 해도 적절하게 보이는 코드를 쭉쭉 만들어주니까요.
• 이런 경험을 하면서, 테오가 말한게 생각났습니다. 인간은 편리함을 맛본 뒤에는 못돌아가는 존재다라는 말이요. 앞으로 AI 없이 코딩을 하는 미래는 없을 것이라는 생각이 더 확고해졌습니다.

2. 하지만 AI를 사용하는게 정말 생산성을 높이는지는 잘 모르겠다.

• 제가 위에 적절하게 보이는 코드를 만들어준다. 라고 적은걸 눈치채셨나요?
• 전기 자전거 예시를 들어서 말인데, 전기 자전거는 모터가 있어서 일반 자전거보다 훨씬 무겁습니다. 만약 자전거가 갈 수 없는 길이거나, 배터리가 떨어지거나, 고장이 난다면? 그냥 커다란 짐덩이가 되는거죠.
• AI로 코딩하는 것도 마찬가지인데, 얘가 내 명령을 이해하지 못하거나, 제대로 코드를 작성하지 못하면 결국 사람이 직접 코드를 작성해야합니다. 그때까지 제대로 확인하지 않았던 코드를 가지구요.
• 이번 과제에서도 이 부분을 실감할 수 있었습니다. 처음에는 무서워서 ask로만 쓰다가, agent 모드를 조금씩 써보다가, 나중에는 그냥 기능 구현 전에만 확인하도록 했거든요. 그렇게 슝슝 나가다보니 어느 순간부터 얘가 코드에 똥칠을 하고 있더라구요.
• 정확히는 심화 과제인 React로 마이그레이션 하는 작업에서 개판이 났는데, 지금 생각해보니 얘한테 정확히 어떤 작업을 해달라고 명시하지 않고 그냥 React로 마이그레이션해줘라고 대충 명령했던게 가장 큰 원흉이였던 것 같습니다.
• 결국은 열심히 AI를 두들겨패서 어떻게 해내긴 했는데, 다음 과제에서는 지금보다는 AI 사용 비율을 낮추려고 합니다. 일단 task를 가능한 나눠서 먹이는건 당연하고, 매 commit 전에는 AI가 작성한 코드를 리뷰하고 넘기는 식으로 해볼까합니다.
• AI가 잘 못하는것도 많은 것 같습니다. 코드에서 중복되는 부분을 찾아서 적절하게 추상화하는 거라든지,,

과제를 하면서 내가 제일 신경 쓴 부분은 무엇인가요?

1. AI를 적극적으로 사용하기

• 위에서 설명했듯이 이번 과제에서는 AI를 적극적으로 사용해보려고 노력했습니다.

2. 이해하면서 앞으로 나아가기

• 3주차 과제에서는 우선 과제를 완료하고 그 후에 돌아보면서 코드를 이해해보자라고 생각하고 진행했는데, 막상 완료하고 나니까 자연스럽게 과제를 잘 안돌아보게 되더라구요. 그래서 이번 과제에서는 그냥 넘어가지 않고 매 부분마다 왜 필요한지 설명을 요구하고, 납득이 가면 진행하려고 노력했습니다.

과제를 다시 해보면 더 잘 할 수 있었겠다 아쉬운 점이 있다면 무엇인가요?

1. 클린코드에 대한 생각을 정리하기

• 어쨌건 클린코드 주차에서 어떤 코드가 클린하고, 어떤 코드가 클린하지 않은가를 경험적으로 느꼈다.
• 하지만 어떤 코드가 클린하고, 어떤 코드가 클린하지 않으며, 어떻게 해야 안티패턴을 피하고 클린한 코드를 작성할 수 있는가? 에 대한 생각은 아직 정리하지 못해서 아쉽다.
• 결론 -> 이번주 주말 안으로 블로그에 글을 올리겠습니다!!!!

2. Cursor 토큰 아껴쓰기

• 컨텍스트가 쌓이면서 토큰이 엄청나게 들어갔고, 기본 과제를 마무리할 즈음에는 거의 다 토큰이 만료되었습니다. 결국 심화과제를 위해서 추가적으로 결제를 진행했어야 했습니다. 준일님 멘토링 시간에 토큰을 어떻게 아끼는지에 대한 질문이 나왔는데, 진작에 컨텍스트를 분리하면서 진행했다면 토큰을 아끼면서 진행할 수 있었을 것 같아 아쉽습니다.

3. 진작에 심화 과제에서 Task 나눠서 처리하도록 했어야

• 심화 과제에서 Task를 제대로 나누지 않고 해줘를 했더니 기존 JavaScript 코드를 그대로 가져와서 React에서 DOM을 조작하는 방식을 전혀 사용하지 않고 그대로 갖다박았더라구요.
• 바로 다시 다 엎어버리고, 요구사항을 추가해서 Task를 분리해달라고 요청했습니다.

4. React로 마이그레이션 하는 과정에서 좀 더 React스러운 코드란 무엇인가를 고려해서 추가했으면 좋았을 것

• 엎은 후 다음 요구사항들을 추가해서 Task 분리를 진행했습니다.
  1. 로직은 훅, 화면은 JSX로 분리할 것
  2. 직접 DOM 조작 금지
  3. 도메인별로 상수/타입/컴포넌트 분리
• 하지만 위 사항들이 정말 React스러운 코드를 작성하기 위해 충분한 지시였던 것은 아닌것 같습니다. 이에 규칙을 명확하게 나만의 언어로 작성해보고 싶습니다.

리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문 편하게 남겨주세요 :)