제이콥 닐슨의 웹 사이트인 “useit.com”은 웹 사이트의 반응 시간을 다음과 같이 평가한다.

• 0.1초: 사용자의 동작에 해당 기능이 바로 반응한다고 느끼는 시간
• 1초: 불필요하게 오래 기다리지 않았다고 느끼는 시간. 0.2~1초의 시간은 컴퓨터가 동작하는 시간으로 이해할 수 있는 시간이다. 시간이 1초 이상 걸리면 컴퓨터의 동작에 이상이 생겼다고 생각하게 된다.
• 10초: 사용자가 집중력을 잃지 않는 최대 시간

이 평가에 따르면 웹 페이지의 반응 시간이 1초 이내여야 사용자 경험에 긍정적인 영향을 미친다. 웹 사이트의 기능이 점점 복잡해지고 많아지면서 느린 반응 속도 때문에 이용 중인 서비스를 떠나 다른 유사한 서비스를 이용하게 만드는 사이트가 있는 반면, 빠른 반응 속도로 웹 사이트를 탐색하는데 큰 불편함이 없는 서비스를 제공하는 사이트도 있다.

재스민 들어가기

재스민은 행위 주도 개발 (Behavior-Driven Development, BDD) 방식으로 자바스크립트 단위 테스트를 작성하기 위한 라이브러리다.

BDD와 TDD는 상호 배타 관계가 아니다. BDD는 단위 테스트로 확인할 기능 또는 작동 로직을 일상 언어로 서술하는데, 이로써 개발자는 자신이 작성 중인 코드가 어떻게가 아니라 무엇을 해야하는지 테스트 코드에 표현할 수 있다. 그리고 행위 주도 스타일로 정의/구성한 테스트는 쉬운 문장으로 서술한 기능 명세서로 삼을 만하다는 이점도 있다.

테스팅 프레임워크

한 여행사의 차세대 예약 시스템 구축 프로젝트에 참여하여 항공 예약 데이터 생성 모듈을 맡게 되었는데, 그중에는 작동 명세가 다음과 같은 모듈 함수가 있었다.
‘승객(passenger) 객체, 항공편(flight) 객체를 입력받은 createReservation은 passengerInformation 프로퍼티가 승객 객체, flightInformation 프로퍼티가 항공편 객체인 새로운 객체를 반환한다.’

메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 메모이제이션은 함수형 프로그래밍 관련 이야기에서는 빠지지 않고 꼭 등장하는 사례이기도 하다.

함수로 협업하는 가장 좋은 방법은 인자와 리턴값으로만 소통하는 것이다. 순수하게 인자와 리턴값에만 의존하면 누가 만든 함수든 어떤 라이브러리로 만든 함수든 조립할 수 있게 된다. 이때 함수에서 다루는 값으로 자바스크립트의 기본 객체를 사용하거나 아주 보편적으로 약속된 객체만 사용하면 함수들 간의 조합성이 더욱 좋아진다.

파이프라인

즉시 실행 파이프라인, _.go와 _.mr

_.go는 파이프라인의 즉시 실행 버전이다. 첫 번째 인자로 받은 값을 두 번째 인자로 받은 함수에게 넘겨주고, 두 번째 인자로 받은 함수의 결과는 세 번째 함수에게 넘겨준다. 이것을 반복하다가 마지막 함수의 결과를 리턴해 준다.

1
2
3
4
5

_.go(10, // 첫번째 인자
  function (a) { return a * 10 }, // 100
  function (a) { return a - 50 }, // 50
  function (a) { return a + 10 } // 60
)

_.go는 Multiple Results를 지원한다. _.mr 함수를 함께 사용하면 다음 함수에게 2개 이상의 인자들을 전달할 수 있다.

함수 조립하기

함수형 자바스크립트 기법을 잘 활용하면 소프트웨어의 기능을 변경하거나 추가하기가 쉽다. 작은 단위로 쪼갠 함수들을 조합하여 큰 기능을 만들면 조합된 함수 사이사이에 새로운 함수를 추가하는 식으로 쉽게 확장해 나갈 수 있다.

함수형 자바스크립트 10가지 기법

1. 함수를 되도록 작게 만들기
2. 다형성 높은 함수를 만들기
3. 상태를 변경하지 않거나 정확히 다루어 부수 효과를 최소화하기
4. 동일한 인자를 받으면 항상 동일한 결과를 리턴하는 순수 함수 만들기
5. 복잡한 객체 하나를 인자로 사용하기보다는 되도록 일반적인 값 여러개를 인자로 사용하기
6. 큰 로직을 고차 함수로 만들고 세부 로직을 보조 함수로 완성하기

if else || && 삼항 연산자 다시 보기

if의 괄호

if 와 else if 다음에는 괄호가 나온다. 괄호에서는 기본적으로 true와 false를 받으며, true로 해석되는 값과 false로 해석되는 값도 받는다. 그리고 괄호 안에서는 거의 모든 일을 할 수 있다. 코드를 실행할 수 있다는 얘기다. if의 괄호에서 못 하는 일이 있는데 지역 변수를 선언하는 것과 지역 함수를 선언하는 것이다.

괄호에서 할 수 없는 일이 한 가지 더 있는데, 바로 비동기 프로그래밍이다. 자바스크립트에서는 비동기 코드를 if와 함께 사용하기 어렵다.

함수형 자바스크립트를 잘 다루기 위해서는 숲을 보는 것보다 나무의 결을 들여다 보는 것이 중요하다. 자바스크립트 문법과 기본적인 동작에 집중해보자. 함수 하나가 정의되고 실행되고 참조되는 과정, 인자를 받거나 넘기는 과정, 클로저가 되거나 비동기가 일어나는 과정, 괄호, 대괄호, 점, 쉼표 등을 자세히 들여다 보자. 문법적 감각이 좋아지면 원하는 곳 어디에서나 함수를 열고 실행할 수 있게 된다.

함수형 자바스크립트를 잘 익히기 위해서는 무엇보다 함수를 다루는 다양한 방법들을 잘 익히는 것이 중요하다. 함수를 잘 다루려면 함수와 관련된 개념들과 관련된 몇 가지 기능들에 대해 잘 알아야 하는데 이를테면 일급 함수, 클로저, 고차 함수, 콜백 패턴, 부분 적용, arguments 객체 다루기, 함수 객체의 메서드 등이 있다.