이 글은 생활코딩의 web2 nodejs 강좌의 앞부분을 보고 텍스트로 정리한 것입니다.
생활코딩에는 코딩에 관한 많은 강좌들이 있습니다.
node.js는 javasript를 서버에서에도 돌아가도록 만든 것입니다. 자바스크립는 원래 웹브라우저에서만 돌아가도록 만들어진 언어였습니다.
하지만 서버에서도 사용가능한 언어로 되었습니다. 웹서버상에서 사용된 언더는 php, java(javascript와 다름), python등의 언어들이 있었습니다. 하지만 어차피 웹은 브라우저로 접속하기 때문에 사이트를 만들때는 javascript를 쓸 수 밖에 없습니다. 지금까지는 서버측 언어와 브라우저용 언어 2가지를 사용해야했지만 이제는 하나의 언어로 처리가 가능하게 된 것입니다.
nodejs를 설치한 후 nodejs를 실행하는 방법은 command prompt를 이용하는 것입니다. 윈도우의 왼쪽 아래 검색창에 node를 입력하면 아래와 같이 nodejs를 실행시킬 수 있습니다.
자신이 원하는 폴더에 아래와 같은 내용으로 main.js파일을 만듭니다. text에디터를 사용하면 됩니다. nodejs는 js로 만든 소스코드를 실행해서 웹서버를 돌리는 개념입니다. 아래의 내용은 웹서버를 시작하는데 포트 3000으로 시작할 것이고 index.html이 있으면 index.html을 브라우저에 보여주라는 뜻입니다.
main.js
var http = require('http');
var fs = require('fs');
var app = http.createServer(function(request,response){
var url = request.url;
if(url == '/'){
url = '/index.html';
}
if(url == '/favicon.ico'){
response.writeHead(404);
response.end();
return;
}
response.writeHead(200);
console.log(__dirname + url);
response.end(fs.readFileSync(__dirname + url));
});
app.listen(3000);
command상태에서 node main.js로 이 소스코드를 실행하도록 합니다. 저는 d:드라이브의 dev\nodejs\방에 mani.js가 있습니다. node명령으로 main.js를 실행시키면 아무 일도 벌어지지 않습니다. 웹서비스를 사작했을 뿐이기 때문입니다.
D:\dev\nodejs>node main.js
이제 웹브라우저를 실행시키고 주소창에 localhost:3000을 입력합니다. 아직 index.html파일이 없기 때문에 에러가 발생할 것입니다.
대신 main.js 코드에서 console에 url을 출력하도록 했기 때문에 cmd창에 d:\dev\nodejs\index.html이라는 내용이 출력될 것입니다.
이제 index.html을 만들 차례입니다. 아래의 내용으로 index.html파일을 만듭니다.
index.html
<html>
<body>
test page
</body>
</html>
이제 cmd창에서 node main.js로 서버를 작동시킵니다. 그리고 브라우저 주소창에 localhost:3000을 입력합니다. 그러면 index.html파일의 내용이 브라우저에 보이고 cmd에는 url이 출력됩니다. main.js의 console.log(__dirname + url);가 작동한 결과입니다.
- 이제 사용자가 설정한 값을 이용해서 다르게 작동하는 웹페이지를 만들어볼 차례입니다. 주소창의 뒷쪽에 ?붙여서 값을 전달하는 방법입니다. 이 때 ?뒤에 써주는 것을 querystring이라고 합니다. 우선 코드에 querystring parse를 위해 require('rul')추가합니다. nodejs에서도 어떤 기능을 사용하기 위해서는 해당 package를 불러와야 합니다. package를 불러오는 명령은 require입니다.
- 마지막줄에 브라우저에 사용자가 주소창 뒤에 입력한 id값을 출력하도록하는 구문을 추가합니다. response.end(queryData.id) <-- 브라우저에 querystring중 id값 출력
-- 아래 코드를 실행하면 console과 브라우저에 qeuryData.id가 출력된다. 브라우저에서 localhost:3000/?id=java라고 입력했기 때문에 response.end(queryData.id)명령에 의해서 'java'가 출력되었습니다.
var http = require('http');
var fs = require('fs');
var url = require('url');
var app = http.createServer(function(request,response){
var _url = request.url;
var queryData = url.parse(_url, true).query;
console.log(queryData.id);
if(_url == '/'){
_url = '/index.html';
}
if(_url == '/favicon.ico'){
response.writeHead(404);
response.end();
return;
}
response.writeHead(200);
console.log(__dirname + _url);
// response.end(fs.readFileSync(__dirname + _url));
response.end(queryData.id);
});
app.listen(3000);
querystring으로 받은 값을 template를 이용해서 web에 반영할 수 있다.
` `을 이용해서 template에 웹에 출력하고자 하는 내용을 설정한다. querystring으로 부터 받은 값을 반영하기 위해 ${ }안에 변수명을 넣으면 된다. 아래의 코드를 실행하면 브라우저에 아래와 같이 출력된다.
var http = require('http');
var fs = require('fs');
var url = require('url');
var app = http.createServer(function(request,response){
var _url = request.url;
var queryData = url.parse(_url, true).query;
console.log(queryData.id);
if(_url == '/'){
_url = '/index.html';
}
if(_url == '/favicon.ico'){
response.writeHead(404);
response.end();
return;
}
response.writeHead(200);
console.log(__dirname + _url);
var template = `
<!doctype html>
<html>
<body>
<p>value from ${queryData.id}</p>
</body>
</html>
`
// response.end(fs.readFileSync(__dirname + _url));
response.end(template);
});
app.listen(3000);
엔지니어 돌종
dolljong 
0 분
9 분
