[자바스크립트 패턴과 테스트] 1장 - 좋은 소프트웨어 만들기

일러두기

• 1990년 말 마이크로소프트가 iframe과 XMLHTTP를 발표, 구글 지메일과 구글 맵의 Ajax : 자바스크립트가 서버가 전달하는 데이터를 화면에 뿌려주는 것 이상으로 많은 것을 할 수 있음을 보여줌
• 자바스크립트는 너무 쉬운 나머지 너무 끔찍한 코드가 되기도 쉽다.
  • 일단, 컴파일러가 없다.
  • ==(강제변환 후 비교) vs ===(강제변환 없이 비교)
  • truthy/falsy 개념 (맞음직한/틀림직한)

      false == '0' // true (false는 0으로, '0'은 0으로 변환됨)
      false == 'false' // false (false는 0으로, 'false'는 NaN으로 변환됨)    
    

• 테스트 주도 개발(Test-Driven Development, TDD)을 실천하라 : 컴파일러가 없으니 에러를 예방하려면 테스트가 최선이다.

1장. 좋은 소프트웨어 만들기

1.1 바르게 시작하는 코드 작성하기

1.1.1 자바스크립트의 특성을 완전히 섭렵하라

• “테니스를 하듯 공을 치면 절대로 스쿼시를 잘할 수 없다.”
• 사례 연구 : D3.js

  // 배열 데이터를 SVG path로 변환하는 함수
  rj3.svg.line = function() {
    var getX = function(...) {
            //...
        },
        getY = function(...) {
            //...
        },
        interpolate = function(...) {
            //...
        };
      
    function line(...) {
        var segments = [], points, i, n, d;
          
        function segment() {
            // interpolate 함수 호출
            // segments 변수 조작
        }
          
        // getX, getY 함수 호출
        // segment 함수 호출
          
        return segments.length ? segments.join("") : null;
    }
      
    line.x = function(...) {
        // getX 함수 주입
    }
      
    line.y = function(...) {
        // getY 함수 주입
    }
      
    return line;
  }
  

  // 사용 예시
  var lineGenerator = rj3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; });
  var path = lineGenerator([{x:1, y:2}, {x:3, y:4}, {x:5, y:6}]);
  

• 자바스크립트 함수는 다른 함수 내부에 중첩될 수 있으며, 이는 스코프를 다스리는 중요한 수단이다.
• 자바스크립트 함수는 메서드/프로퍼티를 지닌 객체로, 다른 언어의 함수보다 훨씬 유연하다.
• 자바스크립트 함수는 first-class object 이다. 즉, 다른 함수의 인자로 전달할 수 있고, 다른 함수로부터 반환받을 수 있고, 함수 자체를 변수에 할당할 수 있다.
• this는 함수를 호출한 객체를 가리킨다 (그 함수를 감싸는 객체가 아님!)
• 자바스크립트는 싱글 스레드로 움직인다.
  • blocking 모델을 채용했다는 의미는 아님. 자바스크립트는 다른 식으로 비동기 프로그래밍을 해야한다는 뜻
  • 자바스크립트는 병렬 실행을 위해, 어떤 이벤트가 끝나자 마자 실행할 함수를 큐에 넣는 것이 고작이다.
  • 자바스크립트 엔진은 event loop에서 한 번에 하나씩 함수를 꺼내서 실행함
  • 설계 관점에서는 이러한 방식이 멀티 스레드 환경보다 생각하기 편하다. 제어권을 가진 상태에서 인터럽트 당하거나 다른 객체가 변수에 마음대로 접근할 일이 없기 때문

1.1.2 대규모 시스템에서 자바스크립트 함정을 피하라

• 스크립트는 모듈이 아니다 : 한 페이지에 스크립트가 하나만 있던 시절에는 전역 namespace에 함수를 추가해도 별 탈이 없었지만 요즘에는 어림도 없는 소리이다. 스크립트는 .js에 담겨있으니 어떤 경우라도 완전한 분리는 불가능하다.
• 스코프는 중첩된 함수로 다스린다 : 덕분에 개발자가 원하는 것을 찾는데 도움이 될 뿐만 아니라 변수/함수의 스코프를 최소화 할 수 있다. 이러한 특성이 대규모 시스템을 효과적으로 유지하는 핵심이다!!!
• 규약을 지켜 코딩한다 : 함수 인자에 특정한 조건이 있다면 꼭 검증해야한다.
  • 규약 레지스트리 : 함수에 따로 코딩을 안해도 인자 또는 반환값을 확인할 수 있게 해주는 장치

1.1.3 소프트웨어 공학 원칙을 적용하라

• 실수 없이 완벽하게 연주하려면 느리게 연주하는 것이 가장 빠른 길이다.
• SOLID 원칙
  • Single Responsibility Principle (단일 책임 원칙) : 모든 클래스(자바스크립트 함수)는 하나의 책임만을 갖는다. 한 책임의 변경이 다른 책임의 변경으로 연쇄 작용이 발생하는 일에서 자유로워질 수 있다.
  • Open/Closed Principle(개방/폐쇄 원칙) : 확장 가능성은 열어두고 수정 가능성은 닫아야 함. 실행 코드를 변경하지 않고 재사용하고 확장 가능하게 설계해야 함
  • Liskov Substitution Principle(리스코프 치환 원칙) : 한 객체에서 파생된 다른 객체를 사용하더라도 기존 로직이 변경되어서는 안 된다.
  • Interface Segregation Principle(인터페이스 분리 원칙) : TBD
  • Dependency Inversion Principle(의존성 역전 원칙) : TBD
• DRY 원칙 : 반복하지 마라! (Do not repeat yourself) 모든 지식 조각은 딱 한 번만 나와야 한다.

1.2 바르게 유지되는 코드 작성하기

1.2.1 단위 테스트는 미래에 대비한 투자다

• 단위테스트는 시간이 흐르면서 아무리 큰 변화의 소용돌이에 빠져도 완벽한 프로그램을 만들 수 있게 해준다.
• 단위 테스트 본체에 작성한 코드는 준비 -> 실행 -> 단언 패턴을 따른다.
• 전체 단위 테스트 꾸러미를 작성하는데 든 시간과 노력은 앞으로 프로그램이 직면할 갖가지 변화에 대처하기 위한 보험이자, 안정적인 애플리케이션 유지에 꼭 필요한 최선의 투자라고 할 수 있다.

1.2.2 테스트 주도 개발을 실천하라

• TDD는 처음부터 프로그램을 제대로 작성했는지 확실히 보장한다.
• TDD에서는 애플리케이션 코드를 짜기 ‘전에’ 코드가 통과해 할 단위 테스트를 ‘먼저’ 작성한다.
• 애플리케이션을 바르게 개발하려는 의지가 있다면 테스트를 건너뛰고 싶은 욕망을 극복해야한다.

1.2.3 테스트하기 쉬운 코드로 다듬어라

• 테스트하기 쉬운 코드를 작성하려면 가장 중요한 단계는 관심사를 적절히 분리하는 일이다.

Comment

• D3.js의 예시를 통해서 다른 컴파일 언어와 구별된 자바스크립트의 특징을 옅볼 수 있었다. 중첩 함수를 이용한 스코핑, 클로저, 함수가 프로퍼티를 갖는 모습 등이 그것이다.
• 자바스크립트는 너무나 자유도가 높은 까닭에 오류가 발생할 여지도 많은 것 같다. 그래서 저자도 TDD를 무척 강조하고 있다.