clean code에 대해 간단히 적용가능한 것들에 대해서 알아보도록 하겠습니다.
검색이 가능한 이름을 씁니다.
랜덤하게 값을 추가하거나 고정된 값을 사용하는 경우에는 변수로 선언하여 다른 사람들도 알아보기 쉽게 합니다.
handleKeydown(e) {
// enter 를 누른 경우
if (e.keycode === 13) {
}
}다른 사람이 13이라는 숫자를 보면 무엇을 의미하는지 명확히 알 수 없습니다.
아래 코드와 같이 변수 이름에 해당 값이 어떤 것을 의미하는지 지정을 해주면 쉽게 코드를 확인할 수 있습니다.
const ENTER = 13;
handleKeydown(e) {
// enter 를 누른 경우
if (e.keycode === ENTER) {
}
}함수명은 반드시 동사로 사용한다.
동사가 아닌 이름으로 사용을 할 경우 function 내에 여러가지 기능들을 작성하는 실수를 하기 쉽습니다.
실무를 하면서도 하나의 function 에 여러가지 기능들을 담지 않기 위해 노력하는 편인인데 생각보다 어렵습니다.
함수명을 동사로 지으면 생각보다 함수의 기능이 명확해져 개발하는데 큰 도움이 될 것 같습니다.
// user 정보를 가지고 어떤 작업을 하는지 알기 어려움
function userData() {
}
// userData 를 가져오는 함수라는 것을 확인할 수 있음
function getUserData() {
}arguments의 갯수는 3개 이하로 정한다.
arguments가 3개 이상이 되거나 하면 코드의 가독성이 떨어집니다. 만약 여러개의 arguments를 사용할 때에는 Object 형태로 작업합니다.
function handleData({prodNo, ProdNm, id, channelId}) {
}또한 arguments에 boolean값을 넘겨 분기를 태워서 작업을 하는 경우 arguments에 boolean값을 넘기지 않고 함수를 분할합니다.
function sendMessage(isFirst) {
if(isFirst) {
} else {
}
}
sendMessage(true);
sendMessage(false);
if/else 문을 함수안에서 사용하지 않고 if/else를 다른 함수로 분리합니다. 앞에서도 언급한것과 마찬가지로 함수는 한가지 기능을 해야하기 때문입니다.
function initMessage(){
}
function severalMessage() {
}
짧은 변수명이나 축약을 지양합니다.
과거에 제가 많이 저질렀던 실수였습니다.
이전 회사에서는 코드리뷰를 크게 하지 않아 기능개발에만 몰두하며 변수 축약을 많이 했습니다. (반성..ㅎ)
// v가 어떤값을 나타내는지 명확히 알 수 없음
items.map((v,i) => v);
items.map((item,i) => item);
클린 코드에 대해 알아봤지만 실제로 개발을 할때에는 기능구현이 우선입니다. 그러므로 기능 구현까지는 클린 코드를 꼭 작성해야한다라는 마음가짐보다는 기능 구현 후 코드를 수정하는 시간을 통해서 클린코드를 작성하기 위해 노력하는 것이 좋다고 합니다.
실제로 개발을 할때도 먼저 기능구현부터 하고서 코드점검시간을 가지며 작업하고 있습니다.
