multer
파일을 업로드할 때 유용한 패키지
서버를 구축할 때 파일을 쉽게 업로드 할 수 있도록 해줌.
upload.single("image")
upload
파일 업로드 방식을 upload에 저장
파일 명이나 어디에 저장할지 정해줌.
.single("image")
파일 1개를 업로드 = 'image'라는 FormData 전송
업로드된 파일은 req.file
나머지 요청 데이터는 req.body에서 접근 가능
설치
npm install multer
파일로 설정해준 뒤,
파일을 선택하고 key를 작성해주어야 함
MulterError: Unexpected field
key 값을 upload.single("image")의 image와 일치시켜야함
다음과 같은 파일형식을 받음
암호화된 파일 저장 확인
하지만 파일을 public의 image 폴더에 저장시키고, 파일명을 알아보기 쉬운 이름으로 변경하는 과정이 필요함
// module/imageLoader.js
const multer = require("multer")
const storage = multer.diskStorage({
destination: (req, res, callback) => {
callback(null, "public/images")
// 에러 매개변수, 이미지가 저장될 곳
},
filename: (req, file, callback) => {
callback(null, file.originalname)
},
})
const upload = multer({ storage: storage })
module.exports = upload파일이 원하던 위치에 저장된 것을 확인할 수 있음
ejs
embedded javascript template = 템플릿 엔진
동적 웹페이지를 구현하기 위해 사용
js 변수를 view 파일 내에서도 사용 가능하도록 해줌
syntax
실습을 위해 routes 폴더에 template 파일을 만들어줌
파일 경로를 app.js에 저장해주는 과정 필요
template.js 파일 생성 후, 다음과 같이 코드 작성
const express = require("express")
const router = express.Router()
router.get("/ejs", (req, res) => {
res.render("template")
})
module.exports = router
view 폴더에 template.ejs 파일 생성
html을 작성하고 http://localhost:3000/template/ejs 로 들어가면 해당 내용 확인 가능.
javascript <% %>
자바스크립트 문법을 사용가능하도록 함.
내부에서 변수 사용가능하나 html에서 출력되진 않음
<!DOCTYPE html>
<html lang="ko">
<head>
</head>
<body>
<% if(true){ %>
<div>하하하하하</div>
<% } else { %>
<div>집에 가고 싶다</div>
<% } %>
</body>
</html>
변수 선언 <%= %>
template.js에 다음과 같이 작성
const express = require("express")
const router = express.Router()
router.get("/ejs", (req, res) => {
res.render("template", { data: "test data" })
})
module.exports = routerrender에 파라미터로 전달된 { data: "test data" } 값을 template에서 사용 가능
template.ejs에 다음과 같이 코드를 입력하고 출력화면을 확인해보면
<!DOCTYPE html>
<html lang="ko">
<head>
</head>
<body>
<%= data %>
</body>
</html>
다음과 같이 전달된 변수 값이 출력되는 것을 확인할 수 있음
ejs 분할 <% include 파일명 %>
네비게이터나 헤더같이 여러 페이지에 반복되는 코드들을 반복적으로 적지 않고 별도의 파일로 만들어 필요시 해당 문법으로 불러와 사용하도록 함
별도의 navbar 파일을 만들고,
//navbar
<div style="background-color: #fed322;">navbar</div>template에 navbar 추가
<!DOCTYPE html>
<html lang="ko">
<head>
</head>
<body>
<% include ./layout/navbar.ejs %>
<%= data %>
</body>
</html> 
express-session
로그인을 실행할 때, 로그인에 대한 정보가 저장되어있지 않다면 서버는 응답하지 않음.
session
정보가 서버에 저장되도록 해, 정보가 유지되게 하는 기능
설치
npm install express-session
app.js에 다음 코드 추가
const session = require("express-session")
app.use(
session({
secret: "first project",
resave: false,
saveUninitialized: true,
})
)secret : session을 암호화하기 위해 필요
resave : 세션을 변경하지 않아도 저장할지 말지
saveUninitialized : 세션이 초기화되기 전에 저장할지 말지
session을 이용해 로그인 구현하기
// user.js
var express = require("express")
var router = express.Router()
const userInfo = {
lee: {
password: "123123",
},
kim: {
password: "456456",
},
}
router.get("/", (req, res) => {
const session = req.session
res.render("index", {
username: session.username,
})
})
router.get("/login/:username/:password", (reg, res) => {
const session = req.session
const { username, password } = req.params
if (!userInfo[username]) {
res.status(400).json({
message: "user not found",
})
}
if (userInfo[username]["password"] === password) {
session.username = username
res.status(200).json({
message: "user login!",
})
} else {
res.status(400).json({
message: "wrong pw",
})
}
})
module.exports = router//index.ejs
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<% if (username) { %>
<div>
<%= username %> 님 환영합니다 :)
</div>
<% } else {%>
<div>로그인이 필요합니다</div>
<% } %>
</body>
</html>
여기서 url에 값을 입력해주면
로그인 성공했다는 메세지 확인 가능
이후 다시 users로 이동하게 되면
// 로그아웃
router.get("/logout", (req, res) => {
const session = req.session
if (session.username) {
req.session.destroy((err) => {
if (err) {
console.log(err)
} else {
res.redirect("/users")
}
})
} else {
res.redirect("/users")
}
})로그아웃으로 이동하면
로그아웃된 것을 확인할 수 있음
