생활코딩 node.js_23강부터 24강까지

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

지금까지의 한계를 살펴보자

data가 추가되면 main.js의 글 목록을 매번 편집을 해주어야한다는 번거로움이 있다.

그 뿐만아니라 리스트의 추가, 삭제, 수정이 빈번하다면 굉장히 고통스러운 일이 될 것이다..

이런 문제를 해결하기에 앞서 파일이 파일이 추가되거나 삭제되거나 수정되었을 때를 알아야한다.

그렇다면 어떻게 Node.js통해서 알아낼 수 있을까?

모를 때는 구글링이다!

node.js file list in directory라고 구글창에 쳐봤더니 stack overflow에서 다음과 같은 코드를 얻었다

 

const testFolder = './tests/';

const fs = require('fs');

fs.readdir(testFolder, (err, files) =>

{ files.forEach(file =>

{ console.log(file);

});

});

 

이 코드를 지금까지 배워왔던 것에 맞게 재구성하고 약간의 수정으로 리메이크를 해보았다.

var testFolder = './data; 는 var testFolder = 'data'; 와 같은 의미이다.

위 코드를 더 설명하자면 현재 저 코드가 저장되어 있는 파일(readdir.js)이 아니라 실행하는 위치를 기준으로해서 data라는 경로를 변수 testFolder에 적어준 것이다.

위 사진의 cmd창을 보면 배열형식으로 출력된 것을 볼 수 있다. Atom의 코드를 다시 보자

함수의 인자인 filelist는 어느 특정 파일에 있는 목록을 배열로 만들어서 전달하고 있는 아이이다.

 

 

# App 제작 - 글목록 출력하기

위의 내용을 이용해서 우리가 갖고 있던 코드의 한계를 극복하는데 사용해 볼 것이다.

자 그렇다면.. 위의 그림에 드래그한 부분을 파일목록으로 바꾸어서 node.js에게 시켜보고 싶은 마음이 들것이다.

*** 참고) main.js에 있었던 코드 fs.readFile()은 불필요해서 삭제함 ***

 

 

fs.readdir()의 안에 반복문while()을 보면 배열로 출력되는 filelist의 각각의 원소를 나타나게 하면서 링크로 해당 파일에 들어갈 수 있도록 코딩해두었다

 

 

data폴더에 새롭게 Nodejs라는 파일을 만들어서 저장해보았다

 

 

wow..그랬더니 새롭게 웹 페이지에 Nodejs가 생겼다🤭

그리고 Nodejs를 클릭했을 땐 Nodejs의 페이지로 갈 수 있다

 

 

파일이 추가되면 알아서 작성하기 때문에 이제 코드를 열어서 내용을 수정하지 않아도 된다

데이터가 바꼈을 때 로직을 바꾸지 않아도되어서 한층 더 완성도가 높아졌다!