오늘은 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
'소프트웨어 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] Node.js - 가상 캔버스 라이브러리 pureimage 사용 (0) | 2021.01.23 |
|---|---|
| [자바스크립트] Node.js - 웹서버에 Websocket 통신 추가하기 (0) | 2021.01.23 |
| [자바스크립트] 화면 방향(가로/세로) 확인하기 (0) | 2021.01.23 |
| [자바스크립트] 접속환경(Mobile/PC) 확인하기 (0) | 2021.01.23 |
| [자바스크립트] WebRTC를 이용한 카메라 사용 기초 (0) | 2021.01.23 |
댓글