24. App - 글목록 출력하기
23.6.4.
✔ 목표
data 디렉토리에 있는 파일들의 이름을 이용해서 글 목록을 생성하는 기능을 구현하기
지난시간 : 파일목록 알아낼 수 있는 것을 배움.
🧐 수업 내용
1. list부분을 파일목록으로 바꿀 예정!
<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>이 부분을 파일목록으로 바꾸자
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); 이 부분을 filelist로 감싸준다.
2. filelist를 불러오는 코드 작성
정상실행되는 것 확인
3. 코드 이동
fs.readdir('./data', function(error, filelist){ //이 코드 안으로 원래 있던 내용 이동! })
4. <list>부분을 변수로 변경하기!
<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>
이 부분을 변수(list)로 변경
${list}
5. 반복문 이용하기
결과
(하이퍼링크는 없어진 상태)
6. 링크까지 처리하기
/* 참조
var list = `<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>`;
*/
var list = `<ul>`;
var i = 0;
while(i < filelist.length){
list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`; //filelist의 i값에 따라서 하이퍼링크 연결!!
i = i + 1;
}
list = list + `</ul>`;결과
7. else부분 (id값이 있는 경우)도 코드 추가해주기
else { //id 값이 있는 경우
fs.readdir('./data', function(error, filelist){ //filelist는 data디렉토리 안에 있는 파일이어야 함
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 = i + 1;
}
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);
});
});
}8. 확인하면 정상실행됨
9. data 디렉토리에 nodejs 추가 파일 만들고 정상실행되는지 확인해보기
정상작동!
소!름!
✔ 파일을 추가하면 알아서 작동한다.
✔ 내용 수정 안 해도 된다.
👉 혁명적.
🤔 느낀 점
- 선생님께선
혁명적이라는 단어를 자주 쓰신다.
필자는 뭐가 혁명적인건지,,, 잘 몰랐다.
그런데 오늘 그 단어를 뼈저리게 느끼게 되었다.
동적으로 연결되어서 파일만 추가하면nodejs가 실행시키는 구조가 너무 신선하고 새로웠다.
특히, list변수를 새로 만들어서 filelist의 내용을 가져오는 부분이 가장 인상 깊다.
fs.readdir('./data', function(error, filelist){ //filelist는 data디렉토리 안에 있는 파일이어야 함 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 = i + 1; } list = list + `</ul>`;
- 얼른 내걸로 만들고 싶다.
몇 번 더 반복해서 영상을 봐야 할 것 같다.
To be "irreplaceable"