코드 정리 팁: 과거에 배웠으면 좋았을 법한 것들

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, 초기 개발자, 팀 협업이 필요한 개발자

핵심 요약

• 명확한 변수/클래스 이름 사용: p 대신 productsPromise와 같은 의미 있는 이름 사용
• 일관된 코드 스타일 유지: camelCase/snake_case 선택 후 일관된 적용
• 컴포넌트 단일 책임 원칙 준수: 하나의 컴포넌트가 하나의 기능만 수행하도록 구조화
• 프로젝트 폴더 구조 정리: /api, /utils, /components 등 명확한 분리
• 가독성 우선: 복잡한 로직보다는 명확한 코드 작성

섹션별 세부 요약

1. 명확한 이름 사용

• cnt, s-bar 대신 page-container, sidebar 등 의미 있는 이름 사용
• p 대신 productsPromise와 같은 명확한 변수 이름으로 코드 가독성 향상
• 이름이 복잡한 경우 동료와 협업 시 오류 발생 가능성 증가

2. 일관된 스타일 유지

• camelCase, snake_case, 탭/스페이스 등 일관된 스타일 선택
• 예: formatPrice vs format_cost로 인한 혼란 방지
• 스타일 일관성 확보 시 유지보수 시간 절감

3. 단일 책임 원칙 적용

• 800줄 이상의 대규모 컴포넌트 대신 소규모 기능별 컴포넌트 분리
• 예: 데이터 fetching, 폼 처리, UI 렌더링 등 분리
• 컴포넌트 분리 시 재사용성과 유지보수성 향상

4. 프로젝트 폴더 구조 정리

• /components, /api, /utils, /hooks 등 명확한 폴더 구분
• 예: formatPhone 함수는 /utils에, API 관련 코드는 /api에 배치
• 폴더 구조가 복잡할 경우 코드 위치 판단 시간 증가

5. 가독성 vs. 기교

• 복잡한 로직 대신 명확한 코드 작성:

```javascript

// 복잡한 로직

const getFullName = data => ((data || {}).user || {}).profile ? ...

// 명확한 코드

const getFullName = (data) => { ... }

```

• 미래 개발자에게 명확한 지침을 남기는 주석 작성

6. 실무 적용 효과

• 신입 개발자 생산성 향상 (1주일 → 1일)
• 버그 수정 시간 50% 감소
• 기존 기능 수정 시 혼란 최소화

결론

• 실무 팁: 의미 있는 이름 사용, 스타일 일관성 확보, 단일 책임 원칙 준수
• 구현 방법: formatPrice 함수를 /utils에 통합하여 중복 제거
• 결론: 가독성과 유지보수성을 위한 코드 정리가 실제 개발 효율성과 시간 절감에 직접적 영향을 미침