[FE] 빌드시스템 (Node.js / NPM / Prettier / Babel / polyfill / ESLint / Prettier)

빌드란?

소스코드를 실행 가능한 프로그램을 만드는 과정.

Node.js

Node.js는 브라우저 밖에서도 자바스크립트를 실행할 수 있는 환경을 의미한다. JavaScript 엔진(V8 Engine)으로 빌드된 JavaScript 런타임이다.

JavaScript 엔진(V8 Engine) : 개발자가 작성한 자바스크립트 코드를 해석하고 실행시켜주는 것이 자바스크립트 엔진으로, 가능한 짧은 시간 내에 가장 최적화된 코드를 생성하는 것이 목표, 그중 V8 은 오픈소스로 구글크롬과 node.js에서 사용
JavaScript 런타임 : 프로그래밍언어가 구동되는 환경

JavaScript를 크롬(Chrome)같은 브라우저에서만 쓰는 것이 아닌 브라우저 밖. 즉, 내 컴퓨터에서 다양한 용도로 확장하기 위해 만들어진 것이 바로 Node.js이다. Node.js를 이용하면 Python과 같이 내 컴퓨터에서 File System를 이용할 수 있고, 서버를 만들 수도 있고 크롤링도 할 수 있다.
(JavaScript도 Python과 같은 프로그래밍 언어이기 때문)

Node.js를 이용하여 Express같은 라이브러리를 이용해서 서버를 만들곤 하지만, Node.js 자체는 웹 서버가 아니다.
Node.js는 자바스크립트 런타임(JavaScript Runtime)으로 Node.js는 웹 서버를 만들 수 있는 하나의 방법에 불과함.

❓ Node.js가 필요한 이유

최신 스펙으로 개발할 수 있다.
웹팩이나 바벨같은 도구들이 Node.js 환경 위에서 돌아가기 때문에 최신스펙으로 프런트엔드 개발환경을 만들 수 있다.
빌드 자동화
보통 배포시 파일 [ 압축 -> 코드 난독화 -> 폴리필 추가 ] 하는 등 개발의외의 작업을 거친 후 배포하는데, Node.js는 이러한 과정을 자동화할 수 있게 지원해 준다.
개발환경 커스터마이징
CRA같은 프레임워크에서 제공하는 도구를 사용하면 쉽게 개발환경을 갖출 수 있지만 실제 프로젝트에선 툴을 그대로 사용할 수 없는 경우도 빈번하다. 이럴 때 쉽게 커스터마이징이 가능하다.

NPM(Node Package Manager)

Node.js에서 사용할 수 있는 모듈을 패키지화하여 웹에서 받아서 설치하고 관리해 주는 프로그램입니다.
package.json파일을 통해 설치된 프로그램을 확인할 수 있습니다.

< 주요 명령어 >

npm init : 명령어 실행 시, package.json 파일이 생성됩니다.
npm init -y : 명령어 실행 시, package.json 파일이 생성됩니다.
npm install ${라이브러리 이름} : 해당 명령어로 라이브러리 설치 시, 해당 프로젝트에 node_modules 폴더가 생깁니다. 그리고 라이브러리가 설치되어 있는 것을 확인할 수 있습니다. (참고로 install 명령어는 i로 축약할 수 있습니다)
npm uninstall ${라이브러리 이름} : 해당 라이브러리와 관련된 라이브러리 모두 삭제합니다.
- 주요 옵션 --save-dev & --global
- --save-dev 옵션 : 해당 옵션의 여부가 개발용 라이브러리와 배포용 라이브러리로 구분할 수 있습니다. 따라서 해당 옵션을 사용하면 배포할 때, 개발용 라이브러리는 빠지게 됩니다. (--save-dev 옵션은 -D로 축약할 수 있습니다)
- --global 옵션 : node_modules 패키지가 아닌 전역으로 설치합니다. (참고로 --global 옵션은 -g로 축약할 수 있습니다)

❓ NPM을 사용하는 이유

라이브러리를 HTML 중간에 삽입한다면(CDN 방식) 직접 찾아야 합니다. 이렇게 되면 버전 관리가 어렵고, 라이브러리 의존성이 엮였을 때 문제가 생깁니다.
따라서 NPM을 사용해서 package.json 한 곳에서 관리한다면 좀 더 용이합니다.
CDN 방식은 일일이 직접 태그를 찾아서 들고 와야 하기 때문에 번거롭습니다.
NPM을 사용한다면 명령어 한 줄로 쉽게 추가할 수 있습니다.

크로스브라우징(cross browsing)

웹개발에서도 개발자마다 프론트엔드에서 사용하는 언어가 다르다. 주로 사용되는 건 JS지만, 최신 문법을 사용할 수도 있고 안 할 수도 있으며, TS를 사용할 수도 있다. 그리고 브라우저가 해석할 수 있는 언어 또한 다르다.
스펙과 브라우저는 날이갈수록 개선되고 있지만, 한국에서 약간의 점유율을 가지고 있는 인터넷 익스플로러는 최신 문법을 여전히 지원하지 않는다.

보통 개발자들 사이에서 '여러 브라우저에서 작성한 코드가 정상적으로 돌아갈 수 있게 만드는 행위'를 '크로스 브라우징을 지원하게 만든다'라고 한다. 바벨을 통해 크로스 브라우징을 지원하게 만들 수 있다.
바벨은 ECMAScript2015 이후 최신 문법으로 작성한 코드를 모든 브라우저에서 동작하도록 호환성을 지켜준다.
또한, 타입스크립트, JSX처럼 다른 언어로 분류되는 것도 포함된다.

