Node.js 프론트엔드 - node.js peulonteuendeu

예비 프론트엔드 개발자라면 아래와 같은 공고를 보고 '아 Node.js? 그거 백엔드 기술 스택아니야? 이걸 내가 지금 어떻게 공부해..' 라면서 다른 공고로 넘어가신 분들도 많이 있을거라고 생각이든다.

그러나 꼭 그런 것만은 아니니 희망을 가져도 좋을거 같다.

📌 물론 진짜 풀스택 개발자를 구하는 공고라면 Node.js 환경으로 서버를 구축하거나 그런 인력을 뽑고 싶은 걸 수도 있다.
그러나 신입을 뽑는 공고라면 Node.js환경에 대한 이해를 묻고 있는 문장이다.

그래서 결론적으로는 신입 프론트엔드 개발자도 Node.js 알아야한다 👍

1. Node.js 설치

무엇인지 알아보기전에 일단 설치부터 해보자. 설치를 해야 뭔가 안정감(?)이 들고 뭔가 해냈다는 느낌을 받을 수 있기 때문이다.

설치는 매우 간단하다.
📍 노드js 설치 사이트 링크로 들어가보면,

• LTS : 안정적, 신뢰도가 높다
• 최신 : 불안정하지만 최신 기능을 포함한다.

이러한 차이가 있는데 개발환경만 구축할 예정이라면 최신버전을 다운받는 것을 추천한다. 그러나 Node.js로 서버를 구축할 경우가 있다면 LTS버전을 받는 것이 안정적이다.
일단은 안정적인 LTS버전으로 받기로 한다.

iterm 이나 명령프롬프트를 열어서 다음 커맨드를 입력해보자.

node --version

이렇게 버전이 잘 표시된다면 설치가 완료된 것이다.

npm버전도 확인해보자. 명령어는 같다.

npm --version

2. Node.js를 알아야하는 이유

설치는 간단하게 완료했다. 그래서 왜 알아야되는지 이제 이유를 알아보자.

1. 최신 스펙 적용
   자바스크립트 스펙의 빠른 발전에 비해 브라우저의 지원 속도는 항상 뒤쳐진다. 최신 스펙이 업데이트 되더라도 브라우저에 맞는 환경으로 변환해줘야하는데 이 때 바벨이나 웹팩이 없으면 불가능하다.
   이런 바벨, 웹팩과 같은 도구들은 Node.js 위에서 돌아가기 때문에 Node.js가 뒷바침 되어야 한다.
   

2. 빌드 자동화
   개발이 완료되면 파일을 압축하고, 폴리필을 추가하고, 코드를 난독화하고 배포를 진행한다. 이런 빌드 과정에서 Node.js는 테스트를 자동화하고, 라이브러리 의존성을 해결해주기도 한다.

3. 개발 환경 세팅
   React를 예로 들면, CRA(create-react-app)이라는 명령어를 사용해서 손쉽게 React 개발환경을 구축할 수 있다. 하지만 경우에 따라 CRA를 사용하지 못할 수도 있는데 이런 상황에서 Node.js에 대한 이해가 없다면 개발 환경 세팅에 애를 먹을 수 있다.

3. 정리

프론트엔드 개발 환경을 직접 구축해보고 싶다면 Node.js와 NPM에 대한 이해가 필수이다.

참고 : https://jeonghwan-kim.github.io/series/2019/12/09/frontend-dev-env-npm.html

728x90

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

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

github.com

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.

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

github.com

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

시작 가이드 | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

728x90

저작자표시