처음부터 차근차근

Node.js의 등장과 웹서버 만들기 본문

FrameWork/Node.js

Node.js의 등장과 웹서버 만들기

HangJu_95 2023. 5. 30. 11:11
728x90

1. Node.js의 등장

 - 웹이 등장한 직후 여러가지 불만들이 쏟아져 나왔다.

  • 수많은 html을 직접 타이핑해서 직접 웹페이지를 수정하는 것에 지침.
  • 방문자들이 마음대로 글을 올리게 하고 싶었지만 그들에게 직접 html의 수정 권한을 주는 것은 위험했고

  =>곧 성장의 한계에 직면하게 됐다.

 

 - 선구자들 : 귀찮고 반복적인 html 작업은 기계에게 시키자..

  • 컴퓨터공학자들은 이미 자바스크립트에 익숙한 웹개발자들이 새로운 언어를 배우지 않고도 웹페이지를 자동으로 생성하는 서버쪽 애플리케이션을 만들 수 있게하고 싶어했다.
    => Node.js 출현

 - 1995년 : 넷스케이프사에서 브랜든 아이크에게 자바스크립트의 제작을 의뢰 => 자바스크립트 탄생.
(웹은 사람과 상호작용하는 애플리케이션의 면모를 갖추게 됨.)

  • 자바스크립트는 웹브라우저에서 유일하게 사용할 수 있는 독점적인 프로그래밍언어이자 웹브라우저에 갇혀있는 언어였다.

 - 2008년 : 구글이 크롬 웹브라우저에서 동작하는 자바스크립트의 성능을 개선하기 위해 V8엔진을 개발 후 오픈소스로 공개

  • 라이언달은 V8을 기반으로 하는 Node.js를 탄생시킨다.
  • (태초의 자바스크립트가 웹브라우저를 제어하는 것이었다면 Node.js는 자바스크립트를 이용해서 웹브라우저가 아닌 컴퓨터 자체를 제어한다. 마치 Python, Java, PHP, 루비가 그런 것처럼.)

웹개발자들은 자신들에게 이미 익숙한 자바스크립트를 이용해서 웹페이지를 자동으로 생성하는 웹 애플리케이션을 만들고 싶어했다.

웹개발자들은 Node.js에 열광했고 웹브라우저라는 울타리에 갇혀있던 자바스크립트는 빠른 속도로 웹브라우저 밖으로 팽창하기 시작했다.

자바스크립트를 이용해서 웹페이지를 찍어내는 거대한 공장인 Node.js의 공장장이 되어 보자.

HTML을 코딩하는 지루한 일은 공장에게 맡기자.

 

<!doctype html>
<html>
<head>
  <title>WEB1 - HTML</title>
  <meta charset="utf-8">
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>HTML</h2>
  <p><a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 speicification">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
  <img src="coding.jpg" width="100%">
  </p><p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
  </p>
</body>
</html>

위 코드와 같은 홈페이지가 있다고 가정해보자.

 

소스 코드는 다음과 같고 누군가가 웹페이지의 목록 부분의 번호를 지워달라고 요청했을 때
Node.js가 없다면 우리는 모든 웹페이지의 <ol>태그를 <ul>로 바꿔야 한다.

지금이야 바꿀 웹페이지가 4개 밖에 없어서 다행이지만 수정해야 할 웹페이지가 무수히 많다면 엄청난 고생을 하게 될 것이다.

Node.js를 이용한다면 우리는 비슷한 웹페이지를 무수히 제작할 필요가 없다.
사용자가 어떤 페이지를 요청할 때 마다 Node.js와 같은 기술로 그 순간순간에 원하는 웹페이지를 생성한다.

Node.js를 사용하면 사용자의 참여(읽기, 쓰기, 수정, 삭제)를 가능하게 한다.

(Node.js의 경쟁관계 : PHP, JSP, Python의 Django 루비의 루비온레일즈 등등..)

 

2. Node.js로 웹서버 만들기

웹서버 기능을 내장하고 있기 때문에 웹서버로 사용 가능하다.

 - Egoing 생활코딩 강의 version 

var http = require('http');
var fs = require('fs');
var app = http.createServer(function(request,response){
    var url = request.url;
    if(request.url == '/'){
      url = '/index.html';
    }
    if(request.url == '/favicon.ico'){
        response.writeHead(404);
        response.end();
        return;
    }
    response.writeHead(200);
    response.end(fs.readFileSync(__dirname + url));
 
});
app.listen(3000);

 - Node.js 문서 Version

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Node.js는 http 모듈을 통해 웹서버 기능을 동작시킨다.

터미널을 들어간 다음, Node Main.js 를 실행시키면 실행이 된다.

console.log(__dirname + url);을 입력하고 저장한 뒤에 터미널로 node main.js를 입력하여 작동시켜 보자.

다음과 같이 요청한 파일이 출력된다.

 

__dirname + url을 통해 사용자가 특정 파일에 접근할 때마다 그 경로를 설정해준다.
Node.js의 기능인 fs.readFileSync()를 통해 __dirname + url을 통해 설정된 경로의 파일을 가져온다.

response.end()안의 내용을 사용자에게 전송한다.
즉 프로그래밍적으로 사용자에게 전송할 데이터를 설정한다.

 

 

 

'FrameWork > Node.js' 카테고리의 다른 글

Node.js 파일 리스트 읽어오기  (0) 2023.05.30
Node.js 홈페이지 구현  (0) 2023.05.30
Node.js Not found 구현  (0) 2023.05.30
Node.js 파일 읽기 구현  (0) 2023.05.30
Node.js - URL의 이해  (0) 2023.05.30
'FrameWork/Node.js' Related Articles more