FileStream / Querystring

FileStream / Board

• filestream

  - node.js에서 filestream을 사용하는 방법을 공부하였다. 예제로 pug 템플릿을 이용하여 파일을 생성하고 읽는 게시판을 만들어보려고 한다.
  - filestream을 이용하기 위해 다음처럼 fs 모듈을 require하였다.
  var fs= require('fs');

• read directory

  - files라는 폴더 안에 들어있는 데이터 목록을 가져오기 위해 readdir 메소드를 이용했고, 콘솔로 출력하므로써 파일 목록을 배열로 가져온다는 것을 확인하였다.
  "board.js" app.get('/board',function(req,res){ fs.readdir('./files',function(err, FileList){ console.log(FileList); }) res.end(); } )
    배열 FileList를 files라는 변수로 board template에 보내고 렌더링하였다.
  res.render('board',{'files':FileList});
    아래는 board template 파일로 each문을 사용하여 배열로 받은 files안의 요소(파일명)를 하이퍼링크와 함께 한줄씩 출력하였다. 이때 파일명을 클릭하면 (/fileName)을 요청하도록 링크를 주었다.
  "/template/board.pug" head title Board body h4 Board ul each file in files li a(href="/board/"+file)= file

• query string

  - 출력된 파일을 클릭하면 /fileName을 새로 요청하게 된다. /fileName 요청에 대한 라우터를 만들어 파일 목록 오른쪽으로 파일안의 내용을 출력할 수 있을 것이다.
    이때 파일이 파일이 엄청 많으면 /board/ 에 붙는 fileName에 따라 다른 응답을 파일 개수 만큼 만들어 주어야할 것이고, 이는 비효율적인 코드량을 가질뿐아니라 새로 파일을 만들 때 마다 관련 라우터를 만들어 줘야해서 보수/유지에도 불편할 것이다.
    이처럼 같은 path(board)안에서 경우에 따라 다른 부가 이름을 부여하여 페이지를 구별할 수 있도록 한 것이 바로 쿼리 스트링이다.

• query module

  - 노드에서 querystring은 query 모듈을 통해 활용할 수 있다. 콘텐츠 별로 id를 달리하여 요청을 달리하기 위해 링크는 다음처럼 id값을 부여한다.
  a(href="/board?id="+file)= file
    query 모듈을 이용하여 board path의 id를 저장하고 이를 case로 나눠 아무것도 없다면, 즉 기본 상태면 단순히 파일 목록을 출력하고, 다른 id를 갖는다면 그것을 console로 출력하도록 하였다.
  "board.js" app.get('/board',function(req,res){ var id = req.query.id; if(id ==null){ fs.readdir('./files',function(err, FileList){ res.render('board',{'files':FileList}); })} else{ console.log(id); res.end(); } })

• read File

  - fs의 readFile 메소드로 원하는 파일을 열고 data를 처리할 수 있다.
  fs.readFile('./files/'+id,'utf8', function(err, data){ console.log(data); })
  - readFile 메소드를 이용해서 data를 읽어 들여 app.get를 다음과 같이 구성하였다.
  "board.js" app.get('/board',function(req,res){ var id = req.query.id; var file={ title : '', content:'', }; fs.readdir('./files',function(err, FileList) { if(id ==null){ res.render('board',{'files':FileList}); } else{ fs.readFile('./files/'+id,'utf8', function(err, data){ file.title=id; file.content= data; res.render('board_content',{'files':FileList,'file': file}); }) } }) })
    readFile 메소드를 이용해서 data를 읽어드려 app.get를 다음과 같이 구성하였다. 우선 먼저 파일 목록을 받고, id에 따라 null이라면 파일 목록만을 출력하는 board를 렌더링하고, id가 존재하면 그 id에 해당하는 파일을 읽고 file 객체에 이름과 내용을 분리하여 저장한다. 그 후 마찬가지로 렌더링한다.
  - 받은 file 객체는 board_content 템플릿에서 다음처럼 출력된다.
  "board_content.pug" extends board.pug block content h5= file.title p= file.content
    pug의 extends는 템플릿을 모듈화, 또는 함수화 하는 기능이다. 컨텐츠의 내용 외에는 board 템플릿과 다른 점이 없기 때문에 기존에 존재하는 board 템플릿을 확장해 block content로 지정한 구역에만 content의 내용을 추가하는 것이다.

• Next..

  > 여기까지 filestream의 readdir, readFile으로 files 폴더안의 파일 목록을 출력하고 파일명을 클릭 시 파일 내용을 보여주는 것을 만들었다.
    이후 파일 생성에는 클라이언트 요청이 get 방식이 아닌 post 방식의 요청을 처리할 수 있어야하므로 다음 포스팅에서 get/post 요청 방식을 정리하고 이를 이용해서 파일을 생성하는 방법을 공부할 것이다.