[Node.js] 개요 - 웹페이지 생성 preview, query string

[강의 출처] opentutorials.org/course/3332

WEB2 - Node.js - 생활코딩

---

Node.js

• javascript를 웹브라우저 외부(컴퓨터 자체나 서버 등)에서도 사용할 수 있도록 환경을 구현해주는 플랫폼
• javascript 기반으로 웹페이지를 자동으로 생성하기 때문에 서버쪽 애플리케이션(Server Side Application)이기도 함
  • html을 직접 타이핑해서 웹페이지를 만들면 구조를 바꾸는 등의 작업은 굉장히 복잡해지지만,
  • html template을 정의함으로써 손쉽게 여러 개의 html 페이지 제어가 가능
  • Node.js를 통해서 클라이언트의 요청에 따라 순간순간 페이지(사용자에게 전송할 데이터)를 생성할 수 있음

 

Node.js로 웹페이지 생성하기 Preview

만약 여러 html 페이지가 같은 스타일로 구성되어 있다면(탬플릿을 공유한다면)

기본 모양이 될 탬플릿을 설정한 후,

유저의 요청에 따라 동적으로 변동될 데이터 부분만을 따로 모아두고

요청이 오면 탬플릿에 유저의 요청 데이터를 반영해서 출력해주는 형태로 보여줄 수 있다.

예제에서는 node.js로 웹서버를 운영하는 상태에서, 유저의 요청을 url 쿼리스트링을 통해 처리한다.

 

 

쿼리 스트링(query string)

• url 등에 붙어서 클라이언트가 어떤 데이터를 요청하는지 표현해주는 구문
• 물음표로 시작하고, =로 이름과 값(id: HTML)을 나타내며, 각 이름들은&로 구분한다.(id & page),
• 이를 통해서 html의 12페이지처럼 구체적인 데이터 요청이 가능해진다.
• node.js의 url 모듈을 통해 파싱이 가능하다 (ex url.parse(request.url, true).query)

URL 구조

 

Preview 예제

var http = require('http');
var fs = require('fs');
var url = require('url');          // node에서 url 모듈 호출

var app = http.createServer(function(request, response){
    var _url = request.url;        // 요기는 모듈 아니고 유저한테 입력받은 url, 구분을 위해 _ 추가
    var queryData = url.parse(_url, true).query;       // 입력받은 url 파싱

    /************** 템플릿용 예시데이터 시작 ***********/
    var title = queryData.id;                          // 유저가 입력한 데이터에서 id 추출
    var template = `Hello, This is ${ title } page.`;  // 템플릿에 id를 넣어서 데이터 완성
    var text =                                         // 여기도 무의미한 템플릿 예시임
    `
       ${ title } Lorem ipsum dolor sit amet,
       ${ title } consectetur adipisicing elit,
       ${ title } sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
       ${ title } Ut enim ad minim veniam,
       ${ title } quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
       ${ title } Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
       ${ title } Excepteur sint occaecat cupidatat non proident,
       ${ title } sunt in culpa qui officia deserunt mollit anim id est laborum.
        `;
    /************** 템플릿용 예시데이터 종료 ***********/

    if(_url == '/'){                                  // id 입력 없이 홈페이지로 접속했다면
        template = 'type something for url id.';      // 보여줄 내용 선택
        text = 'like: ?id=something';
    }
    response.writeHead(200);
    response.end(template + "\n\n" + text); // 사용자가 요청한 데이터를 보여주는 부분
});
app.listen(3000);      // 포트번호는 3000번으로 설정

위 스크립트 이름이 helloworld.js 라고 할 때, 맥 터미널로 아래와 같이 실행시키면 노드로 웹서버를 구동할 수 있다.

$ node helloworld.js

설정한 포트번호가 3000번이므로 http://localhost:3000 주소에 접속하면 이런 결과가 출력된다.

http://localhost:3000/

id에 뭔가를 입력하면 이런 결과를 확인할 수 있다.

http://localhost:3000/?id=something