프론트엔드 빌드 시스템에 대해

👉 바벨이란?

• 모든 브라우저가 최신 자바스크립트 문법을 이해하지 못해서 바벨이 브라우저가 이해할 수 있도록 변환해준다
• 파싱 - 변환 - 출력 단계로 빌드를 진행한다.
• 코드를 읽고 추상 구문트리로 변환, 변경하여 나온 결과물을 출력한다.
• 바벨은 파싱, 출력을 담당하고, 변환은 플러그인이 담당한다.
• 바벨 플러그인은 바벨이 어떤 코드를 어떻게 변환할지에 대한 규칙을 나타낸다.

👉 폴리필이란?

• 최신 ECMAScript 환경을 만들기 위해 코드가 실행되는 환경에 존재하는 않는 빌트인, 메서드 등을 추가하는 역할
• 바벨을 ES6+를 ES5로 변환할수있는것만 변환하는데 Promise같이 변환할 수 없는 경우 에러가 발생한다. 이런 경우 폴리필을 통해 해결할 수 있다.

👉 Node.js이란?

• 자바스크립트가 구동되는 환경이다.
• REPL을 통해 런타임을 제공한다
• Read : 입력 값을 받아 메모리에 저장한다.
• Eval : 입력 값을 실행한다.
• Print : Eval로 인해 반환된 값을 출력한다.
• Loop : 반복한다.
• REPL 보다는 따로 스크립트 파일을 만들어 사용한다.

👉 NPM이란?

• Node Package Manager
• NodeJs로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램

👉 ESLint란?

• 자바스크립트 코드에서 발견된 문제패턴을 식별하기 위한 정적 코드 분석도구
• 문법에 맞게 코딩할 수 있도록 도와준다.

👉 Prettier란?

• VSC Extension이다
• 정해진 규칙에 따라 코드 스타일을 자동으로 정리해주는 도구

👉 웹 태스크 매니저란?

코드가 수정된 뒤 저장하고 브라우저를 새 로고 침해야 변경된 내용을 확인할 수 있는데 이러한 일을 자동화해주는 도구