생활코딩 : Node.js

https://opentutorials.org/module/3549

Node.js

https://github.com/Myoungmin/web1_html_internet

GitHub - Myoungmin/web1_html_internet: WEB2 - Node.js 학습을 위한 repository

 

 

Node.js - 10.URL을 통해서 입력된 값 사용하기

검색어 : nodejs url parse query string

 

var queryData = url.parse(_url, true).query;
//...
response.end(queryData.id);

 

query string에 따라 다른 정보를 console를 통해 출력하는 웹애플리케이션

 

id를 출력하는 실습

 

Node.js-11.App 제작-동적인 웹페이지 만들기

웹애플리케이션에서 정보를 동적으로 프로그램으로 생성하는 방법 실습.

• 변수선언하여 ${}에 대입하여 동적으로 변환.
• <a href="/?id=HTML">HTML</a>으로 쿼리로 id를 설정하는 링크로 변경하고, 쿼리 id를 변수로 갱신, id 변경으로 텍스트 동적으로 변환

 

Node.js-12.Node.js의 파일 읽기 기능

제목을 동적으로 바꾸는 것을 성공하였지만, 본문은 아직 정적이다.
파일에 본문만 저장했다가 사용자 요청이 들어왔을 때, 요청에 해당하는 파일의 본문만 읽어서 본문의 내용도 동적으로 교체하는 것이 필요하다.

 

파일을 어떻게 하면 Node.js로 읽을 수 있는가, CRUD를 Node.js로 어떻게 수행하는가 실습.

 

Node.js-13.App 제작- 파일을 이용해 본문 구현

쿼리 스트링 값에 따라 파일을 읽어 본문이 변경되는 웹애플리케이션 구성.

 

Node.js-19.1.App 제작-Not found 구현

pathname : ‘/’
path : ‘/?id=CSS’

pathname은 주소에 쿼리스트링이 실제 주소에 있더라도 쿼리스트링을 제외한 path를 보여준다.

  
pathname===’/’ 의 조건이 아니라면 Not found를 보여주기 위하여 아래 코드가 실행되도록 구성

response.writeHead(404);
response.end(‘Not found’);

 

Node.js-23.Node.js에서 파일목록 알아내기

검색어 : nodejs file list in directory

 

Node.js-24.App 제작-글목록 출력하기

파일목록을 가져와서 배열을 구하고 반복문으로 배열을 순회하면서 본문 내용을 구성한다.
이렇게 구성하면 파일이 추가되면 알아서 작동하게 되어 코드를 열어 내용 수정을 할 필요가 없어진다.
데이터가 바뀌어도 로직이 수정되지 않는 형태.

 

Node.js-25.3.JavaScript-함수의 출력

자바스크립트 함수는 반환 자료형 따로 쓰지 않고 

 

function sum(first, second)
{
    return first+second;
}

이런 형태로 정의한다.

 

Node.js26.App 제작-함수를 이용해서 정리 정돈하기

함수를 이용하여 코드 중복성 해결.

 

Node.js-28.1.Nodejs에서 동기와 비동기

filesystem 메서드를 살펴보면 뒤에 Sync가 붙은 것과 안붙은 것 차이.
Sync가 있으면 동기적인 처리 방법, Sync가 없으면 비동기적 처리.
이름에서 알 수 있듯이 Nodejs는 비동기적 방법을 선호하고 있다.

Sync가 붙은 메서드는 callback이 없다.

비동기적처리를 살펴보면 텍스트 파일을 읽는 작업이 끝나면 세 번째 파라미터로 받은 메서드를 node.js가 실행한다.

 

fs.readFile(‘syntax/sample.txt’, ‘utf8’, function(err, result){

});

넘겨 받은 함수는 첫 번째 파라미터 err로 에러여부를 확인해주고,
두 번째 파라미터로 result로 파일의 내용을 알려준다.

 

node.js 성능을 제대로 끌어오기 위해서는 반드시 비동기적 방법으로 처리해야 한다.

 

Node.js-28.3.JavaScript-callback

콜백의 형식을 알아보는 수업.

 

var a = function(){
    console.log(‘A’);
}

 

위에서 알 수 있듯이 자바스크립트에서 함수는 값이다.


함수가 파라미터로 callback을 받으면 이 기능을 실행한 쪽에게 함수가 실행이 끝났으니까 그 다음일을 하라고 알려주는 로직을 구성할 수 있다.
함수 내부에서 파라미터로 받은 callback을 실행해주면 된다.

 

