클린 코드 / 코드 리팩토링에 관하여

회사 일과는 별개로 현재 사이드 프로젝트로 진행 중인 Habit Project 에서 이번에 맡게 된 태스크는 무려

"애플리케이션 최적화" 였다.

지금 회사 프로덕트도 얼레벌레 만들고 있는 것 같아서 optimazation을 잘 할 수 있을까 걱정했지만 차근차근 클린코드화 시켜본다면 분명 많은 도움이 될 것 같았다.

1. 모듈화와 컴포넌트 기반 개발

• 코드 모듈화: 기능별로 코드를 모듈화하여 재사용 가능하고 독립적인 단위로 관리합니다. 이는 코드의 가독성과 재사용성을 높이며, 변경에 대한 유연성을 제공합니다.
• 컴포넌트 기반 개발: UI를 재사용 가능한 컴포넌트로 분리하여 개발합니다. React, Vue, Angular와 같은 현대 프론트엔드 프레임워크/라이브러리들은 이를 잘 지원합니다.

2. DRY(Don't Repeat Yourself) 원칙

• 중복된 코드를 피하고, 공통적인 기능은 함수나 컴포넌트로 추출하여 재사용합니다. 이는 코드 베이스를 간결하게 유지하고, 유지 보수를 쉽게 만듭니다.

3. 코드 리뷰와 페어 프로그래밍

• 코드 리뷰는 다른 개발자가 작성한 코드를 검토하는 과정을 통해 코드 품질을 향상시킵니다. 페어 프로그래밍은 두 명의 개발자가 한 컴퓨터에서 함께 작업하며, 설계와 코드 품질을 실시간으로 개선할 수 있게 합니다.

4. 테스트 주도 개발(TDD)

• 테스트를 먼저 작성하고, 이를 통과하기 위한 코드를 개발하는 방식입니다. 이는 안정적인 코드 기반을 구축하고, 리팩토링 시 코드의 기능이 유지되는지 쉽게 확인할 수 있게 합니다.

5. 성능 최적화

• 리팩토링 과정에서 성능을 고려하며, 불필요한 렌더링을 줄이고, 최적의 알고리즘을 사용합니다. 예를 들어, 이미지 지연 로딩, 비동기 로딩, 코드 스플리팅 등을 적용할 수 있습니다.

6. 접근성과 사용성 향상

• 웹 접근성(WAI-ARIA 마크업 사용 등)을 고려하여 모든 사용자가 애플리케이션을 쉽게 사용할 수 있도록 합니다. 사용자 경험을 고려한 UI/UX 개선도 중요한 리팩토링 요소입니다.

7. 코드 포매팅과 린팅

• 일관된 코드 스타일을 유지하기 위해 포매터(예: Prettier)와 린터(예: ESLint)를 사용합니다. 이는 코드의 가독성을 향상시키고, 잠재적인 오류를 사전에 발견할 수 있게 합니다.

8. 의존성 관리

• 사용하지 않는 패키지는 제거하고, 필요한 패키지는 최신으로 유지합니다. 패키지의 버전 관리는 애플리케이션의 안정성과 보안에 중요합니다.

챗 지피티에게 리팩토링을 잘하는 방법에 대해서 물어보자 이와 같은 답변을 남겼다.
여기서 현재 Habit Project를 위해 내가 할 수 있는 방법은,

1. 코드 모듈화 / 컴포넌트 기반 개발
2. DRY 원칙
3. 성능 최적화
4. 코드 포매팅과 린팅
5. 의존성 관리

이 정도 인 것 같다. 차근차근 하나씩 실행해보며 글로 남겨보겠다.