<div id="readability-page-1" class="page"><div>
												
<p>Vue.js는 입문하기 쉽지만, 프로젝트 규모가 커질수록 코드가 스파게티처럼 꼬이기 쉽습니다. 동료 개발자(그리고 미래의 나)에게 사랑받는 코드를 작성하기 위한 10가지 원칙을 소개합니다.</p>
<h2>1. 컴포넌트 이름은 항상 ‘두 단어’ 이상으로 (Multi-word component names)</h2>
<p>단일 단어(예: <code>Item.vue</code>)는 HTML 표준 태그와 충돌할 위험이 있습니다. 반드시 <code>TodoItem.vue</code>나 <code>UserCard.vue</code>처럼 두 단어 이상을 조합하세요.</p>
<ul>
<li><strong>Bad:</strong> <code>Item.vue</code>, <code>List.vue</code></li>
<li><strong>Good:</strong> <code>AppHeader.vue</code>, <code>TodoList.vue</code></li>
</ul>
<h2>2. Props 정의는 상세하게 (Detailed Prop Definitions)</h2>
<p>Props를 배열로 대충 선언하지 마세요. 타입(Type), 필수 여부(Required), 기본값(Default)을 명시하면 그 자체로 훌륭한 문서가 됩니다.</p>
<pre><code>// Good
props: {
  userId: {
    type: Number,
    required: true
  },
  status: {
    type: String,
    default: 'active'
  }
}
</code></pre>
<h2>3. v-for와 v-if를 같은 요소에 쓰지 마세요</h2>
<p>두 디렉티브를 동시에 쓰면 Vue는 전체 리스트를 반복할 때마다 조건을 체크합니다. 성능에 악영향을 줄 뿐만 아니라 로직도 불투명해집니다.</p>
<ul>
<li><strong>Solution:</strong> <code>computed</code> 속성을 이용해 필터링된 리스트를 먼저 만든 뒤 <code>v-for</code>를 돌리세요.</li>
</ul>
<h2>4. 컴포넌트 데이터는 함수여야 합니다 (Data as a Function)</h2>
<p>컴포넌트의 <code>data</code>가 객체 형태면 모든 인스턴스가 같은 데이터를 공유하게 됩니다. 반드시 함수가 객체를 반환하는 형태여야 각 컴포넌트가 독립적인 상태를 유지합니다.</p>
<h2>5. Computed 속성을 적극 활용하세요</h2>
<p>템플릿(<code>template</code>) 안에 복잡한 연산 로직을 넣지 마세요. 템플릿은 <strong>데이터가 어떻게 보여지는가</strong>에만 집중해야 합니다. 계산 로직은 <code>computed</code>로 분리해 가독성과 캐싱 이점을 챙기세요.</p>
<h2>6. 단방향 데이터 흐름 준수 (Props Down, Events Up)</h2>
<p>자식 컴포넌트에서 부모에게 받은 <code>prop</code>을 직접 수정하는 것은 금기입니다. 데이터는 위에서 아래로 흐르고, 변경 사항은 이벤트를 통해 부모에게 알려야(Emit) 데이터 추적이 쉬워집니다.</p>
<h2>7. 스타일 가이드의 ‘우선순위 A’를 따르세요</h2>
<p>Vue 공식 문서에는 <a href="https://v2.vuejs.org/v2/style-guide/">스타일 가이드</a>가 있습니다. 특히 컴포넌트 파일 이름 지정 방식(PascalCase)과 디렉티브 약어(<code>:</code> , <code>@</code>) 사용 통일은 팀 협업의 기본입니다.</p>
<h2>8. 스코프 스타일 사용 (Scoped Styles)</h2>
<p>컴포넌트 내의 CSS가 전역 스타일을 오염시키지 않도록 <code>&lt;style scoped&gt;</code>를 사용하세요. 의도치 않은 UI 버그를 방지하는 가장 확실한 방법입니다.</p>
<h2>9. 대규모 프로젝트라면 Composition API 활용</h2>
<p>Vue 3를 사용 중이라면 기능별로 로직을 묶을 수 있는 <strong>Composition API</strong>를 활용해 보세요. <code>data</code>, <code>methods</code>로 나뉘어 있던 관련 로직을 하나의 함수(Composables)로 추출하여 재사용할 수 있습니다.</p>
<h2>10. 마법의 숫자와 문자열 제거 (Constants)</h2>
<p>상태 값이나 고정된 옵션값들은 컴포넌트 내부에 하드코딩하지 말고 별도의 <code>constants.js</code> 파일로 관리하세요. 오타를 방지하고 유지보수 지점을 하나로 모아줍니다.</p>
<p><span></span> <span>Post Views:</span> <span>13</span>
			</p>											</div></div>

