프론트엔드 기본 지식

바벨(Babel)

• 바벨은 최신 JavaScript(ES6+) 코드를 이전 버전의 JavaScript로 변환(트랜스파일)하는 도구입니다. 이를 통해 개발자는 최신 JavaScript 기능을 사용하여 코드를 작성할 수 있으며, 바벨이 코드를 변환하여 구형 브라우저에서도 동작하도록 합니다.

폴리필(Polyfill)

• 폴리필은 웹 개발에서 브라우저가 기본적으로 지원하지 않는 최신 API나 기능을 사용할 수 있게 해주는 코드 조각입니다. 폴리필을 사용함으로써 개발자는 구형 브라우저에서도 최신 기능을 사용할 수 있게 됩니다.

Node.js

• Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. 이를 통해 개발자는 클라이언트 측(브라우저)뿐만 아니라 서버 측에서도 JavaScript를 실행할 수 있습니다. Node.js는 비동기 이벤트 기반 아키텍처를 사용하여 효율적이고 확장 가능한 네트워크 애플리케이션을 개발하는 데 적합합니다.

NPM(Node Package Manager)

• NPM은 Node.js의 패키지 매니저로, JavaScript 라이브러리와 애플리케이션을 공유하고 배포할 수 있는 플랫폼입니다. NPM을 통해 개발자는 필요한 패키지를 손쉽게 설치하고 관리할 수 있습니다.

ESLint

• ESLint는 JavaScript 코드에서 발견된 문제를 식별하고 보고하는 정적 코드 분석 도구입니다. 개발자는 ESLint를 사용하여 코드 스타일, 프로그래밍 오류, 버그 패턴 등을 검사하고 일관된 코드 품질을 유지할 수 있습니다.

Prettier

• Prettier는 코드 포맷터로, 코드를 일관된 스타일로 자동으로 정리해주는 도구입니다. Prettier를 사용하면 코드 작성 스타일에 관한 논쟁을 줄이고, 코드 리뷰 과정을 간소화할 수 있습니다.

웹 태스크 매니저

• 웹 태스크 매니저는 프런트엔드 개발 과정에서 반복되는 작업들을 자동화하기 위한 도구입니다. 예를 들어, Grunt와 Gulp 같은 웹 태스크 매니저는 코드의 미니파이(minify), 컴파일, 단위 테스트 실행, 라이브 리로딩 등을 자동화하여 개발 과정을 더 효율적으로 만들어줍니다.

웹팩(Webpack)

웹팩은 자바스크립트(JS) 애플리케이션을 위한 정적 모듈 번들러입니다. 웹팩은 프로젝트의 모든 종속성을 매핑하는 종속성 그래프를 생성한 다음, 하나 이상의 번들로 결합합니다. 이러한 번들은 브라우저에서 사용할 수 있도록 최적화되어 있습니다. 웹팩은 JS 파일뿐만 아니라 CSS, 이미지, 폰트 등과 같은 다양한 애셋(자원)을 처리할 수 있습니다. 이를 위해 로더(loader)와 플러그인(plugin) 시스템을 사용하여, 다양한 타입의 파일을 변환하고, 번들링 과정을 맞춤 설정할 수 있습니다.

모듈 번들러(Module Bundler)

모듈 번들러는 웹 애플리케이션을 구성하는 자원(모듈)을 모두 찾아서 하나의 파일(또는 몇 개의 파일)로 결합하는 도구입니다. 이 과정에서 번들러는 자바스크립트 모듈을 해석하고, 필요한 처리(예: 트랜스파일링, 미니파이, 코드 분할)를 수행한 다음, 브라우저에서 직접 사용할 수 있는 포맷으로 패키징합니다.

모듈 번들러의 주요 장점은 다음과 같습니다:

• 효율성: 여러 파일을 하나로 합쳐 네트워크 요청 수를 줄이고, 파일 크기를 최적화하여 로딩 시간을 단축합니다.
• 모듈성: 코드를 모듈로 나누어 개발할 수 있게 해주며, 코드의 재사용성과 유지 보수성을 향상시킵니다.
• 호환성: 다양한 브라우저 환경에서 동일하게 동작할 수 있도록 코드를 변환(예: ES6+를 ES5로)하고, 글로벌 변수 충돌을 방지합니다.
• 맞춤화: 로더와 플러그인을 통해 이미지 최적화, CSS 전처리, 코드 미니파이 등 다양한 작업을 자동화합니다.