트랜스파일(transpile)

트랜스파일(transpile)이란, A라는 소스코드 파일을 읽어서 B라는 소스코드로 파일로 변환시키는 행위이다.

자바와 같이 컴파일 했을 때,. java파일에서. class 파일로 변하는 것과 같이 변환 전 후의 수준이 다른 '빌드'의 개념과 달리, '트랜스파일'은 추상화 수준이 같은 코드로 변환한다.
구버전의 소스코드를 신버전에 호환되는 형식으로 바꾸는데도 이용되고 반대로 신버전의 소스를 구버전에 호환되는 형식으로 바꾸는데도 이용된다.
원본 코드의 디버깅이나 개발을 쉽게 만들게 하기 위해서 소스코드의 구조는 유지하는 것이 일반적이다.
transcompiler에 있는 pile을 쓴 것이다. file이 아니다.

바벨(Babel)

바벨은 트랜스파일러 이다.
트랜스 파일러는 한 언어로 작성된 코드를 추상화시켜

▶️ 바벨의 빌드 3단계

파싱(Parsing): 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계를 "파싱"이라고 한다. 빌드 작업을 처리하기 적합한 자료구조인데, 컴파일러 이론에 사용되는 개념이다.
변환(Transforming): 추상 구문 트리를 변경하는 것이 "변환" 단계이다. 실제로 코드를 변경하는 작업을 한다.
출력(Printing): 변경된 결과물을 "출력"한다. 이 단계를 마지막으로 바벨이 작업을 완료한다.

❓ 바벨을 사용하는 이유

자바스크립트 ES6이상 버전 문법을 사용하면 구형 브라우저에서 지원하지 않아 내가 원하지 않은 동작이 일어날 수 있습니다. 그런 상황에서 구형 브라우저를 지원하기 위해 최신 문법을 구형 브라우저에서도 동작할 수 있게 다운그레이드시켜서 사용합니다.

폴리필(polyfill)

충전솜이라는 의미를 가지고 있습니다. 솜이 꺼졌을 때 충전솜을 메꾸는 역할을 한다.
그럼 무엇을 메꾸는지 보면 브라우저에서 지원하지 않는 코드를 사용가능한 코드 조각이나 플러그인(추가기능)을 의미한다.
브라우저에서 지원하지 않는 코드를 사용 가능한 코드나 플러그인으로 만들어줍니다.

❓ 폴리필을 사용하는 이유

바벨(babel)만 사용한다고 해서 javascript es6 이후의 최신 문법들이 모든 웹 브라우저에 적용되는 건 아니다.
(바벨을 사용해도 지원하지 않는 구형 브라우저가 있다. 그런 상황에서 babel-polyfill를 사용한다.)
이미 바벨이 문법을 컴파일해서 javascript로 변환한다고 했는데 왜 polyfill이 필요한 것일까?
이러한 문법 호환작업을 위해 바벨에선 babel-polyfill을 제공한다.
(babel은 문법을 변환해 주는 역할만 할 뿐이다.)

babel을 사용한다고 해서 최신 함수를 사용할 수 있는 건 아니다. babel은 문법을 변환하여 javascript로 변환하는 트랜스파일러 역할만 할 뿐이다.
polyfill은 프로그램이 처음에 시작될 때 현재 브라우저에서 지원하지 않는 함수를 검사해서 각 object의 prototype에 붙여주는 역할을 한다.
앞에서 말한 대로 polyfill 은 프로그램이 처음 시작될 때 지원하지 않는 기능을 추가하는 것, 다시 말하면 babel은 컴파일 시에 실행되고 babel-polyfill은 런타임시에 실행된다.

ESLint

ES(ECMA Script)와 Lint를 합친 이름입니다.
ECMA Script란 ECMA에서 만든 표준 자바 스크립트를 의미합니다.
Lint란, 코드의 오류나 버그, 스타일 따위를 점검하는걸 린트(Lint) 혹은 린터(Linter)라고 부른다.
ESLint는 자바스크립트 문법에서 오류를 표시해 주는 도구입니다. 코드 포맷팅과 코드품질(퀄리티)를 확인할 수 있습니다.

포맷팅 은 일관된 코드 스타일을 유지하도록 하고 개발자들이 쉽게 읽히는 코드를 만들어 준다.
코드품질 은 애플리케이션의 잠재적인 오류나 버그를 예방하기 위해 사용한다.

❓ ESLint를 사용하는 이유

다른 개발자와의 협업 시 일관된 코딩 스타일을 유지할 수 있습니다.
문법적 오류등 찾기 힘들 오류를 보기 쉽게 해 줍니다.

Prettier

ESLint와 비슷하지만 코드 포맷팅만 하고 코드 퀄리티는 확인하지 않습니다. 코드를 정렬시킵니다.

ESLint에 더하여 코드를 더 예쁘게 만들어 준다.
ESLint의 역할 중 포맷팅과 겹치는 부분이 있지만 프리티어는 좀 더 일관적인 스타일로 코드를 다듬는다.
대신 코드품질과 관련된 기능은 하지 않는 것이 ESLint와 다른 점이다.

728x90