Hi Everyone! Please review the following notes so that you may continue the course without issue:
If you're having trouble with the EJS include syntax in the next lecture then please review the note from section 28 regarding the syntax change in version 3.0.1, you can find it here.
Meanwhile, in the next lecture Colt mentions a spacing problem with the navbar, but he doesn't resolve that issue in the same video.
This has caused some confusion among students, so I just wanted to let you know that he will resolve the overlapping navbar issue in the Blog App: NEW and CREATE video.
There's nothing you need to do, just be aware that the navbar issue isn't resolved right away and that he will correct it shortly thereafter in a later video.
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 particularblog, 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에 자동 저장
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"로 전달한다.
309에서 각 RESTFUL Route 시 사용한 페이지별 ejs 파일을 다시 한번 정리한다.
309의 app.js에 작성된 RESTFUL Route에서 사용되는 페이지의 정보는 각각 아래와 같다.
name
url
verb
description
INDEX
/campgrounds
GET
Display a list of all dog
NEW
/campgrounds/new
POST
Display form to make a new dog
CREATE
/campgrounds
POST
Add new dog to DB
SHOW
/campgrounds/:id
GET
Show info about one dog
render에 사용되는 각각의 페이지는 DRY(Don't Repeate Yourself)를 적용하기 위해 [그림 1]과 같이 공통되는 부분을 header와 footer를 붙여 사용한다. 페이지가 복잡하여 메뉴가 많아지거나 디자인 할 요소가 많아질 경우 소스를 일일이 복사하여 사용하는 것보다 header와 foot에 디자인을 적용시킨 후 해당 파일만 불러와 사용할 경우 유지보수나 스크립트 작성 시 많은 시간을 절약할 수 있다.
[그림 1] header 와 footer 적용
[그림 2] 모든 페이지에서 적용된 header와 footer
[그림 3] 실제로 사용한 header의 내용, title, bootstrap호출, 상단 메뉴바 및 개별 메뉴 등이 설정되어 있다. [그림 4] 실제 사용한 footer의 모습. 페이지 기준으로 하단에 사이트 정보, 회사 전화번호, 로고 등이 포함 될 경우 header처럼 디자인 적용 후 단순히 호출하여 사용 가능하다.
[그림 5] 실제 네이버 footer의 모습. 만약 footer를 사용하지 않을 경우 페이지 하단의 메뉴, 정책, 디자인 등이 바뀔 경우 몇 백만의 페이지를 일일히 수정해야만 하지만 footer를 사용할 경우 파일 하나를 수정하여 모든 페이지에 적용/수정이 가능하다.
1. header 및 footer 생성
1-1. header 생성
목적은 모든 페이지에 적용될 상단 메뉴를 디자인 한 후 개별 페이지에서 호출하기 위함이다.
경로 : views/partials/header.ejs
[그림 6] header.ejs의 실제 디자인
<!DOCTYPE html>
<html>
<head>
<title>Yelpcamp</title> <!-- 브라우저 상단의 페이지 타이틀 이름-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- bootsrapt CDN -->
</head>
<body>
<nav class="navbar navbar-default"> <!-- 페이지 상단에 메뉴바를 디자인을 위한 공간 할당(full witdth) -->
<div class=container-fluid"> <!-- navbar-default에서 좌우 각 15px 씩 padding을 준 container-->
<div class="navbar-header">
<a class="navbar-brand" href="/">YelpCamp</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right"> <!-- 페이지 우측 및 수평 배치를 위해 <ul><li>태그 사용-->
<li><a href="/">Login</a></li>
<li><a href="/">Sign Up</a></li>
<li><a href="/">Logout</a></li>
</ul>
</div>
</div>
</nav>
1-2. footer 생성
: 현재 레슨에서는 따로 페이지 하단 메뉴 및 디자인이 없으므로 단순히 <body>태그 및 <html> 태그를 마무리하는 소스만 입력한다.
경로 : views/partials/header.ejs
</body>
</html>
2. INDEX 생성
해당 프로젝트에서 index 페이지는 db에 저장되어 있는 각각의 name, image를 화면에 출력해주는 역할을 한다. 작성된 index.ejs는 express를 통해 request를 요청한 client로 response 되며, 서버로부터 response를 받은 브라우저를 이를 해석하여 user가 볼 수 있도록 페이지를 출력한다.
[그림 6] 해당 프로젝트의 index 페이지(좌). 각 캐릭터는 db에 저장된 name, imageUrl을 이용하여 화면에 출력한다(우)
2-1. index.ejs 생성
<!-- partials/header.ejs를 불러온다-->
<%- include("partials/header") %>
<div class="container"> <!-- 해당 container는 모든 contents를 페이지 중앙에 위치시키기 위해 사용-->
<header class="jumbotron"> <!-- 기능적으로 div와 동일하게 컨텐츠를 분할함. 하지만 semantic web에서는 해당 class의 내용은 강조된 내용으로 인식-->
<div class="container"> <!-- <header> 태그 내의 컨텐츠만 따로 디자인하기 위해 추가적인 div 사용
<h1>Welcome To YelpCamp!</h1>
<p> View our hand-picked campgrounds from all over the world</p>
<p>
<!-- 강조되며 큰 사이즈 버튼 생성, 클릭 시 "/campgrounds/new"로 링크됨-->
<a class="btn btn-primary btn-lg" href="/campgrounds/new">Add New Campground</a>
</p>
</div>
</header>
<div class="row text-center" style="display:flex; flex-wrap: wrap;"> <!-- 개별 데이터를 보여주는 컬럼의 텍스트 위치, 반응형 여부 설정 -->
<% campgrounds.forEacher((campground) => { %> <!-- 스크립트에서 돌아가므로 선언문 사용. app.js에서 allCampgrounds가 할당된 campgrounds를 forEach문으로 돌려 모든 데이터를 출력 -->
<div class="col-lg-6 col-md-4 col-sm-3"> <!-- 페이지를 12등분 했을 때 각 1200px 이상= 6/12칸, 992px 이상 = 4/12칸, 768px 이상에 해당하는 grid 사이즈로 컬럼을 출력 -->
<div class="thumbnail"> <!-- thumnail 사용-->
<img src="<%=campground.image%>"> <!-- campground의 image value를 추출하여 이미지 출력-->
<div class="caption"> <!-- <h4>에 출력된 이름을 사용-->
<h4><%= campground.name %></h4>
</div>
<p> <!-- campground에 추출한 id값을 이용하여 각 데이터의 상세페이지로 링크하는 버튼 추가-->x
<a href="/campgrounds/<%= campground._id %>" class="btn btn-primary">More Info</a>
</p>
</div>
</div>
});%>
</div>
</div>
const express = require("express"),
app = express(),
bodyParser = require("body-parser"),
mongoose = require("mongoose");
// mongodb와 mongoose 연결하여 js로 mongodb 사용 가능하게 설정한다. 27017은 mongodb의 기본 포트
mongoose.connect("mongodb://localhost:27017/yelp_camp", {useNewUrlParser: true, useUnifiedTopology: true});
// bodyParser를 사용할 수 있도록 설정
app.set(bodyParser.urlencoded({extended: true}))
// view engine이란 node js에서 다양한 형태의 language를 사용 시 해당 langauge들을 문제없이 사용할 수 있도록 해준다
// ex) HTML5, JSP etc
app.use("view engine", "js")
// Shcema Setup. DB Schema를 다음과 같이 설정한다. 일종의 템플릿으로 아래의 형태로 key-vale를 가진다.
// 기본적으로 해당 Schema를 사용할 경우 3개의 key-value pair를 가진다.
const campgroundSchema = new mongoose.Schema({
name: String,
image: String,
description : String
})
// 위에서 선언한 형태의 Schema로 컴파일된 모델의 속성을 가진 Campground을 새로 선언한다.
const Campground = mongoose.model("Campground", campgroundSchema);
// RESTFUL Route를 각각의 목적에 따라 선언한다.
app.get("/campgrounds", (req, res) => {
//DB에서 campgrounds 데이터를 조건없이({}) 조회(find)한다. 즉 모든 데이터 조회.
// 조회를 위해 2개의 인자를 사용한다. (err 여부와 db에서 받은 모든 정보)
Campground.find({}, (err, allCampgrounds) => {
if(err){// err 발생 시
console.log(err); // 터미널에 err를 출력
} else { // err 없을 시
res.render("index", {campgrounds: allCampgrounds}); //index.ejs에 campgrounds라는 이름으로 allCampgrounds를 대입한다.
}
})
});
//CREATE - 새로운 campground를 database에 생성
app.post("/campgrouds", (req, res) => { // POST method가 /campgrounds route로 전달되면
const name = req.body.name; // 요청한 body의 name = name 값을 const name에 할당
const image = req.body.image; // 요청한 body에 name = image 값을 const image에 할당
const desc = req.body.description; // 요청한 body에 name = description 값을 const description에 할당
// 위의 name, image, desc를 하나의 obj에 저장한다. 사용할 형태는 campgroundSchema와 동일하므로 각각 key-vale 형태로 맞춰준다.
const newCampground = {name: name, image: image, description: desc};
// DB에 mongoose로 모델링한 새로운 데이터를 생성하고 저장한다.
Campground.create(newCampground, (err, newlyCreated) => {
if(err){ // err 발생 시 터미널에 내용 출력
console.log(err)
} else {
res.redirect("/campgrounds"); // 정상 동작 시 "/campgounds"로 페이지를 redirect하여 저장된 값을 페이지에서 볼 수 있도록 한다.
}
})
});
//NEW - 새로운 campground를 생성할 수 있는 form을 보여준다.
app.get("/campgrounds/new", (req, res) => {
res.render("new.ejs"); // "/campgrouynds/new"로 GET method 요청이 서버로 들어오면 new.ejs를 렌더링 한 값을 클라이언트로 respose한다.
});
//SHOW - 상세페이지를 보여준다. "/campgrounds" 페이지는 현재 DB에 저장된 데이터를 한 페이지에 출력하므로, description을 보여주는 개별 페이지로 이동시킨다.
app.get("/campgrounds/:id", (req, res) => {
// 주어진 id 값으로 db를 검색하고, 검색한 데이터를 특정 페이지에 출력한다.
Campground.findById(req.params.id, (err, foundCampground) =>{ //기본 메소드인 findById를 사용해 campgroundSchema로 모델링한 campground를 id로 조회한다.
if(err){
console.log(err)
} else { // err가 없을 시 렌더링한 show.ejs 응답한다. 응답할 때 findById로 조회한 데이터인 foundCampground를 campground로 할당한다.
res.render("show", {campground: foundCampground});
}
})
});
// "/"형태로 GET METHOD 요청이 들어오면 landing page를 보여준다. 해당 if - else if 형태처럼 포괄하는 Route인 "/"가 코드 위에 있을 경우 모든 페이지가 landing page를
// 응답받는 것을 조심해야 한다. "/campground, /campground/new 등의 url은 결국 "/" 의 하위 형태이기 때문에 해당 Route가 위에 있으면 "/"뒤의 campgound 등은 무시하고
// landing page로 모두 이동시키기 때문이다.
app.get("/", (req, res) => {
res.render("landing");
})
// express 시 사용하는 기본 서버 설정 내용이다. 해당 코드는 3000포트를 사용할 때의 옵션이며, 정상 연결 시 console log가 출력된다.
app.listen(process.env.PORT || 3000, () =>{
console.log("The Yelpcamp v2 server has been started");
});
아래와 같이 기존에 사용하던 기능이 deprecated 되거나 port 관련 에러가 발생할 경우 mongoose.connect에 option을 부여한다.
mongoose.connect("mongodb://localhost:27017/yelp_camp", { useNewUrlParser: true, useUnifiedTopology: true});
// 27017은 mongodb에서 사용하는 port
(node:1159) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect. (node:1159) DeprecationWarning: current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. T o use the new Server Discover and Monitoring engine, pass option { useUnifiedTopology: true } to the MongoClient constructor.
저는 실제로 아래의 #1에 해당하는 The Web BootCamp by Colt Steele, Udemy의 온라인 코스 강의를 듣고 있습니다. 처음에는 캡션으로 출력되는 한글 자막을 보고 했었는데, 워낙 발음이 깔끔하고 설명을 쉽게 하는 친구라 자막 없이도 들을만 합니다.
또한 모르는 부분이나 잘 안되는 부분에 대해서는 질문을 남기면 보통 1-2일 안에 조교들한테서 답변이 오니까 상당히 피드백도 좋은 편입니다.
무엇보다 해당 코스가 좋은 점은 HTML, CSS, Javascript에 이은 백앤드까지 전체적인 프로젝트가 어떻게 구현되는지 알 수 있다는 점입니다. 총 47시간 405개의 강의인데, 세션 8,9는 넘어가시고 최대한 빨리 한 바퀴 돌리면서 전체적인 흐름을 파악하는게 중요합니다. (블로그에 lecture 별로 강의 내용 정리해놨으니까 혹시 잘 안되시는 부분 있으시면 참조하시거나 질문 주시면 바로 답변 달아드리겠습니다.)
안녕 친구들! 이 포스트에서 난 어떻게단, 6개월 안에 그리고 3만 원 이하로웹 개발에 대해서 거의 모르거나 아예 모르는 상태에서 초급 풀 스택 개발자가 될 수 있는지 보여줄 거야.
이 포스트는 네가 알아야 하는 모든 것을 커버할 거야. 너는 먼저 온라인 코딩 부트캠프로 (1.5만 원) 웹 개발의 기본적인 것들을 배울 거야. 너는 그다음으로 고급 부트캠프를 (1.5만 원) 하게 될 거야. 그다음에, 우리는 네가 첫 두 번의 부트캠프에서 배웠던 모든 것들을 강화하도록 무료 튜토리얼들, 포스트들 그리고 문서로 점프할 거야. 다음으로, 너는 네가 배운 새로운 스킬들을 가지고 몇 가지 프로젝트를 만들고 그것들을 깃허브에 오픈소스화하게 될 거야. 마지막으로, 우리는 이력서 만들기, 인터뷰 준비 그리고 연봉 협상에 집중할 거야.
밝힘: 나는 리뷰들을 쓰고 내가 리뷰한 제품들을 파는 회사들로부터 보상을 받아. 여기에 표현된 모든 의견은 나 자신의 것이야.
이 가이드를 따랐을 때 네가 배우게 될 것들:
HTML/CSS
jQuery (제이쿼리)
JavaScript (자바스크립트)
Git/Version Control (깃/버전 컨트롤)
React (리액트)
Node.js (노드)
MongoDB (몽고디비)
준비 됐어? 그럼 들어가 보자고!
#1. 웹 개발 부트캠프
먼저 — 너는 기본적인 것들과 웹 개발 원칙들에 대한 든든한 토대를 마련할 필요가 있어. 이걸 하는 데 여러 방법이 있지만 내 생각에는 가장 좋은 그리고 가장 쉬운 방법이 있다고 생각해.
The Web Developer Bootcamp | Udemy
The only course you need to learn web development - HTML, CSS, JS, Node, and More!
bit.ly
콜트 스틸 (Colt Steele)의 웹 개발 부트캠프는 돈으로 살 수 있는 단 하나의 최고의 웹 개발 강좌야. 그건 가끔 2만 원 이하로 세일할 때가 있고, 40시간 이상의 맟춤형 콘텐츠로 채워져 있어.
강사인 콜트 스틸은 온라인 코딩 교육의 세계로 들어오기 전엔 샌프란시스코의 한 코딩 부트캠프의 수석 강사였어. 이 강좌는 그가 오프라인 부트캠프에서 가르쳤던 것의 온라인 버전이야.
이 강좌는 웹 개발의 기본에 대한 모든 것을 다뤄: HTML5, CSS3, 자바스크립트, 부트스트랩, 시맨틱UI, DOM 변형, jQuery, 유닉스 (명령줄 기반) 명령어들.
네가 기본적인 것들을 습득하고 나면, 다음과 같은 더 고급 주제들을 탐험하게 될거야: 노드, NPM, 익스프레스, REST, 몽고디비, 데이터베이스 연계, 인증, PassportJS, 권한 부여.
콜트는 웹 개발에 대해서 잘 알고 있을 뿐 아니라 어떻게 가르치는 줄 아는 강사야. 어려운 개념들을 명료하고 설명하고 모든 것들을 다루기 쉬운 조각들로 나눠. 게다가, 그 강좌는 프로젝트들을 중심으로 돌아가서 너는 지루한 읽기나 시험 보기가 아닌 실제의 것들을 만들면서 배우게 돼.
이 고급 웹 개발 부트캠프는 너의 코딩 스킬들을 다음 단계로 올릴 수 있도록 디자인 되었어! 걱정 하지 마, 이 강좌 역시 프로젝트 기반이야. 너는 10개가 넘는 프로젝트를 만들게 될 것이고 네가 모두 이해할 것을 보장하는 솔루션을 포함한 수십 개의 코딩 챌린지를 접하게 될 거야.
이 강좌에서 배우게 될 것들은:
CSS3 트랜지션, 트랜스폼 그리고 애니메이션을 배움으로써 CSS 기술을 빌드업
프론트엔드 프레임워크로 들어가서 리액트, 리액트-라우터와 리덕스를 익힘
콜백, 프라미스, 제너레이터와 비동기 함수들뿐 아니라 ES2015, ES2016 그리고 ES2017를 가지고 자바스크립트 기술을 향상
차트, 포스 그래프 그리고 데이터 시각화를 만듦
자스민을 이용한 테스팅
D3
SVG
노드 API들을 만듦
싱글 페이지 애플리케이션들을 만듦
자바스크립트에서의 객체 지향 프로그래밍
클로져와 ‘this’ 키워드
인증과 권한 부여
자바스크립트를 이용한 비동기 코딩
이 강좌는 거의 350개의 강의와 30시간의 콘텐츠가 있고 너는 정말 많은 것들을 배우게 될 거야.
이 시점에 너는 두 개의 온라인 코딩 부트캠프를 들었고 웹 개발 기술들에 대해서 편안함을 느끼기 시작할 거야. 하나의 간단한 아이디어를 가지고 노드 백엔드와 리액트 프론트엔드를 이용해서 멋지게 구현할 수 있을 거야. 더해서, 모바일 우선의 반응성이 있는 페이지를 스타일 할 수 있는 CSS 기술에 대해서 자심감을 가질 거야.
이제 너의 새로운 기술들을 보강하면서 계속 공부할 시간이야. 다음은 문서, 포스트 그리고 튜토리얼의 리스트야.
몇 달 전에 이것들을 읽는 것은 아마도 말도 안 되는 일이 되었겠지만 새로 배운 스킬들과 함께라면 너는 멋지게 그것들을 소화할 수 있어.
cats.js
const mongoose = require("mongoose");
mongoose.connection("mongodb://localhost/cats_app", { useNewUrlParser: true})
// mongodb 서버가 동작 중일 때는 연결, 동작중이지 않을 때는 서버 구동 후 연결
const catSchema = new mongoose.Schema({
name: String,
age: Number,
temperament: String
});
const Cat = mongoose.model("Cat", catSchema);
// "Cat"이라는 이름의 catSchema 모델로 컴파일한 후 Cat 변수에 저장한다. 이는 데이터를 7번 라인에 선언한
// 형태로 저장하기 위함이다.
// Adding a new cat to the DB
// db에 george를 저장하기 위해 변수 생성
const george = new Cat({
name: "george",
age: 11,
temperament: Grouchy
});
george.save((err, cat) => {
if(err){
console.log("Something has went wrong!");
} else {
console.log("We've just save a CAT to the db");
console.log(cat); // 실제 db에 저장된 cat를 console log로 출력
console.log(george); // 19라인에서 저장된 george를 console.log로 출력
}
});
[그림 1] mongoDB에 실제로 저장된 후 console log에 찍힌 메세지
하지만 실제로 console log에 찍힌 값은 db에서 조회된 데이터가 아닌 저장 시 db에 전달한 값일 뿐이다.
2. db에 저장된 데이터를 실제로 조회
cats.js
const mongoose = require("mongoose");
mongoose.connection("mongodb://localhost/cats_app", { useNewUrlParser: true})
// mongodb 서버가 동작 중일 때는 연결, 동작중이지 않을 때는 서버 구동 후 연결
const catSchema = new mongoose.Schema({
name: String,
age: Number,
temperament: String
});
const Cat = mongoose.model("Cat", catSchema);
// "Cat"이라는 이름의 catSchema 모델로 컴파일한 후 Cat 변수에 저장한다. 이는 데이터를 7번 라인에 선언한
// 형태로 저장하기 위함이다.
// Adding a new cat to the DB
// db에 george를 저장하기 위해 변수 생성
const george = new Cat({
name: "george",
age: 11,
temperament: Grouchy
});
george.save((err, cat) => {
if(err){
console.log("Something has went wrong!");
} else {
console.log("We've just save a CAT to the db");
console.log(cat); // 실제 db에 저장된 cat를 console log로 출력
console.log(george); // 19라인에서 저장된 george를 console.log로 출력
}
});
// DB에 저장된 모든 값을 조회한다.
Cat.find({}, (err, cats) => {
if(err){
console.log("Oh no, Error has been occured!");
console.log(err);
} else {
console.log("All the cats are... ");
console.log(cats);
}
});
3. 1에서 george라는 변수에 고양이의 데이터를 저장한 후, 그 데이터를 다시 db로 전달하였다. 이를 하나의 코드로 작성한다.
cats.js
const mongoose = require("mongoose");
mongoose.connection("mongodb://localhost/cats_app", { useNewUrlParser: true})
// mongodb 서버가 동작 중일 때는 연결, 동작중이지 않을 때는 서버 구동 후 연결
//const catSchema = new mongoose.Schema({
// name: String,
// age: Number,
// temperament: String
//});
const Cat = mongoose.model("Cat", catSchema);
// "Cat"이라는 이름의 catSchema 모델로 컴파일한 후 Cat 변수에 저장한다.
// 이는 데이터를 7번 라인에 선언한 형태로 저장하기 위함이다.
// Adding a new cat to the DB
// db에 george를 저장하기 위해 변수 생성
//const george = new Cat({
// name: "george",
// age: 11,
// temperament: Grouchy
//});
//george.save((err, cat) => {
// if(err){
// console.log("Something has went wrong!");
// } else {
// console.log("We've just save a CAT to the db");
// console.log(cat); // 실제 db에 저장된 cat를 console log로 출력
// console.log(george); // 19라인에서 저장된 george를 console.log로 출력
// }
//});
Cat.create({ // catSchema로 작성된 Cat이란 변수에 아래의 값을 추가한다.
name: "Korean short",
age: 2,
temperament: "cute"
}, (err, newCat) => {
if(err){
console.log(err);
} else {
console.log(newCat);
}
})
// DB에 저장된 모든 값을 조회한다.
Cat.find({}, (err, cats) => {
if(err){
console.log("Oh no, Error has been occured!");
console.log(err);
} else {
console.log("All the cats are... ");
console.log(cats);
}
});
[그림 2] cats.js 구동 시 console log에 출력되는 내용. 2개의 george 중 1개는 실제 db로 저장되는 값, 나머지 1개는 저장하기 위해 JS로 변환시켜놓은 값이다.
