게시판 시작해봅시다 -2

javascript/w3schools nodejs

게시판 시작해봅시다 -2

달빛가면 2017. 2. 23. 11:05

지난 포스팅에 이어서 게시판을 완성해 보겠습니다.

지난번 포스팅에 createdAt이 createAt으로 오타가 있었습니다. 확인해 주시고 수정해 주세요.

먼저 REST client를 사용하여 데이터를 한 3개정도 생성해줍니다.

오늘은 view를 만들텐데요, view는 기본적으로 html이라고 봐도 됩니다. 이 포스팅에서는 html을 바로 만들지 않고 EJS를 사용해서 html을 생성할 겁니다.

이렇게 view를 만들고 거기에 필요한 자바스크립트를 만드는 것을 front end개발이라고 합니다.

1. Partial 만들기

아래 파일들을 오늘 모두 만들 겁니다!

partial들은 이름처럼 단독으로 쓰이지 않고 다른 EJS에 포함되어 쓰이게 됩니다.

views/partials 안의 파일들은 전체 웹페이지에 모두 쓰이게 될 partial들이고,

views/posts/partials 안의 파일들은 오늘 만들 게시판에서만 쓰이게 될 partial들입니다.

html의 head 부분입니다. 오늘 사용할 master.css를 가지고 있고, 웹페이지 제목의 정보를 담고 있네요.

홈페이지 전체의 header입니다. 지금은 게시판 밖에 없어서 홈페이지 제목을 표시하였습니다.

주로 상단 메뉴가 포함되는 부분입니다.

홈페이지 전체의 footer입니다. 주로 사이트맵, 저작권 표시, 회사 로고 등이 들어가죠.

게시판타이틀의 partial입니다.

오늘은 실질적으로 index, show, new, edit의 4개의 view를 만들텐데요, 이 4개의 파일에 모두 쓰일 템플릿입니다.

위에 만든 partial들이 들어가 있고, 실제 view는 에 만들게 됩니다.

왜 이렇게 번거롭게 partial을 만들어서 view에 넣나요? view만 제외하고 다른 부분을 하나의 파일로 만들고, view만 바꿔 넣을 순 없나요?

express-ejs-layouts package를 사용하면 가능합니다. 최소한의 package설치와 번거롭더라도 이해가 쉽게 하기 위해 이런 방법으로 작성하였습니다.

2. Index view만들기

지난번에 만들었던 route들을 하나씩 수정해 봅시다.

json으로 데이터를 response하는 것은 back end와 front end가 완전히 분리될때 하는 것이고, 저는 지난번 포스팅에서 insomnia로 back end 동작을 확인하기 위해 사용하였고, EJS를 사용할 경우에는 데이터를 EJS에 보내서 html을 render해야 합니다.

36번째 줄: 늦게 작성된 데이터가 위쪽으로 오기 하기 위해 sort를 하는 명령줄입니다. find에서 바로 callback 함수가 호출되지 않고,

find으로 찾고, sort로 자료를 정렬하고, 그 담에 exec로 함수를 수정하는 형태입니다. -createdAt의 '-'는 역방향으로 정렬을 하기 때문에 사용되었습니다. 그냥 'createdAt'으로 하면 처음 생성된 자료가 배열의 앞쪽으로 정렬됩니다.

38번째 줄: 지난 포스팅에서는 JSON으로 response했지만 이번에는 post/index파일을 html로 render합니다.(확장자는 안적어도 됩니다. 이미 EJS를 우리의 view file로 설정을 했기 때문이죠)

이제 index파일을 만들어 봅시다.

<% ... %>, <%= ... %>을 사용해서 자바스크립트를 EJS파일 안에서 사용할 수 있으며, <% ... %>는 연산만 하는 부분에 사용하고, <%= ... %>는 데이터를 html에 표시하는 부분에 쓰입니다.