Node.js-29.Node.js의 패키지 매니저와 PM2

패키지는 소프트웨어를 부르는 여러가지 표현중 하나.
Package Manager는 프로그램 생성, 설치, 업데이트, 삭제 등을 관리해주는 것.

 

NPM :

Node.js에서 가장 광범위하게 사용되고 있고 기본적으로 Node.js를 설치할 때 함께 설치되는 Package Manager.

 

PM2 :

Node.js로 만든 실행 중인 프로세스를 감시하다가 꺼지면 다시 켜주는 역할을 하는 패키지.
프로그램 파일의 수정을 관찰하고 있다가 수정되면 자동으로 프로세스를 재시작하여 수정할 때마다 수동으로 재시작하는 불편을 덜어준다.

 

//-g : 내가 설치한 프로그램은 독립된 소프트웨어라 어디에서든 실행 가능해야한다.

npm install pm2 -g

 

//--watch : 수동으로 재시작 안할 수 있게 해준다.

pm2 start main.js --watch

 

Node.js-30.HTML-form

지금까지 방법으로는 데이터 디렉토리에 접근할 수 있는 사람은 자기 자신뿐이라 컨텐츠 생성을 사이트 소유자만 할 수 있다.
누구나 웹을 통해 데이터를 전송하고 그 데이터를 데이터 디렉토리 안에 생성하고 싶을 때를 위하여,
지금부터 살펴볼 것은 사용자가 컨텐츠를 웹을 통해 생성, 수정, 삭제하는 방법에 대해 설명할 것이다.

 

첫 번째로 사용자가 서버 쪽으로 데이터를 전송하기 위한 방식인 HTML form 기능을 살펴볼 것이다.

input, textarea 태그 등을 이용하여 사용자가 입력한 정보를 서버로 전송하기 위해서는,
데이터를 form이라는 태그로 감싸주고,
action 프로퍼티에 URL을 입력한다.
서버쪽에서 받을 때 각각의 이름이 있어야 의미가 있어서 각 태그의 name 프로퍼티에 이름을 입력해준다.

 

<form aciton=”http://localhos:3000/process_create” method=”post”>

 

 

데이터를 전송할 때 주소에 데이터가 포함되어 있다면,
주소를 다른 사람에게 보냈을 때 그 사람이 그 주소를 클릭하여 들어오면 서버의 정보가 생성, 수정, 삭제가 일어나게 된다.
이러한 상황을 방지하기 위해서,
1. 서버에서 데이터를 받아올 때는 쿼리스트링을 통해 받아온다. 
2. 데이터 수정 행위를 할 때는 필요한 데이터를 URL로 보내지 않고, 눈에 보이지 않는 post method 방식으로 보낸다.

 

Node.js-31.App 제작-글생성 UI 만들기

placeholder : 
입력창에서 사용자가 어떤 정보를 입력해야하는지 알려주는 프로퍼티

 

Node.js-32.App 제작-POST 방식으로 전송된 데이터 받기

var qs = require(‘querystring’);

//정보가 조각조각 들어오면 콜백이 호출되어 파라미터에 담기고
request.on(‘data’, function(data){
    body = body + data;
});
//더이상 들어올 정보가 없으며 아래 콜백이 호출된다.
request.on(‘end’, function(){
    var post = qs.parse(body);
    //아래 변수에 대입하여 전송된 title, description을 구할 수 있다.
    var title = post.title;
    var description = post.description;
});

 

Node.js-33.App 제작-파일생성과 리다이렉션

사용자가 입력한 POST 방식으로 전송된 데이터를 동적으로 데이터 디렉토리 안에 파일의 형태로 저장하는 방법.

fs.writeFile 메서드 사용.

 

Node.js-35.App 제작-글수정-수정할 정보 전송

업데이트 화면을 만들 때 필요한 2가지.
Form이 필요하고, 그 Form에 수정하고자 하는 데이터를 미리 넣어놓아야 하기 때문에 Read 기능이 필요하다.
즉 fs.readdir 로직이 필요.

title로 전송한 정보를 바탕으로 하면 문제가 생긴다. 사용자가 title을 수정할 수 있기 때문이다.
수정된 내용을 바탕으로 파일을 찾을텐데 그런 파일이 없기때문에 문제가 생긴다.
사용자가 수정한 정보와 우리가 수정하고자하는 파일정보를 구분할 필요가 있다.
사용자가 title을 변경하고 입력하였을 때 파일을 일관적으로 찾기위해서 아래와 같은 로직 수행일 필요하다.

