JArchive 프로그래밍 일기

파일을 이용하여 글 목록을 만들어보자. 

(나중에는 DB를 이용한다.)

form 화면에서 사용자의 입력을 받아서 파일을 만듭니다. 

파일의 이름과 파일의 내용으로 글의 목록이 만들어집니다. 

링크를 클릭하면 글의 내용이 바뀝니다. 

필요한 모듈 

express, body-parser, fs (파일시스템) 모듈

필요한 파일과 디렉토리 

app_file.js : entry point 파일

views_file 디렉토리 : jade 템플릿 파일 저장 

data 디렉토리 : 글목록을 만들기 위한 파일을 저장

1. 필요한 모듈을 require()로 가져옵니다. 

2. 포트 설정하여 서버 listen()

entry point 파일인 app_file 에서, 애플리케이션이 3000 번 port 를 listen 하도록 만듭니다. 

3. /topic 경로로 들어오면, 화면에 문자열을 출력해봅니다. 

URL로 접근하는 것이니까 app.get() 함수를 사용합니다. 

4. jade 템플릿 사용 설정을 합니다. 

--> set() 함수 사용 

jade 템플릿 파일들이 위치할 디렉토리를 지정합니다. 

jade 라는 'view engine' 을 사용할 것이라고 지정합니다. 

5. /topic/form 경로에서 form.jade 템플릿을 쓰도록 render() 함수를 써줍니다. 

6. form 이 있는 form.jade 템플릿 파일을 만듭니다. 

제목과 내용.

두 칸을 만들어서 입력을 받습니다. 

'제출' 버튼을 누르면, action= '/topic' 이므로, topic 경로로 전송합니다. 방식은 POST.

7.  템플릿 엔진의 html 태그를 예쁘게 정렬하기 위한 코드를 추가합니다.

8.  POST 방식으로 만든 form 의 body 객체 데이터에 접근해야 title과 description 값을 가져올 수 있습니다. 

파일을 생성하는 모듈이 필요합니다.

파일 시스템에 대한 Node.js Document를 읽어봅니다. 

파라미터를 봅니다. 

파일명, 데이터, 그리고 옵션, 콜백함수 순으로 받습니다. 

콜백함수의 파라미터가 err 라고 되어있는데, 혹시 에러가 발생하면 err 변수에 내용을 알려준다는 뜻입니다. 

app_file.js 에 app.post() 함수를 추가합니다. 라우팅은 /topic 으로 합니다. 

title이 파일명이 되고, description은 파일의 내용이 됩니다. 

파일은 data 라는 디렉토리 하위에 만들꺼니까, 경로를 'data/' + title 로 해줍니다. 

디렉토리명 뒤에 / 슬래시를 붙여줘야 합니다. 

 POST 방식으로 body 태그 내용을 처리하기 위해 bodyParser 사용 설정을 합니다.

글 제목과 내용을 입력받을 html의 body 태그내용에 접근해야 합니다. 

form 에 내용을 쓰고 제출 버튼을 눌러보면, data 디렉토리 하위에 title과 똑같은 파일명이 생긴것을 확인할 수 있습니다. 

9. 이제 data 하위의 파일명으로 글목록을 만듭니다. 

파일을 쓰는게 아니라 디렉토리 내의 파일을 읽을 것이기 때문에 fs.readdir() 함수를 이용합니다. 

app.get() 함수에 /topic으로 라우팅 하고, 콜백함수 내에 readdir() 함수를 작성합니다. 

readdir() 함수의 콜백함수는 err 가 있다면 err를 알려주고,  files 이름으로 파일명들을 리턴합니다. 

err가 있다면 console.log() 로 출력하고, 응답으로 500 코드와 메시지를 출력하도록 합니다. 

콜백함수가 끝나기 전 마지막에 render() 를 작성합니다. 

render() 함수의 첫째 파라미터는 jade 템플릿명을 쓰고, 둘째 부터는 돌려주고 싶은 객체값 files를 topics 라는 이름으로 씁니다.

10. 파일목록 jade 템플릿은 이런 모양입니다. 이것을 jade iterator로 수정합니다. 

jade에서 객체를 반복하는 것은 iterator 입니다. jade document를 참조합니다. 

11. 폼에 내용 입력해서 파일 생성하고, 파일목록 읽어서 글목록 조회해보기! 

http://127.0.0.1:3000/topic/form 에서 제목과 내용을 입력합니다. 

http://127.0.0.1:3000/topic 에서 보이는 글목록 화면 입니다.