2. 라이브러리 활용과 클린코드 (3)

프로그래밍 코드는 컴퓨터가 올바르게 해석할 수 있도록 구현해야 합니다.

그런데 결국 코드는 사람들이 같이 수정하고 공유하는 것이기 때문입니다.

궁극적으로는 사람이 이해할 수 있는 코드를 구현하는 것이 중요합니다.

클린코드

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

이름 (코딩컨벤션)

• 이름을 짓는 건 쉬운 일은 아니지만, 읽기 좋은 코드를 만드는데 필수 요소입니다.
  이런 부분을 고려하세요.
  1. 함수는 목적에 맞게 이름이 지어져 있는가?
  2. 함수 안의 내용은 이름에 어울리게 하나의 로직을 담고 있는가?
  3. 함수는 동사 + 명사이며 함수의 의도를 충분히 반영하고 있는가?
  4. 함수는 카멜표기법 또는 _를 중간에 사용했는가?
  5. 변수는 명사이며 의미 있는 이름을 지었는가?
• 행위를 나타내는 것은 함수에만 쓰는 편이 좋습니다.

의도가 드러난 구현패턴

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

var paddingValue = 19.2; var a = value * paddingValue;

 

지역변수로 넣으면 되는 것을 전역공간에 두지 말기

• 함수 내에서만 사용이 필요로 한 것은 지역변수로 만들어야 합니다.
• 불필요한 전역변수는 최소화해야 코드가 많아지고 수정할 때 복잡함을 줄일 수 있습니다.
  쓸데없이 전역변수로 두지 말고 지역변수를 매개변수로 사용합니다.

var a = 'hello';   // 불필요한 전역변수 function print() {    return data; } function exec() {    var data = "world";    a = a + " ";    print(a + data) }

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

 

var a = 10;  //불필요한 전역변수 function testA(){ a=a+2; } function testB(){ console.log(a); } testA(); testB();  //12

function testA(){ var a = 10; a=a+2; testB(a); } function testB(value){ console.log(value); } testA();  //12

 

빨리 반환해서 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 키워드를 사용해서 변수를 선언해도 이건 전역변수입니다.
• 다양한 함수에서 같이 어떤 값을 공유하면서 사용해야 한다면 전역변수로 두고 쓸 수 있습니다.
• 이는 전역공간을 더럽히는 것으로 나중에 디버깅이 어려울 수 있습니다.
• 전역변수를 없앨 수 있는 즉시실행함수라는 것이 어떤 것인지 같이 알아보세요.

cf) 즉시실행함수

• 즉시 실행 함수는 한 번의 실행만 필요로 하는 초기화 코드 부분에 많이 사용됩니다.
• 그렇다면 왜 초기화 코드 부분에 많이 사용 할까요? 변수를 전역(global scope)으로 선언하는 것을 피하기 위해서 입니다. 전역에 변수를 추가하지 않아도 되기 때문에 코드 충돌 없이 구현 할 수 있어, 플러그인이나 라이브러리 등을 만들 때 많이 사용됩니다.

즉시 실행 함수의 기본형	기명 즉시 실행 함수	익명 즉시 실행 함수	변수에 즉시 실행 함수 저장
(function () {     // statements })()	(function square(x) {     console.log(x*x); })(2);   (function square(x) {     console.log(x*x); }(2));	(function (x) {     console.log(x*x); })(2);   (function (x) {     console.log(x*x); }(2));	(mySquare =function (x) {     console.log(x*x); })(2); mySquare(3);

출처: http://beomy.tistory.com/9 [beomy]

정적 분석 도구

• eslint와 같은 도구는 코드를 읽어서 잠재적인 문제와 anit-pattern을 알려줍니다.
• 이는 개발도구에서도 plugin을 연동해서 활용할 수가 있습니다.
• 내 코드가 어떤 문제가 없는지 확인해보세요.

생각해보기

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

참고자료

[참고도서] Clean Code
http://book.naver.com/bookdb/book_detail.nhn?bid=7390287

[참고도서] 읽기 좋은 코드가 좋은 코드다
http://book.naver.com/bookdb/book_detail.nhn?bid=6871807

[참고링크] airbnb/javascript
https://github.com/airbnb/javascript

airbnb에서 좋은 자바스크립트 컨벤션을 공유했습니다.

[참고링크] eslint                      https://eslint.org/