안녕하세요
프론트엔드에서 활동하다가 요즘 백엔드에 관심이 좀 생겨서( 필요해져서 )
배워보기로 했습니다
제가 선택한건노드 js 기반 백엔드인데 사실 잘 모르겠고 개발자 커뮤니티에서 추천하더라고요
https://nodejs.org/ko/
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
설치는 여기 가서 최신 릴리즈 받아주시면 될거에요
그러면 인스톨러 뜨는데 그냥 전부 다음 누르고 넘겨주고요
PC에 따라서 시간이 조금 걸리기 때문에 커피 한잔 타고 오시죠
아니면 그동안 데이터 구조나 조금 보자면
크게 우리가 쓰는 ( 백엔드 ) 데이터는 VIDEO / 영상 파일, 2진 텍스트 정도로 구성된다고 하는데
{ 'name' : 'ag' } 이런식으로 키값과 데이터를 넘기는 게 JSON 이고
[ ] 이게 리스트라고 합니다
근데 이번에는 영상파일 보낼거라서 type=video/mp4 정도만 알고 있으면 될 거 같아요
( 저는 업로드 할떄 mp4 인코딩 할 예정이라 )
이제 cmd/powershell/terminal 등에다가 node -v 치면 이런식으로 버전이 나오는데
js자체가 오래되서 어지간한 문법은 전부 호환됩니다
일단 저희는 4개의 파일을 만들 거에요
( github 위키를 참조했습니다
+ 참조 2 :
)
index.js 파일을 하나 생성해줍니다
터미널을 열고( new terminal ) npm init
치면 이런거 뜨는데 아무거나 치고 넘어가줍니다 ( 큰 쓸모 없음 )
아래에 이상한 json 하나 생겨있으면 완성이구요
var http = require('http');
var url = require('url');
var fs = require('fs');
const { Console } = require('console');
var server = http.createServer(function(request,response){
var parsedUrl = url.parse(request.url);
var resource = parsedUrl.pathname;
console.log('resource='+resource);
var resourcePath = '.'+resource;
console.log('resourcePath='+resourcePath);
if(resource.indexOf('/html/index.html') == 0){
fs.readFile(resourcePath, 'utf-8', function(error, data) {
if(error){
response.writeHead(500, {'Content-Type':'text/html'});
response.end('500 Internal Server '+error);
}else{
response.writeHead(200, {'Content-Type':'text/html'});
response.end(data);
}
});
}else if(resource.indexOf('/movie/(파일명).mp4') == 0){
var requestIp = require('request-ip');
var stream = fs.createReadStream(resourcePath);
var count = 0;
stream.on('data', function(data) {
count = count + 1;
console.log('data count='+count);
response.write(data);
});
stream.on('end', function () {
console.log('전송 완료');
console.log(requestIp)
response.end();
});
stream.on('error', function(err) {
console.log(err);
response.end('500 Internal Server '+err);
});
}else{
response.writeHead(404, {'Content-Type':'text/html'});
response.end('404 Page Not Found');
}
});
server.listen(80, function(){
console.log('백엔드를 실행했어요...');
});
이러면 끝이구요 ( 복붙 ㄱㄱ )
이제 파일을 만들어봅시다
video 폴더랑 html 하나 만들어줍니다
못하겠으면 이거 터미널 열고 복붙
mkdir html
mkdir movie
이제 스트리밍 하고 싶은 동영상을 가져다가 video 안에 넣어줍니다
( 그냥 드래그 한 다음에 video 폴더에 드롭하면 끝 )
자 이제 HTML 이 필요합니다
if(resource.indexOf('/html/index.html') == 0){
fs.readFile(resourcePath, 'utf-8', function(error, data) {
if(error){
response.writeHead(500, {'Content-Type':'text/html'});
response.end('500 Internal Server '+error);
}else{
response.writeHead(200, {'Content-Type':'text/html'});
response.end(data);
}
});
요 코드가 HTML 을 인식하는 건데 ( 80번 포트 )
아까 만든 HTML 폴더로 가줍니다
html 안에 index.html 파일 만들고
html:5 치고 탭 키 누르면 자동으로 만들어줍니다
아 그리고 alt + z 키 누르면 창 사이즈에 맞게 자동 조절도 되니 유용하게 쓰세요
<style>
.video {
width: 700px;
height: auto;
}
</style>
<body>
<video autoplay controls class="video">
<source src="../movie/(파일명).mp4" type="video/mp4">
</video>
</body>
<body> 지우고 바디태그 영역에 이거 복붙해줍니다
크기 지정이랑 player 태그 넣어준 거구요
이제 실행하려면 터미널 열고 node index.js 입력
얘가 모듈이 없다고 실행을 안하는 경우가 있는데 이러면 npm install require 하고 다시 시도 ㄱㄱ
( 사실 기본모듈이라 NODE JS 제대로 설치하면 들어있음 )
뭔가 터미널에 나왔으니 성공이구요
자 축하합니다 여러분은 백엔드 완성했습니다
이제 동작 하는지 궁금하니까
localhost/html/index.html
로 가시면 되고
예전에 live server 같은 걸로 연 건 로컬에 있는 파일을 보여주는 개념이고 얘는 진짜 서버니까
여러 용도로 쓸 수 있습니다
그래서 이거 왜 하냐구요? 비밀입니다
