Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: dc8aeaf3db
Fetching contributors…

Cannot retrieve contributors at this time

321 lines (262 sloc) 17.85 kb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>First Server with node | day-by-day</title>
<meta name="description" content="인터넷, 기술, 영화, 음악 그리고 내 이야기">
<meta name="author" content="nezz">
<meta name="keywords" content="internet,tech,dev,movie,music,story" />
<meta name="generator" content="haroopress v0.9.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="/rss.xml" rel="alternate" title="day-by-day" type="application/rss+xml">
<!-- Le styles -->
<link rel="canonical" href="http://nezz.pe.kr">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.css" rel="stylesheet">
<link href="/css/font-awesome.css" rel="stylesheet">
<link href="/css/markdown.css" rel="stylesheet">
<link href="/css/haroopress.css" rel="stylesheet">
<link href="/css/theme.css" rel="stylesheet">
<link href="/css/code/default.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-64.png">
<!-- Le javascript -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.jsonp.js"></script>
<script src="/js/mustache.js"></script>
<script src="/js/apps/github.js"></script>
<script src="/js/apps/twitter.js"></script>
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="pull-right" href="/rss.xml"><img src="/img/buttons/rss.png" /></a>
<div class="nav-collapse">
<ul class="nav">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/archives">Archives</a>
</li>
<li>
<a href="/slides">Slides</a>
</li>
<li>
<a href="/node-js-note/">Node.js note</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<link href="/css/code/default.css" rel="stylesheet">
<div class="container page-archive">
<div class="row">
<div class="span3">
<div id="author" class="well">
<div>
<h3>About Author</h3>
<ul class="thumbnails">
<li>
<a class="thumbnail">
<img src="http://www.gravatar.com/avatar/d1ca68e62108265ddf2e62b347aa716e?r=pg&amp;s=128.jpg&amp;d=identicon" />
</a>
</li>
</ul>
<p>
<strong>nezz</strong><br/>
blog: <a href="undefined" target="_blank">http://nezz.pe.kr</a><br/>
twitter: <a href="http://twitter.com/undefined" target="_blank">@imtaehyun</a><br/>
github: <a href="https://github.com/undefined" target="_blank">imtaehyun</a>
</p>
<p>
<a href="https://twitter.com/imtaehyun" class="twitter-follow-button" data-show-count="true">Follow @imtaehyun</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</p>
<p>
<p>잠시나마 스티브잡스와 같은길을 걸어본 사람</p>
</p>
</div>
<div>
<h3>About this Article</h3>
<p>
<h5>Date Released:</h5>
<span>Monday, November 12 2012 11:49 PM</span>
</p>
</div>
</div>
<div class="well">
<ul class="nav nav-list">
<li class="nav-header">Categories</li>
<li class=""><a href="/category"><i class="icon-home"></i> Home</a></li>
<li><a href="/category/dev"><i class="icon-book"></i> dev</a></li>
<li><a href="/category/story"><i class="icon-book"></i> story</a></li>
<li><a href="/category/haroopress"><i class="icon-book"></i> haroopress</a></li>
</ul>
</div>
<div class="well">
<ul class="nav nav-list">
<li class="nav-header">Recent Articles</li>
<li>
<a href="/post/first-server-with-node" target="_blank">First Server with node
<span class="label">nezz</span></a>
</li>
<li>
<a href="/post/npm" target="_blank">npm
<span class="label">nezz</span></a>
</li>
<li>
<a href="/post/haroopress-on-cloud-9" target="_blank">Cloud9 IDE에 하루프레스 설치하기!
<span class="label">nezz</span></a>
</li>
<li>
<a href="/post/harupeureseu-gaeindomein-seoljeongbangbeob" target="_blank">하루프레스 개인도메인 설정방법
<span class="label">nezz</span></a>
</li>
<li>
<a href="/post/h3-conference-2012" target="_blank">H3 Conference 2012 참가 후기
<span class="label">nezz</span></a>
</li>
</ul>
</div>
</div>
<div class="span9">
<div class="row">
<div class="span9">
<div class="well bg">
<div class="page-header">
<h1>First Server with node</h1>
</div>
<div class="markdown-wrapper">
<h1 id="toc_0">Node를 가지고 일단 맛을 보자</h1>
<p>이번 포스팅에서는 Node를 가지고 간단한 코드를 통해 Apache없이 웹서버를 만드는 방법을 알아보고자 한다. </p><p>Node 프로그램을 작성하기 전에 <a href="http://nodejs.org/api/">Node.js API Doc</a>을 먼저 살펴보자.</p>
<h2 id="toc_1">Hello World!!</h2>
<p>일단 첫번째 서버를 띄워보기 위해서 아래의 코드를 작성해 보자. 파일의 이름은 <code>파일명.js</code>로 하며 여기서는 예제로 <code>server.js</code>로 작성한다.</p><pre><code class="javascript"><span class="comment">// 웹서버를 띄우기 위해서는 http를 사용한다. http://nodejs.org/api/http.html 참고.</span>
var http = require(<span class="string">"http"</span>);
console<span class="variable">.log</span>(<span class="string">"First Web Server Start!"</span>);
<span class="comment">// 웹서버 주소와 포트를 설정한다. 로컬에서는 localhost 주소인 127.0.0.1을 쓰고 포트는 임의로 8080으로 설정했다.</span>
var host = <span class="string">"127.0.0.1"</span>;
var port = <span class="number">8080</span>
<span class="comment">// 서버의 동작에 대해서 정의 한다. Request가 들어오면 url을 console에 출력하고, 웹페이지에는 'Hello World!!'를 출력한다.</span>
var server = http<span class="variable">.createServer</span>(function(request, response) {
console<span class="variable">.log</span>(<span class="string">"Requested url : "</span> + request<span class="variable">.url</span>);
<span class="comment">// 요청에 대한 응답의 Header를 설정한다.</span>
response<span class="variable">.writeHead</span>(<span class="number">200</span>, {<span class="string">"Content-type"</span> : <span class="string">"text/plain"</span>});
<span class="comment">// response.end() 는 응답의 마지막임을 표시함과 동시에 parameter를 웹페이지에 표현한다.</span>
response<span class="variable">.end</span>(<span class="string">"Hello World"</span>);
});
<span class="comment">// 생성한 서버가 어떤 IP에 어떤 포트에 응답할 것인지를 정의한다.</span>
server<span class="variable">.listen</span>(port, host, function() {
console<span class="variable">.log</span>(<span class="string">"Listening from "</span> + host + <span class="string">":"</span> + port);
});
</code></pre><p>작성이 끝났다면 <code>node server.js</code>로 실행시켜보자.</p><p>제대로 작성이 되었다면 에러없이 아래와 같은 결과가 보일 것이다.</p><p><img src="./@img/1st_start.png" alt="서버 실행"></p><p>그럼 웹페이지에서도 접속해보자. <code>http://localhost:8080</code>으로 접속하면 아래와 같이 Hello World가 찍혀있는 것을 볼 수 있다.</p><p><img src="./@img/1st_browser.png" alt="Hello World"></p><p>어떤 언어든 Hello World를 찍었으면 반쯤 공부한 셈이다! 시작이 반이라고 하지 않는가?</p><p>웹페이지를 접속하면 서버에서는 다음과 같이 반응한다.</p><p><img src="./@img/1st_connect.png" alt="서버 반응"></p><p>위 그림을 보면 우리가 <code>http://localhost:8080</code>을 접속함과 동시에 서버에서는 루트인 <code>/</code>와 브라우저의 주소표시줄 앞의 이미지인 <code>favicon.ico</code>를 접근하려고 했다는것을 알 수 있다.</p><p>그러나 지금 작성한 코드는 웹서버이기는 하지만 항상 <strong>Hello World</strong>만 보여주는 한결같은 서버일 뿐이였다.</p><p>그럼 코드를 몇줄 추가해서 지금보다 현실적인 웹서버를 만들어 보자.</p>
<h2 id="toc_2">조금더 현실적으로!!</h2>
<p>위에서 확인한 실행결과를 보면 알 수 있는것이 사용자(Client)가 어떠한 페이지를 접근하려고 하는지 알 수 있음을 알았다.</p><p>그럼 그 사실을 이용해서 사용자가 원하는 페이지를 보여줄 수 있도록 해보자. <code>var server</code>부분을 수정해 보자.</p><pre><code class="javascript">var http = require(<span class="string">"http"</span>)<span class="comment">;</span>
// html파일을 읽어야 하므로 fs를 사용한다.
var fs = require(<span class="string">"fs"</span>)<span class="comment">;</span>
console<span class="preprocessor">.log</span>(<span class="string">"First Web Server Start!"</span>)<span class="comment">;</span>
var host = <span class="string">"127.0.0.1"</span><span class="comment">;</span>
var port = <span class="number">8080</span>
var server = http<span class="preprocessor">.createServer</span>(function(request, response) {
console<span class="preprocessor">.log</span>(<span class="string">"Requested url : "</span> + request<span class="preprocessor">.url</span>)<span class="comment">;</span>
// 사용자가 요청한 파일을 File System이 읽는다.
fs<span class="preprocessor">.readFile</span>(<span class="string">"."</span> + request<span class="preprocessor">.url</span>, function(err, data) {
if (err) {
// 파일을 읽는데 에러가 발생하여 err이 true인 경우 <span class="number">404</span> 페이지를 보여준다.
response<span class="preprocessor">.writeHead</span>(<span class="number">404</span>, {<span class="string">"Content-type"</span> : <span class="string">"text/plain"</span>})<span class="comment">;</span>
response<span class="preprocessor">.end</span>(<span class="string">"Sorry. Can't find the file."</span>)
} else {
// 파일 위치가 올바르고 읽는데 문제가 없었다면 해당 문서를 페이지에 출력한다.
response<span class="preprocessor">.writeHead</span>(<span class="number">200</span>, {<span class="string">"Content-type"</span> : <span class="string">"text/html"</span>})<span class="comment">;</span>
response<span class="preprocessor">.end</span>(data)<span class="comment">;</span>
}
})<span class="comment">;</span>
})<span class="comment">;</span>
server<span class="preprocessor">.listen</span>(port, host, function() {
console<span class="preprocessor">.log</span>(<span class="string">"Listening from "</span> + host + <span class="string">":"</span> + port)<span class="comment">;</span>
})<span class="comment">;</span>
</code></pre><p>위 코드를 실행하고 웹페이지를 보면 서버에 존재하는 페이지는 다음과 같이 보인다.</p><p><img src="./@img/2nd_exist.png" alt="서버 존재"></p><p>그러나 요청한 페이지가 없다면 404 페이지가 보이게 된다.</p><p><img src="./@img/2nd_notfind.png" alt="서버 미존재"></p>
<h2 id="toc_3">정리</h2>
<p>지금까지 Node를 가지고 첫번재 웹서버를 만들고 간단한 응용도 해보았다. </p><p>다음엔 <code>Express.js</code>라는 모듈을 가지고 더 쉽게 웹서버를 만드는 법에 대해서 알아보고자 한다.</p><p><em class="label label-info"><strong><i class="icon-info-sign icon-white"></i> 관련링크</strong></em></p>
<ul>
<li><a href="http://nodejs.org/api/">Node.js API Doc</a></li>
<li><a href="http://nodejs.org/api/http.html">API - http</a></li>
<li><a href="http://nodejs.org/api/fs.html">API - fs</a></li>
</ul>
</div>
<hr />
<div class="row-fluid">
<div class="pull-right">
<a href="/post/h3-conference-2012" class="btn btn-info">H3 Conference 2012 참가 후기 <i class="icon-white icon-chevron-right"></i></a>
</div>
</div>
<div class="row-fluid">
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'nezz-blog'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
</div>
</div>
</div>
<div class="row">
</div>
</div>
</div>
<!--<div class="row">-->
<!--<div class="offset3 span9">-->
<!--<strong>tags</strong> :-->
<!---->
<!--<a href="/tag/node">node</a>&nbsp;-->
<!---->
<!--</div>-->
<!--</div>-->
</div><!-- /container -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="span12 ">
<div class="well">
<p class="pull-right"><a href="#">Back to top</a></p>
<strong>haroopress</strong> developed by <a href="http://twitter.com/rhiokim" target="_blank">@rhiokim</a>,<a href="http://twitter.com/haroopress" target="_blank">@haroopress</a> and source in <a href="https://github.com/rhiokim/haroopress" target="_blank">github</a><br/>
Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br />
Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
</div>
</div>
</div>
</div>
</footer>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36216394-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.