Section 21: JavaScript Tooling - Beyond Basic Projects

The goals

💪🏻What & Why?

✌🏻Example Setup

 

 

ESLint

 

ESLint 구성하기

ESLint는 다양한 옵션을 제공하므로 요구사항에 정확히 맞게 조정할 수 있습니다.

처음부터 자신만의 규칙을 설정할 수 있지만(강의에서 배우기 시작한 작업이죠), 사전 설정과 미리 구성된 규칙 집합을 사용할 수도 있습니다.

.eslintrc.json에서 구성할 수 있는 모든 옵션을 완전히 이해하려면 공식 문서의 이 부분이 도움이 될 겁니다.
 https://eslint.org/docs/user-guide/configuring

사용 가능한 모든 규칙과 그 의미를 알아보려면 공식 문서의 이 부분을 살펴보세요. 
https://eslint.org/docs/rules/

사전 설정을 사용하고 싶으신가요? 이 링크를 확인해 보세요.
https://www.npmjs.com/search?q=eslint-config (결과 중 하나를 클릭하고 거기에 제공된 지침을 따르면 됩니다)

이 문서도 참고해 보세요. 
https://eslint.org/docs/user-guide/getting-started

 

 

Webpack

 

보너스: 다수의 엔트리 포인트

예제 프로젝트에는 하나의 기본 엔트리 포인트 app.js만 있습니다.

여러 HTML 페이지가 있는 대형 프로젝트에서는 다수의 페이지(HTML 파일)에 대해 구축할 수 있는 다양한 스크립트가 있을 수 있습니다. 따라서 두 개 이상의 번들을 구축하기 원하기 때문에 하나 이상의 엔트리 포인트가 필요할 수 있습니다(즉 모든 HTML 페이지가 동일한 스크립트를 사용하는 것은 아닌 경우).

이는 Webpack으로 쉽게 구성할 수 있습니다.

아래의 코드 대신

entry: './src/app.js'

아래의 코드를 사용하세요

entry: {
   welcome: './src/welcome-page/welcome.js',
   about: './src/about-page/about.js',
   // 기타 등등
}

이제 Webpack은 이러한 모든 엔트리 포인트를 조회하고 엔트리 포인트당 하나의 번들을 생성합니다. 그러면 각 HTML 파일에서 이러한 번들에 연결할 수 있습니다.

대부분의 프로젝트에 적합한 간단한 규칙은 다음과 같습니다.

일반적으로 HTML 파일당 하나의 스크립트가 있으므로 HTML 파일당 하나의 엔트리 포인트 가지기.

물론 여러 HTML 파일에서 스크립트를 공유하거나 스크립트가 필요하지 않은 파일이 있는 경우 이 규칙을 따르지 않아도 됩니다.

다음 두 자료를 통해 여러 엔트리 포인트에 대해 자세히 알아볼 수 있습니다.

• 코드 분할 (즉 둘 이상의 번들 생성): https://webpack.js.org/guides/code-splitting/
• 엔트리 포인트 구성: https://webpack.js.org/concepts/#entry

그리고 공식 Webpack 문서를 확인하여 자세히 확인해 보세요. https://webpack.js.org/guides/

 

 

Sources

https://eslint.org/

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

https://webpack.js.org/

webpack