js 알고리즘 테스트 환경 VS code로 세팅하기

자바스크립트 코딩 테스트 환경 만들기

아예 세팅을 처음한다면 VS code, npm, node.js 먼저 설치를 해주어야한다.

• Visual Studio Code 접속하여 설치
• node.js 설치
• npm 설치 , npm은 node.js 설치 시 자동으로 설치되므로 터미널에서 npm -v 명령어를 입력하여 npm이 제대로 설치되었는지 확인한다. 잘 생성되었을 경우 현재 설치된 npm의 버전이 출력된다.

둘 다 설치가 돼있다면 node -v 와 npm-v 명령어로 각각 버전을 확인해준다. 버전이 잘 출력되면 설치가 잘 돼 있는 것.

최종 설정한 package.json 파일 스크립트 보기

아래 순서대로 설명해뒀지만 바쁜 사람들을 위해 최종 스크립트 먼저 작성해두었다. (lint 파일을 제외된 스크립트) package.json 파일 생성하고 npm i눌러서 package.json에 작성된 프레임워크나 라이브러리를 받아 올 수 있다.

//package.json

{
  "name": "js-algorthm-practice",
  "version": "1.0.0",
  "description": "this is js algorthm practice",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "jest": "^29.7.0"
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  }
}

테스트 환경을 위한 테스트 프레임 워크 설치

프로젝트 폴더에서 터미널을 열고 npm init -y를 입력해 기본 package.json 파일을 생성한다. package.json은 해당 프로젝트 폴더안에서 종속성을 관리하는데 사용되는 파일이다. 버전이나 의존성 관리, 메타데이터, 실행 명령어 등등을 json 객체로 관리할 수 있다. package.json 파일이 생성되었으면 jest 프레임워크를 설치한다.

npm install jest --save-dev

 

mocha라는 테스트 프레임워크도 있지만 해당 프레임워크는 직접 테스트 환경을 구성할 수 있는 유연성이 있다는 강점이 오히려 초기에 테스트 환경을 설정할 때 약간 복잡하게 느껴질 수 있을 거 같다고 생각해 상대적으로 간편하게 느껴지는 jest를 선택하였다.

test 명령어 추가하기

package.json에서 터미널에서 테스트를 실행할 때 입력한 명령어를 지정할 수 있다.

"scripts" : {
  "test" : "jest"
}

ES6문법 변환을 위한 babel설치

추가적으로 ES6이상의 문법을 사용하려면 babel을 설치한다.

npm install @babel/core @babel/preset-env --save-dev

 

package.json 파일 안에 "babel": { "presets": ["@babel/preset-env"] } 스크립트를 추가한다.
아래는 추가된 예시이다. ( devDependencies키 아래에 추가해주기 )

방법 1

  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "jest": "^29.7.0"
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  }
}

방법 2

따로 프로젝트 루트에 .bablerc파일을 생성하고 설정해도 상관은 없다. .bablerc 파일에 추가할 경우 파일 안에 아래 스크립트만 추가해준다.

{
    "presets": [
      "@babel/preset-env"
    ]
  }

(선택) Lint 도구 설치하기

이미 lint 도구를 사용 중이거나 혼자서 관리하는 프로젝트라면 linting 도구를 설치하지 않아도 괜찮지만, 함께하는 프로젝트이거나 코드의 일관성을 유지하고 깃에 커밋하기전 오류를 사전에 발견하기 위해 ESLint를 설치하는 것도 좋다.

npx eslint --init 명령어를 입력한 후 터미널에 나오는 어떤 프로젝트에 맞출 것인지에 대한 옵션을 선택할 수 있는데 각 본인의 프로젝트에 맞춰 옵션을 선택하면 된다.

npm install eslint --save-dev // 파일 설치
npx eslint --init // ESLint 파일 생성

 

Jest로 테스트 실행해보기

Jest는 일반적으로 __tests__ 폴더나 .test.js, .spec.js 확장자를 가진 파일을 자동으로 인식한다.

// 아래 위치에 sum.js 파일이 있다고 가정함.
import sum from "../sum";

test('1 더하기 2는 3이 나오는 것을 테스트합니다.', () => {
  expect(sum(1,2)).toBe(3);
});

 

테스트 실행은 package.json에 작성한 명령어를 터미널에 입력하면 된다.

npm test

 

실행 시 터미널에 pass 글자가 잘 나오면 성공🏰

 

Node.js로 consol 실행하기

node js로 바로 실행하려면 Node <파일명>을 터미널에 입력해도 되지만 ES6문법으로 작성된 파일은 babel/node를 설치를 통해 바로 ES6문법으로 컴파일에 실행할 수 있다.

 npm install --save-dev @babel/node

 

package.json에 실행문 추가하기

 "scripts": {
    "test": "jest",
    "start": "babel-node index.js"
  },

 

npm start를 통해 console을 실행할 수 있다.