프론트엔드 개발을 시작하면 일단 첫 단계가 node.js를 설치하라고 한다. 근데 우리는 Node.js가 뭔지도 모르고 일단 설치를 한다. 그리고 프론트엔드를 개발하면서도 Node.js가 정확히 무엇인지 모르고 개발을 하는 경우가 있다. 나도 생각해보니 Node.js는 백엔드로 사용한다는데 "왜 프론트엔드를 하는데 Node.js를 설치하는 거지?" 라는 의문을 가지고 있었다. 그래서 이번 기회에 그 이유에 대해 공부를 하고 포스팅해보려고 한다.
일단 Node.js가 뭔지 이해하고 가려고 한다.
Node.js란?
Node 공식 사이트에는 다음과 같이 Node를 설명하고 있다.
Node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임 입니다.
웹 애플리케이션을 개발할 때 Javascript를 사용하는데, 모든 브라우저가 Javascript 코드를 해석하기 위해 Javascript Engine을 내장하고 있다. 예를 들어 Chrome은 위에 나왔듯이 V8, Firefox는 SpiderMonkey, Safari는 Webkit 등..
Node.js는 Chrome의 V8 엔진을 이용하여 브라우저에서 Javascript를 해석하듯이 다른 환경에서 Javascript를 동작할 수 있도록 도와주는 환경이라고 생각하면 이해가 쉬울 것 같다. 말 그대로 환경이기 때문에 Node.js 자체로는 아무것도 못하고, 직접 구현해줘야 한다. 그래서 Node.js를 보고 백엔드일수 도 있고, 프론트일 수도 있다고 하나보다.
그럼 프론트엔드 개발에 왜 Node.js를 사용하는가?
최신 스펙으로 개발할 수 있다
자바스크립트 스펙의 빠른 발전에 비해 브라우져의 지원 속도는 항상 뒤쳐진다. 아무리 편리한 스펙이 나오더라도 이것을 구현해 주는 징검다리 역할, 이를테면 바벨 같은 도구의 도움 없이는 부족하다. 더불어 웹팩, NPM 같은 노드 기술로 만들어진 환경에서 사용할 때 비로소 자동화된 프론트엔드 개발환경을 갖출 수 있다.
마찬가지로 Typescript, SASS 같은 고수준 프로그래밍 언어를 사용하려면 전용 트랜스파일러가 필요하다. 물론 이것 역시 Node.js 환경이 뒷받침 되어야 우리가 말하는 프론트엔드 개발 환경을 만들 수있다.
빌드 자동화
과거처럼 코딩 결과물을 브라우져에 바로 올리는 경우는 흔치 않다. 파일을 압축하고, 코드를 난독화하고, 폴리필을 추가하는 등 개발 이외의 작업을 거친후 배포한다. Node.js는 이러한 일련의 빌드 과정을 이해하는데 적지 않은 역할을 한다. 뿐만 아니라 라이브러리 의존성을 해결하고, 각종 테스트를 자동화하는데도 사용된다.
패키지 매니저
npm은 개발 프로세스를 원활하게 하기 위해 많은 패키지를 제공한다. 이러한 패키지를 패키지 매니저를 통해 편하게 설치하고 관리할 수 있다.
'프론트엔드 스터디' 카테고리의 다른 글
웹팩(Webpack)이란? (0) | 2021.07.02 |
---|---|
NPM이란 (0) | 2021.06.29 |
ES6 간단 개념 (0) | 2021.05.19 |
마이크로 프론트엔드란? (0) | 2021.05.17 |
Single SPA 프레임 워크를 사용하여 마이크로 프런트 엔드 구축 (0) | 2021.05.17 |