312. RESTful Blog App: INDEX

Lesson 312에서는 RESTful Route의 7가지 기능 중 INDEX에 대해 알아본다.

Name	Path	HTML Verb	Purpose
INDEX	/blogs	GET	List all blogs
New	/blogs/new	GET	Show new blog form
Create	/blogs	POST	Create a new blog, then redirect somewhere
Show	/blogs/:id	GET	Show info about one specific blog
Edit	/blogs/:id/edit	GET	Show edit form for one blog
Update	/blogs/:id	PUT	Update a particular blog, then redirect somewhere
Destroy	/blogs/:id	DELETE	Delete a particular blog, then redirect somewhere

INDEX는 서버에 특정 URL로 GET method request가 전달될 경우 모든 페이지를 보여주기 위한 목적으로 사용한다. 즉 특정 URL로 GET 요청이 들어올 경우 index 페이지로 이동한 후 DB에 저장된 모든 데이터를 보여준다.

 

1. 개발환경 설정

1) framework 설치

#npm init
: npm init(package.json 파일 생성 및 의존성 등의 정보를 기록하기 위해 생성

#npm install express mongoose body-parser --save
: 해당 프로젝트에 사용할 node express, mongoose, body-parser 들을 npm(Node Package Management)를 이용하여 설치하고, 의존성을 package.json에 자동 저장

 

2. app.js 

1) framework 초기화

const bodyParser = require("body-parser"),
express          = require("express"),
mongoose         = require("mongoose"),
app              = express();

2) App 설정

mongoose.connect("mongodb://localhost:27017/restful_blog_app", {useNewUrlParser: true, useUnifiedTopology: true}); //db가 없을 시 생성하므로, 동일한 db와 연결하는 한 이름은 중요하지 않다. 
app.get("view engine", "ejs"); // ejs 파일 확장자 없이 명시없이 사용 
app.use(express.static("public")); // custom stylesheet를 사용하기 위한 경로("public")
app.use(bodyParser.urlencoded({extended: true}));
app.listen(process.env.PORT || 3000, (){
console.log("REST Server is running");
};

3) Mongoose Schema 생성

const blogSchema = new mongoose.Schema({ // mongoose의 Schema 메소드를 상속받은 blogSchema 생성 
	title: String,
	image: String,
	body: String,
	created: {type: Date, default: Date.now} // 현재 시간을 출력
});

4) Schema 할당

: 3)에서 생성한 Schema가 mongoose method를 가질 수 있도록 상속시킨다. (mongoose가 가진 속성/기능을 사용하기 위함)

const Blog = mongoose.model("Blog", blogSchema); 

 

3. RESTful ROUTES

1) INDEX 생성

브라우저에서 "/blog"로 GET method 요청이 들어왔을 때 미리 만들어놓은 "index.ejs"를 렌더링하여 응답하고, DB에 저장된 데이터를 blogs라는 이름으로 "/index"로 전달한다.

app.get("/blogs", (req, res) => {
	Blog.find({}, (err, blogs) => {
		if(err){
			console.log(err)
		} else {
			res.render("/index", {blogs: blogs});
		}
	})
});

2) "/" redirect

1)의 경우에 "/blogs" 라는 url로 GET 요청이 들어왔을 경우에만 보여주므로, "/" 로 GET 요청이 들어왔을 때도 동일한 index 페이지를 보여줄 수 있도록 처리한다.

app.get("/", (req, res) => {
	res.redirect("/blogs");
};