jest 메서드-toBe

카테고리 Jest

.toBe(value)

.toBe(value) 메서드는 expect 의 값과 비교할때 사용한다. 이것은 Object.is() 를 사용하여 비교하는데 === 연산자를 사용하는 것보다 테스트하기에 더 좋다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const can = {
name: 'pamplemousse',
ounces: 12,
};

describe('the can', () => {
test('has 12 ounces', () => {
expect(can.ounces).toBe(12);
});

test('has a sophisticated name', () => {
expect(can.name).toBe('pamplemousse');
});
});
계속 읽기

렌더링

카테고리 웹 성능 이야기

렌더링 과정

렌더링이란 논리적인 문서(DOM)의 표현식을 그래픽 표현식으로 변형시키는 과정이다. 이 과정은 다음과 같이 크게 2단계를 거쳐 이뤄진다.

  1. DOM 요소와 스타일에 기반을 둔 레이아웃 계산
  2. 계산된 요소의 화면 표현

일반적인 전체 흐름은 브라우저에 문서가 로딩됨에 따라 DOM 트리의 구성이 진행되면 레이아웃을 계산한 후 문서에 요소를 그린다.

계속 읽기

jest 메서드 - expect

카테고리 Jest

expect(value)

expect 함수는 값을 테스트 하고 싶을 때 사용한다. 드물게 expect 함수만 사용해서 테스트를 할 수 있지만 값을 테스트하기 위해 matcher 함수를 함께 사용한다.

expect.extend(matchers)

expect.extend 함수를 사용하여 Jest 에서 제공하는 matcher 가 아닌 직접 만들어서 사용할 수 있다.

계속 읽기

jest 메서드 - globals

카테고리 Jest

Jest 제공 메서드들 중 Globals 메서드에 대해서 정리해보려 한다. Jest 공식 문서에 나와 있는 Globals 메서드 정의는 다음과 같다.

Globals 메서드를 사용해서 전역 환경을 설정한다. 이것은 필수로 설정해 줄 필요는 없다.

계속 읽기

객체의 생성, 초기화 성능

많이 사용하지만 성능을 생각하지 않고 작성하는 코드에 객체 선언과 초기화 구문이 있다. 배열(Array) 형식의 객체와 오브젝트(Object) 형식의 객체를 생성하고 초기화하는 방법의 성능을 측정해 보고 두 코드 사이에 어떤 차이점이 있는지 비교해 보고자 한다.

배열의 생성, 초기화 성능 비교

배열을 생성자 혹인 리터럴([]) 형식을 사용해 객체를 생성할 수 있다.

1
2
3
4
5
// Array() 생성자 사용
var arr = new Array();

// 리터럴 형식으로 배열 생성
var arr = [];
계속 읽기

HTTP 요청 최소화

HTTP 요청 최소화는 최적화에서 가장 기본이면서도 중요한 부분이다. 웹 사이트는 주로 마크업, 이미지, 스타일시트, 자바스크립트 등으로 구성된다. 각 구성 요소는 모두 웹 서버에 있다. 이 구성 요소를 사용자의 컴퓨터로 가져오는 데는 네트워크 비용이 든다. 네트워크 비용은 곧 응답 시간으로 이어진다. 그러므로 다운로드 해야 하는 구성 요소의 개수를 줄이는 것은 가장 효과가 크고 중요한 최적화 방법이다.

계속 읽기

도구 다루기-3

카테고리 테스트 코드

의존성 주입이란?

ConferenceWebSvc 객체에 서비스를 캡슐화하고 메시지를 화면에 표시할 자바스크립트 객체 Messenger를 작성한다.

참가자는 1인당 세션을 10개까지 등록할 수 있다. 참가자가 한 세션을 등록하면 그 결과를 성공/실패 메시지로 화면에 표시하는 함수를 개발해야 한다. 아래 코드는 해당 기능을 구현하기 위한 초기 버전이다.

계속 읽기

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

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

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

계속 읽기

도구 다루기-2

카테고리 테스트 코드

재스민 들어가기

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

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

계속 읽기

도구 다루기

카테고리 테스트 코드

테스팅 프레임워크

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

계속 읽기
Author's picture

kkangil

React와 Node를 사용하는 풀스택 개발자가 되는것이 목표입니다.


web developer


Asia/Seoul