Javascript 실행을 위한 Runtime 환경 만들기(nodejs, Express, react)

Nodejs

Node.js 는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 실행을 위한 Runtime 환경이다.

Javascript 는 일반적으로 크롬과 같은 브라우저에서 내장되어 있는 Javascript 런타임 환경으로 인해

실행된다. 이러한 Javascript 를 개발자 로컬 환경에서 실행시키기 위해 사용하는게 Node.js 이다.

 

런타임이란 특정 언어로 만든 프로그램을 실행할 수 있는 환경을 말한다.

Javascript 언어도 독립적인 언어가 아닌 스크립트 언어이다. 스크립트 언어는 특정한 프로그램 안에서

동작하는 프로그램이기 때문에 Javascript 런타임 환경이 필요하다.

 

Express

공식홈페이지에서 나온 설명을 보면 Express 는 웹 및 모바일 어플리케이션을 위한 일련의 강력한

기능을 제공하는 간결하고 유연한 Node.js 웹 어플리케이션 프레임워크이다.

 

Express 는 Node.js 를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체이다.

쉽게 말해 웹 어플리케이션을 만들기 위한 각종 라이브러리와 미들웨어 등이 내장되어 있어

개발하기 편한 프레임워크라고 볼 수 있다.

 

 

1. Node.js 설치

https://nodejs.org/ko/download/

Node.js 홈페이지에서 Windows Installer 를 통해 다운받는다.

 

 

2. package.json 만들기

시작프로그램에서 "node" 를 검색하면 "Node.js command prompt" 가 나오는데 실행한다.

 

pakcage.json 파일을 생성할 경로를 지정한 후 "npm init" 명령어를 실행한다.

 

* package.json : 프로젝트 라이브러리 버전 및 의존성을 관리하기 위한 JSON 파일이다.

 

기본적으로 엔터를 계속 눌러 생성하게 되면 아래와 같은 내용으로 pakcage.json 이 생성된다.

{
  "name": "react",
  "version": "1.0.0",
  "description": "obo_react_test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  }
}

 

 

3. Express 라이브러리 설치

Node.js command prompt 에 "npm install express --save" 명령어를 입력하여 express 라이브러리를 설치한다.

 

--save 명령어를 추가하게 되면 package.json 파일에 dependencies 가 추가되어 의존성 관리가 된다.

 

Express 라이브러리를 install 하게 되면 설치한 경로에 node_module 이라는 폴더가 생성되고 

해당 폴더 안에 express 와 express의 의존성에 의해 여러가지 라이브러리들이 설치된다.

 

 

4. Express 모듈을 사용한 웹서버 구동

 

라이브러리를 설치한 경로에 server.js 파일을 생성하고 아래 내용을 추가한다.

require 명령어를 통해 express 라이브러리를 불러오고 express() 를 통해 모듈을 실행한다.

const express = require('express');
const path = require('path');
const app = express();

app.listen(8080, function(){
	console.log('React TEST Listening 8080');
});

 

Node.js command prompt 에서 "node server.js" 명령어를 실행하면 아래와 같이 8080 포트로 환경이 구성된다.

 

 

5. React 프로젝트 생성

"Node.js command prompt" 터미널에 "npx create-react-app  프로젝트명" 을 입력하여 react 프로젝트 생성한다.

프로젝트 명을 작명할 땐 띄어쓰기를 하면 안된다.

 

생성한 경로에 생성한 프로젝트명으로 react 프로젝트가 생성되는데 해당 프로젝트로 이동한다.

 

해당 프로젝트에서 "npm run build" 를 터미널에 입려하면 React 완성본 html 파일이 build 폴더에 생성된다.

 

이제 build 에 생성된 static 파일과 html 파일을 사용해본다.

 

앞서 설정한 server.js 에 생성한 React 프로젝트의 build 경로를 설정해준다.

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'react_test/build')));

app.listen(8080, function(){
	console.log('dirname : ',__dirname);
	console.log('React TEST Listening 8080');
});

 

app.use(express.static(path.join(__dirname, 'react_test/build')));

 

express 모듈의 static 경로를 설정해준다.

path 모듈의 join 을 통해 괄호안의 설정한 여러개의 경로를 하나의 경로로 반환한다.

 

"__dirname" 은 해당 파일명을 제외한 파일 절대 경로를 반환한다.

예를 들어 " C:\Users\ByeongOk\react\server.js " 에 파일이 존재할 경우 server.js 를

제외한 " C:\Users\ByeongOk\react " 까지 결과를 반환한다.

 

 

"node server.js" 명령어를 터미널에 입력하면 react 화면이 보여진다.