HTML 에서는 태그를 중심으로 화면에 글자, 그림 등을 배치하고 CSS 를 이용하여 레이아웃을 그리지만, 캔버스는
하나의 화면에 자바스크립트에서 지원하는 캔버스 함수를 이용하여 그린다.

캔버스의 기본적인 사용법은 소스와 같이 html 태그 안에 넣으면 된다. 캔버스 내에서는 css 가 제어되지 않기 때문에
자바스크립트를 이용하여 코드를 구성해야 한다.

최근 react 에서 새로운 상태관리 라이브러리를 발표했다. 주요 컨셉으로는 atom,selector 라는 단위를 통해
derived state 를 효과적으로 처리하고 상태의 코드 분할이 가능하게 한다고 한다.

리액트의 기본 설정은 create-react-app 을 사용하려고 한다. react-app 생성 후 recoiljs 를 설치해주면
사용 준비가 끝난것이다.

1

npm i recoil

우선 이 글에서는 리액트, 타입스크립트를 사용하는 스토리북 세팅이 다 갖춰졌다는 것을 가정하고 써보려고 한다.
스토리북은 단위 컴포넌트 테스트를 가능하게 해주고 협업에 있어 엄청난 장점을 갖는다고 생각한다.
하지만, 스토리북에서 제공해 주는 Canvas 만 사용했었다. 이로 인해 디테일한 설명, Props 의 type 등 불편한 점이
많았다. 이 문제를 어떻게 해결할 수 있을까 라는 고민을 하며 찾아보니 마크다운 문법으로 스토리북을 작성할 수 있다는
것을 알게 되었다.

.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 트리의 구성이 진행되면 레이아웃을 계산한 후 문서에 요소를 그린다.

expect(value)

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

expect.extend(matchers)

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

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

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

객체의 생성, 초기화 성능

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

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

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

1
2
3
4
5

// Array() 생성자 사용
var arr = new Array();

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

HTTP 요청 최소화

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

의존성 주입이란?

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

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