클린코드 - accidentlywoo/legacyVue GitHub Wiki

클린코드

  • 들어가기 전에 프로그래밍 코드는 컴퓨터가 올바르게 해석할 수 있도록 구현해야 합니다. 그런데 결국 코드는 사람들이 같이 수정하고 공유하는 것이기 때문입니다. 궁극적으로 사람이 이해할 수 있는 코드를 구현하는 것이 중요합니다.

학습 목표

  1. 가족성이 좋은 코드가 무엇인지 알아봅니다.

핵심 개념

  • 클린 코드

학습하기

클린코드

클린 코드라는 것은 읽기 좋은 코드, 가독성 있는 코드를 말합니다. 사람마다 더 좋은 코드가 무엇인지는 조금씩 다를 수 있습니다. 클린코드 내용을 담고 있는 책이나 글을 많이 보면, 어떤 코드가 좋은지 점점 알 수가 있습니다. 더 좋은 방법은 많은 사람에게 코드리뷰를 받는 것입니다. 아래 몇몇 예시는 클린코드를 만드는 몇 갖 examples에 지나지 않습니다. 이를 참고로 클린코드가 어떤 것인지 알게 되길 바랍니다.

이름(코딩컨벤션)

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

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

의도가 드러난 구현패턴

어떤 코드가 좋은지 고민이라면, 내 코드를 들여다보고 그 의도가 잘 보이는지 확인해봅니다. 예를 들어, var a = value*19.2;이라는 코드가 있다고 봅시다. 도대체 19.2가 무엇을 의미하는지? 알 수가 없습니다. 대신 변수로 저장하고, 변수에 적절한 이름을 쓰면 더 좋습니다.

지역변수로 넣으면 될 걸 전역공간에 두지 말기

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

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

function print() { return data; }

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

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

아래 코드는 중복된 if문을 어떻게 개선할 수 있나요? function foo(pobi,crong) { if(pobi) { if(crong) { return true; } } } if문을 아래처럼 한다면 쉽게 중첩된 코드를 없앨 수 있습니다.

return문을 잘 쓰세요. function foo(pobi,crong) { if(!pobi) return; if(crong) { return true; } }

전역변수를 줄이자

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

이를 함수 scope라고 합니다.

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

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

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

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

정적 분석 도구

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

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

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

생각해보기

  1. 클린코드라는 것이 무엇인지, 주변에 개발자들과 같이 찾아보고, 토론해보면 매우 좋습니다.
  2. 개발자들 간에도 생각하는 부분이 꽤 다르기 때문입니다.
  3. 그런 논의 과정에서 더 많은 걸 느끼게 됩니다.