상구리의 기술 블로그

Vue.js 클린 코드 작성 가이드
Vue.js는 입문하기 쉽지만, 프로젝트 규모가 커질수록 코드가 스파게티처럼 꼬이기 쉽습니다. 동료 개발자(그리고 미래의 나)에게 사랑받는 코드를 작성하기 위한 10가지 원칙을 소개합니다.
1. 컴포넌트 이름은 항상 ‘두 단어’ 이상으로 (Multi-word component names)
단일 단어(예: Item.vue)는 HTML 표준 태그와 충돌할 위험이 있습니다. 반드시 TodoItem.vue나 UserCard.vue처럼 두 단어 이상을 조합하세요.
Bad: Item.vue, List.vue
Good: AppHeader.vue, TodoList.vue
2. Props 정의는 상세하게 (Detailed Prop Definitions)
Props를 배열로 대충 선언하지 마세요. 타입(Type), 필수 여부(Required), 기본값(Default)을 명시하면 그 자체로 훌륭한 문서가 됩니다.
// Good
props: {
  userId: {
    type: Number,
    required: true
  },
  status: {
    type: String,
    default: 'active'
  }
}
3. v-for와 v-if를 같은 요소에 쓰지 마세요
두 디렉티브를 동시에 쓰면 Vue는 전체 리스트를 반복할 때마다 조건을 체크합니다. 성능에 악영향을 줄 뿐만 아니라 로직도 불투명해집니다.
Solution: computed 속성을 이용해 필터링된 리스트를 먼저 만든 뒤 v-for를 돌리세요.
4. 컴포넌트 데이터는 함수여야 합니다 (Data as a Function)
컴포넌트의 data가 객체 형태면 모든 인스턴스가 같은 데이터를 공유하게 됩니다. 반드시 함수가 객체를 반환하는 형태여야 각 컴포넌트가 독립적인 상태를 유지합니다.
5. Computed 속성을 적극 활용하세요
템플릿(template) 안에 복잡한 연산 로직을 넣지 마세요. 템플릿은 데이터가 어떻게 보여지는가에만 집중해야 합니다. 계산 로직은 computed로 분리해 가독성과 캐싱 이점을 챙기세요.
6. 단방향 데이터 흐름 준수 (Props Down, Events Up)
자식 컴포넌트에서 부모에게 받은 prop을 직접 수정하는 것은 금기입니다. 데이터는 위에서 아래로 흐르고, 변경 사항은 이벤트를 통해 부모에게 알려야(Emit) 데이터 추적이 쉬워집니다.
7. 스타일 가이드의 ‘우선순위 A’를 따르세요
Vue 공식 문서에는 스타일 가이드가 있습니다. 특히 컴포넌트 파일 이름 지정 방식(PascalCase)과 디렉티브 약어(: , @) 사용 통일은 팀 협업의 기본입니다.
8. 스코프 스타일 사용 (Scoped Styles)
컴포넌트 내의 CSS가 전역 스타일을 오염시키지 않도록 <style scoped>를 사용하세요. 의도치 않은 UI 버그를 방지하는 가장 확실한 방법입니다.
9. 대규모 프로젝트라면 Composition API 활용
Vue 3를 사용 중이라면 기능별로 로직을 묶을 수 있는 Composition API를 활용해 보세요. data, methods로 나뉘어 있던 관련 로직을 하나의 함수(Composables)로 추출하여 재사용할 수 있습니다.
10. 마법의 숫자와 문자열 제거 (Constants)
상태 값이나 고정된 옵션값들은 컴포넌트 내부에 하드코딩하지 말고 별도의 constants.js 파일로 관리하세요. 오타를 방지하고 유지보수 지점을 하나로 모아줍니다.

Vue.js 클린 코드 작성 가이드

댓글