---
title: 좋은 코드를 위한 4가지 기준
source: https://frontend-fundamentals.com/code-quality/code/
fetched: 2026-05-18
principle: readability|predictability|cohesion|coupling
---

# 좋은 코드를 위한 4가지 기준

좋은 프론트엔드 코드는 **변경하기 쉬운** 코드예요.
새로운 요구사항을 구현하고자 할 때, 기존 코드를 수정하고 배포하기 수월한 코드가 좋은 코드죠.
코드가 변경하기 쉬운지는 4가지 기준으로 판단할 수 있어요.

## 1. 가독성

**가독성**(Readability)은 코드가 읽기 쉬운 정도를 말해요.
코드가 변경하기 쉬우려면 먼저 코드가 어떤 동작을 하는지 이해할 수 있어야 해요.

읽기 좋은 코드는 읽는 사람이 한 번에 머릿속에서 고려하는 맥락이 적고, 위에서 아래로 자연스럽게 이어져요.

### 가독성을 높이는 전략

- **맥락 줄이기**
  - 같이 실행되지 않는 코드 분리하기
  - 구현 상세 추상화하기
  - 로직 종류에 따라 합쳐진 함수 쪼개기
- **이름 붙이기**
  - 복잡한 조건에 이름 붙이기
  - 매직 넘버에 이름 붙이기
- **위에서 아래로 읽히게 하기**
  - 시점 이동 줄이기
  - 삼항 연산자 단순하게 하기

## 2. 예측 가능성

**예측 가능성**(Predictability)이란, 함께 협업하는 동료들이 함수나 컴포넌트의 동작을 얼마나 예측할 수 있는지를 말해요.
예측 가능성이 높은 코드는 일관적인 규칙을 따르고, 함수나 컴포넌트의 이름과 파라미터, 반환 값만 보고도 어떤 동작을 하는지 알 수 있어요.

### 예측 가능성을 높이는 전략

- 이름 겹치지 않게 관리하기
- 같은 종류의 함수는 반환 타입 통일하기
- 숨은 로직 드러내기

## 3. 응집도

**응집도**(Cohesion)란, 수정되어야 할 코드가 항상 같이 수정되는지를 말해요.
응집도가 높은 코드는 코드의 한 부분을 수정해도 의도치 않게 다른 부분에서 오류가 발생하지 않아요.

> 가독성과 응집도는 서로 상충할 수 있어요. 일반적으로 응집도를 높이기 위해서는 변수나 함수를 추상화하는 등 가독성을 떨어뜨리는 결정을 해야 해요. 함께 수정되지 않으면 오류가 발생할 수 있는 경우에는, 응집도를 우선해서 코드를 공통화, 추상화하세요. 위험성이 높지 않은 경우에는, 가독성을 우선하여 코드 중복을 허용하세요.

### 응집도를 높이는 전략

- 함께 수정되는 파일을 같은 디렉토리에 두기
- 매직 넘버 없애기
- 폼의 응집도 생각하기

## 4. 결합도

**결합도**(Coupling)란, 코드를 수정했을 때의 영향범위를 말해요.
코드를 수정했을 때 영향범위가 적어서, 변경에 따른 범위를 예측할 수 있는 코드가 수정하기 쉬운 코드예요.

### 결합도를 낮추는 전략

- 책임을 하나씩 관리하기
- 중복 코드 허용하기
- Props Drilling 지우기

## 코드 품질 여러 각도로 보기

아쉽게도 이 4가지 기준을 모두 한꺼번에 충족하기는 어려워요.

예를 들어서, 함수나 변수가 항상 같이 수정되기 위해서 공통화 및 추상화하면, 응집도가 높아지죠. 그렇지만 코드가 한 차례 추상화되기 때문에 가독성이 떨어져요.

중복 코드를 허용하면, 코드의 영향범위를 줄일 수 있어서, 결합도를 낮출 수 있어요. 그렇지만 한쪽을 수정했을 때 다른 한쪽을 실수로 수정하지 못할 수 있어서, 응집도가 떨어지죠.

프론트엔드 개발자는 현재 직면한 상황을 바탕으로, 깊이 있게 고민하면서, 장기적으로 코드가 수정하기 쉽게 하기 위해서 어떤 가치를 우선해야 하는지 고민해야 해요.