<input type=”hidden” name=”id” value=”${title}”>

hidden으로 된 컨트롤의 id라는 이름으로 value가 전송된다.
수정할 파일의 이름을 받을 수 있다.

 

Node.js-36.App 제작-글수정-파일명 변경, 내용저장

파일명 변경은 fs.rename 사용
내용 저장은 fs.writeFile 사용

 

Node.js-37.App 제작-글삭제-삭제버튼 구현

delete 버튼을 클릭하면 어디로 이동하지 않고, 바로 그곳에서 삭제하고 싶을 때,
delete 버튼을 링크로 만들면 잘못된 방법이다.
링크는 클릭했을 때 이동하여 나타난 주소가 노출되었을 때 문제가 된다.
그래서 실습에서는 form으로 구현하였다.

 

<form action=”delete_process” method=”post”>
<input type =“hidden” name=”id” value=”${title}”>
<input type=”submit” value=”delete”>
</form>

 

디자인 통일성 처리는 CSS를 공부하면 해결할 수 있다.

 

Node.js-38.App 제작-글삭제 기능 완성

fs.unlink 사용.

 

Node.js-39.JavaScript 객체의 형식

//객체는 중괄호 사용
var roles = {
‘programmer’ : ‘egoing’,
‘designer’ : ‘k8805’,
‘manager’ : ‘hoya’
}

 

Node.js-42.JavaScript-객체-데이터와 처리 방법을 담는 그릇으로서 객체

서로 연관된 값들을 하나의 객체로 정리정돈해서 넣어둘 수 있다.

 

var object = {
	v1:’v1’,
	v2:’v2’,
	f1:function(){
		console.log(this.v1);
	},
	f2:function(){
		console.log(this.v1);
	}
}

 

함수는 값이다.
객체는 값을 저장하는 그릇이다.
이와 같은 특성을 활용하여 서로 연관된 데이터와 처리방법을 담고있는 함수들을 객체로 그룹핑하여 코드의 복잡성을 획기적으로 낮출 수 있다.

 

Node.js43.App제작-템플릿 기능 정리정돈하기

객체의 값 하나하나를 프로퍼티라고 부른다.
템플릿 함수들을 객체화하는 수업.

 

Node.js-44.Node.js 모듈의형식

//객체를 모듈밖에서 사용할 수 있도록 내보낼 때
module.exports = M;

//모듈을 가져올 때
var part = require(‘./mpart.js’);
//가져온 모듈을 사용
part.f();

 

Node.js-45.App 제작 - 모듈의 활용

template.js라는 파일을 따로 만들어서 객체를 담는다.

module.exports = {...} 

 

객체를 정의한 자바스크립트 파일에서는 이렇게 객체이름 따로 지정 안하고

아래와 같이 모듈을 가져와서 사용.

var template = require(‘./lib/template.js’);

 

Node.js-46.App 제작-입력정보에 대한 보안

검색어 : nodejs path parse

filteredId라는 변수에 path.parse(id).base; 를 대입하여,
사용자에게 시스템을 열어주는 것을 방지한다.
오염된 정보가 들어오는 것을 방지하는 예를 설명하는 강의.

 

Node.js-47.1.App제작-출력정보에 대한 보안

오염된 정보가 나가는 것을 방지하는 예를 설명하는 강의.

create로 우리사이트에 자바스크립트 코드를 심어놓을 수 있고 이러한 정보가 다른 사람에게 실행될 수 있다.

사용자에게 ‘<’ 꺽쇠를 보여주고 싶을 때

 

검색어 : html entities

&lt;
자바스크립트 웹브라우저는 위 문자를 ‘<’로 표시해준다.

 

Node.js-47.2.App제작-출력정보에 대한 보안

검색어 : npm sanitize html

 

//-S : 우리가 진행하는 프로젝트에서 사용할 부품으로만 사용

npm install -S sanitize-html

 

Node.js-47.3.App제작-출력정보에 대한 보안

sanitizeHtml을 사용하여 dirty했던 html이 clean해진다.
이렇게 하면 좋은 이유는 자신이 사용하는 변수가 살균이 되었는지를 변수 이름을 통해서 안심할 수 있다.
태그를 제외한 내용만 넣고, 어떤 태그는 허용할지 선택할 수도 있다.

 

var sanitizeHtml = require(‘sanitize-html’);

var dirty = ‘some really tacky HTML’;
var clean = sanitizeHtml(dirty);