본문 바로가기
WEB

[WEB] WEB2 - Node.js (5)

공멍 2021. 4. 16. 08:33

JavaScript - 객체

 사실 이번 학기에 학교에서 OOP에 대해서 공부하고 있고, 얼마전에 시험도 친 지라 객체 다루는 건 어렵지 않았다. 아직 자바와 자바스크립트가 얼마나 다른지는 아직 잘 모르겠지만... (알못)

 

객체는 값을 저장할 수 있는 틀(?) 처럼 생각하기로 했다. 배열과는 순서가 있냐 없냐의 차이.

var roles = {
  'programmer': 'engoing',
  'designer' : 'k8805',
  'manager' : 'hoya'
} //객체 표현

console.log(roles.designer); //k8805
console.log(roles['designer']); //k8805

for(var name in roles){
  console.log('object => ', name, 'value =>', roles[name]);
} //자바에서 for-each 구문이랑 비슷

 

  배열과 마찬가지로 for each 구문으로써 반복할 수 있고, keyword을 통해 이름 - 값을 연결할 수도 있다. (헉 이제보니 이런 건 파이썬이랑 비슷한 것 같다.)

 

자바스크립트에서 함수는 변수화(?) 값으로서 저장할 수 있는 구문이다. 따라서 배열과 객체 안에 저장이 가능하다.

var f = function(){
  console.log(1+1);
  console.log(1+2);
}
var a = [f]; //1. 배열에 저장 가능
a[0]();

var o = { //2. 객체에 저장 가능
  v1:'v1',
  v2:'v2',
  f1: function (){
    console.log(this.v1);
  },
  f2: function(){
    console.log(this.v2);
  }
}

이렇게 객체를 활용하면 이후에 함수나 변수가 손상될 걱정을 덜 해도 된다. (캡슐화)

폴더에다가 데이터를 넣는다고 표현하셨는데 이처럼 코드 가독성도 확 올라가는 것 같다.

 

ex) 객체 개념을 이용해서 template들을 하나로 정리한 모습. (이제까지 계속 작성하던 웹)

var template = {
  HTML:function(title, list, body, control){
    return `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB</a></h1>
      ${list}
      ${control}
      ${body}
    </body>
    </html>
    `;
  },list:function(filelist){
    var list = '<ul>';
    var i = 0;
    while(i < filelist.length){
      list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
      i = i + 1;
    }
    list = list+'</ul>';
    return list;
  }
}

 

Node.js - 모듈

 

모듈은 객체를 정리정돈 할 수 있는 가장 큰 단위의 도구!

var M ={
  v: 'v',
  f:function(){
    console.log(this.v);
  }
}

module.exports  = M;

ㄴ 이렇게 module.exports = (객체명) 을 통해서 모듈을 정의하고, 

 

var part = require('./mpart.js');
console.log(part);
//M.f();

part.f();

ㄴ require('./(module전해주는 파일명)') 을 통해서 모듈을 받아 쓸 수 있다. 

 

▽모듈을 활용해 tempate 객체를 정리하면 좀더 코드가 가독성↑&간단해진다.

module.exports = { //module.exports = template;
  HTML:function(title, list, body, control){
    return `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB</a></h1>
      ${list}
      ${control}
      ${body}
    </body>
    </html>
    `;
  },list:function(filelist){
    var list = '<ul>';
    var i = 0;
    while(i < filelist.length){
      list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
      i = i + 1;
    }
    list = list+'</ul>';
    return list;
  }
}
var template = require('./lib/template.js') //main.js​

 

함수&변수 < 객체  < 모듈  

 

Node.js - 입력 정보에 대한 보안

앞서 작성한 코드대로 querydata를 이용해서 사용자가 입력한 대로 파일을 수정하고, 자동으로 업데이트하도록 하면 발생하는 문제가 있다.

웹사이트 url을 통해서 호스트의 데이터에 접근 가능하다는 뜻은 그 주소를 통해서 더 상위 파일(' ../'를 입력하는 것으로 간단히!)로 접근할 수도 있다는 뜻이다.

 

따라서, 우리는 현재 위치에서 더 상위 파일로 접근하는 것을 막아야할 필요가 있다.

 

var path= require('path');
.
.
.
var filteredId = path.parse(queryData.id).base;
          fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){...}

path.parse(queryData.id).base 를 이용해서 queryData.id가 가리키는 파일을 다시 파일명(base)으로만 바꿔버리는 것이다.

 

ex) /?id=../password.js  => password.js 

 

이렇게 되면 현재 위치(폴더)에 있는 파일에는 영향이 가고, 그렇지 않은 파일들은 찾을 수 없게 되서 undefined라는 결과값을 가지게 된다.

 

보안이라고 하면 컴퓨터 바이러스의 침투를 막는 것만 생각하고 전혀 다른 분야인 줄 알았는데 이런 부분을 관리하는 것도 웹사이트 개발자가 해야할 일이었다... (혼자서는 아무것도 못하는 바보같은 컴퓨터...)

 

 

Node.js - 출력 정보에 대한 보안

마찬가지로, 사용자가 입력하는 문서 역시 자바스크립트에서 다룰 수 있는 문서이다 보니,

