Web/Frontend

Clean Code

WakaraNai 2021. 7. 6. 01:20
728x90
반응형

클린 코드라는 것은 읽기 좋은 코드, 가독성 있는 코드를 말합니다.

사람마다 더 좋은 코드가 무엇인지는 조금씩 다를 수 있습니다.

클린코드 내용을 담고 있는 책이나 글을 많이 보면, 어떤 코드가 좋은지 점점 알 수가 있습니다.

더 좋은 방법은 많은 사람에게 코드리뷰를 받는 것입니다.

아래 몇몇 예시는 클린코드를 만드는 몇 가지 examples에 지나지 않습니다.

이를 참고로 클린코드가 어떤 것인지 알게 되길 바랍니다.

 

 

이름 (Conding Convention)

이름을 짓는 건 쉬운 일은 아니지만, 읽기 좋은 코드를 만드는데 필수 요소입니다.

이런 부분을 고려하세요.

  • 함수는 목적에 맞게 이름이 지어져 있는가?
  • 함수 안의 내용은 이름에 어울리게 하나의 로직을 담고 있는가?
  • 함수동사 + 명사이며 함수의 의도를 충분히 반영하고 있는가?
  • 함수는 카멜표기법 또는 _를 중간에 사용했는가?
  • 변수는 명사이며 의미 있는 이름을 지었는가?

 

의도가 드러난 구현 패턴

어떤 코드가 좋은지 고민이라면, 내 코드를 들여다보고 그 의도가 잘 보이는지 확인해봅니다.

예를 들어, var a = value * 19.2; 이라는 코드가 있다고 봅시다.

도대체 19.2가 무엇을 의미하는지? 알 수가 없습니다.

대신 변수로 저장하고, 변수에 적절한 이름을 쓰면 더 좋습니다.

 

 

 

빨리 반환해서 if문 중첩 없애기

//bad
function foo(pobi,crong) {
  if(pobi) { 
    if(crong) {
      return true;
    }
  }
}


//good
function foo(pobi,crong) {
  if(!pobi) return;
  if(crong) {
    return true;
  }
}

 

 

지역 변수여도 괜찮다면 전역공간에 두지 말기

함수 내에서만 사용이 필요로 한 것은 지역변수로 만들어야 합니다.

불필요한 전역변수는 최소화해야 코드가 많아지고 수정할 때 복잡함을 줄일 수 있습니다.

var a = 'hello';

function print() {
   return data;
}

function exec() {
   var data = "world";
   a = a + " ";
   print(a + data)
}

 

 

전역변수를 줄이자

자바스크립트에서 var키워드를 함수 안에서 사용하면, 그 변수는 함수안에서만 유용합니다.

이를 함수 scope라고 합니다.

하지만 함수 안에서 var 키워드를 사용하지 않으면 전역변수가 됩니다.

물론 함수 밖에서 var 키워드를 사용해서 변수를 선언해도 이건 전역변수입니다.

다양한 함수에서 같이 어떤 값을 공유하면서 사용해야 한다면 전역변수로 두고 쓸 수 있습니다.

이는 전역공간을 더럽히는 것으로 나중에 디버깅이 어려울 수 있습니다.

 

 

정적 분석 도구

eslint와 같은 도구는 코드를 읽어서 잠재적인 문제와 anit-pattern을 알려줍니다.

이는 개발도구에서도 plugin을 연동해서 활용할 수가 있습니다.

내 코드가 어떤 문제가 없는지 확인해보세요.

 

 

for while보다 forEach와 map, filter도 사용하기

728x90
반응형

'Web > Frontend' 카테고리의 다른 글

정규표현식 (regular expression)  (0) 2021.07.07
생성자 패턴으로 TabUI 만들기  (0) 2021.07.07
handlebar를 활용한 템플릿 작업  (0) 2021.07.06
jQuery 프레임워크에 대해  (0) 2021.07.01
[JS] 객체리터럴, this, bind()  (0) 2021.07.01