Front-end 초기 환결성정 툴 모음

---

📍WebPack (웹팩)

 

웹팩이란 자바스크립트 애플리케이션을 위한 정적 모듈 번들러이다.

 

알아듣기 어려운데 쉽게 말하자면 Application을 구성하고 있는 모든 자원들 즉, HTML, CSS, 이미지, 폰트등을 모듈로 보고 이를 하나의 의존성 그래프로 결합하여 번들링하는 방식으로 이루어 진다.

 

웹팩은 여러개의 구성 옵선을 제공하여 개발자가 필요에 따라 커스터마이징 할 수 있다.

webpack.config.js 파일에 정의해 사용하며 코드의 관리와 성능을 향상시키는데 매우 유용하다.

 

 

 

📍Pritter

 

프리티어는 코드의 일관성과 가독성을 향상시켜주는 도구로, pritterrc.js 등 그 안에서 정의하여 사용할 수 있다.

 

🧑‍💻 설치방법

1. 먼저 Visual Studio Code를 실행합니다.
2. 왼쪽 사이드바에서 "확장"을 클릭합니다.
3. 검색 창에서 "prettier"를 입력하여, 검색 결과에서 "Prettier - Code formatter"를 찾습니다.
4. "Prettier - Code formatter"를 클릭하여 설치 버튼을 누릅니다.
5. 설치가 완료되면, VS Code의 설정 파일(settings.json)을 엽니다. (Ctrl + ,)
6. settings.json 파일에서 "editor.defaultFormatter" 항목을 찾습니다.
7. "editor.defaultFormatter" 항목의 값을 **"esbenp.prettier-vscode"**로 변경합니다.

 

마지막으로 settings.json 에서 prettier 항목을 추가하고 사용자 정의 설정을 입력하면 된다.

 

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.tabWidth": 4,
  "prettier.trailingComma": "all",
  "prettier.singleQuote": true
}

 

 

 

📍Babel

바벨은 ES6 이상의 자바스크립트 코드를 ES5이하의 호환 가능한 코드로 변환해준다. 즉 바벨을 사용하면 최신 자바스크립트 문법을 사용하더라도 대부분의 브라우저에서 실행 가능하게 된다.

 

🧑‍💻 설치방법

1. 바벨 설치하기

바벨을 사용하기 위해서는 먼저 바벨 패키지를 설치해야 합니다. **npm**을 사용하여 다음과 같이 설치할 수 있습니다.

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

 

  2. 바벨설정하기

바벨을 사용하기 위해서는 .babelrc 또는 babel.config.js 파일을 생성하여 바벨 설정을 정의해야 합니다. babel-preset-env 프리셋을 사용하여, 변환하고자 하는 ECMAScript 버전을 설정할 수 있습니다. 예를 들어, .babelrc 파일에 다음과 같은 설정을 추가할 수 있습니다.

jsonCopy code
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["last 2 versions", "ie >= 11"]
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

위 설정에서는, "browsers": ["last 2 versions", "ie >= 11"] 옵션을 통해, 최신 브라우저의 마지막 두 버전과 IE11 버전 이상을 지원하도록 설정하고 있습니다. 또한, "useBuiltIns": "usage" 옵션을 사용하여, 코드에서 필요한 폴리필(polyfill)만 포함하도록 설정하고, corejs 버전을 **3**으로 설정하였습니다.

 

  3.  웹팩에서 바벨 설정하기

바벨을 웹팩과 함께 사용하기 위해서는 웹팩 설정 파일(webpack.config.js)에서 다음과 같이 module.rules 항목을 추가해야 합니다.

jsCopy code
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            cacheDirectory: true,
          },
        },
      },
    ],
  },
  // ...
};

 

 

 

 

📍ESlint

eslint는 자바스크립트 코드에서 문제를 찾고 예방하기 위한 도구로, 코드, 오류, 버그등 다양한 종류의 문제를 찾아내어 일관성있는 코드 스타일을 유지할 수 있도록 도와주는 정적분석 툴이다.

 

🧑‍💻 설치방법

1. int --save-dev 위 명령어를 실행하면 package.json 파일과 node_modules 폴더가 생성됩니다.
2. ESLint 설정하기
   • ESLint 설정 파일을 생성하고 필요한 규칙을 추가합니다.
   • csharpCopy code npx eslint --init
   • 위 명령어를 실행하면 ESLint 설정 파일을 생성할 수 있는 대화형 프롬프트가 나타납니다. 개발자는 이 프롬프트를 따라가면서 프로젝트에 적합한 ESLint 설정 파일을 생성할 수 있습니다.
3. ESLint 실행하기
   • ESLint를 실행하여 프로젝트의 자바스크립트 파일을 검사합니다.
   • cssCopy code npx eslint [파일 또는 폴더 경로]
   • 위 명령어를 실행하면 지정한 파일 또는 폴더 경로에 있는 자바스크립트 파일을 검사하고, 검사 결과를 출력합니다.
4. 에디터에서 ESLint 사용하기
   • 개발자가 사용하는 에디터에서 ESLint 플러그인을 설치하면, 자바스크립트 파일 작성 중에 ESLint 검사 결과를 실시간으로 확인할 수 있습니다.