fs모듈 - 파일 목록 불러오기 fs.readdir()

fs모듈 - 파일 목록 불러오기

지난 번에 File System 모듈을 이용해서 웹 애플리케이션을 통해 파일을 생성하는 방법을 알아보았다.

이번 시간에는 생성한 파일들의 목록을 웹 애플리케이션에서 볼 수 있도록 목록을 불러오는 방법을 알아보자.

 File System API 문서

어떤 기능을 통해 파일 목록을 불러올 수 있는지 한번 찾아보자.

File System 모듈 메뉴를 찾아보면 "fs.readdir()"을 찾아볼 수 있다.

"fs.readdir()"을 클릭하면 아래와 같이 설명과 함께 자세한 기능 설명을 보여준다.

"

비동기 readdir(3). 디렉토리의 내용을 읽는다.

콜백은 (err, files)두개의 인자를 갖는데, files는 '.', '..'을 제외한 디렉토리에 파일들에 대한 이름의 배열이다.

"

옵션에 대해서는 인코딩을 설정하는 문자열이나 인코딩 속성을 가진 객체일 수 있다고 한다.

만약 인코딩에 대한 설정을 버퍼로 하는 경우 반환되는 파일 이름은 버퍼 객체로 반환된다고 적혀있다.

 라우팅 작성하기

fs.readdir()의 함수 사용 방법도 알아냈으니 이를 활용해서 목록을 웹 애플리케이션에서 불러와보자.

아래의 코드를 app_file.js에 작성하자.

// 글 목록 페이지 이동
app.get('/topic', (req, res) => {
    // readdir(path, callback(err, files array))
    fs.readdir('data', (err, files) => {
        if(err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        // render(template name, object)
        res.render('view', {topics: files});
    });
});

fs.readdir()의 인자로 파일을 관리하는 디렉토리 경로를 지정해주고 콜백함수를 작성해주자.

res.render()를 통해 뷰 페이지를 지정해주고 파일 이름들을 topics이란 변수명으로 지정해서 객체로 감싸 같이 전달해준다.

 view 페이지 작성

views_file하위에 view.pug파일을 생성하고 아래의 코드를 작성하자.

doctype html
html
    head
        meta(charset='utf-8')
        title file view
    body
        h1 Server Side JavaScript
        ul
            each topic in topics
                li
                    a(href="/topic/" + topic)= topic

9번 줄에서 ul태그 안에 each문이 사용되었다.

이는 pug 템플릿 엔진에서 제공하는 기능이다.

https://pugjs.org/language/iteration.html

API 사이트에 접속하면 우측 메뉴에 Iteration(반복)메뉴가 있다. 

해당 메뉴는 반복문에 대한 사용방법을 알려준다.

"Pug는 두개의 기본적인 반복 메소드를 지원한다. : each와 while문"

설명과 함께 each문에 대해 예제를 직관성 좋게 보여주고 있다.

"each 변수명 in array"형식을 사용하면 li태그를 자동으로 추가할 수가 있다.

이것을 활용해서 파일리스트를 출력했다.

 실행

이제 "localhost:9100/topic" URL을 입력해서 접속해보자.

파일 목록들을 그대로 웹 브라우저에서 출력하는 모습을 볼 수 있다.

해당 화면에서 마우스 오른쪽 클릭 후 소스보기를 하면 ul태그 안에 li태그가 pug engine의 each 기능을 통해 자동으로 추가된 것을 알 수 있다.