태그 안에 적은 데이터를 자바스크립트 문서로 인식하게 만드는 <script> </script> 태그를 이용하면 본래 개발자가 의도했던 바보다 사용자가 더 많은 일들을 할 수 있게 된다. ( 그 문서를 열람하면 다른 사이트로 이동한다든지... 경고창을 띄운다든지...)

 

그래서 우리는 사용자가 입력한 문서를 출력하는 작업에서도 보안을 신경써주어야 한다. 해결안은 크게 두 가지.

1. <script>를 javascript언어가 아니라 그냥 텍스트 그 자체로 받아들이게 한다.

2. <script> 태그안에 있는 내용을 모조리 지운다.

 

둘다 목표한 바를 이루는 방법은 여러 가지이다. 사실 가장 단순하고 간단한 방법은 실시간으로 파일에서 <script>부분을 지우거나, *문자 참조(html entity)를 이용해서 <script>태그가 태그의 기능을 하지 않도록 수정하는 것이다.

 

* '<' :: &lt; | '>' :: &gt;     -> <script> 대신 &lt; script &gt; 로 표기하면 된다.

 

하지만 npm의 모듈 중에서 'sanitize-html'(www.npmjs.com/package/sanitize-html)를 이용하면 모듈 자체에서 그 역할을 할 수 있다고 한다.

 

cmd 창에서 npm init -> npm install -S sanitize-html 으로 sanitize-html 모듈을 설치하고,

var sanitizeHtml = require('sanitize-html');

  var sanitizedTitle = sanitizeHtml(title); //제목 검열
  var sanitizedDescriptioin = sanitizeHtml(description); //내용 검열
  
  var html = template.HTML(sanitizedTitle, list,
              `<h2>${sanitizedTitle}</h2>${sanitizedDescriptioin}`,
              ` <a href="/create">create</a>
                <a href="/update?id=${sanitizedTitle}">update</a>
                <form action="delete_process" method="post">
                  <input type="hidden" name="id" value="${sanitizedTitle}">
                  <input type="submit" value="delete">
                </form>`
            ); 
            //template에 적용한 모습

이런식으로 활용하면 된다. 이러면 html 태그 안에 있는 내용들은 삭제되며 예외로 적용할 html 태그를 sanitizeHtml 인자로 작성하여 사용자가 html 태그를 사용하는 것도 허용할 수도 있다.

 

모듈의 기능과 적용 방법은 각각의 모듈마다 상이하므로 www.npmjs.com/ <- 여기를 참조하면서 그때그때 필요한 기능의 모듈을 적용하면 될 것 같다. 물론 모듈 중에서는 적절하지 못한 불량 모듈이 있을 수도 있으므로 다운로드 수 같은 것을 확인하면서 신뢰도를 점검해야된다. 

API: Application Programming Interface

 모듈을 통해서 Node.js개발자들이 만든 기능들을 우리가 쉽게 사용할 수 있다.

여태까지 var http = require('http'); <- 이런 식으로 작성한 게 다 모듈의 이름인 것!

 

Node.js는 이렇게 ( nodejs.org/dist/latest-v14.x/docs/api/ ) 사이트를 통해서 API가 비교적 잘 카테고리화 되어있는게 매력적인 것 같다. 필요한 기능들을 그때 그때 찾아가면서 어떤 기능이 있는지, 없는지 살펴보는 게 앞으로의 공부 방향점일 것 같다.

 

 

+) pm2에 대한 보충 강의

 

 

- 아직 pm2 사용하는게 까다로워서 중간중간에 pm2를 거치지 않고 cmd에서 바로 바로 실행했던 때가 많았었다. 아마 공부를 계속 진행하다가 pm2를 이용하다보면 언젠가 필요해지는 순간이 있을 것 같아서 퍼왔다. 

 

얼레벌레... WEB2-Node.js 강의를 다 들었다... 안 그래도 양이 제법 많은 강의인데 시험 기간이랑 겹치느라 개인적으로는 되게 고생하면서 열심히(?) 한 것 같아서 좀 뿌듯... 이걸로 뭔가가 될 거라고 생각하진 않아서 방학 때 간단하게 토이 프로젝트라도 간단하게 해보고 싶다.

 

노력? 공부?할 필요성을 느낀거:

1) 깃 허브... 깃 다루기... (아직도 모르겠다...)

2) CSS & HTML 제대로 익혀서 클론 웹사이트(?) 만들어보기

3) Database 란 무엇인가! -> 다음 공부 토픽이다.

4) 새벽에 코딩하지 않고도 할일을 다하는 계획적인 습관(ㅋ)

 

▽생활코딩

'WEB' 카테고리의 다른 글

[DATABASE] Node.js & MySQL (1)  (0) 2021.05.28
[DATABASE] Database2 - MySQL  (0) 2021.05.12
[WEB] WEB2 - Node.js (4)  (0) 2021.04.14
[WEB] WEB2 - Node.js (3)  (0) 2021.04.09
[WEB] WEB2 - Node.js (2)  (0) 2021.04.09

'WEB' Related Articles

티스토리툴바