20211126.md

React

지난 시간 복습 및 수습

• 지난 시간 package.json에서 'start' 스크립트로 '&'을 사용하여 병렬 명령(npm run dev:compile-watch & npm run dev:server-open)을 했는데, 윈도우 환경에서는 잘 안되니까 npm-run-all 패키지를 깔고 script를 run-p dev:compile-watch dev:server-open으로 바꿔주었다.
• 모듈화하면서 생긴 여러 모듈 파일 디렉토리를 다 컴파일해줘야하므로, dev:compile-watch 명령어가 실행할 스크립트는 "npm run dev:compile -- -w"에서 dev:compile이 아니라 dev:compile-dir로 바꿔줘야. (dev:compile은 main.js 파일만 컴파일해주고 있었다.)
• index.html 파일에서 contents라는 클래스를 가진 div의 lang 속성도 버튼을 누를 때마다 toggle 시켜주어야만 한다.
  • renderUpdatedUI 함수 안에서 $('.contents').attr('lang', translator.currentMode)를 추가해준다.
• 어제 우리는 @types/node, @types/live-server를 설치했다. typescript와 vscode 모두 MS사가 만든 거라 서로 친화적이며 편리한 기능을 제공한다.

preparing 실습

package.json 및 server.js의 서버환경을 commonJS와 ESM 버전으로 관리하기

• nodejs.dev에서 package.json Guide을 읽고 다음과 같이 설정해주자
  • "private": true: npm에 올려 공개할 package라면 public으로 해도 되지만 우리는 아니니까
  • "name": "preparing": package이름 될거니까 대문자 쓰지 말것
  • "version": "0.0.1"
  • "scripts": { "start": "", "dev": "node server/index", "test": "" }: 일단 넣어두기
  • "type": "module": server.js에서 commonJS를 사용하지만 브라우저의 ESM과 동일하게 하려면 넣어주자
• 이 상태에서 "npm run dev"로 server을 돌리면 live-server을 import하는 구문인 require을 해석하지 못해 reference error가 난다.
  • commonJS로 바꾸어 해결하기: server/index.js의 확장자를 server/index.cjs로 바꾼다.
  • ESM으로 바꾸어 해결하기: server/index.js의 확장자를 server/index.mjs로 바꾸고 const liveServer = require('live-server')를 import liveServer from 'live-server'로 바꾼다.
  • node.js환경에서 ESM을 기본으로 설정한 경우, 즉 package.json에 "type":"module"를 지정한 경우 명령어에 확장자를 생략하면 안된다. scripts의 "dev" 명령어에 꼭 확장자(node server/index.mjs)를 지정해주어야 한다. 지정하지 않으면 'cannot find module'에러!

server에서 환경변수 설정하기

• node.js에서는 process.env로 환경변수를 참조할 수 있다. 콘솔로 찍어보면 여러가지 환경정보가 나온다.
• 참조 뿐만 아니라 프로퍼티 동적 추가로 custom 환경변수를 세팅할수도 있다. (참고: nodejs에서 환경변수 다루기 블로그, nodejs.dev의 환경변수 가이드)
• 현재 server/index.mjs는 다음과 같이 구성되어있다.

// server/index.mjs
import liveServer from 'live-server';

const params = {
  host: 'localhost',
  port: 3000,
  open: false
}

liveServer.start(params);

• 여기서 port와 open에 주어질 params를 CLI 명령어로 환경변수 세팅해주면서 server을 구동시켜보자
  • 먼저 const { PORT, OPEN } = process.env;로 환경변수를 받고, null 병합연산자로 port와 open에 각각 넣어준다.
  • null 병합 연산자 대신 or 단축평가법(||)을 사용하기도 하지만, 그런 경우 '0'이나 빈 문자열이 falsy로 평가되므로 더욱 안전한 null 병합 연산자를 써주면 좋다.

