코딩독학) Node.js 환경에서 프론트엔드 개발하기란?

Node.js 환경에서 프론트엔드 개발하기란?

 

Node.js

 

 

 

Node.js를 공식문서에서는 "Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임입니다." 라고 소개한다. Chrome V8 JavaScript 엔진은 무엇이고, JavaScript 런타임은 무엇인가? 나같은 비전공자 초보 개발자는 도무지 이해할 수 없는 단어들의 조합이다.

 

프론트엔드 개발을 할 때 자주 사용하는 VS code Extension 중 'Live Server'라는 확장기능이 있다. HTML, CSS, JAVASCRIPT를 작성하고 난 뒤 결과물을 확인하기 위해 Live Server를 이용하는데 이는 Live Server라는 확장기능이 서버를 자동으로 빌드해주고 그 환경에서 프론트엔드 결과물을 확인할 수 있도록 도와주는 것이다. 또는 HTML 파일을 직접 열어 Chrome 같은 브라우저를 통해 결과물을 확인할 수도 있다. 이는 확장기능 혹은 브라우저에 의존하는 것이다.

최신의 프론트엔드 개발 기술이 계속해서 나오는 상황에서 브라우저들이 기술을 따라가는 속도가 상대적으로 느렸고, 브라우저에 의존하지 않고 프론트엔드 개발을 하기 위해 Node.js 라는 런타임을 만든 것이다.

 

그렇다면 런타임은 무엇인가?

런타임(영어: runtime→실행시간)은 컴퓨터 과학에서 컴퓨터 프로그램이 실행되고 있는 동안의 동작을 말한다.
런타임 환경(영어: runtime environment)은 컴퓨터가 실행되는 동안 프로세스나 프로그램을 위한 소프트웨어 서비스를 제공하는 가상 머신의 상태이다. 운영 체제 자체에 속하는 경우도 있고 운영 체제에서 작동하는 소프트웨어를 뜻할 수도 있다.
- 출처: 위키백과

 

JavaScript는 스크립트로 된 언어로 그 자체로 기능을 할 수 없고, Chrome 같은 브라우저에 의해서 읽혀져야 동작을 할 수 있다. JavaScript는 동적 기능들을 구현하기 때문에 그 기능이 구현되는(실행되는) 동안의 동작을 런타임이라고 말하며, 이 스크립트를 실행시켜주는 것이 바로 Node.js 이다. 

Node.js 환경에서 프론트엔드 개발을 하게 되면 다른 브라우저에 의존하지 않는 독립적인 개발 환경에서 프론트엔드 개발을 할 수 있게 된다.

 

그렇다면 여기서 나는 의문이 든다. 어차피 사용자들은 브라우저에서 웹을 사용하게 되는데 굳이 독립적인 개발 환경에서 개발하는 이유는 뭐지?

 

1. 다양한 자바스크립트 애플리케이션의 사용을 가능케 함

순수한 바닐라 자바스크립트와 html, css 만으로 웹을 개발할 수도 있지만, 이는 너무 비효율적이다. 개발자들에게 비효율이란 있을 수 없는 일이고!!! 비효율적인 것들을 효율적으로 만들어줄 수 있는 자바스크립트 애플리케이션들을 Node.js 환경에서 사용할 수 있다. 이는 사용적인 측면에서 고려되는 것들일 수도 있으나 주로 개발적인 측면에서 고려되는 사항들을 효율적으로 만든 것들이다.

 

2. 브라우저 환경이 아니더라도 개발을 할 수 있게 됨

3. 서버 구축까지 가능하기 때문에 백엔드 개발까지 JavaScript 한 언어로 할 수 있음

 

 

NVM

이제 node.js 환경에서 개발을 해야하는 스스로의 당위성을 얻었으니 node.js를 설치해볼까 했는데!!! node.js 공식 홈페이지에서 node.js를 다운 받을 수도 있지만, 현업의 개발에서는 다들 NVM을 사용한다고 한다!

그렇다면 NVM은 무엇인가?

 

NVM (Node Version Manager)

 

NVM 은 말 그대로 Node.js의 버전을 관리해주는 매니저 역할을 한다. 나혼자 개발을 하는 것이 아니라 여러 사람과 함께 개발을 하거나 여러 프레임워크들과 호환성을 생각할 때 Node.js의 여러 버전을 Terminal에서 왔다갔다 할 수 있게 해준다. 한 마디로 Node.js의 버전을 수시로 변경해야 될 때 NVM으로 Node.js를 설치하고 관리하면 편하다는 뜻이다.

 

NVM은 Mac 용과 Windows의 설치 방법이 다르기 때문에 'NVM mac' 혹인 'NVM windows'로 필요한 것으로 검색해서 설치하면 된다.

 

 

NVM for MAC

https://github.com/nvm-sh/nvm

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

 

NVM for WINDOWS

https://github.com/coreybutler/nvm-windows

GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.

 

 

https://nodejs.org/ko/docs/guides/getting-started-guide/

시작 가이드 | Node.js