React

[React #13] Node.js

PEAZH 2024. 3. 2. 18:58
반응형

01. Node.js의 배경

  • 자바스크립트는 웹 브라우저의 엔진 위에서 동작을 함
  • 각 브라우저는 각자 자기들만의 엔진을 사용하는데, 크롬의 V8은 자바스크립트의 대표적인 엔진
  • 자바스크립트는 내장된 엔진을 사용하기 때문에 웹 브라우저에서만 실행될 수 있는데 V8 엔진은 C++로 개발되어서 브라우저 내부가 아니더라도 어디서든 이 엔진을 사용할 수 있음
  • 개발자들은 V8 엔진을 브라우저에서 떼어내서 자바스크립트를 어디서든 사용할 수 있는 node.js를 개발함
  • 브라우저에서만 사용할 수 있던 자바스크립트의 한계를 극복함

 

02. Node.js란?

  • 웹 브라우저가 아닌 환경에서도 자바스크립트 코드를 실행시켜주는 자바스크립트의 런타임 (= 자바스크립트의 실행 환경)
  • Node.js는 자바스크립트로 웹 서버 뿐만 아니라 모바일 앱, 데스크톱 앱 등 만들 수 있음

 

💡 웹서버

더보기
  • 서버는 클라이언트의 요청을 전달해주는 역할
  • 요청하는 주체는 클라이언트, 요청을 받아서 데이터를 반환하는 주체는 서버
  • 웹 서버는 클라이언트인 브라우저로부터 웹을 요청 받으면 웹을 반환해줌
  • 웹 서버는 url 주소로 요청을 받아서 요청받은 주소에 알맞는 웹사이트를 HTML, CSS, JavaScript로 이루어진 웹 파일들을 브라우저한테 던져줌
  • URL은 웹 서버의 주소

 

03. Node.js와 React와의 관계

  • React.js는 Node.js를 기반으로 동작하는 기술이기 때문에 Node.js가 필수
  • 리액트는 브라우저에서 동작하는 복잡하고 여러가지 기능을 자바스크립트 파일들을 쉽게 만들어냄
  • 리액트를 사용해서 만들어 낸 자바스크립트 파일들은 웹 브라우저에 전달되어 프로그램처럼 동작을 함
  • 리액트로 만든 웹 사이트를 웹 어플리케이션 또는 리액트 어플리케이션이라고 부름

 

04. Node.js 사용하기

  • 패키지 : Node.js에서 사용하는 프로그램의 단위

01) 패키지의 루트 폴더 만들고 VS Code로 열기

 

02) 터미널에 npm init 입력

  • npm init : 새로운 패키지 초기화 or 생성

 

다 입력하면 package.json 파일 생성 완료

 

💡npm?

더보기

Node Package Manager

Node.js의 프로젝트 단위인 패키지를 관리하는 도구

 

03) index.js 파일 생성하고 실행하기

 

- index.js 파일 생성

console.log('test');

 

- terminal에서 실행

node index.js
// test
  • node 실행시킬 경로+파일 이름
    ex) node src/index.js : src 폴더 안에 있는 index.js 파일 실행

 

04) 패키지 스크립트 작성

- package.json에 코드 추가

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node src/index.js"
  },
  • 일종의 매크로 역할로, 터미널에 경로를 다 명시해줄 필요 없이 스트립트의 이름인 'start'로만 명령을 수행할 수 있음
npm run start

 

 

 

참고자료

이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'
반응형