Spring Boot+Babel, Prettier, ESLint(Airbnb) 세팅하기

HYE-ON·2020년 7월 17일

JavaScript Springboot vscode

Spring Boot 프로젝트에서 Babel7, Prettier, ESLint 환경을 세팅하고 사용해봅시다 ( •̀ ω •́ )✧

개발 환경 💻

Java 11
Java SDK 13
Spring Boot 2.3.1
npm 6.12.0

사용 툴

IntelliJ
VSCode

본격적으로 프로젝트 세팅과 환경 세팅을 천천히! 하나하나! 진행해봅시다! 🙋‍♀️

1. Spring Boot 프로젝트 생성하기

IntelliJ에서 File -> New -> Project를 한 후 왼쪽 메뉴에서 Spring Initializr를 선택해 SDK 버전과 Artifact, Java Version 등을 진행하려는 프로젝트에 맞게 선택한 후 프로젝트를 생성합니다.
프로젝트가 생성되고 난 후 /src/main/java/{package} 아래에 controller 폴더를 생성한 후 IndexController.java 파일을 생성합니다.
루트 URL에 파일 하나를 매핑해서 타임리프와 섞어 사용할 수 있도록 확인해보려고 합니다. 아래와 같이 코드를 작성해주시고 Import가 필요하다는 오류가 뜨면 Import 해주세요.

@Controller
public class IndexController {

    @GetMapping("/")
    public String index(Model model) {
        model.addAttribute("msg", "hello");
        return "index";
    }
}

백엔드 코드는 끝났습니다! 👏👏👏 이제 /src/main/resources/templates 안에 index.html 파일을 생성하고 아래와 같이 코드를 적어주세요.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spring Boot + Babel</title>
</head>
<body>
    <h1 th:text="${msg}"></h1>
</body>
</html>

이렇게 작성하고 IntelliJ의 Run을 한 후 localhost:8080 (만약 포트를 바꾸셨다면 그 포트로) 접속하면 IndexController에서 model에 담아 보낸 msg가 h1 태그 안에서 보이게 됩니다.

2. F/E 환경 세팅하기

30%정도 완성되었어요! 이제 본격적으로 Babel, Prettier, ESLint 등을 세팅해봅시다. 🏃‍♀️

npm init

프로젝트가 열려있는 IntelliJ나 VSCode에서 Terminal 혹은 cmd를 켜고 npm init을 입력합니다. 쭉 내려오는 질문들에 적절한 답을 적고 (따로 적을 필요가 없다면 쭉 엔터를 누르다가 마지막에 yes를 입력하시면 됩니다.)
프로젝트의 루트 (앞으로 그냥 루트라고만 부르겠습니다!) package.json이 생성되었는지 확인합니다.

Babel 설치

Terminal이나 cmd에 npm i --save-dev @babel/core @babel/cli @babel/preset-env 를 입력하고 엔터를 쳐줍니다.
npm으로 @babel/core, @babel/cli, @babel/preset-env를 설치한다는 뜻이며 --save-dev라는 옵션은 package.json 내에 빌드시 포함되지 않는 플러그인이 들어가는 devDependencies 객체 안에 저장되게 한다는 뜻입니다.

제가 설치한 Babel은 version 7 이상입니다. 버전이 다를 경우 이후 진행되는 세팅 과정이 다를 수 있으니 버전 확인 꼭 해주세요
루트에 .babelrc 파일을 생성합니다. 맨 앞에 마침표를 까먹으시면 안돼요! babel 설정파일이라는 뜻입니다.
.babelrc 파일 안에 presets를 세팅해줍니다. targets 옵션은 지원하는 브라우저를 세팅해줍니다. 더 자세한 브라우저 리스트는 여기를 참고하세요.

{
  "presets": [
    [
      "@babel/preset-env",
      {"targets": "> 5%, Firefox > 1, last 2 versions"}
    ]
  ]
}

package.json으로 가서 scripts 안에 있는 코드를 지우고 아래와 같이 바꿔줍니다.

"babel": "babel src/main/resources/static/es6 -d src/main/resources/static -w"

분석을 좀 해볼까요?

