💬 Answer

🌏 프런트엔드 빌드 시스템

👉 바벨이란?

• 모든 브라우저가 최신 자바스크립트 문법을 이해하지 못해서, babel이 브라우저가 이해할 수 있도록 변환해 줍니다.
• 즉, 호환성을 위해 코드를 다시 작성할 필요가 없습니다.
• 파싱(Parsing) - 변환(Transforming) - 출력(Printing)단계로 빌드를 진행.
  코드를 읽고, 추상 구문트리로 변환하고, 추상 구문 트리를 변경, 그리고 변경된 결과물을 출력한다.
• 바벨은 파싱과 출력을 담당하고, 플러그인이 변환을 담당.
• 바벨 플러그인(plugin)은 바벨이 어떤 코드를 어떻게 변환할 지에 대한 규칙을 나타냄.

👉 폴리필이란?

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

👉 Node.js이란?

• Javascript 런타임이다.
• 런타임이란 프로그래밍 언어가 구동되는 환경
• REPL(Read, Eval, Print, Loop)을 통해서 런타임을 제공한다.
  Read: 유저의 입력 값을 받아서 메모리에 저장
  Eval: 입력 값의 평가, 실행
  Print: Eval로 인해 반환된 값을 출력
  Loop: 1~3을 반복.
• REPL보다는 따로 스크립트 파일을 만들어서 사용.

👉 NPM이란?

• Node Package Manager
• Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램
• package.json파일에서 설치된 목록 및 버전확인이 가능.

👉 ESLint란?

• JavaScript코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구.
• 예를 들어 end-tag를 만들지 않았다면 end-tag를 추가하라는 메세지가 뜬다.
• 즉, 문법에 맞게 코드를 짤 수 있도록 도움말 역할을 해준다.

👉 Prettier란?

• VSCode Extension중 하나.
• 정해진 규칙에 따라 자동으로 코드 스타일을 정리 해주는 도구.
• 공백을 4칸으로 설정했다면 tab누를 시 4칸씩 이동함.

👉 웹 태스크 매니저란?

• 코드 수정뒤 저장하고, 브라우저에서 새로고침을 눌러야 변경된 내용을 볼 수 있다.
• 웹 서비스를 개발하고 배포시 html, css, js등 파일을 압축하거나 변환해야 했다.
  => 이러한 일을 자동화 해주는 도구
• Grunt와 Gulp같은 도구들.

📘 참고

https://devowen.com/293
https://perfectacle.github.io/2017/06/18/what-is-node-js/
https://m.blog.naver.com/magnking/220961896609
https://velog.io/@bab_bury/React-ESLint-Prettier-설치-및-설정
https://joshua1988.github.io/webpack-guide/motivation/why-webpack.html#파일-단위의-자바스크립트-모듈-관리