게시판 시작해 봅시다 - 1

일단 제 맘에 들지 않았던, RESTful하지도 않고 CRUD하지도 않은 카운터를 지우고 주석을 달아서 좀 더 보기 편하게 했습니다.

 

github.com/imtaekh/my_app/tree/da71d28cceb8bea78fe78ded003bcb5d28a13366 에서 코드를 보실 수 있습니다.  git clone한 다음 git reset --hard da71d28 하시면 컴퓨터에서 코드를 보실 수 있습니다.

이제 게시판을 만들어 볼 텐데요, 이번 포스팅에서는 back end(API부분)을 만들어 보고 테스트 해보겠습니다.

1. body-parser설치

git bash에서 아래 명령어를 입력하여 package를 설치해 주세요.

npm install --save body-parser

서버로 request를 보낼 때 header와  body가 전달되는데요, 자세한것은 http header body를 검색해서 공부하시고 우리는 body에 데이터를 넣어서 서버에 데이터를 전달 할 수 있다는 것만 아시면 됩니다.


6번째 줄: 언제나 처럼 설치된 package는 require를 하지 않으면 무용지물입니다.

25번째 줄: body parser는 미들웨어(middleware)로 사용되는데, JSON으로 데이터를 분석할 것을 명령했습니다.(모든 서버에 도착하는 신호들의 body를 JSON으로 분석할 것)

미들웨어(middleware)란?  서버에 도착한 신호는 router를 통해서 어떤 response를 할지 결정이 되는데, router를 통하기 전에(서버도착 - router 중간에) 모든 신호들에게 수행되는 명령어를 미들웨어(middleware)라고 합니다. app.use()를 통해 수행될 수 있으며, 당연히 router보다 위에 위치해야 합니다.

2. REST Client 설치 - Insomnia

REST API를 테스트하기 위한 프로그램입니다.  꼭 Insomnia를 설치해야 되는 건 아니고 아무 REST Client나 설치해도 되는데, 전 Insomnia를 사용하겠습니다.

Insomnia는 크롬 확장 프로그램입니다.

chrome.google.com/webstore에서 insomnia를 검색하면 찾을 수 있습니다.

설치후에는 따로 실행을 시켜줘야 합니다.


실행 후 새로운 Request 항목을 만듭니다.


그룹이랑 request name를 입력해야 되는데, 그냥 사용자 편의를 위한 부분으로 아무거나 넣어도 아무 문제 없습니다.

3. model 생성

데이터베이스 사용을 쉽게 하기 위해 model을 만들어 봅시다. 카운터 만들때랑 비슷합니다. 앞으로도 계속 하게 될 부분이기도 하구요.

게시글스키마는 제목(title), 본문(body), 생성시간(created at), 및 수정시간(updated at) 항목만 있으며, 작성자 정보가 없습니다. 즉, 아무나(로그인 없이) 무명으로 글을 작성할 수 있고, 아무나 글을 지울 수 있는 게시판입니다.

(위 스크린샷에 오타가 있는데요, createAt이 아니라 createdAt이 되어야 합니다. 위 스크린샷뿐만 아니라 이 포스팅의 모든 createAt은 createdAt이 되어야 합니다. 오타가 있어 죄송합니다 ㅠㅠ github에는 수정을 하였으니 포스팅 마지막에 다운로드는 createdAt으로 되어 있습니다.)

지난번 카운터를 만들때는 해당 항목에 type만 입력했는데요, type과 함께 옵션을 주고 싶으면 위 처럼 객체를 넣어줘야 됩니다.

- title과 body에는 required:true가 들어갔는데요, 이 두개 항목은 데이터 생성, 변경시에 반드시 필요합니다. 이 항목이 없다면 데이터 생성이 안되고 에러를 리턴합니다.

createAt의 default:Date.now는 만약 값이 주어지지 않는다면 현재시간(Date.now)를 기본값으로 넣습니다.

이 외의 옵션들은 mongoosejs.com/docs/api.html#schematype_SchemaType-default 를 참고하시기 바랍니다. 많아요..

4. route 생성

