더 깔끔하고 효율적인 코드를 위한 필수 JavaScript 리팩토링 기술
- Linda Hamilton원래의
- 2024-12-26 03:40:09404검색
베스트셀러 작가로서 Amazon에서 내 책을 탐색해 보시기 바랍니다. Medium에서 저를 팔로우하고 지지를 표시하는 것을 잊지 마세요. 감사합니다! 당신의 지원은 세상을 의미합니다!
JavaScript 리팩토링은 코드 품질과 유지 관리성을 향상시키려는 개발자에게 중요한 기술입니다. 수년간 수많은 프로젝트를 진행하면서 이러한 기술을 지속적으로 구현하면 더욱 강력하고 효율적인 코드베이스가 생성된다는 사실을 알게 되었습니다.
코드 냄새 감지는 리팩토링 프로세스의 첫 번째 단계인 경우가 많습니다. 저는 ESLint 및 SonarQube와 같은 도구를 사용하여 코드의 잠재적인 문제를 식별합니다. 이러한 도구는 사용되지 않는 변수, 복잡한 함수, 일관되지 않은 스타일과 같은 문제를 찾아내는 데 도움이 됩니다. 다음은 내 프로젝트에서 ESLint를 설정하는 방법의 예입니다.
// .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: ['eslint:recommended', 'plugin:react/recommended'],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: ['react'],
rules: {
// Custom rules
'no-unused-vars': 'error',
'max-len': ['error', { code: 100 }],
'complexity': ['error', 10],
},
};
잠재적인 문제를 식별한 후에는 특정 리팩토링 기술로 넘어갑니다. 추출 방법은 제가 사용하는 가장 일반적이고 효과적인 기술 중 하나입니다. 크고 복잡한 기능을 더 작고 집중된 기능으로 나누는 작업이 포함됩니다. 이를 통해 가독성이 향상될 뿐만 아니라 코드의 재사용성과 테스트가 더욱 쉬워집니다.
장바구니에 있는 항목의 총 가격을 계산하는 함수의 예를 살펴보세요.
function calculateTotalPrice(items) {
let total = 0;
for (let item of items) {
let price = item.price;
if (item.onSale) {
price *= 0.9;
}
if (item.quantity > 5) {
price *= 0.95;
}
total += price * item.quantity;
}
return total;
}
추출 방법 기술을 사용하여 이를 리팩토링할 수 있습니다.
function calculateTotalPrice(items) {
return items.reduce((total, item) => total + calculateItemPrice(item), 0);
}
function calculateItemPrice(item) {
let price = applyDiscounts(item.price, item);
return price * item.quantity;
}
function applyDiscounts(price, item) {
if (item.onSale) price *= 0.9;
if (item.quantity > 5) price *= 0.95;
return price;
}
이 리팩터링 버전은 읽기가 더 쉽고 개별 구성 요소를 더 쉽게 테스트할 수 있습니다.
제가 자주 사용하는 또 다른 강력한 기술은 조건부를 다형성으로 대체하는 것입니다. 이 접근 방식은 객체 유형에 따라 달라지는 복잡한 조건부 논리를 처리할 때 특히 유용합니다. if-else 문이나 스위치 케이스를 사용하는 대신 객체 지향 원칙을 사용하여 보다 유연하고 확장 가능한 솔루션을 만들 수 있습니다.
다음은 제품 유형에 따라 배송비를 계산하는 함수를 리팩토링하는 방법의 예입니다.
// Before refactoring
function calculateShippingCost(product) {
if (product.type === 'book') {
return product.weight * 0.5;
} else if (product.type === 'electronics') {
return product.weight * 0.8 + 2;
} else if (product.type === 'clothing') {
return product.weight * 0.3;
}
return product.weight * 0.6; // Default shipping cost
}
// After refactoring
class Product {
constructor(weight) {
this.weight = weight;
}
calculateShippingCost() {
return this.weight * 0.6;
}
}
class Book extends Product {
calculateShippingCost() {
return this.weight * 0.5;
}
}
class Electronics extends Product {
calculateShippingCost() {
return this.weight * 0.8 + 2;
}
}
class Clothing extends Product {
calculateShippingCost() {
return this.weight * 0.3;
}
}
// Usage
const book = new Book(2);
console.log(book.calculateShippingCost()); // 1
const electronics = new Electronics(3);
console.log(electronics.calculateShippingCost()); // 4.4
이 다형성 접근 방식을 사용하면 개방형/폐쇄형 원칙을 준수하면서 기존 코드를 수정하지 않고도 새로운 제품 유형을 더 쉽게 추가할 수 있습니다.
Introduce Parameter Object 기술은 많은 매개변수를 사용하는 함수를 처리할 때 특히 유용합니다. 관련 매개변수를 단일 객체로 그룹화함으로써 함수 시그니처를 단순화하고 코드를 보다 쉽게 유지 관리할 수 있습니다.
다음은 사용자 계정을 생성하는 함수를 리팩토링하는 방법의 예입니다.
// Before refactoring
function createUser(firstName, lastName, email, password, birthDate, country, city, zipCode) {
// User creation logic
}
// After refactoring
function createUser(userDetails, address) {
// User creation logic
}
// Usage
createUser(
{ firstName: 'John', lastName: 'Doe', email: 'john@example.com', password: 'securepass', birthDate: '1990-01-01' },
{ country: 'USA', city: 'New York', zipCode: '10001' }
);
이 리팩터링 버전은 함수 서명을 변경하지 않고도 필드를 추가하거나 제거하기가 더 쉽기 때문에 읽기 쉬울 뿐만 아니라 유연성도 더 높습니다.
중복 코드를 제거하는 것은 제가 항상 염두에 두는 리팩토링의 중요한 측면입니다. 코드가 중복되면 불일치가 발생하고 유지 관리가 더 어려워질 수 있습니다. 공통 기능을 공유 기능이나 모듈로 추출하는 경우가 많습니다.
다음은 React 구성 요소에서 중복된 코드를 리팩터링하는 방법에 대한 예입니다.
// .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: ['eslint:recommended', 'plugin:react/recommended'],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: ['react'],
rules: {
// Custom rules
'no-unused-vars': 'error',
'max-len': ['error', { code: 100 }],
'complexity': ['error', 10],
},
};
이 리팩토링은 중복을 제거하고 코드를 더욱 유지 관리하기 쉽고 일관되게 만듭니다.
변수와 함수 이름 바꾸기는 제가 자주 사용하는 간단하면서도 강력한 기술입니다. 명확하고 설명이 포함된 이름은 코드 이해력을 크게 향상시키고 자체 문서화의 역할을 할 수 있습니다. 나는 항상 변수나 함수의 목적이나 동작을 정확하게 설명하는 이름을 사용하려고 노력합니다.
예를 들어,
function calculateTotalPrice(items) {
let total = 0;
for (let item of items) {
let price = item.price;
if (item.onSale) {
price *= 0.9;
}
if (item.quantity > 5) {
price *= 0.95;
}
total += price * item.quantity;
}
return total;
}
다음으로 리팩토링하겠습니다.
function calculateTotalPrice(items) {
return items.reduce((total, item) => total + calculateItemPrice(item), 0);
}
function calculateItemPrice(item) {
let price = applyDiscounts(item.price, item);
return price * item.quantity;
}
function applyDiscounts(price, item) {
if (item.onSale) price *= 0.9;
if (item.quantity > 5) price *= 0.95;
return price;
}
이 간단한 변경으로 추가 설명 없이도 함수의 목적이 즉시 명확해집니다.
마지막으로 복잡한 표현식 단순화는 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만들기 위해 사용하는 기술입니다. 중간 변수나 함수를 사용하여 복잡한 논리식을 더 작고 관리하기 쉬운 부분으로 나누면 코드 명확성이 크게 향상될 수 있습니다.
복잡한 조건을 리팩토링하는 방법의 예는 다음과 같습니다.
// Before refactoring
function calculateShippingCost(product) {
if (product.type === 'book') {
return product.weight * 0.5;
} else if (product.type === 'electronics') {
return product.weight * 0.8 + 2;
} else if (product.type === 'clothing') {
return product.weight * 0.3;
}
return product.weight * 0.6; // Default shipping cost
}
// After refactoring
class Product {
constructor(weight) {
this.weight = weight;
}
calculateShippingCost() {
return this.weight * 0.6;
}
}
class Book extends Product {
calculateShippingCost() {
return this.weight * 0.5;
}
}
class Electronics extends Product {
calculateShippingCost() {
return this.weight * 0.8 + 2;
}
}
class Clothing extends Product {
calculateShippingCost() {
return this.weight * 0.3;
}
}
// Usage
const book = new Book(2);
console.log(book.calculateShippingCost()); // 1
const electronics = new Electronics(3);
console.log(electronics.calculateShippingCost()); // 4.4
이 리팩터링 버전은 읽고 이해하기가 훨씬 쉬우며 각 조건을 독립적으로 테스트할 수 있습니다.
내 경험상 이러한 리팩토링 기술을 지속적으로 적용하면 코드 품질이 크게 향상됩니다. 이를 통해 이해, 유지 관리 및 확장이 더 쉬운 코드가 생성됩니다. 그러나 리팩토링은 지속적인 프로세스라는 점을 기억하는 것이 중요합니다. 요구 사항이 변경되고 새로운 기능이 추가됨에 따라 코드를 깔끔하고 효율적으로 유지하기 위해 지속적으로 검토하고 리팩터링해야 합니다.
정기적인 리팩토링을 통해 제가 찾은 주요 이점 중 하나는 새 기능을 추가하거나 버그를 수정하는 것이 훨씬 쉬워진다는 것입니다. 코드가 구조화되어 있고 이해하기 쉬우면 새로운 버그가 발생하지 않고도 변경해야 할 부분을 찾아 수정하는 것이 훨씬 더 빠릅니다.
또한 리팩토링을 통해 성능이 향상되는 경우가 많습니다. 복잡한 논리를 단순화하고 중복성을 제거함으로써 코드 실행 속도를 높이고 리소스 사용량을 줄일 수 있습니다. 이는 특히 브라우저 환경에서 성능이 사용자 경험에 큰 영향을 미칠 수 있는 JavaScript에서 특히 중요합니다.
제가 특히 가치 있다고 생각하는 리팩토링의 또 다른 측면은 팀 내에서 지식 공유를 촉진하는 방법입니다. 코드가 깔끔하고 체계적으로 구성되어 있으면 다른 개발자가 이해하고 작업하기가 더 쉽습니다. 이를 통해 협업이 향상되고 새로운 팀 구성원을 온보딩하는 데 필요한 시간이 크게 단축될 수 있습니다.
이러한 기술은 강력하지만 신중하게 적용해야 한다는 점도 주목할 가치가 있습니다. 과도한 엔지니어링은 과소 엔지니어링만큼이나 문제가 될 수 있습니다. 목표는 올바른 균형을 찾는 것입니다. 즉, 코드를 최대한 단순하고 명확하게 만드는 것입니다.
결론적으로 이러한 JavaScript 리팩토링 기술을 익히는 것은 개발자로서의 내 경력에 매우 중요했습니다. 그들은 더 나은 코드를 작성하고, 더 효율적으로 작업하고, 팀과 더 효과적으로 협업하는 데 도움이 되었습니다. 때로는 마감일을 맞추기 위해 개발을 서두르고 싶은 유혹을 느낄 수도 있지만, 정기적으로 리팩토링하는 데 시간을 투자하는 것이 장기적으로 성과를 거두는 것으로 나타났습니다. 이는 프로젝트가 성장함에 따라 변화하는 요구 사항과 규모에 적응할 수 있는 더욱 강력하고 유지 관리 가능한 코드베이스로 이어집니다. 우리가 JavaScript로 가능한 것의 한계를 계속 확장함에 따라 이러한 리팩토링 기술은 모든 개발자 툴킷의 필수 도구로 남을 것입니다.
101권
101 Books는 작가 Aarav Joshi가 공동 창립한 AI 기반 출판사입니다. 고급 AI 기술을 활용하여 출판 비용을 믿을 수 없을 정도로 낮게 유지합니다. 일부 도서의 가격은 $4만큼 저렴하여 모든 사람이 양질의 지식에 접근할 수 있습니다.
아마존에서 구할 수 있는 Golang Clean Code 책을 확인해 보세요.
업데이트와 흥미로운 소식을 계속 지켜봐 주시기 바랍니다. 책을 쇼핑할 때 Aarav Joshi를 검색해 더 많은 책을 찾아보세요. 제공된 링크를 이용하여 특별할인을 즐겨보세요!
우리의 창조물
저희 창작물을 꼭 확인해 보세요.
인베스터 센트럴 | 투자자 중앙 스페인어 | 중앙 독일 투자자 | 스마트리빙 | 시대와 메아리 | 수수께끼의 미스터리 | 힌두트바 | 엘리트 개발자 | JS 학교
우리는 중간에 있습니다
테크 코알라 인사이트 | Epochs & Echoes World | 투자자중앙매체 | 수수께끼 미스터리 매체 | 과학과 신기원 매체 | 현대 힌두트바
위 내용은 더 깔끔하고 효율적인 코드를 위한 필수 JavaScript 리팩토링 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!