백곡시스템

NODE.JS 를 이용해 간단한 서버 구축하기<1>

출처: http://www.hardcopyworld.com/gnuboard5/bbs/board.php?bo_table=lecture_tip&wr_id=1481

 

라즈베리파이에서 Node.js를 사용하기 위해서는 Node.js를 설치해야 합니다.

패키지 관리자를 통해 Node.js를 설치할 경우 최신버전으로 설치할 수 없습니다.

다음을 입력해 패키지 관리자의 Node.js 버전을 업데이트 받아 설치합니다.

 

현재 최신 버전인 8.11.3 버전으로 정상적으로 설치가 되었는지 버전을 확인해 봅니다.

 

설치가 완료되었으면 새 폴더를 생성해 Node.js 프로젝트를 생성합니다.

 

npm(Node Package Manager) 은 Node.js 에 다양한 기능을 더해주는 모듈들을 패키지로 만들어 관리해줍니다. Node.js 에 추가하고 싶은 기능이 있으면 npm 을 통해서 설치가 가능하기 때문에 마치 PHP 의 pip 같은 역할이라 할 수 있죠. 우리는 npm 을 통해 의존성 걱정없이 패키지를 받아 설치할 수 있기 때문에 Node.js 발전에 가장 큰 역할을 하고 있습니다.

프로젝트를 시작할 때도 npm 을 사용하기 때문에 npm을 통한 프로젝트 파일 생성부터 해보겠습니다.

npm init 을 실행하면 프로젝트에 필요한 기본 설정값을 입력 받습니다. 그리고 이 정보를 바탕으로 프로젝트의 기본 파일들을 만들어줍니다. 모든 항목을 입력하지 않고 넘어가도 상관없습니다.

 

다음, 웹 개발 프레임워크인 express를 설치합니다.

 

코드를 구동하기 위한 기본 준비가 완료되었습니다.

index.js 라는 이름으로 파일을 생성하고 다음의 코드를 입력합니다.

 

파일을 저장하고 코드를 실행하면 서버가 구동됩니다.

 

하지만 아직 서버로서 아무런 기능을 구현하지 않은 상태입니다.

다음 포스팅에서는 라우팅 생성 및 html 파일과 연동하는 방법을 설명하겠습니다.


이번에는 엔드포인트 라우팅 설정 및 해당 라우팅 접근 시 html 파일을 로드해 웹브라우저 보이도록 해 보겠습니다.

엔드 포인트 라우팅은 특정 URL 로 HTTP 요청이 들어왔을 때, 다른 경로로 접근하도록 임의로 경로를 바꿔주는 기능입니다.

 

프로젝트 폴더에 아래 두 파일을 만들어 넣어주세요.

[ index.js ]

 

[ index.html ]

 

index.js 를 구동시키고 웹브라우저에서 http://localhost:3000/를 입력하면 http://localhst:3000/hello 로 리다이렉트 시키고 해당 주소에서 index.html 파일을 로드하여 웹브라우저에 보여주도록 하는 코드입니다.

아래 명령어로 변경된 실행하세요. (서버 동작을 멈출때는 Ctrl + C)

  • node index.js

 

실행하면 다음과 같이 정상적으로 로드되는 것을 확인할 수 있습니다.

 

Node.js에는 Pug라는 템플릿 엔진이 있습니다. 다음 편에서 이 템플릿 엔진 사용법을 간단히 살펴보겠습니다.


 

템플릿 엔진이란 데이터가 정적으로 정해진 html 파일이 아닌, 동적으로 바뀌는 데이터에 맞추어 웹페이지를 생성할 수 있는 소프트웨어를 말합니다.

즉, HTML 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고, JavaScript 코드로 동적으로 생성되는 부분만 템플릿 특정 장소에 끼워넣는 방식으로 동작할 수 있도록 해주는 엔진이 템플릿 엔진입니다.

 

이번 포스트에서는 Node.js의 대표적인 템플릿 엔진인 Pug를 사용하는 방법을 간단하게 알아보겠습니다. Pug는 Jade 의 새로운 이름으로 저작권 문제로 인해 지금의 이름으로 변경되었습니다. 다른 정보를 더 찾아보시고 싶으시면 Jade로 검색하셔도 됩니다.

Pug를 사용하기 위해서는 모듈을 설치해야 합니다.

 

다음은 이전 포스팅의 웹페이지를 Pug를 이용해 구현한 예제입니다.

[ index.js ]

[ hello.pug ]

pug 파일들을 저장할 view_file 폴더를 생성하고 hello.pug 파일을 view_file 폴더에 저장합니다.

‘views’ 에 pug 파일이 있는 폴더를 지정하고 ‘view engine’으로 pug를 사용한다고 지정합니다.

 

웹브라우저를 통해 http://localhost:3000/hello 에 접근하면 응답으로 hello라는 pug파일을 렌더링합니다. 렌더링 시 title 과 body 에 보여지는 텍스트를 title 과 message라는 값으로 넘겨주어 보여지도록 합니다.

 

결과를 확인해 보면 이전 포스팅에 올렸던 html 파일과 동일한 소스가 로드된 것을 확인할 수 있습니다.

 


이번에는 ESP32로부터 데이터를 받아 웹브라우저에 받은 데이터를 보여주는 코드를 구현해 보도록 하겠습니다.

ESP32가 JSON 형태로 데이터를 보내주면 서버에서는 이를 받아 파일로 저장하고 웹브라우저를 통해 사용자가 접속을 하면 저장된 데이터를 불러오는 코드입니다.

우선, HTTP 요청을 통해 들어오는 body를 파싱하기 위해 body-parser라는 모듈을 설치해야 합니다.

 

설치가 완료되면 다음 코드를 작성합니다.

[ index.js ]

 

서버에서는 POST 요청에 의해 들어오는 JSON 형태의 값을 data.txt 파일에 저장하고 웹브라우저에서 http://localhost:3000/ 로 접속을 하면 data.txt  파일을 읽어와 데이터를 보여줍니다.

저장하는 데이터는 최근에 들어온 데이터 10개만 저장하도록 합니다.

[ data.pug ]

데이터가 존재할 시 렌더링할 웹페이지를 구현한 pug 파일입니다. data 배열이 전달되면 이를 한 라인씩 화면에 출력합니다.

이로써 서버 쪽 준비는 완료되었습니다.

 

다음은 ESP32 에서 POST 요청을 하기 위한 코드를 짜 보도록 하겠습니다.

POST 요청 시 전송할 데이터를 JSON  형태로 만들기 위해 ArduinoJson 라이브러리가 필요합니다.

Arduino IDE 상단의 스케치 -> 라이브러리 포함하기 -> 라이브러리 관리에 들어가 ArduinoJson을 검색해 최신 Stable 버전인 5.13.2를 다운로드 받습니다.

그 후 아래와 같이 코드를 작성합니다.

[ HttpClient.ino ]

ESP32에서는 10초마다 한 번씩 0부터 255까지 숫자 중 하나를 랜덤하게 생성해 서버로 JSON  형태의 데이터를 전송합니다.

 

ESP32에 위의 코드를 업로드 하고 웹브라우저를 통해 결과를 확인하면 다음과 같이 출력됩니다.

댓글 남기기

Close Menu