나에게 필요한 javscript clean code guide
클린 코드
클린 코드란, 코드를 작성할 때 가독성있고 재사용 가능하여 유지 보수성을 높히는 코드를 말합니다.
javascript로 개발할 때, 다음 규칙을 적용하여 클린코드로 리팩토링을 가능하게 합니다.
변수
의미있고 발음하기 쉬운 변수를 사용합니다.
// bad
const yyyymmdstr = new Date();
// good
const currentDate = new Date();동일한 유형의 변수에 동일한 어휘를 사용합니다.
- 사용자를
user라고 정했다면, 사용자를 의미할 때는user만 사용합니다. user,client,customer등 여러가지 사용하여 혼용되지 않게 합니다.
의도를 파악하기 쉽게 변수를 사용하세요
// good
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(address.match(cityZipCodeRegex)[1], address.match(cityZipCodeRegex)[2]);
// bad
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode);자신만 알아볼 수 있는 작명을 피하세요
암시적인 것보다 명시적인 것이 좋습니다.
// bad
products.map(p => p.id === 1)
// good
products.map(product => ... )함수
함수의 인자는 2개 이하가 이상적입니다.
매개변수의 개수를 제한 하는 것은 함수 테스팅을 쉽게합니다.
매개변수가 3개 이상이라면, 테스트하는 경우의 수가 많아집니다.
(3개 이상이라면, 대부분 함수가 너무 많은 역할을 하는 것입니다)
많은 역할을 하지 않는데 많은 인자를 사용해야 한다면, 객체를 이용할 수 있습니다.
// bad
function createMenu(title,body,buttonText,cancellable) {
//...
}
// good
function createMenu({title,body,buttonText,cacellable){
//...
}함수는 하나의 행동만 해야합니다.
js뿐 아니라 소프트웨어 엔지니어링에서 가장 중요한 규칙입니다.
함수가 1개 이상의 행동을 하면 작성,테스트,이해 모두 어려워집니다.
하나의 함수에 하나의 행동을 정의하는것이 중요하며, 이것을 잘 지키는 것을 우선 목표로 합니다.
적용
제품을 리스트로 보여주는 프로그램에서, 필터나 정렬을 바꿀 때, 이펙트를 이렇게 했었습니다.
useEffect(() => {
let filtedList = Array.from(base);
if (isOnlyInterest) {
filtedList = filtedList.filter(item => !uninterestStorage.includes(item));
}
if (showBrands.length) {
filtedList = filtedList.filter(v=>showBrands.includes(v.brand));
}
if (sortType === 'recent') {
filtedList = filtedList.sort(recentSort);
}
else if (sortType === 'price') {
filtedList = filtedList.sort(priceSort);
}
setList(filtedList);
}, [showBrands, sortType, isOnlyInterest])effect가 여러가지 일을 하고 있습니다.
한가지 일을 하는 함수들로 나누어, 역할을 명확히 해보았습니다.
useEffect(() => {
const isProductInterest = item => {
return !uninterestStorage.includes(item)
}
const isProductShowingBrand = item => {
return showBrands.includes(item.brand);
}
const filterList = baseList => {
let filtedList = Array.from(baseList);
if (isOnlyInterest) {
filtedList = filtedList.filter(isProductInterest);
}
if (showBrands.length) {
filtedList = filtedList.filter(isProductShowingBrand);
}
return filtedList;
}
const sortList = list => {
if (sortType === SORT_TYPE.RECENT) {
list.sort(recentSort);
}
else if (sortType === SORT_TYPE.PRICE) {
list.sort(priceSort);
}
}
const filtedList = filterList(base);
sortList(filtedList);
setList(filtedList);
}, [showBrands, sortType, isOnlyInterest])코드 자체는 길어졌지만, 이펙트가 리스트를 필터하고 정렬하여 세팅하는 역할이 명확히 보입니다.
클린코드는 짧은 코드가 아니라, 로직을 빠르게 이해할 수 있는 코드입니다.
함수는 단일 행동을 추상화 합니다
함수의 이름이 여러 의미를 내포한다면, 이 역시 함수가 너무 많은 역할을 하는 것 입니다.
함수를 나누어 재사용 가능하고 테스트하기 쉽게 만들어야 합니다.
매개변수를 플래그로 사용하지 마세요
boolean 값을 가지는 플래그를 매개 변수로 사용한다는 것은,
이미 그 함수가 하나 이상의 역할을 하고 있는 것입니다.
// bad
function createFile(name, temp) {
if (temp) {
fs.create(`./temp/${name}`);
} else {
fs.create(name);
}
}
// good
function createFile(name) {
fs.create(name);
}
function createTempFile(name) {
createFile(`./temp/${name}`);
}함수를 구분하여, 하나의 역할만 하도록 합니다.
주석
최대한 주석 없이 코드로 모든 설명이 가능한 것이 가장 좋습니다.
다음 가이드를 참고해도 좋습니다.
Airbnb javascript convention
결론
한 단계 성장하기 위해선 가독성과 유지보수성을 고려하는, 클린 코드가 중요합니다.
클린 코드로의 리팩토링을 task라고 생각하지 말고, 항상 지속적으로 개선합니다.
