[Basic] Frontend의 이해 - Build Tools

1. Linters and Formatters

• 일관성 있는 코드 스타일을 유지하고 버그를 사전에 찾아내어 코드 품질을 향상시키는 데 큰 도움을 줌
• Linter : 소스 코드를 분석하여 일반적인 프로그래밍 오류, 버그, 스타일 가이드 준수 등과 같은 잠재적인 문제를 식별하고 코드의 구조, 문법, 네이밍 규칙 등을 검사하여 개발자에게 문제를 알려줌
  (ESLint - JavaScript 코드의 품질을 검사하고 개선하는 데 사용되는 오픈 소스 Linter 도구)
• Formatter : 다양한 프로젝트에서 들여쓰기, 줄 바꿈, 공백 사용 등과 같은 스타일 요소 코드의 형식을 일관된 코드 스타일로 유지할 수 있도록 도와주는 도구
  (Prettier - 주로 JavaScript, CSS, HTML 등의 언어를 지원하며 팀의 협업을 간소화)

 

2. Task Runners

• 개발작업 자동화를 위해 사용하는 도구
• 프로젝트의 빌드, 배포, 테스트, 코드 최적화 등과 같은 작업을 자동화하여 개발 생산성을 향상
• 다른 개발자들과 작업 환경을 공유할 때 일관성을 유지하고 협업을 원활하게 진행할 수 있도록 함
• Gulp, Grunt, npm script 등을 주로 사용

 

3. Module Bundler

• 웹 애플리케이션에서 모듈 시스템을 사용하여 작성된 여러 개의 모듈 파일들을 단일 번들 파일로 결합하는 도구
• 모듈 시스템을 사용하는 웹 애플리케이션 개발에 필수적인 도구로, 코드의 구조화와 성능 개선을 도모
• 모듈 시스템은 코드를 재사용 가능한 조각으로 분리하여 개발을 용이하게 하지만 웹 브라우저는 기본적으로 모듈 시스템을 지원하지 않기 때문에, 모듈화된 코드를 실행하기 위해서는 모듈 파일들을 로딩하고 의존성을 해결해야 함
• Module Bundler는 개별 모듈 파일들을 분석하여 의존성 그래프를 생성하고, 이를 기반으로 모듈 간의 의존성을 해결
  • Webpack
    - JavaScript 기반의 웹 애플리케이션 개발에서 널리 사용되는 도구
    - JavaScript, CSS, 이미지 등과 같은 리소스들을 모듈로 간주하고, 이를 의존성 그래프로 관리하여 묶어줌
    - 로더(Loaders)를 통해 다양한 파일 형식을 처리(Babel 로더를 사용하여 ES6+ 코드를 ES5로 변환하는 등)