Node.js란

Chrome이 자바스크립트를 실행할 때 사용하는 js엔진인 V8엔진을 브라우저에서 독립시켜 자바스크립트를 브라우저가 아닌 어디에서든 실행시키기
위한 프로그램이다. 즉, node.js는 자바스크립트의 실행환경이라고 할 수 있으며 Javascript's Runtime이라고 부른다.

기존의 자바스크립트는 브라우저 내장 엔진을 사용해야 하므로 웹브라우저에서만 실행될 수 있었다. 또한, 브라우저는 html 문서를 기반으로
동작하기 때문에 자바스크립트 언어는 html 안에서 사용해야 했고 기존의 자바스크립트로는 간단한 인터렉션이나 이벤트 정도에만 사용되었다.

자바스크립트를 브라우저 없이 독립적으로 실행될 수 있는 node.js를 사용하게 되면서 카카오톡이나 파워포인트 등의 pc 프로그램을 만들 수 있게
되었고 Web Server도 만들 수 있게 되었다.

📌 React.js와의 관계

React.js는 브라우저에서 동작하는 복잡하고 여러가지 기능을 가진 javascript 파일들을 쉽게 만들어내는 기술이다.
React.js를 사용하여 만들어낸 js파일들은 매우 여러가지의 복잡하지만 좋은 기능을 가지고 있다. 그리고 웹 브라우저에 전달되면
고전의 일반 웹사이트가 아닌 마치 프로그램처럼 돌아간다. 그런 의미에서 React.js로 만든 웹사이트를 '웹 어플리케이션'이라고 하고
'리액트 어플리케이션'이라고도 한다. 그리고 React.js는 node.js 기반으로 사용할 수 있는 기술이기 때문에 React.js를 사용하기 위해서는
node.js가 필수
적이다.

Node.js 실행방식

GUI (Graphic User Interface) : 단순하게 프로그램을 클릭하여 실행하게 하는 방식
CLI (Command Line Interface) : 터미널에 명령어를 입력하여 실행하게 하는 방식 (node.js 실행방식)

Node.js 버전 확인하기

터미널에 node -v 입력하면 설치된 node.js의 버전을 확인할 수 있다.

Node.js 내장함수

폴더 안에 jndex.js와 calc.js를 만들고 calc.js에서 만든 함수를 index.js로 불러와서 사용할 수 있다.

calc.js (= 내보내는 파일)

const add = (a, b) => a + b;
const sub = (a, b) => a - b;

// 내보내기
module.exports = {
  moduleName: "calc module",
  add : add,
  sub : sub,
}

index.js (= 불러오는 파일)

// 불러오기
const calc = require("./calc");

console.log(calc.add(1,2));
console.log(calc.add(4,5));
console.log(calc.sub(10,2));

위와 같이 module.exports로 내보내고 다른 파일에서 require로 받아올 수 있다.

npm (Node Package Manager)

Node.js의 패키지 관리 도구이다.

npm 만들기

  1. 터미널에 npm init 명령어 입력
  2. package name 입력 후 엔터
  3. 다른 옵션들 입력 혹은 엔터로 스킵 후 마지막에 yes 입력하면 package.json 파일 생성됨
  4. package.json에서 script 추가하기
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "node index.js" // 자주 사용할 부분 명령어 만들기
},
  1. 터미널에 npm start 입력 (npm + 만든 명령어)

만들어진 npm 다운받기

  1. https://www.npmjs.com/ 에 접속
  2. 검색창에 다운받을 npm 이름 검색하여 다운받을 명령어 복사
  3. 터미널에 입력 (ex. npm i randomcolor)
  4. 설치되면 node.modules 폴더와 package-lock.json 폴더 생성됨
    (원래 있던 package.json에는 설치한 모듈의 대략적인 버전 범위, package-lock.json에는 상세 버전이 기록됨)
  5. 다운받은 npm 상세페이지 따라서 사용가능함
profile
프론트엔드 개발자 첫걸음

0개의 댓글

Powered by GraphCDN, the GraphQL CDN