const { PORT, OPEN } = process.env;
const params = {
  host: 'localhost',
  port: PORT ?? 3000,
  open: OPEN ?? false
}

• 그대로 server을 돌리면 아직 PORT와 OPEN을 넣어주지 않았기 때문에 둘다 undefined 값을 가진다.
• bash shell에서 명령어를 입력할 때, (scripts에) 환경변수=값의 형태로 넣어주기만 하면 된다. 1회성으로 설정해준 환경 변수이기 때문에 해당 프로세스가 살아있는 동안에만 유효하며 프로세스를 종료하면 사라진다.
  • "dev": "PORT=8080 node server/index.mjs"로, "start": "OPEN='/client/public' npm run dev"으로 환경변수를 설정하며 명령어를 실행시킨다.
• 하지만 window 환경에서는 환경변수 설정이 이걸로 잘 안될거다. 그러니까 cross-env라는 패키지를 깔아서 모든 scripts의 환경변수 설정 CLI 명령어에 cross-env를 앞에 붙여준다.

// bash 명령어
$ npm i -D cross-env 

// package.json
"scripts": {
    "start": "cross-env OPEN='/client/public' npm run dev",
    "dev": "cross-env PORT=8080 node server/index.mjs",
    // 기타 스크립트
},

• 이제 server 건드릴 일 없긴 한데 그래도 server 파일에 변화가 있을 때마다 감지하여 다시 구동해주는 watch 옵션을 가진 패키지도 다운받아보자. 이전에 nodemon을 써봤을테니 오늘은 node-dev로 (근데 window는 node-dev 안되니까 nodemon으로)
  • $ npm i -D node-dev로 설치하고, package.json에서 "dev" 명령어에 node 대신 node-dev를 넣어준다.

client 파일 작업

HTML head 태그

• 기본 설정 메타태그 분석해보자

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

• http-equiv는 문서의 초기정보를 지정하는 속성으로, content를 꼭 기재해주어야 한다.
  • 브라우저 호환성 설정을 나타내는 X-UA-Compatible에서 X는 실험적인 단계를, UA는 User Agent를, Compatible은 호환을 나타내며, content로 오는 "IE=edge"는 Internet Explorer의 가장 최신(edge) 단계를 나타낸다.
  • 이것은 곧 이 html 문서를 열 때 사용할 렌더링 엔진을 지정하는 것으로, IE의 최신 렌더링 엔진을 사용하도록 지정했다.
  • 한 때 IE가 표준을 너무 안 지켰기 때문에, "IE=9"로 지정되는 경우는 만일 IE로 열리면 최소한 9버전으로 렌더링하게끔 해달라는 요청이다.

  <meta name="viewport" content="width=device-width, initial-scale=1" />

• viewport가 device-width로 설정되는 경우, 사용자의 기기에 맞게 맞춰진다.
• 접근성 관점에서 "user-scalable=no"는 쓰지 않는 것이 권장된다. 확대해서 봐야할 때가 있으니까.
• 그 밖에도 head 태그 안에 SEO, favicon, webfonts, open-graph info 등을 넣어주어야 한다.
• favicon(favorite icon)은 해당 사이트의 아이덴티티를 위해 필수적인데, link태그에서 'link:icon'으로 emmet 속기법을 사용하면 <link rel="shortcut icon">이 되는데 여기서 shortcut은 삭제하고 그냥 icon으로.
• webfont도 spoqa han sans로 CDN link 태그를 걸어주자.

<link rel="stylesheet" href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css" />
<link rel="icon" href="//vectorlogo.zone/logos/reactjs/reactjs-icon.svg" />
<link rel="stylesheet" href="./css/main.css" />

Test Driven Development

