※ 위 포스트의 모든 내용은 생활코딩에 출처가 있습니다.
https://www.opentutorials.org/course/3332
WEB2 - Node.js - 생활코딩
수업소개 이 수업은 JavaScript를 이용해서 Node.js를 제어해 동적으로 HTML 코드를 생성하는 웹애플리케이션을 만드는 방법에 대한 수업입니다. 수업대상 예를들어 1억개의 페이지로 이루어진 웹사이트가 있다고 상상해보세요. 그런데 HTML 코드의 구조를 바꿔야 한다면 어떤 절망적인 상황이 생길까요? 이런 상황에서 생겨날 절망감을 상상할 수 있는 분이라면 이 수업을 통해서 혁명적인 변화를 겪을 수 있습니다. 수업을 보는 다른 방법 Youtube
www.opentutorials.org
Node.js - URL로 입력된 값 사용하기
URL에 포함된 쿼리 스트링을 해석해서 이용하는 방법
http://opentutorials.org:3000/main?id=HTML&page=12
protocol: 사용자가 서버에 접속할 때 어떤 방식으로 통신할것인가에 대한 부분, 웹브라우저와 웹서버가 서로 데이터를 주고 받기 위한 통신규칙
host(domain): 특정한인터넷에 접속되어 있는 각각의 컴퓨터를 가리키는 주소
port: 포트번호, 클라이언트가 접속했을 때 어떤 포트의 서버와 접속할지 알려줌
path: 어떤 디렉토리의 어떤 파일인지를 가리킨다
query string: query string의 값을 변경하면 웹서버에게 데이터를 전달할 수 있다. 값과 값은 &를 사용하기로 약속
Node.js - 콘솔에서의 입력값
콘솔 환경에서 앱을 실행할 때 입력 값을 전달하는 방법
var args = process.argv;
console.log(args[2]); //콘솔창에서 args[2]에 값이 들어간다
console.log('A');
console.log('B');
if(args[2]==='1'){ //입력한 값이 1이라면 다음을 출력한다
console.log('C1');
}else{
console.log('C2');
}
console.log('D');조건문을 통해서 어떤 입력값이 오느냐에 따라서 프로그램이 다르게 동작하게 된다.
<실행 화면>
App - Not found 오류 구현
존재하지 않는 정보에 대한 요청이 들어왔을 때 Not found 오류메시지를 전송하는 방법
var _url = request.url;
var queryData = url.parse(_url, true).query;
var pathname = url.parse(_url, true).pathname;
var title = queryData.id;
console.log(url.parse(_url, true)); //url을 분석하는 코드에 어떤 내용이 담겨있는지 본다
if(pathname=='/'){
fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
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>
<li><a href="/?id=CSS">CSS</a></li>
<li><a href="/?id=JavaScript">JavaScript</a></li>
</ul>
<h2>${title}</h2>
<p>${description}</p>
</body>
</html>
`;
response.writeHead(200); //파일이 성공적으로 전송됨
response.end(template);
})
}else{ //에러표시
response.writeHead(404); //에러발생
response.end('Not found');
}url의 pathname를 추출 후, 조건문을 사용해서 'pathname'==/'일때는 해당 파일이 보이도록 하고, 존재하지 않는 경로의 url로 이동할 경우 'Not found'가 보이도록 한다.
<실행 결과>
App - 홈페이지 구현
조건문을 활용해서 홈페이지를 표현하는 방법
아직 홈('/')에 대한 처리가 적용되어 있지 않으므로 여기서는 중첩 if문을 사용해서 루트 페이지 이동문제를 해결해준다.
if (pathname === '/') {
if (queryData.id === undefined) { //쿼리가 지정되어있지 않다면(홈화면)
fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description) {
var title = 'welcome';
var description = 'hello node.js';
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>
<li><a href="/?id=CSS">CSS</a></li>
<li><a href="/?id=JavaScript">JavaScript</a></li>
</ul>
<h2>${title}</h2>
<p>${description}</p>
</body>
</html>
`;
response.writeHead(200); //파일이 성공적으로 전송됨
response.end(template);
});
} else {
fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description) {
var title = queryData.id;
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>
<li><a href="/?id=CSS">CSS</a></li>
<li><a href="/?id=JavaScript">JavaScript</a></li>
</ul>
<h2>${title}</h2>
<p>${description}</p>
</body>
</html>
`;
response.writeHead(200); //파일이 성공적으로 전송됨
response.end(template);
});
}
} else { //에러표시
response.writeHead(404); //에러발생
response.end('Not found');
}
});
<실행 결과>
Node.js - 파일 목록 알아내기
Node.js에서 특정 디렉토리 하위에 있는 파일과 디렉토리의 목록을 알아내는 방법
구글에 nodejs file list in directory 검색
var testFolder = './data';
var fs=require('fs');
fs.readdir(testFolder, function(error, filelist){ //디렉토리를 읽어오는 함수
console.log(filelist); //디렉토리에 있는 파일이 배열형태로 출력됨
});
App - 글목록 출력하기
data디렉토리에 있는 파일들의 이름을 이용해서 글 목록을 생성하는 기능 구현
위의 fs.readdir()을 이용하여 디렉토리안에 있는 파일명을 추출하여 반복문으로 글의 목록을 출력할 수 있다.
if (pathname === '/') {
if (queryData.id === undefined) { //쿼리가 지정되어있지 않다면(홈화면)
fs.readdir('./data', function(error, filelist) {
var title = 'welcome';
var description = 'hello node.js';
var list = '<ul>';
var i = 0;
while (i < filelist.length) {
list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
i++;
}
list = list + '</ul>';
var template = `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
${list}
<h2>${title}</h2>
<p>${description}</p>
</body>
</html>
`;
response.writeHead(200); //파일이 성공적으로 전송됨
response.end(template);
});
} else {
fs.readdir('./data', function(error, filelist) {
var list = '<ul>';
var i = 0;
while (i < filelist.length) {
list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
i++;
}
list = list + '</ul>';
fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description) {
var title = queryData.id;
var template = `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
${list}
<h2>${title}</h2>
<p>${description}</p>
</body>
</html>
`;
response.writeHead(200); //파일이 성공적으로 전송됨
response.end(template);
});
});
}
} else { //에러표시
response.writeHead(404); //에러발생
response.end('Not found');
}
<실행 결과>