"babel"은 npm run 뒤에 올 명령어입니다. build를 써도 되고 wingardium_leviosa를 써도 됩니다. 편한대로 사용하세요.
객체의 value쪽에 있는 "babel"은 트랜스파일링하는 babel 자체의 명령어입니다.
src/main/resources/static/es6는 트랜스파일링 전 ES6 js 파일이 들어있는 폴더의 위치입니다.
-d 옵션으로 파일로 ouput을 지정하고
트랜스파일링한 파일을 src/main/resources/static에 저장합니다
마지막으로 매번 npm run babel을 하기 귀찮으니 -w 옵션으로 파일이 save될 때마다 npm run babel을 실행시킵니다.

Babel 세팅이 끝났습니다! 이제 Prettier로 넘어가볼게요 🚗

Prettier 설치

Terminal이나 cmd에 npm i --save-dev -save-exact prettier 를 입력합니다. --save-exact 옵션을 적용하면 package.json에서 version에 ^가 없이 적히게 되는데 이는 자동 버전 업데이트로 인한 오류를 방지하기 위해 버전을 고정시키는 옵션입니다.
루트에 .prettierrc 파일을 생성합니다. Prettier 옵션은 여기를 참고해주세요. 저는 이렇게 적어두었습니다.

{
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true
}

간단하죠? Prettier 설정도 끝났습니다. 이제 ESLint를 설치해볼게요

ESLint 설치

npm i --save-dev eslint로 eslint를 설치합니다.
eslint --init로 eslint 설정파일을 생성해봅시다. 아래로 나오는 질문들에는 방향키로 선택한 후 엔터를 누르면 됩니다. 제가 선택한 답변은 이탤릭체로 적어둘게요. 각자 맞는 세팅에 따라 선택해주시되, 첫번째 질문은 2번을 선택해주세요

How would you like to use ESLint? To check syntax, find problems
What type of modules does your project use? Javascript modules
Which framework does your project use? None of these
Where does yoru code run? Browser
How would you like to define a style for your project? Use a popular style guide
Which style guide do you want to follow? Airbnb
What format do you want your config file to be in? JSON
여기까지 대답하면 아마 airbnb 관련된 것들을 설치할 것이냐는 질문이 나올겁니다. yes를 입력해주세요. 설치가 다 끝났다면 package.json에 가서 아래 사진에 있는 것들이 다 있는지 확인해주세요.

우리는 babel과 eslint를 함께 사용할 예정이기 때문에 parser를 babel-eslint로 설정해야합니다. npm i --save-dev babel-eslint를 입력합니다.
eslint와 prettier의 속성이 겹치며 오류가 발생하는 케이스가 있어 이를 방지하기 위해 npm i --save-dev eslint-config-prettier로 eslint-config-prettier를 설치해줍니다.
이제 npm으로 하는 설치는 다 끝났습니다! 설정 파일들에 값을 넣어주기만 하면 끝나요!
루트에 있는 .eslintrc.json파일에 있는 extends를 아래와 같이 바꿔줍니다.

"extends" : ["airbnb-base", "plugin:prettier/recommended"]

또 "parser": "babel-eslint",를 제일 외부에 있는 객체 바로 아래에 추가해줍니다.
rules에는 ESLint 규칙이, ignorePattenrs에는 ESLint를 돌리지 않을 파일들을 설정할 수 있습니다. 전 Airbnb 규칙을 쓰면서 약간의 커스텀을 하고 트랜스파일링된 ES5 파일은 검사하고싶지 않아 아래와 같이 설정파일을 작성하였습니다.

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": ["airbnb-base", "plugin:prettier/recommended"],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "ignorePatterns": ["/src/main/resources/static/*.js"],
  "rules": {
    "no-var": "warn",
    "no-unused-vars": "warn",
    "prefer-const": "off",
    "prettier/prettier": [
      "warn",
      {
        "endOfLine": "auto"
      }
    ]
  }
}

VSCode의 settings.json을 열고 아래와 같이 eslint 옵션을 추가해줍니다.

{
  "eslint.validate": ["javascript"], // eslint를 적용할 파일 타입
  "editor.defaultFormatter": "esbenp.prettier-vscode", // fomatter (우리는 Prettier를 사용합니다)
  "editor.formatOnSave": true, // save마다 포맷팅을 시킬 것인지
}

모든 설치와 세팅이 끝났습니다! 🙌 이제 코드를 돌려볼까요?
index.js를 es6 폴더 안에 생성하고 아래와 같이 작성했습니다.

Terminal에 npm run babel을 한 후 save를 한 후 ES5로 트랜스파일링한 JS 파일을 확인해보면 이렇게 바뀐 것을 볼 수 있습니다.