• client/src 안에 utils라는 폴더를 만들고, tests.js, index.js, throwError.js, getRandom.js, transformText.js 모듈파일을 만들어주자.
• 테스트 주도 개발이란, 먼저 어떤 함수가 필요한지 생각(think)하고, test하고, code를 짜고 refactoring한다!
• 책을 쓸 때 기획자와 미팅하는 게 think, 목차를 짜는 게 test, 실제로 글을 쓰는 게 code, 다듬는 게 Refactor이라고 보면 된다.
• 보통은 test는 library로 많이 하지만, 이번에 한 번 직접 짜보도록 하자.
  • describe: 기술하는 utility
  • test: 테스트 utility
  • expect: 기대값을 검토하는 utility

expect utility

• expect(전달값).toBe(기대값)으로 같은지 비교해주거나, expect(노드).toBeInTheDocument()로 해당 노드가 문서 안에 존재하는지를 알아볼 수 있으며, expect(전달값).not.toBe(기대값) 등으로 반대 결과도 확인이 가능하다.

// utils/tests.js
function expect(received) {
  // 전달값과 비교할 수 있는 utility 모음 객체 반환
  return {
    toBe(expected) {
      // 전달값과 기대값이 같지 않으면 오류
      if (received !== expected) {
        throwError(`${received}와 ${expected}의 값이 동일하지 않습니다.`);
      }
    }, 
    toBeInTheDocument() {
      if (!document.body.contains(received)){
        throwError(`${received}는 문서 안에 존재하지 않습니다.`);
      }
    }
    not: {
      toBe(expected) {
        if (received === expected) {
          throwError(`${received}와 ${expected}의 값이 동일합니다.`);
        }
      },
      toBeInTheDocument() {
        if (document.body.contains(received)) {
          throwError(`${received}는 문서 안에 존재합니다.`);
        }
      }
    }
  }
}

• 여기에서 expect가 리턴하는 객체 속 received는 함수와 같이 클로저로 expect함수에게 주어진 인자 received를 참조하고 있다.
• throw new Error을 매번 하기 귀찮으니까 utility func로 빼주고 tests.js에서 import해준다

// utils/throwError.js

export function throwError(errorMsg) {
  throw new Error(errorMsg);
}

test utility

• 코드 사용 예시는 다음과 같다.

test('1+1=2', () => expect('1+1').toBe(2));

• 만들어보자

function test(description, callback) {
  try { // 사용자가 전달한 함수를 실행
    callback();    
    console.log(`😃테스트 성공: ${description}`)
  } catch(error) {
    console.groupCollapsed(`😫테스트 실패: ${description}`);
    console.error(error.message);
    console.groupEnd();
  }
}

• console.groupCollapsed는 console.groupEnd가 호출되기 전까지의 긴 콘솔메시지를 닫힘상태로 제공한다.

describe utility

• 코드 사용 예시는 다음과 같다.

describe(테스트 리스트 항목을 대변하는 레이블, () => {
  test();
  test();
  test();
  ...
})

• 만들어보자

function describe(testLabel, callback) {
  console.group(testLabel);
  callback();
  console.groupEnd();
}

• console.group은 상위에서 여러개의 테스트 코드를 묶어주기만 하는 애다.

테스트 실행해보기

• 여기까지 우리는 describe, test, expect를 호출할 수 있는 테스트 라이브러리를 직접 작성해보았다.
  • 이제 이 세개의 함수를 export해주고, public/index.html에 script태그로 src/main.js를 type="module"로 불러오자

<script type="module" src="./src/main.js"></script>

• main.js에서 테스트코드를 써보자

import { describe, test, expect } from './utils/tests.js';

describe('초등수학', () => {
  test('10 * 20 - 8 = 192', () => {
    expect(10 * 20 - 8).toBe(192);
  });
  test('1+1=11', () => {
    expect(1+1).toBe(11);
  });
})

• 이제 서버를 돌리고 index.html을 요청하면 콘솔에 테스트 결과를 보여준다.
  • 초등수학 테스트가 성공하여 콘솔에 적절한 성공문구와 실패 문구가 뜨는 것을 볼 수 있다!

getRandom 함수를 테스트 주도 개발로 만들어보기

