16. 웹애플리케이션 제작

1. 오리엔테이션

• 만들어 볼 것

글 작성, 저장, 조회(1,2)

• 라우팅 구조

글 작성 : /topic/new

글 저장,조회1 : /topic

조회2 : /topic/nodejs

2. 라우팅

app_file.js로 메인 파일을 만들자. 위와 같이 코드작성 후, 서버가연결되나 확인해보자. 이때, 전에 배운 nodemon app_file.js로 작동시키면, 서버를 껐다가 다시키는일을 반복하지 않아도 된다.

글을 작성할 라우터 /topic/new를 작성해주자. 글 작성을 위해서 템플릿 엔진을 사용 할 것이다.

app.set을 통해, 템플릿 엔진 사용할 명령어를 입력해주고, 템플릿 파일이 있는 폴더를 '/views_file'로 지정해준후, views_file이라는 

새폴더를 만들자. 

views_file 폴더에 new라는 템플릿 파일을 만들고, 위와같은 코드를 입력후, /topic/new 접속해서 확인해보자

우리가 작성한 템플릿이 화면에 렌더가 될 것이다. 글을 작성 후, 제출을 누르면 어떻게 될 까?

post를 하여, 글을 저장하는 것에 대한 라우터가 설정되지 않았으므로, 에러코드가 뜬다.

글 저장 라우터코드를 추가해주면, 에러가 나지 않는다.

3. 본문저장

form data를 처리하기 위해, 우리에겐 미들웨어가 필요하다. 

npm install body-parser --save를 이용해 미들웨어를 설치하자. 그리고 사용법은 검색을 해보면 나온다. 위와같이 코드를 입력해본다.

이앱은 db없이 파일을 저장하기 위해서, fs.writeFile을 이용할 것이다. 그러기 위해서 data폴더를 만들고, app_file.js에서 require를 통해 fs를 불러오자. 그리고 post 라우터를 바꾸어주자. 

/topic/new에 접속후, 파일을 제출하면, data폴더에는 node파일이 생길것이고, 라우터를 통해서 화면이 출력된다.

4. 글 목록 만들기

localhost:3000/topic으로 들어가면, 에러가 뜬다. get에 대한 router가 없기 때문이다.

이렇게 라우터를 설정해주자. 하지만 우리는 글목록을 저장하고, 저장된글을 불러서 읽고 싶다.

fs모듈의 readdir를 이용할 수 있다.

data폴더에 파일이 저장되므로, path는 data를 설정해준다. 그리고 우리는 템플릿 엔진을 렌더해야한다. files는 배열로 들어오고, 변수에 배열을 담아서 return 할 수 있다.

views_file폴더에 view라는 템플릿파일을 만들고, 위와같이 입력 후 저장하자.

/topic으로 접속하면, 위와같이 화면이 렌더된다.

5. 본문 읽기

우리는 /topic으로 접속한 화면에서, list들을 클릭했을 때, 글을 가져 와야 한다.

먼저 router를 설정하자. 설정할 때, query string을 사용해보자.

저장된 글을 불러오기 위해서 fs모듈의 readFile을 이용하자. 라우터를 위와같이 바꾸자.

view 템플릿 파일도 코드를 더 추가해준다.

/topic으로 접속후 list를 클릭하면, url이 바뀌면서, 저장된 파일들을 불러 올 수 있다.

6. 코드의 개선

중복을 제거하면 유지보수가 용이하고, 코드의 가독성이 좋아진다.

출처 - 생활코딩