자바스크립트 프로젝트 환경 설정 (3) - Jest, Gitignore, Readme, husky

이번에는 테스트 코드 작성을 위한 Jest 라이브러리와, 필수적인 부분이지만 쉽게 설정가능해서 넘어갔던 gitignore와 readme 파일에 대해서 소개하겠습니다. 마지막으로 husky에 대해서도 알아보겠습니다.

 

Jest

Jest는 자바스크립트에 테스팅 프레임워크입니다. 페이스북에서 만들었으며, 가장 대중적인 테스팅 툴중 하나입니다.

Jest를 사용하여 단위 테스트를 작성하여 코드가 의도한 대로 작동하는지 확인할 수 있으며, TDD가 가능해집니다.

 

Jest 설치 후, 관련 설정은 jest.config.js 파일에서 하면 됩니다.

module.exports = {
  moduleNameMapper: {
    '@/(.*)$': '<rootDir>/src/$1',
    '#/(.*)$': '<rootDir>/test/$1'
  },
  testMatch: [
    '<rootDir>/(test/unit/**/*.test.js)'
  ]
}

우선 기본적으로 2가지만 설정했습니다. <rootDir>는 해당 config 파일, 혹은 package.json, 혹은 pwd 순으로 설정됩니다.

• moduleNameMapper: webpack에서 alias 설정한 것과 유사합니다. jest 코드 내에서 import시 별칭을 사용할 수 있도록 해줍니다. @를 src 폴더로, #를 test 폴더로 했습니다.
• testMatch: jest 명령어를 통해 테스트를 실행시 실행시킬 파일의 형식을 정의합니다. test 폴더 내에 unit 폴더내에 있는 모든 자바스크립트 파일을 테스트 파일로 실행하도록 했습니다.

프로젝트가 진행되면서 Jest 관련 설정을 추가할 필요가 있는 경우 해당 파일에 추가하면 될 것같습니다.

 

.gitIgnore 

.gitIgnore 파일은 git을 사용하는 사람이라면 다 알만한 파일입니다. 해당 파일에서 git이 무시할 파일들을 정의하면 됩니다.

저는 다음과 같이 정의했습니다.

# packages
node_modules/

# IDE
.idea/

# OS
.DS_Store

# Build
dist/

너무 길어지면 보기 안좋을 거 같아서 우선 현재 필요한 부분만 설정하고, 프로젝트를 진행하면서 추가하고자 합니다. 이렇게 하지 않아도, https://github.com/github/gitignore 에서 필요한 gitignore 파일을 가져다가 쓰거나, https://www.toptal.com/developers/gitignore 사이트에 도움을 받아서 만들면 더 편하게 할 수 있습니다.

 

Readme.md

리드미 파일도 사실 너무 당연한 파일이라 뺄까 했는데 일단 넣어놨습니다. 리드미 파일은 해당 프로젝트에 대한 소개, 실행(개발) 방법, 프로젝트 담당자 등 해당 프로젝트를 보는 사람이 알아야될 정보들을 작성하면 됩니다. 리드미는 마크다운 문법을 사용하기에 마크다운 문법에 대해 공부해놓는 것도 좋을 것 같습니다(사실 별거 없습니다.)

 

 

Husky

husky는 자바스크립트에서 git hook을 사용하여 명령어를 실행할 수 있도록 해주는 툴입니다. husky를 사용하여 커밋시 테스트를 실행하도록 하거나, 푸시시 lint를 실행하도록 설정 할 수 있습니다. 사용법이 매우 간단하니 공식 문서보면서 설정하면 됩니다.

 

마무리

지금까지 자바스크립트 프로젝트 환경 설정하는 부분을 알아봤습니다. 환경 설정한 프로젝트는 깃헙에 올리도록 하겠습니다.