본인 이해를 위한 정리용
Express.js 시작
- mkdir new
- express new --view=ejs
이때 view를 ejs로 설정하지 않으면 pug로 설정된다! - cd new
- /new 경로에서 npm i
- /new 경로에서 npm start
파일트리
- controller MVC패턴 중 controller. routes/blog.js에 넣을 router.메소드의 코드들을 따로 모아 폴더에 저장해 보다 깔끔하게 사용할 수 있다.
- modles
- public 이미지, 자바스립트, 폰트, css
- routes 라우팅 연결 directory
- views 우리들 눈에 보이는 파일, HTML 템플릿 directory
- app.js Express.js 의 가장 기본이 되는 파일, 웹 어플리케이션의 기능을 정의
app.js
Express.js의 기능을 담은 객체.
error 등 Express.js의 모든 동작이 app객체에 정의됨
app.use로 불러온 모듈을 실행한다.
app.listen()으로 http서버를 생성할 수 있다.
app.js에 app라우팅을 작성해 사용할 수도 있다.하지만 Express Router가 더 편하긴 하다.
app.get('/', (req, res) => {
res.send('GET /');
});
app.post('/', (req, res) => {
res.send('POST /');
});
app.put('/', (req, res) => {
res.send('PUT /');
});
app.delete('/', (req, res) => {
res.send('DELETE /');
});
app.all('/all', (req, res) => {
res.send('ANY /');
});
var bookRouter=require('./routes/book')
app.use('/book',bookRouter)
localhost:3000/book으로 접속할 경우, ./routes/book.js에 있는 모듈을 실행시킨다.
routes/book.js
var express = require('express');
var router = express.Router(); 로 router 객체를 생성.
router객체에 get,put,post,delete 함수를 사용할 수 있다.
get : 읽어올 때 사용.
post : 데이터를 생성할 때 사용.
put : 데이터를 수정/업데이트할 때 사용.
delete : 데이터를 삭제할 때 사용
router.get('/',(req,res)=>{
res.render('book')
// book.ejs를 그려줌
})
위와 같이 라우터에 적용하는 함수를 Request Handler라고 함
HTTP 요청과 응답을 다룰 수 있는 함수로, 설정된 라우팅 경로('/')에 해당하는 요청이 들어오면 Request Handler 함수(res.render('book'))가 실행된다.
router.get('/',(req,res)=>{
res.render('book')
})
- /book 경로(기본 경로라 /로 표시)에 접근할 경우, view하위에 있는 HTML 템플릿인 book.jes를 사용해 화면을 전송한다.
routes/book.js
router.get('/:id',(req,res)=>{
let bookname=req.params.id
res.send(책의 이름은 ${bookname}입니다.)
})
- text 형식의 HTTP 응답을 전송한다.
http://localhost:3000/book/thegreatgatsby 링크로 이동하면
이런 화면이 나온다.
router.get('/writer/:writername',(req,res)=>{
let writername=req.params.writername
res.send(작가는 ${writername}입니다.)
})
http://localhost:3000/book/writer/fitzgerald 로 이동하면 다음과 같은 화면이 나온다.
router.get('/paths')로 경로를 줄 경우에는 따로 ejs나 js를 생성하지 않고 http://localhost:3000/book/paths 를 입력해 이동하면 된다.
라우터에 함수를 모두 사용한 뒤, module.exports=router 하는 것을 잊지 말자!!
이때 exports 된 라우터 객체는 app.js에서
var bookRouter=require('./routes/book')
app.use('/book',bookRouter)
로 호출되어 /book 경로에 연결된다.
routes/blog.js
const blogSchema =require('../models/blog')로 아까 만든 blog 모델을 호출한다.
router.get('/', async(req, res) => {
const result=await blogSchema.find({}).exec()
- 블로그스키마에서 모든 값을 찾아 저장함. 요청이 받아들여질때까지의 시간이 필요하니 async/await을 사용한다.
res.render('blog/index', { title: '블로그' ,content:result}) - views하위에 새로 생성한 blog폴더 아래의 index.ejs를 불러와 그리는데, title로는 블로그를 주고, content로 블로그스키마에서 찾은 모든 값을 준다.
})
router.get('/write', (req, res) => {
res.render('blog/write')
})
- views/blog/write.ejs를 불러와 화면을 그린다.
router.post('/write',(req,res)=>{
- router객체에 post를 사용해 /write경로로 post해준다.
let title=req.body.title; - 요청값의 body에서 title을 읽어온다. write.ejs에서 요청하고 write.ejs의 input type text의 name이 title이다.
blog/write.ejs
<form action="/blog/write" method="post">
<p> 제목 </p>
<input type="text" name="title"/>
<p>글 내용</p>
<textarea name="content" cols="30" rows="15"></textarea>
<br/>
<input type="submit" value="글 작성하기">
</form>let content=req.body.content;
- blog 데이타베이스의 내용을 넣겠다.
let blogText=new blogSchema({
title:title,
content:content
}) - write.ejs에서 작성한 input과 textarea의 title,content를 불러와 새로운 블로그스키마 작성한다. models/blog에 있는 블로그 스키마에 맞춰 데이터를 집어넣음
- 저장후 실행할 것들
blogText.save().then(result=>{
console.log(result)
console.log('글이 저장되었습니다.')
res.redirect('/blog') - 저장 후 메인화면으로 돌아감
}).catch(err=>{ - 에러 발생시 실행할 코드
console.log(err)
next(err)
})
})
module.exports = router;
잊지말고 exports 해주기~!
models/blog.js
Mongoose ODM을 사용하기 위해 models/blog.js에 blogSchema를 정의했다.
mongoose.model('blog', blogSc);로 위에서 정의한 스키마 blogSc를 blog라는 이름의 모델로 만들었다.
views/blog/index.ejs
index.ejs는 html형태로 작성된다.
title,content와 같이 블로그스키마에서 작성된 값은 <%= %> 형태로 넣어준다. 자바스크립트의 for문 등을 사용할 수 있다.
views/blog/write.ejs
form action="/blog/write" 폼 데이터를 전송할 서버의 url을 지정한다.
코드에서는 http://localhost:3000/blog/write 로 보낸다.
form method="post" 폼 데이터가 서버로 전송될 때 사용될 HTTP 메소드를 명시. 코드에서는 글쓰기를 위한 코드니까 post로 지정했다.
blogcontroller.js
이전에 routes/blog.js에 있던 코드를 가져와
exports.bloglist=async(req,res)=>{}의 형식으로 바꾼다.
exports.blogJoin=async(req,res)=>{
try{
const email=req.body.email;
const password=req.body.password;
let findUser=await memberSchema.findOne({email:email})
//email이 email 값인 것을 찾아 findUser에 넣어둠
if(findUser){
//이미 가입된 상태일 경우,
res.send('이미 가입된 아이디입니다.')
}
else{
//비밀번호 암호화를 위한 코드들
const salt=await bcrypt.genSalt(10)
const hashedPassword=await bcrypt.hash(password,salt)
let user=new memberSchema({
email:email,
//요청으로 받은 email을 스키마의 email에 넣어줌
password:hashedPassword
//암호화된 비밀번호를 password에 넣어줌
})
// 새로운 스키마 생성
await user.save()
// await으로 저장
return res.send('회원가입을 환영합니다.')
}
}
catch(e){
console.log('error',e)
}
}blogcontroller 생성 후 routes/blog.js
const blogController=require('../controller/blogcontroller')
router.get('/',blogController.bloglist) 로 blogcontroller.js 에서 모듈을 불러와 사용한다.
blogcontoller.js