지난 포스팅에서 배웠던 7가지 http액션 중 API는 데이터베이스에 접속이 필요한 index, show, create, update, destroy의 5개를 취하게 됩니다. 

new, edit은 create, update를 수행하기 위한 form일 뿐이니깐요. 이 두개는 다음번 포스팅에서 만들 겁니다. 

 

HTTP Actions	View	Database   Connection	HTTP verb	설명
Index	O	O	GET	데이터베이스에서 해당 모델의 모든 자료를 가져와서 표시한다
Show	O	O	GET	데이터베이스에서 해당 아이디의 자료를 가져와서 표시한다
New	O	X	GET	create액션을 수행하기 위해 사용자로 부터 데이터를 입력받을 폼을 제공한다
Create	X	O	POST	new의 폼의 데이터를 사용하여 데이터베이스에 자료를 생성한다
Edit	O	X	GET	update액션을 수행하기 위해 사용자로 부터 데이터를 입력받을 폼을 제공한다
Update	X	O	PUT/PATCH	edit의 폼의 데이터를 사용하여 데이터베이스에 자료를 수정한다
Destroy	X	O	DELETE	데이터베이스에서 해당 아이디의 자료를 삭제한다

위 내용이 지금은 이해가 안되더라도 나중에는 이해가 될 겁니다.

즉 1. API 만 만들땐(이를 back end 개발이라고 합니다) new, edit route이 필요 없고,

2. back end 개발자가 API를 따로 개발하거나 이미 만들어진 API를 사용하는 경우(이를 front end 개발이라고 합니다.) create, update, destroy route은 필요하지 않습니다.

3. 참고로 혼자서 front end와 back end를 동시에 개발하는 것을 full stack이라고 합니다.

이 강좌는 API도 만들고 View도 만드니까 full stack 강좌이죠. full stack 개발을 할때는 back end와 front end를 두사람이 만드는 것 처럼 분리해서 만들 수도 있고 걍 두개 섞어서 같이 만들 수도 있는데, 9-1강좌만 보면 따로 만들 것 같지만 9-2에서 섞을 겁니다(...) EJS를 쓰려면 이쪽이 더 맞는것 같아요.

본격적으로 route을 만들어 봅시다.

우선  index와 create를 먼저 만들었습니다. 

35~40번째 줄 : GET신호로 /posts 에 접속하는 경우, 게시글(Post)데이터의 모든 데이터를 찾고(Post.find()에 빈 객체를 전달하는 경우) 에러가 있으면 에러를 response하고(이때 success는 false), 에러가 없다면 모든 게시글(posts)를 response합니다.(이때 success는 true)

41~46번째 줄 : POST신호로 /posts 에 접속하는 경우, 요청신호의 body의 post항목(req.body.post)로 데이터를 생성(Post.create())하고 에러가 있으면 에러를 response하고(이때 success는 false), 에러가 없다면 새 게시글(post)를 response합니다.(이때 success는 true) 

Path(/posts)는 똑같은데 어떻게 GET신호, POST신호를 컨트롤 할 수 있는지?   브라우저 주소창으로 접속하면 무조건 GET입니다. 이 외의 신호들은 html form tag에서 신호를 지정할 수 있습니다.  (REST Client로는 더 쉽게 path와 http verb를 컨트롤할 수 있습니다.)

Insomnia를 사용해서 API가 제대로 작동하는지 테스트 해봅시다. REST Client는 개발도중에 테스트용으로 많이 쓰입니다.(혹은 해킹 테스트..)

localhost:3000/posts에 GET신호로 접속을 해보았더니 success는 true이고 data는 빈 배열이 돌아왔습니다. 생성된 데이터가 없으니 빈 배열이 돌아온 것이지요. 제대로 작동하는 것이 맞습니다.

이번엔 create을 테스트 해봅시다.

localhost:3000/posts에 POST신호로 접속할텐데, GET 이외의 신호들은 BODY를 작성할 수 있습니다.

게시글 스키마에서 title과 body를 필수(required)로 설정했기 때문에 하나라도 빈칸이 있으면 에러가 납니다.

