fs모듈 - 파일 생성하기 fs.writeFile()

fs모듈 - 파일 생성하기

이번 시간에는 Node.js에서 제공하는 File System(fs)모듈을 이용하여 웹 애플리케이션에서 파일을 생성하는 방법을 알아보자.

 필요 파일 및 폴더 생성하기

새로운 웹 애플리케이션을 생성하고 view폴더 또한 새로 생성하여 새로운 웹 애플리케이션 구조를 만들어서 작업을 하려고 한다.

트리에서 박스친 내용의 폴더들과 파일을 만들어주자.

그리고 "app_file.js"를 웹 애플리케이션으로 동작시키기 위해 코드를 작성하자.

/** require() 영역 */
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
 
/** use() 영역 */
app.use(bodyParser.urlencoded({extended: false}));
 
/** setting 영역 */
app.locals.pretty = true;
 
/** set() 영역 */
app.set('views', './views_file');
app.set('view engine', 'pug');
 
app.listen('9100', () => {
    console.log('---- Connected 9100 port from app_file.js ----');
});

모든 코드들은 지금까지 설명했었던 내용들을 활용해서 작성한 것이니 이해가 가지 않는다면 이전 내용들을 필독하자.

 File System API 보기

우리가 현재 만들고자 하는 프로그램은 파일을 생성해주는 프로그램이다.

따라서 어떻게 파일을 생성할 수 있는지를 알아보기 위해 Node.js의 API를 확인하는 행위가 선행되어야한다.

https://nodejs.org/dist/latest-v10.x/docs/api/fs.html

Node.js의 API문서 사이트를 접속해보면 File System모듈에 대한 API들 중 "writeFile()"이라는 함수를 제공하고 있다는 것을 알 수가 있다.

이것을 클릭해보면 아래와 같이 writeFile()함수에 대한 기능들을 설명해주고 사용하는 방법들을 예제를 통해 알려주고 있다.

"비동기로 데이터를 작성하여 파일로 만들고, 이미 존재하는 파일인 경우 그것을 대체한다. 데이터는 String이나 buffer일 수 있다."

라는 설명과 함께 버퍼를 이용하여 파일을 쓰는법과 문자열을 파일로 작성하는 방법을 알려주고 있다.

"fs.writeFile('대상 파일', '내용(data),[옵션]', '콜백함수');"

가장 중요한건 이미 제목 자체에서 writeFile()함수에 들어가야할 인자들을 설명해주고 있다는 것이다.

이제 이를 활용해서 파일을 생성하는 방법을 알아보자.

 웹 애플리케이션을 이용하여 파일 생성하기

우리는 fs모듈의 writeFile()함수를 이용하여 웹 애플리케이션에서 파일을 생성하도록 할 것이다.

사용자가 "localhost:9100/topic/new"라는 URL로 웹 페이지를 접속하면 파일 생성을 위한 데이터를 작성할 수 있는 작성 폼을 제공할 것이다.

파일 제목과 내용을 작성하여 전송버튼을 누르면 작성한 내용을 서버에게 전달하고 서버에서 데이터를 이용해 'data'폴더로 파일을 생성하는 웹 기능을 제작할 것이다.

이제 작업 단계도 구상했으니 그것을 실현해보기 위해 코드를 작성하자.

 Route와 템플릿 작성하기

가장먼저 사용자가 form을 작성할 수 있는 페이지로 접근할 수 있도록 라우트를 등록해야한다.

// 폼 등록 페이지 이동
app.get('/topic/new', (req, res) => {
    res.render('new');
});

'/topic/new'의 경로를 통해 접속을 시도하면 우리는 'new'라는 템플릿 페이지로 render()함수를 이용하여 사용자에게 템플릿 페이지를 연결시켜준다.

이제 우리는 'new'라는 이름의 템플릿 페이지를 만들고 form을 작성해야한다.

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

doctype html
html
    head
        meta(charset='utf-8')
        title file form
    body
        form(action="/topic", method="POST")
            p
                label(for="title") 생성할 파일 이름과 내용을 작성해주세요.
            p
                input(type="text", name="title", placeholder="title")
            p
                textarea(name="description", cols="30", rows="10", placeholder="description")
            p
                input(type="submit", value="전송")

input태그와 textarea태그를 통해 파일 제목, 파일 내용을 등록할 수 있는 폼을 제공해주고 submit버튼을 통해 처리를 요청할 수 있는 기능을 제공해준다.

그리고 이 데이터들을 서버로 전송시켜주기 위해 form태그로 하위 태그들을 묶는다.

 파일 생성 기능 작성하기

지금까지 파일을 생성하기 위한 클라이언트 폼을 작성했으니 이제 그 데이터를 가지고 실제로 파일을 생성하는 작업을 수행하는 코드를 작성해보자.

const fs = require('fs');
 
// 폼 데이터 파일 등록 처리
app.post('/topic', (req, res) => {
    var title = req.body.title;
    var description = req.body.description;
    fs.writeFile('data/' + title, description, (err) => {
        if(err) {
            // 에러가 발생하면 500 코드를 반환시키고 에러 메시지를 출력해준다.
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        res.send('성공!');
    });
});

require()함수를 통해 'fs'모듈을 로드한다.

그리고 action태그에서 '/topic'으로 POST메소드로 데이터를 전달하니 그에 맞게 post()기능을 이용하여 코드를 작성한다.

req.body속성을 통해 데이터들을 변수에 저장한다.

그리고 fs모듈의 writeFile()을 통해 데이터를 저장할 위치+파일명, 파일내용, 콜백함수를 작성한다.

파일 생성에 실패하면 에러를 출력해주고 파일 생성에 성공하면 성공 메시지를 출력해준다.

 실행하기

코드를 작성했으니 이제 app_file.js를 실행시키고 테스트를 해보자.

localhost:9100/topic/new로 접속하고 폼을 작성하고 전송버튼을 클릭해보자.

파일 생성에 성공하는 경우 localhost:9100/topic으로 이동되며 '성공!' 메시지가 출력된다.

data하위에 temp라는 파일이 생성되는 것을 확인할 수 있으며

그 안에 내용도 사용자가 작성한 내용으로 저장되는 것을 알 수 있다.