리팩터링 2판 - JS 모르는 사람도 샘플코드 실행해보기

 

물.론. 처음부터 끝까지 책만보고 실습을 해도 좋다. 하지만 21세기를 사는 우리에게 하루 24시간은 너무 짧다. 있는 걸 돌려보는 것만해도 어느 정도 학습효과가 분명 있다. (변명 x 9999999) 그래서 이미 준비된 실습 코드를 실행해보기로 했다. 공식적으로 마틴 파울러가 제공하는 실습코드는 없다. 대신 리팩터링 2판을 출판한 출판사에서 실습코드가 있는 좌표를 찍어주었다. 필자는 가능한한 덜 고생해서 최대한 많은 것을 얻으려는 날먹 정신(?)이 강하기 때문에 여기서부터 시작한다. 해당 링크는 아래를 참고하시길.

 

GitHub - wickedwukong/martin-fowler-refactoring-2nd: Practice refactoring techniques in the Martin Fowler's Refactoring 2nd edit

 

위 링크를 보면 이미 Readme에서 충분한 가이드를 해주고 있다. 이것을 하나씩 따라해보려고 한다.

 

 

Fork하고 Readme 따라하기

자유롭게 수정을 하려면 본인 Repo에서 작업하는게 맘 편하다. 그래서 위 링크의 Repo를 Fork했다. Fork한 repo를 clone한다. 그리고 readme에서는 WebStorm을 사용하는 예시가 있는데 인텔리J를 사용해도 무방하다. 이제 프로젝트를 열어보자.

 

그리고 지금부터는 readme에 있는 가이드를 따라한 부분이다. 먼저 프로젝트의 root 위치에서 yarn을 초기화한다. babel이 뭔지는 모르지만 아래처럼 명령어를 입력해본다. (아몰랑. 일단 시키는대로 하자.)

yarn init
yarn add --save-dev mocha chai babel-register babel-preset-es201

 

아래 코드는 이미 입력이 되어 있을 것이다. 만약 없다면 입력해준다.

// 위치 : package.json
"scripts": { "test": "mocha --watch --recursive --require babel-core/register" },

// 위치 : .babelrc
{
  "presets": ["es2015"]
}

 

다음 패키지를 설치하는 yarn 명령어를 입력.

 yarn

 

마지막으로 준비된 테스트 코드를 일괄적으로 실행하는 명령어를 입력해본다.

  yarn test

 

 

왜 나만 안되냐고!!!!! ...하면서 1시간 삽질했음

어라? 나는 왜 안됨?

샘플코드는 몇년전에 생성된거라 의존성 갱신 과정에서 라이브러리끼리 호환되는 버전이 아니어서 충돌을 일으킬 수 있다. 혹은 아래와 유사한 에러 메세지를 볼 수 있다.

Cannot use import statement outside a module Error

 

필자의 경우는 chai 라이브러리와 mocha 라이브러리 사이에 이슈가 생기는 것으로 추정되는 문제가 있었다. 아래 필자의 package.json을 참고해서 문제를 해결하길 기원한다.

// package.json
{
  "name": "mf-refactoring-2nd",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "test": "mocha --watch --recursive --require babel-core/register"
  },
  "dependencies": {
    "babel-preset-es201": "^0.0.1-security",
    "babel-preset-es2015": "^6.24.1",
    "babel-register": "^6.26.0",
    "chai": "^4.3.6",
    "eslint": "^5.12.1",
    "js-money": "^0.6.3",
    "mocha": "^10.0.0",
    "node-fetch": "^2.6.7",
    "sinon": "^7.3.2"
  },
  "main": "index.js",
  "repository": "https://github.com/conquerex/martin-fowler-refactoring-2nd.git",
  "license": "MIT"
}

 

하나씩 테스트를 해보고 싶다면?

yarn test로 실행하면 챕터 1에서 챕터 11의 테스트가 모두 동작하게 된다. 수정을 하면서 테스트 동작을 하나씩 확인해보고 싶을 때는 전체 테스트 실행으로 확인하기 불편하다. 인텔리J를 통해 statement.test.js 문서를 보면 describe 키워드 옆에 녹색 아이콘이 있다. 이 아이콘을 클릭하면 하나씩 테스트가 가능하다. 이때 제대로 테스트가 되지 않는다면 readme에 있는 가이드처럼 Run/Debug Configurations - 테스트 선택 - Node options - 아래 코드 입력하도록 한다. 만약 Run/Debug Configurations에 단일 테스트가 보이지 않는다면 한번도 테스트를 동작시키지 않았기 때문이다. 먼저 테스트를 한번 동작시키면 Run/Debug Configurations에 테스트가 등장하니 그 후 아래 코드를 입력하자.

-r babel-register

 

 

참고자료 (참고 안될 수 있음 주의)
- Cannot use import statement outside a module Error 해결하기
- 자바스크립트 CommonJS 모듈 내보내기/불러오기 (require)
- [Mocha] 테스트 프레임워크 Mocha로 Node.js 테스트 하기