과제 링크

https://k-sang-soo.github.io/front_6th_chapter2-1/

과제 체크포인트

기본과제

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

심화과제

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

과제 셀프회고

파일을 열자마자 바로 구역질이 나고, 머리가 아팠다... var 로만 도배된 변수들, 뭔지 알 수도 없는 매직넘버들, 21 아이덴티티 빰치는 자아를 가진 일관성 없는 코드들, 심연보다 깊은 if 중첩문, 단일 책임 따위는 1도 없는 무책임한 함수들, dom 셀럭터에 tailwind 유틸 클래스까지 얹어놓은 걸 보니 하나의 예술 작품이였다.

처음에는 직접 해봐야겠다는 생각으로 클릭 코드/리팩터링 원칙 이것저것 찾아보고 있었는데 AI 없이는 제 시간안에 끝내기 힘들것 같아 계획을 변경했다. 이전에는 내가 삽질하면서 배운다는 마인드로 gpt랑 서로 끙끙거리기만 했었는데, 제대로 사용해보기 위해 요즘 핫하다는 클로드 코드를 제대로 써보기로 마음먹었다.(VSCode 보다 웹스톰이 편해서 커서는 제외!)

AI를 쓰는게 이번 과제 취지에 부합하다고는 할 수 없지만, 그럼에도 사용한 이유는 과제 양이 많았고, 이전 과제들을 진행하면서 보니 AI를 적절히 잘 사용하는 동료들을 보고 나도 제대로 활용해보고 싶다는 생각도 들었다. 실제로 클로드 코드를 사용해보니 gpt를 사용했을 떄와 코드의 퀄리티나 결과물이 확실히 달랐다. 클로드 코드를 잘 활용하기 위해서는 프로젝트와 관련된 md 파일을 정리하거나, Super Claude, BMAD 같은 툴로 커맨드/플래그/페르소나 등을 사용해서 효율을 올리는 방법도 썼다. AI도 그냥 막 질문을 던지면 되는 게 아니라, 진짜 잘 쓰려면 이것도 공부해야 할 게 많다는 걸 새삼 느꼈다.

이번에 AI를 사용하면서 느낀 건, 내가 AI를 활용하는데 뒤쳐져있었구나 꺠달았다. 내가 생각했던거 보다 훨씬 구체적이고, 문서화를 잘 해서 AI한테 딱 맞는 질문을 던져줘야 원하는 결과가 나오고, 그냥 이거 해줘 이런 식으로는 한계가 있다. 그럴려면 역시 잘하는 개발자가 AI도 결국 잘 쓴다. 문제점은 스타일을 변경해달라는 요구를 한적이 없는데 마음대로 변경하고, 기능은 얼뜻 보기에는 정상적이지만 플로우가 변경된다던지 조금씩 기획과는 다르게 변경된다. 시멘틱 태그를 잘 사용한것 처럼 보이지만 자세히 보면 맞지 않는 시멘틱 태그를 사용하기도 하고, 사용하지 않는 코드들을 남발하고, 똑같은 코드인데 묘하게 중복되지 않도록 짰지만 파보면 중복된 코드들이 많았다. 결론은 바이브 코딩으로 개발자 대체? 현재로서는 절대 안될것 같다. 이번 과제는 바이브 코딩을 하면 어떻게 망하는지 뼈저리게 느꼈다..

ps. 클로드 코드 혼잣말로 중얼거리면서 내가 질문한거 파악하는데 너무 귀엽고 기특함.

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

어떻게 하면 AI를 통해서 내가 원하는 만큼의 코드를 짤 수 있을까 생각했습니다. 그러다 한계점을 부딪히게 됐는데 지금 기술력으로는 아마 불가능하지 않을까 라고 결론을 냈습니다.

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

과제를 하면 할수록 잘못된 방향으로 하고 있다는 걸 느꼈습니다. 클로드 코드가 처음에 잘 짜길래 꿈을 펼치게 해줬지만 나중에 에러가 떠서 확인해보니 말도 안되게 짜놓은걸 보고 어떻게 어디서부터 고쳐야될지 감도 안 잡히더라구요... 중간 중간에 클로드 코드가 짧게 보여주는 코드들을 봤을 때는 문제가 없다고 생각했는데 전체적인 코드를 봤어야 했나봅니다. 과제를 다시 한다면 AI로 분석과 계획을 짜게 실행하고 코드는 제가 짜고 짠 결과를 검증받는 식으로 해야될것 같습니다.

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

과제의 취지에도 멀어진 것 같고 그렇다고 결과물도 마음에 안들고 대실패 입니다ㅠㅠ 이런 식으로 한 저한테도 열불나고 열심히 과제를 내주신 코치님들에게도 죄송하네요😢 바이브 코딩 절대 안하겠습니다. AI 떄문에 개발자 망한다는 사람들은 투두 리스트나 만들고 만족해라!!!!!!!!