프론트엔드 개발환경의 이해 (중) - 바벨, 린트

 

참고 강좌 - [김정환] 프론트엔드 개발환경 이해

www.youtube.com/playlist?list=PL9mhQYIlKEhcQStzo0dQiBThjwU8TroCt

토크ON 68차. 프론트엔드 개발환경 이해 | T아카데미

---

1. 바벨 Babel

 - 크로스 브라우징

 - ES6, 타입스크립트, JSX 등이 브라우저에 상관없이 동작하도록 변환해(트랜스파일) 호환성을 맞춰줌 

 - 파싱(Parsing), 변환(Transforming), 출력(Printing) 중 파싱과 출력 담당

 

1) 바벨 설치

npm install -D @babel/core  @babel/cli

 

2) 바벨 사용

npx babel [파일명]

 

3) 결과

변환을 거치지 않아 기존의 ES6 코드가 그대로 출력됨

 

변환 작업을 하는 플러그인이 필요!

※ 웹팩의 플러그인과 별개

 

---

2. 바벨과 플러그인

 

1) 플러그인의 기본 동작 원리

 - 플러그인 파일을 생성, 원하는 변환 작업을 정의한 뒤 다음과 같이 바벨 옵션으로 사용

// npmx babel --plugins [플러그인 파일] [변환할 파일]
npx babel --plugins ./myplugin.js ./app.js 


// 또는 npmx babel [변환할 파일] --plugins [플러그인 파일] 
npx babel ./app.js --plugins ./myplugin.js  

 또는 외부 플러그인 설치 후 바벨 옵션으로 사용

( 플러그인 종류 babeljs.io/docs/en/plugins )

// 1. block-scoping 플러그인 & arrow-function 플러그인 설치
npm install -D @babel/plugin-transform-block-scoping
npm install -D @babel/plugin-transform-arrow-functions


// 2. 사용 (줄바꿈 없이 한줄로)
npx babel app.js 
--plugins @babel/plugin-transform-block-scoping  
--plugins @babel/plugin-transform-arrow-functions

 

2) 바벨 설정파일 

 - 플러그인을 커맨드라인에 하나하나 지정하는건 비효율적이므로 babel.config.js 파일을 만들어 사용

// babel.config.js (프로젝트 최상단에 파일 생성)

module.exports = {
    plugins: [
        "@babel/plugin-transform-block-scoping",
        "@babel/plugin-transform-arrow-functions",
    ],
}

따로 플러그인 옵션을 주지 않고 npx babel [파일명] 만 해줘도 설정파일에 넣어놓은 플러그인이 매핑됨

 

---

3. 바벨과 프리셋

 - 목적에 맞게 여러가지 플러그인을 세트로 모아놓은 것

 - 바벨 설정파일에 플러그인 대신 프리셋 파일을 매핑

 - 대표적인 프리셋 종류

• preset-env  : ES6 문법 변환
• preset-flow : flow 변환
• preset-react : react 변환
• preset-typescript : typescript 변환

1) evn 프리셋 설치 및 사용

preset-env 설치

npm install -D @babel/preset-env

 바벨 설정파일 변경 - presets에 설치한 env 프리셋 매핑

// babel.config.js (plugins 대신 presets 매핑)

module.exports = {
  presets: ["@babel/preset-env"],
}

따로 옵션을 주지 않고 npx babel [파일명] 만 해도 설정파일에 넣어놓은 프리셋에 포함된 플러그인이 모두 적용됨

 

2) 타겟 브라우저

 - 브라우저마다 프리셋을 사용 할지말지 설정가능 ex) 크롬 브라우저는 ES6 문법을 따로 변환해줄 필요x

 - target 옵션에 브라우저 지정

// babel.config.js:

module.exports = {
    presets: [
        "@babel/preset-env",
        {
            targets: // 프로그램을 제공할 타겟 브라우저로 크롬과 익스플로러를 설정
            {
                chrome: "79",
                ie: "11"
            }
        }
    ]
}

 

3) 폴리필

 - 바벨 플러그인이 변환하지 못하는 코드

 - Promise 등 대체 불가능한 코드는 아예 다른 방식으로 구현함

// babel.config.js:

