[웹개발] 프론트앤드 빌드 시스템 (바벨, Node.js, NPM, ESLint, Prettier)

프론트앤드 빌드 시스템

프론트앤드 개발은 여러 컴포넌트를 빌드해 소스코드 파일을 컴퓨터에서 실행할 수 있게 변환한다. 이때 코드를 변환하도록 도와주는 도구가 빌드 시스템이다.

컴파일 (Compile)

사람이 프로그래밍 언어로 작성한 소스코드를 컴퓨터가 이해할 수 있는 바이너리 언어로 작성된 코드로 변경하는 것 (사람이 작성한 코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 작업)

컴파일러 (Compiler)

개발자가 작성한 소스코드를 컴퓨터가 이해할 수 있는 코드로 변경해주는 프로그램

빌드 (Build)

소스코드 파일을 소프트웨어로 만드는 과정 (소스코드 파일을 컴퓨터에서 실행할 수 있게 변환하는 과정)

빌드의 단계 중 컴파일이 포함이 되어 있는데 컴파일은 빌드의 부분집합이라 할 수 있다

빌드 시스템 (Build System)

빌드 시스템은 코드를 입력받아 배포가능한 소프트웨어로 결과물을 만들어내주는 일종의 도구다. VS code도 빌드 시스템 중 하나다. 빌드 시스템의 가장 중요한 기능은 소스코드를 컴파일하는 것이다.

 

1. 바벨 (Babel)

바벨은 최신 자바스크립트 문법(ES6)을 ES5 버전 문법으로 변환해주는 도구(transcompiler)이다. ES6를 ES5로 변환시켜주는 이유는 최신 자바스크립트가 예전 웹브라우저에서 호환이 되지 않는 문제점이 있기 때문이다. 또한, 리액트에서 사용하는 문법인 JSX는 정식 자바스크립트가 아니기 때문에 웹브라우저에서 호환이 되지 않아 ES5 문법으로 변환해야 한다.

 

2. Node.js

일반적으로 자바스크립트는 브라우저에서 동작한다. Node.js는 자바스크립트를 브라우저 외부에서 사용할 수 있게하는 자바스크립트가 동작하는 런타임 환경을 말한다. Node.js를 이용하면 자바스크립트로 서버를 구현할 수도 있다. 리액트에서 직접적으로 Node.js를 쓰지는 않지만 리액트 프로젝트를 만들때 필요한 도구들이 Node.js를 사용한다. (i.e. 바벨, 웹팩)

 

3. NPM (Node Package Manager)

npm은 Node.js를 설치할때 함께 설치되는 패키지 매니저다. npm을 사용하면 외부 라이브러리를 설치, 업데이트, 삭제할때 쉽게 관리할 수 있다. 만약 npm이 없다면 프로젝트에 외부 라이브러리를 사용하고 싶을땐 라이브러리를 직접 사이트에서 다운받고 프로젝트에 옮겨주어야하며 라이브러리가 업데이트를 하면 예전 라이브러리를 삭제한 후 새버전을 다운받아 프로젝트에 넣어주어야하는 불편함이 있다. npm을 사용하면 코드 한줄로 외부라이브러리를 설치, 업데이트, 삭제할 수 있어 편리하다.

 

4. ESLint

자바스크립트 문법에서 에러를 표시해주는 도구를 말한다. 에러뿐만 아니라 전반적인 코드스타일도 지정이 가능해 많은 사람들과 협업할때 특히 유용하다.

 

 

5. Prettier

사용자가 입력한 코드의 스타일을 제거하고 출력되는 코드가 지정된 스타일 규칙을 따르도록 만들어주는 도구. 협업시 일관성 있는 코드 스타일을 유지하는것이 중요하므로 많은 사람들과 협업할때 특히 유용하다. ESLint는 문법 에러를 잡아주거나 더 좋은 코드 구현 방식을 사용하도록 해주지만, Prettier는 줄 바꿈, 공백, 들여 쓰기 등과 같은 코드 스타일을 교정해준다.