• 이제 getRandom 함수를 위한 테스트 파일을 먼저 만들며 테스트주도개발을 실습해보자.

// src/utils/getRandom.js에 함수 틀만 만들어두고 export
export const getRandom = () => {};
export const getRandomCount = () => {};

// src/utils/index.js에서 re-export
export { getRandom, getRandomCount } from './getRandom.js';
export * from './tests.js';

// src/utils/getRandom.test.js 파일을 만들고 필요한 자원을 import한 후 그 안에서 테스트 로직 먼저 짠다.
import { test, expect } from './tests.js';
import { getRandom, getRandomCount } from './getRandom.js';

test('getRandom(10)은 10보다 작거나 같고 0보다 커야 합니다.', () => {
  let targetCount = getRandom(10);
  console.log(`getRandom(10) = ${targetCount})
  expect(targetCount>10).toBe(false);
  expect(targetCount>=0).toBe(true);
});

// src/main.js
import './utils/getRandom.test.js';

• 현 상태에서 main.js를 로드하는 html을 브라우저에 띄우면 테스트 실패가 뜬다. 아직 함수 로직을 안 짰으니까 당연한 것.
  • getRandom은 1로 초기화되는 n을 받아 Math.random()*n을 리턴해주자.

export const getRandom = (n=1) => Math.random()*n;

• 이번에는 특정 범위 내의 임의의 숫자를 리턴하는 getRandomCount라는 함수를 만들어보자. 테스트 로직 먼저, 함수를 나중에 짠다.

// src/utils/getRandom.test.js
test('getRandomCount(5, 7)은 5 이상 7 이하의 값이어야 합니다.', () => {
  let targetValue = getRandomCount(5, 7);
  console.log(`getRandomCount(5, 7)은 ${targetValue}`)
  expect(targetValue >= 5).toBe(true);
  expect(targetValue <= 7).toBe(true);
})

// src/utils/getRandom.js
const getRandomCount = (min = 0, max = 10) => Math.floor(getRandom()*(max - min) + min);

transformText 함수를 테스트 주도개발로 만들어보기

• 주어진 문자열을 snake_case, kebab-case, camelCase, TitleCase 로 만들어주는 함수를 테스트주도개발로 만들어보자.

// src/utils/transformText.js
export const snakeCase = data => {};
export const kebabCase = data => {};
export const camelCase = data => {};
export const titleCase = data => {};

// src/utils/transformText.test.js
import { test, expect } from './tests.js';

test(`snakeCase('simple is the best') => 'simple_is_the_best'`, () => {
  expect(snakeCase('simple is the best')).toBe('simple_is_the_best');
});

test(`kebabCase('simple is the best') => 'simple-is-the-best'`, () => {
  expect(kebabCase('simple is the best')).toBe('simple-is-the-best');
});

test(`camelCase('simple is the best') => 'simpleIsTheBest'`, () => {
  expect(camelCase('simple is the best')).toBe('simpleIsTheBest');
});

test(`titleCase('simple is the best') => 'SimpleIsTheBest'`, () => {
  expect(titleCase('simple is the best')).toBe('SimpleIsTheBest');
});

• 이제 함수를 작성해주자. 정규표현식을 이용하여 작성해줄 수 있다.
  • 문자열을 replace메서드로 바꿔주고 싶을 때, 바꾸기 전 문자를 활용하려면 두번째 인자로 바꿀 문자열 대신 이전 문자열을 매개변수로 받는 콜백을 준다.

// src/utils/transformText.js
export const snakeCase = data => data.toString().replace(/\s/g, '_');
export const kebabCase = data => data.toString().replace(/\s/g, '-');
export const camelCase = data => data.toString().replace(/\s\w/g, match => match.toUpperCase().trim());
export const titleCase = data => data.toString().replace(/(^\w|\s\w)/g, match => match.toUpperCase().trim());

• 이제 main.js에 import하여 브라우저에서 테스트 결과를 볼 수 있도록 하자.

// src/main.js
import './utils/transformText.test.js';

DOM TEST를 테스트 주도 개발로 해보기

• client에 domTest라는 폴더를 만들고 index.js에서 다음과 같은 테스트코드를 작성해보자.

1. 문서 제목이 'React 웹개발 환경구성'인가?
2. 문서에 '#app' 요소가 존재하는가?
3. '#app' 요소 안에 제목요소가 포함되어 있는가?
4. 제목요소의 텍스트가 'React 앱 개발'인가?
5. 제목요소가 'headline'이라는 클래스를 포함하는가?

• 이처럼 무엇이 필요한지 써놓고 이를 충족시키도록 개발하는 것이 테스트 주도 개발이다.
• main.js에서 domTest/index.js를 불러오고, domTest/index.js에서는 테스트 코드를 짜보자.

// src/domTest/index.js
import { describe, test, expect } from '../utils/tests.js';

describe('DOM TEST', () => {
  const $appNode = document.getElementById('app');

  test("문서 제목이 'React 웹개발 환경구성'인가?", () => {
    expect(document.title === 'React 웹개발 환경구성').toBe(true);
  });
  
  test("문서에 '#app' 요소가 존재하는가?", () => {
    expect($appNode).toBeInTheDocument();
  });

  const $heading = appNode.querySelector('h1, h2, h3, h4, h5, h6');
  test("'#app' 요소 안에 제목요소가 포함되어 있는가?", () => {
    hasHeadline = appNode.querySelector('h1, h2, h3, h4, h5, h6');
    expect(hasHeadline).toBe(true);
  });
  
  test("제목요소의 텍스트가 'React 앱 개발'인가?", () => {
    const $heading = appNode.querySelector('h1, h2, h3, h4, h5, h6');
    expect($heading.textContent).toBe('React 앱 개발');
  });

  test("제목요소가 'headline'이라는 클래스를 포함하는가?", () => {
    expect($heading.classList.contains('headline')).toBe(true);
  });
})

• 보다 용이한 테스트를 위해 expect가 리턴하는 객체에 truthy/falsy한 값인지 판단하는 메서드와 클래스 이름 확인하는 메서드를 만들어주자

// src/utils/tests.js

const expect = received => {
  return {
    toBe(expected) {
      if (received !== expected) throwError(`${received}는 ${expected}와 같지 않습니다.`);
    },
    toBeInTheDocument() {
      if (!document.body.contains(received)) throwError(`${received}는 문서에 포함되어있지 않습니다.`);
    },
    toBeTruthy() {
      if (!received) throwEror(`${received}는 truthy 값이 아닙니다.`);
    },
    toBeFalsy() {
      if (received) throwError(`${received}는 falsy 값이 아닙니다.`);
    },
    toHaveClass(className) {
      if (!received.classList.contains(className)) throwError(`${received}요소에는 ${className}라는 클래스가 없습니다.`);
    }
   not {
     // 위와 반대의 로직들
   }
  }
}

Lint 설정

• Javascript의 맹점은 브라우저에서 실행시키기 전가지 오류를 잡기 어렵다는 점이다. 이를 위해 Lint가 필요하다.
• VSCode에서 extension으로 깔아둔 ESlint와 Prettier을 비활성화하고 reload해보자
• eslint가 전역에 깔려있는지 확인해보자. $ eslint --version에서 command not found가 뜨면 global에 없는 것
• $ npx eslint --init으로 아래와 같이 기본설정을 한다.
  • To check syntax and find problems / Javascript modules(import/export) / React / No(Typescript) / all(Browser and node.js) / Javascript (js파일로 config 관리) / YES(plugin도 설치)
• 이제 package.json 파일에 eslint와 eslint-plugin-react가 깔려있고 eslintrc.cjs 파일도 생성되어있다.
• eslintrc.cjs 파일에는 parser 옵션에 jsx가 true로 설정되어있는데 이는 React용으로 lint를 했기 때문
  • "rules"를 추가해주자. "no-unused-vars":"warn"로 선언만 하는 경우 빨간 줄 말고 노란 warning으로만 표시하도록.
  • client 안에 있는 것(gitignore 제외)을 검사하기 위해서는 $npx eslint ./client/ --ignore-path .gitignore
  • 이렇게 run 하면 react version이 not specified라고 뜨는데 이는 윌가 아직 React를 안 깔았기 때문이다. eslintrc.cjs에서 "plug-in"에 있는 "plugin:react/recommended"와 "extends"에 있는 react를 주석처리해준다.
• 매번 eslint 명령어를 $npx eslint ./client/ --ignore-path .gitignore로 칠 수는 없으니 eslint-watch를 깔아주자. $ npm i -D eslint-watch
  • package.json에서 명령어들을 만들어주자.

// package.json의 "script"에 추가 
  "lint": "eslint ./client/ --ignore-path .gitignore",
  "watch:lint": "esw ./client/ --watch --color --ignore-path .gitignore"

Prettier 설정

• $ npm i -D prettier로 설치하고 $ npx prettier -h로 도움말을 볼 수 있다.
• init이 따로 없어서 초기설정파일을 자동으로 만들어주지 않으니 prettier.io에서 필요한 설정파일 내용을 복사하여 prettierrc.cjs에 복사. 우리는 야무님이 준 걸로 하기.

// prettierrc.cjs
module.exports = {
  // 화살표 함수 식 매개변수 () 생략 여부 (ex: (a) => a)
  arrowParens: 'always',
  // 닫는 괄호(>) 위치 설정
  // ex: <div
  //       id="unique-id"
  //       class="contaienr"
  //     >
  htmlWhitespaceSensitivity: 'css',
  bracketSameLine: false,
  // 객체 표기 괄호 사이 공백 추가 여부 (ex: { foo: bar })
  bracketSpacing: true,
  // 행폭 설정 (줄 길이가 설정 값보다 길어지면 자동 개행)
  printWidth: 80,
  // 산문 래핑 설정
  proseWrap: 'preserve',
  // 객체 속성 key 값에 인용 부호 사용 여부 (ex: { 'key': 'xkieo-xxxx' })
  quoteProps: 'as-needed',
  // 세미콜론(;) 사용 여부
  semi: true,
  // 싱글 인용 부호(') 사용 여부
  singleQuote: true,
  // 탭 너비 설정
  tabWidth: 2,
  // 객체 마지막 속성 선언 뒷 부분에 콤마 추가 여부
  trailingComma: 'es5',
  // 탭 사용 여부
  useTabs: false,
};

• prettier를 통한 formatting과 실시간 watch를 client 디렉토리를 대상으로 실행하는 스크립트를 package.json에 넣어주자.
  • watch로 구동시키려면 onchange라는 패키지를 깔아주자. $ npm i -D onchange
  • "format": --write 옵션은 prettier가 format하여 쓸수있게 해준다.
  • "watch:format": client 안에 있는 파일들이 변경되면 format 명령어를 실행시킨다.

// package.json의 "script"에 추가 
  "format": "prettier --write ./client --ignore-path .gitignore",
  "watch:format": "onchange ./client -- npm run format {{changed}}"

• 두 명령어를 동시에 실행시키기 위해 &를 사용하거나 npm-run-all 패키지를 깔아서 lint와 format을 병렬로(run-p) 동시에 실행할 수 있다. $ npm i -D npm-run-all

// package.json의 "script"에 추가 
  "watch": "npm run watch:lint & npm run watch:format",
// npm-run-all 패키지 설치 후
  "watch": "run-p watch:lint watch:format"
// "watch": "run-p watch:**"로 지정하면 watch:로 시작하는 모든 명령어를 실행해준다

• 이런 식으로 lint와 code format package를 직접 환경설정해줄 수 있다. 하지만 vscode의 extension이 훨씬 편하니까 다시 켜도록 하자.

Test Library (Jest)

• 설치하기 전에 먼저 npx로 Jest를 실행해보자. $ npx jest ./client로 명령어를 실행시키면 client directory 안에서 test파일을 찾아 실행한다.
• 현재 만들어둔 getRandom.test.js와 transformText.test.js를 찾아 실행하려다가 실패한다.
  • 우리는 test파일에서 import로 getRandom.js와 transformText.js의 함수들을 가져왔는데, nodejs로 테스트할 시 commonJS로 파일을 만들기 때문에 에러가 난다.
  • 우리가 짠 코드를 인식시키려면 import 구문을 require로 바꾸거나, 플러그인을 깔아주어야 한다. $ npm i -D babel-jest @babel/core @babel/preset-env
• $ npm i -D jest로 설치하고, $ npx jest --init으로 jest 구성파일을 생성한다.
  • init 후 옵션설정은 YES(test라는 스크립트를 package.json에 넣어줄것) / no(typescript로 config파일 만들것인지) / jsdom(브라우저 환경처럼 테스트하겠다) / no(coverage reports 만들것인지) / babel / no (mock call을 자동으로 clear)
• init을 마치면 jest.config.mjs 파일 생기는데, 여기서 아래 몇몇개의 주석을 풀어주자
  • coveragePathIgnorePatterns: node_modules 폴더는 무시
  • coverageProvider: babel로 해주기
  • moduleFileExtensions: 대상 파일의 확장자명
  • testEnvironment: jsdom 브라우저와 같은 환경으로 테스트
  • testMatch: 정규표현식으로 표현된 파일명에 해당하는 파일을 다 테스트하도록
  • transform: undefined로 되어있는 파일명 초기값을 아래와 같은 정규표현식으로 바꿔 이에 해당하는 파일을 babel-jest 플러그인으로 연결하여 다 컴파일하도록 해주면 아까 깔아준 babel-jest를 통해서 import 구문도 jest가 인식할 수 있다.

  transform: { 
    '\\.[jt]sx?$': 'babel-jest' 
  }

• 이제 .babelrc 파일도 만들어 아래와 같이 configuration을 해주자.

{
  "compact": false,
  "comments": false,
  "presets": [
    [
      "@babel/preset-env",
      {
        "loose": true
      }
    ]
  ]
}

• getRandom 함수들을 jest를 통해 test해보자.
  • jest의 matcher function인 toBeLessThan으로 기대값에 전달된 값이 작거나 같은지 확인해보자.
  • getRandom.test.js에서 기존 테스트를 주석처리하고, 아래와 같이 다시 테스트코드를 써보자

test('getRandom(10)은 10보다 작거나 같고 0보다 크거나 같아야 합니다', () => {
  let targetCount = getRandom(10);
  expect(targetCount).toBeLessThan(10);
  expect(targetCount).toBeGreaterThan(0);
})

• 근데 지금 lint가 jest의 함수들을 인식 못해서 빨간 줄이 계속 뜨니까 eslintrc.cjs에서 설정 좀 해주기
  • "env": { "globals/jest": true }와 plugin: ["react", "jest"]를 설정해준다.
  • 만약 eslintrc파일에서 "globals/jest"를 인식 못하면 "globals": { "jest": true }로 해주기
  • plugin도 깔아주고 $ npm i -D eslint-plugin-jest extends에 "plugin:jest/recommended"를 넣어준다.
  • settings에도 settings : {jest: {version: require('jest/package.json').version}}로 버전 설정해준다.
• 인텔리센스에서 정보 잘 보여줄 수 있도록 $ npm i -D @types/jest까지 설치해주자.
• 이제 getRandom.test.js와 transformText.test.js에서 우리가 만든 tests.js를 import하는 코드를 주석처리해놓고, jest로 테스트($ npm test)해보면 터미널에서 테스트 결과를 볼 수 있다.