module.exports = {
    presets: [
        [
            "@babel/preset-env",
            {
                targets: // 프로그램을 제공할 타겟 브라우저로 크롬과 익스플로러를 설정
                {
                    chrome: "79",
                    ie: "11"
                },
                useBuiltIns: "usage",
                corejs: { // 폴리필 버전 지정
                    version: 2
                }
            },
        ]
    ]
}

실행 결과

필요한 corejs 모듈을 알아서 import해와서 사용 가능하게 함

 

---

4. 바벨과 웹팩 통합

 - 현실에서는 바벨을 따로 사용하기보다는 웹팩으로 통합해 사용  

 - 모든 js 파일에 바벨 처리를 해주는 babel-loader 를 매핑해 사용

 - 엄밀히 말하자면 바벨은 웹팩과 별개이다! 사용에 용이하게 하기위해 웹팩에서 바벨로더로 사용하는 것 뿐!

 

1) 바벨로더 설치

npm install -D babel-loader

 

2) 웹팩 설정파일에 로더 추가

// webpack.config.js

module.exports = {
    mode: "production",
    entry: {
        main: "./src/app.js"
    },
    output: {
        filename: "[name].js",
        path: path.resolve("./dist")
    },
    module: {
        rules: [{ // js 파일에 바벨 로더 추가
            test: /\.js$/,
            exclude : /node_modules/, //노드모듈 폴더에 있는 파일들은 제외
            loader: "babel-loader",
        }]
    },
    plugins: [ ``` ]
}

 

3) npm run build

 터미널 명령어 npm run build 입력

 → package.json의 script를 보고 webpack 명령어 동작

 → webpack.config.js에 지정한 설정 적용

 → module의 rule에서  js파일은 babel-loader가 동작 

 → babel.config.js에 지정한 설정 적용 ( babel preset-env와 폴리필 )

 → 바벨작업 완료

 → 웹팩으로 빌드 끝

 

---

5. 린트

 - 코드의 오류, 일관성, 스타일 등을 점검

 

1) ESLint

 - 포맷팅 : 일관된 코드 스타일 유지, 클린코드, 가독성 향상, 협업에 필수적 

 - 코드 품질 : 무분별한 변수선언, 글로벌 스코프 오염 등 잠재적 오류나 버그 예방 및 코드 성능 향상

 - ESLint 규칙 가이드 eslint.org/docs/rules/

 

규칙 셋 사용하기 : 프로젝트 최상단에 eslint 설정파일 .eslintrc.js 에 사용할 규칙세트 추가

// .eslintrc.js
module.exports = {
  extends: [
    "eslint:recommended", // 1. esLint 에서 추천하는 기본셋
    "airbnb-base/legacy"  // 2. 에어BnB스타일 - 현장에서 많이들 사용
    "standard"            // 3. 자바스크립트 스탠다드 스타일
  ],
}

※ 에어bnb스타일을 많이들 쓴다고 함

 

2) Prettier 

 - 코드 스타일 포맷팅에 집중

 - 코드 품질관련 기능은 하지 않음

 - vscode 확장 프로그램으로 설치해서 사용가능

 

3) 통합

- ESLint 와 Prettier 통합

- 다음 게시글의 2. 스타일 가이드 적용 부문 참고

kline1103.tistory.com/74?category=426769

[워다타 프로젝트] 1. 프로젝트 세팅

 

 

4) 자동화

 - 특정 시점에 자동으로 코드 검사를 수행하게 함

 - git 훅에 집어넣거나(커밋 전 자동으로 코드검사), 실시간으로 감지하게 하면 편리

 

자동화 사용하기 1. 깃 훅과 연동

 

① husky(깃 훅을 관리할 수 있는 외부 라이브러리) 다운

npm install -D husky

 

② lint-staged(변경된 파일만 린트를 수행하는 라이브러리)다운

npm install -D lint-staged

 

③ package.json의 lint-staged 설정 변경

{
  "lint-staged": {
    "*.js": "eslint --fix"
  }
}

 

④ package.json의 husky 설정에 lint-staged 추가 (pre-commit 시점) 

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

 

자동화 사용하기 2. 실시간 감지

vscode 확장 프로그램

ESLint 익스텐션 설치

vscode 설정에서 실시간 감지 기능 및 저장 시 자동 변환 활성화