fs모듈 - 파일 내용 불러오기 fs.readFile()

fs모듈 - 파일 내용 불러오기

지난번엔 파일 목록을 웹 애플리케이션 화면에 불러오는 작업을 했다.

이번에는 파일 목록에서 파일을 클릭했을 때 파일 내용을 웹 애플리케이션에 출력해주는 작업을 해보자.

 File System API 문서

파일 내용을 불러오는 기능도 결국 File System 모듈에 의존하는 기능이다.

File System 모듈에서 fs.readFile()을 찾아보자.

fs.readFile()에 대해서 어떻게 사용하는지 예제가 나와있다.

이를 참고해서 코드를 작성하도록 하자.

 라우트 작성하기

라우팅을 작성하기에 앞서 기능이 작동할 순서를 확인해보자.

1. 가장 먼저 /topic으로 접속을 한다.

2. 불러와진 파일 목록 중 하나의 항목을 클릭한다.

3. 항목을 클릭하면 Semantic URL 형식으로 /topic/id 가 들어가도록 한다. 이는 사용자가 어떤 파일을 선택했는지를 판단하기 위함이다.

4. URL의 id값을 판단하여 선택한 파일이 무엇인지를 판단하고 파일 내용을 본문에 출력해준다.

이 작동 순서를 기반으로 기능의 흐름을 파악해보는 연습을 하자.

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

// 글 본문 페이지 이동
app.get('/topic/:id', (req, res) => {
    var id = req.params.id;
     // 페이지 들어왔을 때 먼저 파일 목록을 출력하기 위해 readdir()을 수행한다.
     fs.readdir('data', (err, files) => {
        if(err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        // 파일 목록을 출력에서 에러가 발생하지 않았다면 파일 내용을 출력하기 위해 readFile()을 수행한다.
        fs.readFile('data/'+id, 'utf-8', (err, data) => {
            if(err) {
                console.log(err);
                res.status(500).send('Internal Server Error');
            }
            res.render('view', {topics: files, title: id, description: data});
        });
    });
});

2번 줄 - 

파일 목록 항목을 클릭했을 때 Semantic URL로 id값을 서버로 전송할 것이다.

따라서 라우트를 '/topic/:id' Semantic URL 형식으로 작성해야한다.

5번 줄 - 

'/topic'에서 '/topic/:id'로의 이동은 엄연히 페이지 이동이다.

따라서 비슷한 본문 내용을 출력하는 구조이더라도 파일 목록을 출력하는 기능을 새로 작성해줘야한다.

11번 줄 - 

그리고 선택한 파일을 읽어들여 본문에 출력하기 위해 fs.readFile()함수를 사용한다.

파일 디렉토리에서 id값을 통해 파일 대상을 찾고 인코딩을 'utf-8'형식으로 처리하도록 옵션을 준다.

이후 콜백함수를 작성하고 파일을 읽는데 정상적으로 처리된다면 'view' 페이지에 파일 목록, 파일 명, 파일 내용에 대한 정보를 응답해준다.

 view 페이지 수정하기

'/topic/:id' 라우트처리가 추가됨에 따라 view 페이지의 폼도 추가되어야할 부분이 있다.

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
        article
            h2= title
            h4= description

article 태그를 추가하고 서버에서 응답받은 데이터들을 h2에 title(파일명), h4에 description(내용)로 추가하여 본문에 출력해준다.

 실행 

작업을 완료했으니 이제 실행하고 테스트해보자.

localhost:9100/topic으로 들어가고 파일 목록에서 항목을 클릭해보자.

위 그림처럼 URL에 선택한 파일명이 id로 추가되며 파일에 대한 본문이 화면에 출력되는 것을 알 수 있다.

다른 파일들을 클릭해도 똑같이 작동해야 정상이다.