배포 링크: https://jihoon-0330.github.io/front_6th_chapter2-1/

과제 체크포인트

기본과제

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

심화과제

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

과제 셀프회고

회사에서 프론트엔드 개발을 혼자 담당하다보니 내가 작성한 코드에 대해 피드백을 받을 일이 없었고, 다른 사람의 코드를 리뷰할 기회도 많이 없었다. 그래서 클린코드라는 말은 많이 들어봤지만, 실제로 어떤 코드가 좋은 건지 나쁜 건지에 대한 명확한 기준이 없었던 것 같다. 이번 과제를 진행하면서 코드를 이해하기 쉽게 작성하는 것은 정말 중요한 역량이라는 것을 깊이 느끼게 되었다. 이외에 테스트 코드에서 발생한 이슈와 alert 으로 인한 불쾌함은 이렇게 하지 말아야지 라는 생각으로 머리속에 각인이 될 것 같다.

그동안 과제를 진행하면서 AI 를 사용한 구현을 지양했다. 지금은 회사를 다니지 않다보니 시간적으로 여유가 있기도 하고, 직접 코드를 작성하는 과정에서 공부가 많이 된다고 생각했다. 이번 과제 또한 스스로 해결하는 방향으로 진행을 했다. 진행을 하다 보니 시작부터 막히는 부분이 너무 많았다. 전역으로 사용중인 변수들과 크기가 너무 큰 함수들 줄바꿈도 없는 코드는 내 사고를 정지시켰다. 그래서 AI 를 적극 활용중인 사람들의 사용 방법을 듣고 AI 를 사용해 과제를 진행했다. AI 를 사용하니 과제가 수월하게 진행되는 것 같았다. 가끔 수정 후 테스트를 실패하는 경우도 있었지만, 다시 수정하면 대부분 잘 동작했다. 그렇게 기본과제를 모두 마친 후 코드를 살펴보니 코드가 분리는 되어있지만, 잘못 분리된 코드들, 불필요하게 분리된 코드들이 많다고 느껴졌다. 기존 코드에서 관심사가 섞여있다 보니 분리를 하는 과정에서 깔끔하게 동작하지 못한 것 같았다. AI 를 적극 활용해 보면서 느낀 점은 AI 에게 명확하게 지시를 내릴 수 있어야 한다는 점이다. 클린코드에서도 클린코드를 만들기 위한 나의 기준이 없다면 AI 를 아무리 활용해도 마음에 드는 결과물을 얻는 것은 매우 어려울 것 이다.

결국 AI 가 작성한 대부분의 코드를 들어내고 직접 코드를 작성하는데 시간을 많이 사용했다. 직접 코드를 작성하면서 느낀 점은 코드를 작성하는 나만의 기준이 없다는 점이다. 폴더와 파일은 어떻게 나눌지, 함수명은 어떻게 지을지, 함수 인자는 객체 형태로만 받을지, 리턴은 어떤 형태로? 이런 것들에 기준이 없다보니 코드를 작성하면서 일관성을 지키기 어려웠다. 이번 챕터를 진행하면서 나만의 컨벤션을 만들어 보는 것도 의미가 있을 것 같다.

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

기본 과제에서는 계산 로직과, UI 업데이트를 최대한 분리하는 것과, 데이터를 DOM 으로 관리하지 않도록 개선하는 것에 신경을 썼다. 리액트를 사용하다 보니 UI 는 쉽게 작성할 수 있었기 때문에 심화 과제에서는 기본 과제에서 분리한 로직들을 선언적으로 만드는 것에 좀 더 집중을 할 수 있었다.

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

코드를 작성하기 전 컨벤션을 정하고 시작했다면 고민하는 시간도 줄고, 일관성 있는 코드를 작성하기 쉬웠을 것 같다.

심화 과제를 진행할 때 커밋을 좀 더 작게 작성했다면 좋았을 것 같다.

테스트 코드에서 초기에 DOM 을 변수에 할당하고 테스트에 사용중이었기 때문에, 상태가 업데이트 되면 전체 화면을 다시 렌더링 하는 방식으로 개발을 진행할 수 없었다. 이외에도 select 요소에 value 를 할당하는 테스트 방식은 change 이벤트를 통해 데이터를 관리할 수 없도록 만들기도 했다. 잘못된 테스트 코드로 인해 코드 작성에 어려움을 겪는 것이 의도된 내용이었는데, 테스트 코드의 기능은 유지하면서 더 좋은 테스트 코드로 만들 수 있었다면 코드 개선이 조금 더 수월할 수 있었을 것 같다.

단순히 코드를 분리하는 것이 아니라 데이터의 흐름에 대해 생각해볼 필요가 있다고 느꼈다. AI 를 활용해 만족스러운 결과를 내지 못한것은 나의 의도가 명확하지 않았기 때문이라 생각하는데, 스스로 어떻게 개선해 나갈지 알지 못한것이 원인이라 생각한다. 다음에 다시 하게 된다면 데이터의 흐름에 대해 생각해 볼 필요가 있을 것 같다.

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

1. 코치님은 어떤 컨벤션을 가지고 코드를 작성하시는지 궁금합니다.

2. 린트는 어떤 옵션을 사용하시는지 궁금합니다.