API가 body.post를 받아 데이터를 생성하므로 body안에 post를 넣어서 그 안에  title과 body를 넣어줘야 합니다.

생성시간이 세계 표준시로 자동 저장되는 것을 볼 수 있습니다.

javascript 오브젝트 생성시와는 달리 모든 문자열들은 ""를 써서 감싸줘야 합니다. body에 항목명에 ""를 쓰지 않으면 오류가 납니다.

이제 나머지 3개지 액션들을 완성해 봅시다.

47~52번째 줄 : GET신호로 /posts/:id 에 접속하는 경우, 아이디가 :id인 게시글(Post)의 데이터를 하나 찾고(Post.findById(req.params.id). 이 명령어는 Post.findOne({_id:req.params.id)와 동일) 에러가 있으면 에러를 response하고(이때 success는 false), 에러가 없다면 해당 게시글(post)를 response합니다.(이때 success는 true)

":id"는 와일드 카드입니다.  즉 /posts/1234로 주소가 입력되면 :id부분 즉 1234가 req.params.id에 저장됩니다. 주소창을 통해서 문자열을 전달받을 수 있는 것이지요.

53~59번째 줄 : PUT신호로 /posts/:id 에 접속하는 경우, 아이디가 :id인 게시글(Post)의 데이터를 하나 찾고 req.body.post로 데이터를 업데이트 합니다.(Post.findByIdAndUpdate(req.params.id, req.body.post)) 이때 54번째 줄에 의해 글 수정 시간이 req.body.post에 삽입됩니다. 에러가 있으면 에러를 response하고(이때 success는 false), 에러가 없다면 해당 updated 메세지를 response합니다.(이때 success는 true)

60~65번째 줄 : DELETE신호로 /posts/:id 에 접속하는 경우, 아이디가 :id인 게시글(Post)의 데이터를 하나 찾아서 지워버립니다.(Post.findByIdAndRemove(req.params.id)) 에러가 있으면 에러를 response하고(이때 success는 false), 에러가 없다면 해당 deleted 메세지를 response합니다.(이때 success는 true)

find, findById, findByIdAndUpdate, findByIdAndRemove.. 참 많죠? 전체 리스트는

mongoosejs.com/docs/api.html#model_Model.find

에서 볼 수 있습니다. 영어공부를 해야하는 이유..!

아래는 각각 실행결과입니다.

아이디는 데이터 생성시 자동으로 생성되는데 이를 복사 붙여넣기 하시면 됩니다.

자료 하나를 표시


자료 업데이트 결과


자료 삭제 결과

몇개 자료를 더 만들어보고 수정해보고 삭제해보고 연습해보세요~

Q: HTML form 태그에서 HTTP Verb신호를 수정 할 수 있다고 했습니다. 그럼 혹시 POST로 자료를 지우고 DELETE으로 자료 생성을 할 수 있나요? A: 네 가능합니다. 실제로 어떤 개발자들은 POST신호 만으로 모든 자료처리를 하기도 합니다만.. 이 경우 RESTful하지 않습니다. RESTful은 다른 개발자들을 위한 매너입니다.(팀으로 개발을 하는 경우, 회사에서 프로젝트를 다른 사람에게 넘기거나 회사를 그만두게 되어 후임이 받아서 해야 하는 경우 등)

 

이번 포스팅에서 아주 RESTful한 back end API 를 만들어 보았는데요, 사실 다음 포스팅에서 이 API를 수정하여 back end와 view가 융합된 형태로 게시판을 만들 예정입니다. back end를 따로 두고 사용하려면 Angular같은 front end framework을 사용하거나 최소 AJAX를 사용해야 하는데, 일단 EJS를 시작한 김에 더 써보도록 하겠습니다.

github.com/imtaekh/my_app/tree/9eefb7446bf8e7d665397c34faafb39a822fc344 에서 코드를 보실 수 있습니다.  git clone한 다음 git reset --hard 9eefb74하시면 컴퓨터에서 코드를 보실 수 있습니다. [출처] [Node.js 강좌] 9-1. 게시판 만들기-상-(RESTful API 만들기, back end 개발)|작성자 azure0777