WEB

[WEB] WEB2 - Node.js (1)

공멍 2021. 4. 8. 03:44

백엔드 개발을 공부하려니까 여러가지 선택권이 있었다. Node.js , 자바스프링,  Django 등등...

그 중에서 그나마 난이도가 쉬운 편이라는(?) Node.js를 추천 받아서 커리큘럼을 짜고, 공부하기 시작했다.

 

Node.js

  WEB Browser에 있는 기능을 HTML라는 언어로 우리가 원하는 WEB Application을 구성하는 것 같이 Node.js 역시 Node.js runtime이라는 프로그램에 있는 기능을 JavaScript으로 원하는 Node.js Application을 구성하는 식.

 

Node.js를 활용하면 콘솔로 파일에 들어있는 내용을 간단히 실행할 수 있다.

 

cmd 이용해서 helloworld.js 실행하기 (파일 내용: console.log(1+1);)

 

*cmd 창 경로 이동 - cd + (폴더주소)

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'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    response.end(fs.readFileSync(__dirname + url));
 
});
app.listen(3000); //  https://localhost:3000

cmd 창에서 해당 node.js 파일을 실행하고, 웹브라우저에서 http://localhost:3000/ 주소로 들어가면 같은 폴더에 있는 웹페이지가 뜬다. (마지막 줄 app.listen(3000))

 

*fs는 모듈(?)이라고 한다... 사실 아직 잘 모르겠다.ㅎ

 

+) 아직 정확하게 이해는 할 수 없지만 추가로 알려준 Node.js 기능들...

//1
    console.log(__dirname + url); //리로딩 할 때마다 cmd창에 방문기록 로그 남음
    
 //2
    response.end('egoing: '+url); // 해당 주소에 접속했을 때 'engoing: ' + (연결되는 웹페이지 주소 출력)

 

 

아무래도 Node.js 가 JavaScript 기반이다보니까 JavaScript의 문법도 같이 진행을 했다. 

 

JavaScript 문법  

 

  • Number
console.log(1+1); //숫자(1), 연산자(+)
console.log(4-1);
console.log(2*2);
console.log(10/2);

 

  • String
// '1' or "1"
console.log(1+1); //1+1 = 2
console.log('1'+'1'); // = 11

// string.length -> 문자열의 길이 계산
console.log('hello world'.length);

 

  • Variable
var a = 1; //변수를 선언할 땐 되도록 var << 선언해주기
console.log(a);
a = 2;
console.log(a);

var name = '나비'
console.log('나는 '+name+'이다. '+name+'는 '+name+'다.');
//나는 나비이다. 나비는 나비다.

 

변수를 쓰는 이유? _ 중복 피하여 코드의 간결성, 간단성, 가독성

 

 

  • Template
var name = 'butterfly';
// String literals
var letter = 'I like '+name+'.\nThey are beautiful.';
// '\n': 줄바꿈 문자
console.log(letter+(1+1));
/*I like butterfly.
They are beautiful.2*/

letter = `I like ${name} \nThey are beautiful.${1+1}`;
console.log(letter);

 

URL이란!

https://  opentutorials.org : 3000 / main ? id=HTML&page=12

 

protocol 통신규칙

host(domain) 호스팅하는 컴퓨터 이름

port 호스트 컴퓨터에서 어떤 서버를 사용할것인지. (웹서버 Default = 80)

path 그 포트의 어떤 파일인지 가리킴.

query string 서버에 데이터를 전달 가능. (물음표(?)로 시작하며, 값의 이름은 =로, 값과 값 사이는 &로 구분하기로 약속 되있음)

 

 

 

  • Node.js에서 url을 통해서 입력된 값을 사용하는 방법
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.name); //ex) https://localhost:3000/?name=HTML
    if(_url == '/'){
      _url = '/index.html';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    response.end(fs.readFileSync(__dirname + _url));

});
app.listen(3000);

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

  - 이런식으로 되어있으면 여기서 queryData는 id=HTML이 되고, queryData.id는 HTML이 되는 식.

 

 

이걸 활용해서 Node.js는 엄청난 확장성을 지닌다!

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;
    var title = queryData.id;
    if(_url == '/'){ 
    /*if문을 이용해서, queryData값이 없을 때는 Title을 Welcome으로 하도록 하기*/
      title = 'Welcome';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    var template = `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB</a></h1>
      <ul>
        <li><a href="/?id=HTML">HTML</a></li> //url대신 ?id=HTML로 이동하도록 변경
        <li><a href="/?id=CSS">CSS</a></li>
        <li><a href="/?id=JavaScript">JavaScript</a></li>
      </ul>
      <h2>${title}</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>
    `;
    response.end(template);

});
app.listen(3000);

template을 만들어서 변수를 사용자가 입력한 url에 따라 사이트에서 변수인 ${title}이 바뀔 수 있도록 한다.

 

 

실제로 http://localhost:3000/?id=Animal -> 이딴 사이트에 절대 없는 값을 url 입력창에 입력해도

 

<title>부분과 <h2>부분에 사용자가 입력한 queryData 값 그대로 입력된 모습

이런식으로 템플릿에 작성한 그대로 출력되서 나온다!

 

 

C언어를 배울 때 scanf를 처음 썼을 때 만큼이나 신기함. :0

 

물론 html 템플릿에서 <title>과 <h2>부분만 적용되도록 작성해서 영 틀린 내용을 출력하긴 하지만, 그건 그때 그때 내용에 맞춰서 작성하면 되는거고...

 

 

많은 웹페이지를 템플릿을 통해서 한번에 관리할 수 있다는 게 핵심이다.

 

이를테면,

<ul>
   <li><a href="/?id=HTML">HTML</a></li>
   <li><a href="/?id=CSS">CSS</a></li>
   <li><a href="/?id=JavaScript">JavaScript</a></li>
</ul>

이렇게 <ul>이었던 템플릿을

 

<ol>
   <li><a href="/?id=HTML">HTML</a></li>
   <li><a href="/?id=CSS">CSS</a></li>
   <li><a href="/?id=JavaScript">JavaScript</a></li>
</ol>

이렇게 <ol>로 바꾸는 것 만으로 많은 사이트의 목차 설정을 한 번에 변경할 수 있게 되는 것이다.

 

 

확실히 Node.js는 아파치로 호스팅 할 때보다 훨씬 더 간단(?)하고 더 많은 기능들이 있는 것 같았다.

사실 커맨드 창을 제대로 쓸 일이 없어서 쓸 줄 몰랐는데(패션컴공인듯ㅋ) 뭔가 이걸로 호스팅 켜고, 끄는 것도 직관적으로 느껴졌음.

 

+) 티스토리 글을 작성할 때는 코드블럭이 색칠되서 작성되는데 막상 글을 발행하고 나면 코드블럭이 제대로 간지나게 안 나오길래 인터넷을 뒤져서 색칠하는 법을 배웠다. 개인적으로 까만 배경에 코드 색칠 된거 너무 좋음.ㅎㅅㅎ

 

 

▽생활코딩링크