18번째 줄: mongoose의 find query는 데이터베이스의 데이터를 배열로 가져다 주기 때문에 자바스크립트의 forEach 함수를 사용해서 데이터를 나열할 수 있습니다.

21번째 줄: toLocaleDateString()은 자바스크립트 Date 객체의 함수입니다. 지난 포스팅에서 날짜, 시간이 세계 표준시로 저장된다고 말했었는데, 이를 사용자 위치에 따른 지역시간으로 변경하여 표시하는 함수입니다.

이제 localhost:3000/posts에 접속을 해보면 처음에 만들었던 자료가 나열된 것을 볼 수 있습니다.

3. Show view만들기

index와 마찬가지로 API를 EJS가 표시되게 수정해 줍니다.

데이터 제목과, 생성시간, 수정시간이 있다면 수정시간 그리고 게시글 수정 버튼과 돌아가기 버튼이 있습니다.

30번째줄의 삭제버튼은 내용이 약간 복잡하여 뒤에 다시 설명하고 만들겠습니다.

클릭했을 때 모양입니다. 스타일이 하나도 적용되지 않아서 모양이 보기에 좋진 않습니다. 스타일링은 젤 마지막에 하겠습니다.

3. New view만들기

지난번에 만들지 않았던 new의 route을 만들고, new view에서 데이터가 서버로 전송이 되면 create route으로 가겠지요, 그럼 데이터를 생성 후에 다시 게시판 처음으로 redirect하게 수정한 코드입니다.

46번째 줄은 테스트용으로 넣었던 것인데 실수로 지우질 않았네요.. 46번째 줄은 입력하셔도 되고 그냥 빈칸으로 두시면 되겠습니다. 다만 줄 자체를 삭제하시면 아래 코드들의 줄번호가 모두 바뀝니다.

아, 그리고 url으로 데이터를 받기 위해 middleware를 추가해야 되는데요, 32번째 줄은 다른 프로그램이 JSON으로 데이터 전송을 할 경우 받는 body parser이고, 33번째 줄은 웹사이트가 JSON으로 데이터를 전송 할 경우 받는 body parser입니다.

지난번에 get이외의 http verb들은 form을 통해서 설정된다고 말했었습니다. POST를 하려면 form이 필요합니다.

form이 submit되면 form안의 구성요소들 중 name이 있는 구성요소의 name과 value가 action에 지정된 route으로 method에 설정된 신호를 보내게 됩니다. 우리한테 필요한것은 title과 body죠, textarea의 경우 tag안의 innerHTML 이 value로 인식됩니다.

모양은 제각각이지만 버튼을 눌러보면 모두 정상적으로 작동하는 것을 볼 수 있습니다.

4. Delete 버튼 만들기

Delete 버튼은 버튼이지만 Delete신호를 보내야 하므로 form을 써서 만들어야 합니다. 이때 한가지 문제가 있는데, 대부분의 브라우져들이 보안을 문제로 post를 제외한 나머지 신호들을 차단한다는 것입니다. 이를 우회하기 위해서 package를 하나 더 설치해야 합니다.

npm install --save method-override

설치하고,

require해주고,

middleware로 설정도 해주어야 합니다.

API를 삭제후 게시판 리스트로 redirect해주게 변경합니다.

show delete 버튼은 아래와 같이 만들어 줍니다.

form method는 post이지만 action에 ?_method=delete이 추가되어 신호가 덮어쓰기(override)가 됩니다.

5. edit view 만들기

edit은 단순히 view만 있는 것이 아니라 기존의 데이터를 가져와서 수정전의 자료를 보여줘야 합니다. 그래서 기본적으로 show페이지와 같습니다.

다만 데이터들이 new의 form에 들어가 있는 형태이지요.

EJS도 new 의 form을 그대로 가져오면 됩니다. form의 value를 가져온 데이터로 채워주기만 하면 되요.

put신호 역시 form이 보낼수 없으므로 delete처럼 method overriding을 해주어야 합니다.