소프트웨어/자바스크립트

[자바스크립트] Node.js - 웹서버 html 파일 랜더링하기

만들오 2021. 1. 23. 01:50

오늘은 Node.js를 이용해 웹서버를 만들고, 접속 시 지금까지 만든 예제를 화면에 보이도록 설정하겠습니다.

 

Node.js 설치 및 기초 사용은 검색하면 잘 정리되어있는 자료들이 많으니, 참고해 주시기 바라며,

 

저는 완성 코드만 기록하겠습니다.

 

사실 블로그의 주 목적은 저 스스로 정리하기 위함이라 다른분들이 보시기에는 불친절할 수 있습니다...

 

나중에 고수가 되면 글도 잘 다듬고 내용도 보강하겠습니다.

 

1. 완성 코드

//index.js

let express = require("express");
let app = express();

app.listen(3000, function(){
    console.log("App is running on port 3000");
});

app.get("/", function(req, res){
    res.sendfile("index.html");
});

 

<!--index.html-->
<!DOCTYPE html>
<html>

<body>
    <video id="videoInput"></video>
    <script>
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

        var constraints = { audio: false, video: true };

        var video = document.getElementById("videoInput");

        function successCallback(stream) {
            video.srcObject = stream;
            video.play();
        }

        function errorCallback(error) {
            console.log(error);
        }
        navigator.getUserMedia(constraints, successCallback, errorCallback);
    </script>
</body>

</html>

 

2. Node.js의 시작은 cmd창에서 npm init -y로 시작합니다.

npm init -y //Node.js의 프로젝트 생성
npm install express //Express 모듈 설치

위 두 커맨드를 입력하면, 현재 cmd 경로상에 package.json과 node_modules 폴더가 생성됩니다.

동일한 폴더에 위 완성코드가 기록된 index.html, index.js 파일을 저장합니다.

 

저장 후 node index.js를 입력하면 웹서버가 실행됩니다.

node index.js

 

지금은 경로를 별도로 구성하지 않았지만 대부분의 개발자분들은 폴더를 구분하는데요 방법은 다음과 같습니다.

//index.js

let express = require("express");
let app = express();
app.use(express.static('public')); //public이라는 폴더 사용을 선언함

app.listen(3000, function(){
    console.log("App is running on port 3000");
});

app.get("/", function(req, res){
    res.sendfile("public/index.html"); //public 폴더 안의 index.html을 사용
});

index.html파일을 public 폴더 안으로 이동시키고 실행하면 동일한 결과를 얻습니다.

 

* 이 글은 티스토리 카카오계정 연동정책으로 인해 이전 블로그(오코취) 글을 옮겨왔습니다.

[끝].

728x90