개발 환경 구축
1. node.js 다운로드
2. cmd
- node - -version
- npm init
3. npm install express
- dependencies : 설치한 라이브러리 목록
- github에 등록하거나 저장해서 가지고 다닐 때 node_moduels는 관리하는 것이 아니라 프로젝트를 실행시킬 때만 필요한 것
서버 띄우기
- 새로 저장할 때 마다 서버를 다시 실행
- node app.js
- nodemon → 서버를 재시작 할 필요 없이 자동적으로 수정된 것을 보여주는 패키지
- nodemon app.js
- npm install -g nodemod
- nodemon은 글로벌에 깔아야 한다. 그리고 yarn을 사용해서 패키지를 설치할 건데 yarn 설치 명령어= npm install -g yarn 하고 그다음 nodemon 설치 위해 yarn global add nodemon
- 이제 nodemon에서 app.js를 실행시켜준다.
- npm install express
app.js 파일 새로 생성
- 라이브러리 가져오기 ⇒ require(’’)
- const + 인스턴스
- express ⇒ 인스턴스
- let : 변수 계속 변형 가능
- const : 상수 키워드 고정의 불변
app.listen([port[, host[, backlog]]][, callback])
사용 방법
- Binds and listens for connections on the specified host and port. This method is identical to Node’s http.Server.listen().
- If port is omitted or is 0, the operating system will assign an arbitrary unused port, which is useful for cases like automated tasks (tests, etc.).
const express = require('express')
const app = express()
app.listen(3000)The app returned by express() is in fact a JavaScript Function, designed to be passed to Node’s HTTP servers as a callback to handle requests. This makes it easy to provide both HTTP and HTTPS versions of your app with the same code base, as the app does not inherit from these (it is simply a callback):
const express = require('express')
const https = require('https')
const http = require('http')
const app = express()
http.createServer(app).listen(80)
https.createServer(options, app).listen(443)
The app.listen() method returns an http.Server object and (for HTTP) is a convenience method for the following:
app.listen = function () {
const server = http.createServer(this)
return server.listen.apply(server, arguments)
}
- 서버를 띄우는 listen 매소드
- listen은 app의 인스턴스
- listen 매소드는 매개변수가 필요없기 때문에 익명함수(function())안에 아무것도 안넣음
- console.log ⇒ 크롬 창에print문처럼 띄우기
- 익명함수(function())안에 data를 넣을 경우
- undefined 가 뜸 그래서 필요가 없음
- 제거 후 서버 확인
- chrome ⇒ ‘http://localhost:8000/’
- callback
- fuction()이란 함수를 사용할 경우 {}안에 함수를 작성한다.
- 함수명을 정하지 않음 ⇒ 익명함수를 처리
- 긴 함수를 작성하고 호출할 경우는 함수 이름을 사용
- {} 안에 인자값으로 작성
- 함수안에 또 다른 함수
- 함수안의 매개변수에 전달해준다.
- 함수를 실행한 후 그 결과로 다른 것을 실행
- fuction()이란 함수를 사용할 경우 {}안에 함수를 작성한다.
views 파일 생성하고 html파일 ejs로 열기
- npm install ejs
- app.set
- 서버 설정해주는 메소드
- app.get(path, callback [, callback ...])
render
const express = require('express')
const path = require('path')
const app = express()
app.set('views', path.resolve(__dirname + '/views'))
app.set('view engine','ejs')
let port = 8008
app.get('/', (req, res)=>{
return res.render('index')
})
app.listen(port, () => {
console.log(`server is running at <http://localhost>:${port}`)
})
ejs파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>tesetsetsetsetsetsetsetset</h1>
</body>
</html>
const express = require("express")
const path = require('path')
const app = express()
//console.log(path.resolve(__dirname +'/views'))
app.set('views', path.resolve(__dirname +'/views'))
app.set('view engine','ejs')
let port = 8000
// app.listen(port, fucntion(){
// console.log(`Server is running at htt[://localhost:${port}]`)
// })
app.get('/', (req, res)=>{
console.log(req.query.name)
//return res.send("<h1>Hello World</h1>")
return res.render('index',{name:"안동", action : ["수영","축구","야구"]})
})
app.listen(port, () => {
console.log(`Server is running at <http://localhost>:${port}`)
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Main Page</h1>
<h3>안녕하세요 재영님</h3>
<h4><%= name %>은 <%= action[0] %>한다.</h4>
</body>
</html>
미들웨어
app.use
- 미들웨어의 역할을 한다
- 미들웨어 : 주 된 작동하는 목적이 아닌 요청할 때 마다 별개로 작동하는 것
- 자동차를 몰고 갈 때 자동차의 미들웨어 → 라디오, 네비게이션
- 미들웨어 : 주 된 작동하는 목적이 아닌 요청할 때 마다 별개로 작동하는 것
- 항상 설정 해놓아야 하는 미들웨어
app.use(express.urlencoded({extended:false}))
- url을 불러올 때 url을 통해 실어 보내는 데이터를 안 깨지도록 변환 시켜주는것
app.use(express.json())
- json데이터가 들어올 때 json형식으로 안 깨지게 해주는 것
router
- 여러 작업 export하고 import 하는 과정
const express = require('express')
const router = express.Router()
router.get('/', (req, res)=>{
res.render('index',{name:"안동", action : ["수영","축구","야구"]})
})
module.exports = router
const express = require('express')
const path = require('path')
const apiRouter = require('./routes/routing')
const app = express()
app.set('views', path.resolve(__dirname + '/views'))
app.set('view engine','ejs')
app.use(express.urlencoded({extended:false}))
app.use(express.json())
app.use('/',apiRouter)
let port = 8008
app.get('/', (req, res)=>{
return res.render('index')
})
app.listen(port, () => {
console.log(`server is running at <http://localhost>:${port}`)
})
const express = require('express')
const router =express.Router()
router.get('/', (req, res)=>{
return res.send('sdoviinvionoisdpvnspdvpnvpdnp')
})
module.exports = router
const express = require("express")
const path = require('path')
const apiRouter = require('./routes/routing')
const helloRouter = require('./routes/helloRouting')
const app = express()
//console.log(path.resolve(__dirname +'/views'))
// 1. 시작은 set => 서버를 세팅
app.set('views', path.resolve(__dirname +'/views'))
app.set('view engine','ejs')
let port = 8000
// app.listen(port, fucntion(){
// console.log(`Server is running at htt[://localhost:${port}]`)
// })
// 모든 파일이 함께 있는 것이 아니라 분산하여 모듈화
// 미들웨어 등록
app.use(express.urlencoded({extended:false}))
app.use(express.json())
app.use('/',apiRouter)
app.use('/hello',helloRouter)
// 서버를 열어주는 메소드 => listen
app.listen(port, () => {
console.log(`Server is running at <http://localhost>:${port}`)
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="form-example">
<label for="name">username: </label>
<input type="text" name="name" id="name" required />
</div>
<div class="form-example">
<label for="email">email: </label>
<input type="email" name="email" id="email" required />
</div>
<div class="form-example">
<label for="email">phone: </label>
<input type="text" name="email" id="email" required />
</div>
<div class="form-example">
<label for="email">password: </label>
<input type="password" name="email" id="email" required />
</div>
<div class="form-example">
<input type="submit" value="Subscribe!" />
</div>
</form>
</body>
</html>
const express = require('express')
const router = express.Router()
router.get('/', (req, res)=>{
return res.render('index',{name:"안동", action : ["수영","축구","야구"]})
})
router.get('/register',(req, res)=>{
return res.render('register')
})
// router.get('/login',(req, res)=>{
// return res.render('login')
// })
module.exports = router
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="get" class="form-example">
<div class="form-example">
<label for="name">emal: </label>
<input type="text" name="name" id="name" required />
</div>
<div class="form-example">
<label for="email">password: </label>
<input type="email" name="email" id="email" required />
</div>
<div class="form-example">
<input type="submit" value="Subscribe!" />
</div>
</form>
</body>
</html>
const express = require('express')
const router = express.Router()
router.get('/', (req, res)=>{
return res.render('index',{name:"안동", action : ["수영","축구","야구"]})
})
router.get('/register',(req, res)=>{
return res.render('register')
})
router.get('/login',(req, res)=>{
return res.render('login')
})
module.exports = router
mongodb에 연결 하고 데이터 넣기
mongoose 라이브러리
- npm install mongoose
예시)
const mongoose = require('mongoose');
// Define Schemes
const todoSchema = new mongoose.Schema({
todoid: { type: Number, required: true, unique: true },
content: { type: String, required: true },
completed: { type: String, default: false }
},
{
timestamps: true
});
// Create Model & Export
module.exports = mongoose.model('Todo', todoSchema);
const mongoose = require('mongoose')
// Define Schemes
const userSchema = new mongoose.Schema({
username: { type: String },
email: { type: String },
phone: { type: String },
password: { type: String }
},
{
timestamps: true
});
// Create Model & Export
module.exports = mongoose.model('User', userSchema);
username, email, phone,password - 컬럼의 역할
type - 데이터 타입
required : true - 꼭 채워야 되는 것
unique : true - 중복 허용하지 않는다.
timestmaps : true - 현재 시간 적용
- routing.js
const express = require('express')
const router = express.Router()
const User = require('../utils/userModel')
router.get('/', (req, res)=>{
return res.render('index',{name:"안동", action : ["수영","축구","야구"]})
})
router.get('/register',(req, res)=>{
return res.render('register')
})
router.get('/login',(req, res)=>{
return res.render('login')
})
router.post('/register', (req, res)=>{
console.log(req.body['name'])
console.log(req.body['email'])
return res.redirect('/')
})
router.post('/login', (req, res)=>{
console.log(req.body.email)
console.log(req.body['password'])
return res.redirect('/')
})
module.exports = router
const express = require('express')
const router = express.Router()
const User = require('../utils/userModel')
router.get('/', (req, res)=>{
return res.render('index',{name:"안동", action : ["수영","축구","야구"]})
})
router.get('/register',(req, res)=>{
return res.render('register')
})
router.get('/login',(req, res)=>{
return res.render('login')
})
router.post('/register', (req, res)=>{
console.log(req.body.name)
console.log(req.body['email'])
username - req.body.name
email - req.body.email
phone - req.body.phone
password - req.body.password
const user = new User({
username:username,
email:email,
phone:phone,
password:password
}
)
// Document instance method
user.save()
.then((reuslt) => console.log(`Saved successfully : ${result}`))
.catch(e => console.error(e))
return res.redirect('/')
})
router.post('/login', (req, res)=>{
console.log(req.body.email)
console.log(req.body['password'])
return res.redirect('/')
})
module.exports = router
콜백함수는 동기화 되지 않아서 위에 코드를 실행하고 기다리지 않고 바로 다음 코드로 넘어간다. ⇒ 비동기 처리 (어씽크로나이즈) then도 또한 비동기 처리 함수 ⇒ save처리한 결과를 then()안에서 변수로 받을 수 있다. - result는 save한 것을 변수로 받아서 console창에 result 보여준다.
- 클라우드(mongodb)연결
- app.js
const express = require('express')
const path = require('path')
const apiRouter = require('./routes/routing')
const mongoose = require('mongoose')
const app = express()
// Connect to MongoDB
mongoose.connect("mongodb+srv://root:1234@jaeyeong.wq2pmjv.mongodb.net/?retryWrites=true&w=majority", { useMongoClient: true })
.then(() => console.log('Successfully connected to mongodb'))
.catch(e => console.error(e));
app.set('views', path.resolve(__dirname + '/views'))
app.set('view engine','ejs')
app.use(express.urlencoded({extended:false}))
app.use(express.json())
app.use('/',apiRouter)
let port = 8008
app.listen(port, () => {
console.log(`server is running at <http://localhost>:${port}`)
})
비밀번호 암호화
bcrypt 모듈을 설치
npm install bcrypt
- routing.js
const encryptedPassowrd = bcrypt.hashSync(password, 10) // sync
console.log(encryptedPassowrd)
const user = new User({
username:username,
email:email,
phone:phone,
password:encryptedPassowrd
}
)
const express = require('express')
const router = express.Router()
const User = require('../utils/userModel')
const bcrypt = require('bcrypt')
router.get('/', (req, res)=>{
return res.render('index',{name:"안동", action : ["수영","축구","야구"]})
})
router.get('/register',(req, res)=>{
return res.render('register')
})
router.get('/login',(req, res)=>{
return res.render('login')
})
router.post('/register', (req, res)=>{
console.log(req.body.name)
console.log(req.body['email'])
username = req.body.name
email = req.body.email
phone = req.body.phone
password = req.body.password
const encryptedPassowrd = bcrypt.hashSync(password, 10) // sync
console.log(encryptedPassowrd)
const user = new User({
username:username,
email:email,
phone:phone,
password:encryptedPassowrd
}
)
// Document instance method
user.save()
.then((result) => console.log(`Saved successfully : ${result}`))
.catch(e => console.error(e))
return res.redirect('/')
})
router.post('/login', (req, res)=>{
console.log(req.body.email)
console.log(req.body['password'])
return res.redirect('/')
})
module.exports = router
- test.js
const bcrypt = require('bcrypt')
// const encryptedPassowrd = bcrypt.hashSync('1234', 10) // sync
// console.log(encryptedPassowrd)
const same = bcrypt.compareSync("1234", "$2b$10$GRzzLrNdRCCI8xeXShywtesbX3H6qcqg0xgaBKua4vjXMyhFfvlrC") // sync
console.log(same)
조회기능 : find()
register 회원가입
- email을 unique값을 줘서 email로 조회 가능하게 만든다.
const mongoose = require('mongoose')
// Define Schemes
const userSchema = new mongoose.Schema({
username: { type: String },
email: { type: String},
phone: { type: String },
password: { type: String }
},
{
timestamps: true
});
// Create Model & Export
module.exports = mongoose.model('User', userSchema);
- then 으로는 한계 있음 = async, await 사용 ⇒ 동기화 시켜주는 방법
- routing.js
const express = require('express')
const router = express.Router()
const User = require('../utils/userModel')
const bcrypt = require('bcrypt')
router.get('/', (req, res)=>{
return res.render('index',{name:"안동", action : ["수영","축구","야구"]})
})
router.get('/register',(req, res)=>{
return res.render('register', {user:'guest'})
})
router.get('/login',(req, res)=>{
return res.render('login')
})
router.post('/register', async (req, res)=>{
console.log(req.body.name)
console.log(req.body['email'])
username = req.body.name
email = req.body.email
phone = req.body.phone
password = req.body.password
const encryptedPassowrd = bcrypt.hashSync(password, 10) // sync
console.log(encryptedPassowrd)
const user = new User({
username:username,
email:email,
phone:phone,
password:encryptedPassowrd
})
let result = await User.findOne({ email: email });
console.log(result)
if (result != null) {
return res.render('register', {user: "exist"})
}else {
return res.redirect('/register')
}
})
router.post('/login', (req, res)=>{
console.log(req.body.email)
console.log(req.body['password'])
return res.redirect('/')
})
module.exports = router
- register.ejs
const express = require('express')
const router = express.Router()
const User = require('../utils/userModel')
const bcrypt = require('bcrypt')
router.get('/', (req, res)=>{
return res.render('index',{name:"안동", action : ["수영","축구","야구"]})
})
router.get('/register',(req, res)=>{
return res.render('register', {user:'guest'})
})
router.get('/login',(req, res)=>{
return res.render('login')
})
router.post('/register', async (req, res)=>{
console.log(req.body.name)
console.log(req.body['email'])
username = req.body.name
email = req.body.email
phone = req.body.phone
password = req.body.password
const encryptedPassowrd = bcrypt.hashSync(password, 10) // sync
console.log(encryptedPassowrd)
const user = new User({
username:username,
email:email,
phone:phone,
password:encryptedPassowrd
})
let result = await User.findOne({ email: email });
console.log(result)
if (result != null) {
return res.render('register', {user: "exist"})
}else {
try{
let result = await user.save()
await console.log(`Saved successfully result : ${result}`)
await res.redirect('/')
} catch (error) {
console.log(error);
return res.redirect('/register')
}
}
})
router.post('/login', (req, res)=>{
console.log(req.body.email)
console.log(req.body['password'])
return res.redirect('/')
})
module.exports = router
- 같은 이메일을 등록하면 중복되었다고 알려줌
- 1@naver.com 을 등록했을때
login 로그인
- routing.js
router.get('/login',(req, res)=>{
return res.render('login', {user:"guest"})
})
router.post('/login', async(req, res)=>{
console.log(req.body.email)
console.log(req.body['password'])
let result = await User.findOne({ email: email });
if (result == null) {
return res.render('login', {user: "null"})
}else {
return res.redirect('/')
}
})
const express = require('express')
const router = express.Router()
const User = require('../utils/userModel')
const bcrypt = require('bcrypt')
router.get('/', (req, res)=>{
return res.render('index',{name:"안동", action : ["수영","축구","야구"]})
})
router.get('/register',(req, res)=>{
return res.render('register', {user:'guest'})
})
router.get('/login',(req, res)=>{
return res.render('login', {user:"guest"})
})
router.post('/register', async (req, res)=>{
console.log(req.body.name)
console.log(req.body['email'])
username = req.body.name
email = req.body.email
phone = req.body.phone
password = req.body.password
const encryptedPassowrd = bcrypt.hashSync(password, 10) // sync
console.log(encryptedPassowrd)
const user = new User({
username:username,
email:email,
phone:phone,
password:encryptedPassowrd
})
let result = await User.findOne({ email: email });
console.log(result)
if (result != null) {
return res.render('register', {user: "exist"})
}else {
try{
let result = await user.save()
await console.log(`Saved successfully result : ${result}`)
await res.redirect('/login')
} catch (error) {
console.log(error);
return res.redirect('/register')
}
}
})
router.post('/login', async(req, res)=>{
console.log(req.body.email)
console.log(req.body['password'])
let result = await User.findOne({ email: email });
if (result == null) {
return res.render('login', {user: "null"})
}else {
return res.redirect('/')
}
})
module.exports = router
const express = require('express')
const router = express.Router()
const User = require('../utils/userModel')
const bcrypt = require('bcrypt')
router.get('/', (req, res)=>{
return res.render('index',{name:"GUEST"})
})
router.get('/register',(req, res)=>{
return res.render('register', {user:'guest'})
})
router.get('/login',(req, res)=>{
return res.render('login', {user:"guest"})
})
router.post('/register', async (req, res)=>{
console.log(req.body.name)
console.log(req.body['email'])
username = req.body.name
email = req.body.email
phone = req.body.phone
password = req.body.password
const encryptedPassowrd = bcrypt.hashSync(password, 10) // sync
console.log(encryptedPassowrd)
const user = new User({
username:username,
email:email,
phone:phone,
password:encryptedPassowrd
})
let result = await User.findOne({ email: email });
console.log(result)
if (result != null) {
return res.render('register', {user: "exist"})
}else {
try{
let result = await user.save()
await console.log(`Saved successfully result : ${result}`)
await res.redirect('/login')
} catch (error) {
console.log(error);
return res.redirect('/register')
}
}
})
router.post('/login', async(req, res)=>{
console.log(req.body.email)
console.log(req.body['password'])
let email = req.body.email
let password = req.body['password']
let result = await User.findOne({ email: email });
console.log(result)
if (result == null) {
return res.render('login', {user: "null"})
}else {
resultPassword = result.password
const same = await bcrypt.compareSync(password, resultPassword)
console.log(same)
if(same) {
res.render('index',{name:result.username})
} else {
res.render('login', {user:""})
}
}
})
module.exports = router
- index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Main Page</h1>
<h3>안녕하세요 <%= name %>님</h3>
</body>
</html>
- login.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<% if (user == 'guest') { %>
<%} else if (user == 'null') { %>
<p> email이 존재하지 않습니다. </p>
<%} else {%>
<p>비밀번호가 일치하지 않습니다.</p>
<% } %>
<form action="/login" method="post" class="form-example">
<div class="form-example">
<label for="email">email: </label>
<input type="email" name="email" id="email" required />
</div>
<div class="form-example">
<label for="email">password: </label>
<input type="password" name="password" id="email" required />
</div>
<div class="form-example">
<input type="submit" value="Subscribe!" />
</div>
</form>
</body>
</html>
- register.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<% if (user == 'guest') { %>
<%} else { %>
<p> user가 존재합니다. </p>
<% } %>
<span></span>
<form action="/register" method="post" class="form-example">
<div class="form-example">
<label for="name">username: </label>
<input type="text" name="name" id="name" required />
</div>
<div class="form-example">
<label for="email">email: </label>
<input type="email" name="email" id="email" required />
</div>
<div class="form-example">
<label for="email">phone: </label>
<input type="text" name="phone" id="phone" required />
</div>
<div class="form-example">
<label for="email">password: </label>
<input type="password" name="password" id="passoword" required />
</div>
<div class="form-example">
<input type="submit" value="Subscribe!" />
</div>
</form>
</body>
</html>
로그인 유지 : session처리
1. 세션이란?
쿠키는 웹 브라우저에 저장되는 '키-밸류' 타입의 데이터라고 언급했습니다. 따라서 누구나 키에 따른 밸류를 확인할 수 있으므로 비밀정보를 쿠키로 보낸다면 비밀 정보를 아주 쉽게 탈취당할 수 있습니다.
세션은 이러한 문제점을 고려해서, 쿠키를 업그레이드 한 것이라 보면 됩니다. 쿠키와 달리 서버에 데이터를 저장하고 웹 브라우저는 Session ID만을 가지고 있기 때문에 비교적 안전합니다.
세션의 동작을 요약하면 다음과 같습니다.
- 서버는 웹 브라우저에게 세션 값을 보내줍니다. (sid 라고 하며, 아무런 의미도 없는 단순 식별자입니다.)
- 클라이언트는 접속할 때 자신이 가지고 있는 sid를 서버에게 전달합니다.
- 서버는 클라이언트가 보내준 sid를 가지고, 해당 유저를 식별합니다.
2. 세션 설치하기
- npm install -s express-session
3. express-session 설정
npm install session-file-store
var session = require('express-session');
const express = require('express')
const path = require('path')
const apiRouter = require('./routes/routing')
const mongoose = require('mongoose')
const session = require('express-session');
const FileStore = require('session-file-store')(session);
const app = express()
// Connect to MongoDB
mongoose.connect("mongodb+srv://root:1234@jaeyeong.wq2pmjv.mongodb.net/?retryWrites=true&w=majority")
.then(() => console.log('Successfully connected to mongodb'))
.catch(e => console.error(e));
app.set('views', path.resolve(__dirname + '/views'))
app.set('view engine','ejs')
//session 은 app.use apiRouter앞에 항상 와야한다.
app.use(session({
secret:"asdfasffdas",
resave:false,
saveUninitialized:true
}))
app.use(express.urlencoded({extended:false}))
app.use(express.json())
app.use('/',apiRouter)
let port = 8008
app.listen(port, () => {
console.log(`server is running at <http://localhost>:${port}`)
})
4. 코드
- app.js
const express = require('express')
const path = require('path')
const apiRouter = require('./routes/routing')
const mongoose = require('mongoose')
const session = require('express-session');
const FileStore = require('session-file-store')(session);
const app = express()
// Connect to MongoDB
mongoose.connect("mongodb+srv://root:1234@jaeyeong.wq2pmjv.mongodb.net/?retryWrites=true&w=majority")
.then(() => console.log('Successfully connected to mongodb'))
.catch(e => console.error(e));
app.set('views', path.resolve(__dirname + '/views'))
app.set('view engine','ejs')
//session 은 app.use apiRouter앞에 항상 와야한다.
app.use(session({
secret:"asdfasffdas",
resave:false,
saveUninitialized:true,
store : new FileStore()
}))
app.use(express.urlencoded({extended:false}))
app.use(express.json())
app.use('/',apiRouter)
let port = 8008
app.listen(port, () => {
console.log(`server is running at <http://localhost>:${port}`)
})
- routing.js
const express = require('express')
const router = express.Router()
const User = require('../utils/userModel')
const bcrypt = require('bcrypt')
router.get('/', (req, res)=>{
return res.render('index',{name:req.session["username"]})
})
router.get('/register',(req, res)=>{
return res.render('register', {user:'guest'})
})
router.get('/login',(req, res)=>{
return res.render('login', {user:"guest"})
})
router.post('/register', async (req, res)=>{
console.log(req.body.name)
console.log(req.body['email'])
username = req.body.name
email = req.body.email
phone = req.body.phone
password = req.body.password
const encryptedPassowrd = bcrypt.hashSync(password, 10) // sync
console.log(encryptedPassowrd)
const user = new User({
username:username,
email:email,
phone:phone,
password:encryptedPassowrd
})
let result = await User.findOne({ email: email });
console.log(result)
if (result != null) {
return res.render('register', {user: "exist"})
}else {
try{
let result = await user.save()
await console.log(`Saved successfully result : ${result}`)
await res.redirect('/login')
} catch (error) {
console.log(error);
return res.redirect('/register')
}
}
})
router.post('/login', async(req, res)=>{
console.log(req.body.email)
console.log(req.body['password'])
let email = req.body.email
let password = req.body['password']
let result = await User.findOne({ email: email });
console.log(result)
if (result == null) {
return res.render('login', {user: "null"})
}else {
resultPassword = result.password
const same = await bcrypt.compareSync(password, resultPassword)
console.log(same)
if(same) {
req.session["username"] = result.username;
res.render('index',{name:req.session["username"]})
} else {
res.render('login', {user:""})
}
}
})
router.get('/logout',function(req, res){
req.session.destroy(function(){});
res.redirect('/');
});
module.exports = router
- index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Main Page</h1>
<a href = "/logout"><button type="button">로그아웃</button></a>
<% if(name){ %>
<h2>Welcome! <%= name %> 님</h2>
<% }else{ %>
<h3>안녕하세요 GUEST님</h3>
<% } %>
</body>
</html>
free template 활용
public 폴더 만들고 파일 넣어준다.
- app.js에 코드 넣어준다.
app.use(express.static('public'))
const express = require('express')
const path = require('path')
const apiRouter = require('./routes/routing')
const mongoose = require('mongoose')
const session = require('express-session');
const FileStore = require('session-file-store')(session);
const app = express()
// Connect to MongoDB
mongoose.connect("mongodb+srv://root:1234@jaeyeong.wq2pmjv.mongodb.net/?retryWrites=true&w=majority")
.then(() => console.log('Successfully connected to mongodb'))
.catch(e => console.error(e));
app.set('views', path.resolve(__dirname + '/views'))
app.set('view engine','ejs')
//session 은 app.use apiRouter앞에 항상 와야한다.
app.use(session({
secret:"asdfasffdas",
resave:false,
saveUninitialized:true,
store : new FileStore()
}))
//넣어준 부분
app.use(express.static('public'))
app.use(express.urlencoded({extended:false}))
app.use(express.json())
app.use('/',apiRouter)
let port = 8008
app.listen(port, () => {
console.log(`server is running at <http://localhost>:${port}`)
})
- 가져온 template의 index.html에서 필요한 부분만 내 파일 index.ejs에 넣어준다.
- index.html
- index.ejs
- 버튼과 nav바 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Dashboard</title>
<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="css/sb-admin-2.min.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<h1>Main Page</h1>
<a href="/logout" class="btn btn-primary btn-icon-split">
<span class="icon text-white-50">
<i class="fas fa-flag"></i>
</span>
<span class="text">로그아웃</span>
</a>
<% if(name){ %>
<h2>Welcome! <%= name %> 님</h2>
<% }else{ %>
<h3>안녕하세요 GUEST님</h3>
<% } %>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>
<!-- Page level plugins -->
<script src="vendor/chart.js/Chart.min.js"></script>
<!-- Page level custom scripts -->
<script src="js/demo/chart-area-demo.js"></script>
<script src="js/demo/chart-pie-demo.js"></script>
</body>
</html>
최종
- app.js
const express = require('express')
const path = require('path')
const apiRouter = require('./routes/routing')
const mongoose = require('mongoose')
const session = require('express-session');
const FileStore = require('session-file-store')(session);
const app = express()
// Connect to MongoDB
mongoose.connect("mongodb+srv://root:1234@jaeyeong.wq2pmjv.mongodb.net/?retryWrites=true&w=majority")
.then(() => console.log('Successfully connected to mongodb'))
.catch(e => console.error(e));
app.set('views', path.resolve(__dirname + '/views'))
app.set('view engine','ejs')
//session 은 app.use apiRouter앞에 항상 와야한다.
app.use(session({
secret:"asdfasffdas",
resave:false,
saveUninitialized:true,
store : new FileStore()
}))
app.use(express.urlencoded({extended:false}))
app.use(express.json())
app.use(express.static('public'))
app.use('/',apiRouter)
let port = 8008
app.listen(port, () => {
console.log(`server is running at <http://localhost>:${port}`)
})
- routing.js
const express = require('express')
const router = express.Router()
const User = require('../utils/userModel')
const bcrypt = require('bcrypt')
router.get('/', (req, res)=>{
return res.render('index',{name:req.session["username"]})
})
router.get('/register',(req, res)=>{
return res.render('register', {user:'guest'})
})
router.get('/login',(req, res)=>{
return res.render('login', {user:"guest"})
})
router.post('/register', async (req, res)=>{
console.log(req.body.name)
console.log(req.body['email'])
username = req.body.name
email = req.body.email
phone = req.body.phone
password = req.body.password
const encryptedPassowrd = bcrypt.hashSync(password, 10) // sync
console.log(encryptedPassowrd)
const user = new User({
username:username,
email:email,
phone:phone,
password:encryptedPassowrd
})
let result = await User.findOne({ email: email });
console.log(result)
if (result != null) {
return res.render('register', {user: "exist"})
}else {
try{
let result = await user.save()
await console.log(`Saved successfully result : ${result}`)
await res.redirect('/login')
} catch (error) {
console.log(error);
return res.redirect('/register')
}
}
})
router.post('/login', async(req, res)=>{
console.log(req.body.email)
console.log(req.body['password'])
let email = req.body.email
let password = req.body['password']
let result = await User.findOne({ email: email });
console.log(result)
if (result == null) {
return res.render('login', {user: "null"})
}else {
reslultPassword = result.password
const same = await bcrypt.compareSync(password, resultPassword)
console.log(same)
if(same) {
req.session["username"] = result.username;
res.render('index',{name:req.session["username"]})
} else {
res.render('login', {user:""})
}
}
})
router.get('/logout',function(req, res){
req.session.destroy(function(){});
res.redirect('/');
});
module.exports = router
- index.ejs
<!doctype html>
<html lang="en">
<head>
<title>Website menu 04</title>
<%- include('head.ejs') %>
</head>
<body>
<section class="ftco-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 text-center mb-5">
<h2 class="heading-section">Website menu #04</h2>
</div>
</div>
</div>
<div class="container">
<%- include('nav.ejs') %>
<!-- END nav -->
<h1>Main Page</h1>
<a href="/logout"" class="btn btn-primary btn-icon-split">
<span class="icon text-white-50">
<i class="fas fa-flag"></i>
</span>
<span class="text">로그아웃</span>
</a>
<% if(name){ %>
<h2>Welcome! <%= name %>님</h2>
<% }else{ %>
<h3>안녕하세요 GUEST님</h3>
<% } %>
</div>
</section>
<%- include('footer.ejs') %>
</body>
</html>
- login.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('head.ejs') %>
<title>login</title>
</head>
<body>
<section class="ftco-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 text-center mb-5">
<h2 class="heading-section">Website menu #04</h2>
</div>
</div>
</div>
<div class="container">
<%- include('nav.ejs') %>
<!-- Outer Row -->
<div class="row justify-content-center">
<div class="col-xl-10 col-lg-12 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<div class="row">
<div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
<div class="col-lg-6">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
</div>
<% if (user == 'guest') { %>
<%} else if (user == 'null') { %>
<div class="text-center">
<p class="h5 text-red-900 mb-4 text-danger"> email이 존재하지 않습니다. </p>
</div>
<%} else {%>
<div class="text-center">
<p class="h5 text-red-900 mb-4 text-danger">비밀번호가 일치하지 않습니다. </p>
</div>
<% } %>
<form action="/login" method = "post" class="user">
<div class="form-group">
<input type="email" name = "email" class="form-control form-control-user"
id="exampleInputEmail" aria-describedby="emailHelp"
placeholder="Enter Email Address...">
</div>
<div class="form-group">
<input type="password" name = "password" class="form-control form-control-user"
id="exampleInputPassword" placeholder="Password">
</div>
<div class="form-group">
<div class="custom-control custom-checkbox small">
<input type="checkbox" class="custom-control-input" id="customCheck">
<label class="custom-control-label" for="customCheck">Remember
Me</label>
</div>
</div>
<input type="submit" class="btn btn-primary btn-user btn-block" value="Login">
<hr>
<a href="index.html" class="btn btn-google btn-user btn-block">
<i class="fab fa-google fa-fw"></i> Login with Google
</a>
<a href="index.html" class="btn btn-facebook btn-user btn-block">
<i class="fab fa-facebook-f fa-fw"></i> Login with Facebook
</a>
</form>
<hr>
<div class="text-center">
<a class="small" href="forgot-password.html">Forgot Password?</a>
</div>
<div class="text-center">
<a class="small" href="register.html">Create an Account!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<%- include('footer.ejs') %>
</body>
</html>
- register.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('head.ejs') %>
<title>Document</title>
</head>
<body>
<section class="ftco-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 text-center mb-5">
<h2 class="heading-section">Website menu #04</h2>
</div>
</div>
</div>
<div class="container">
<%- include('nav.ejs') %>
<div class="row justify-content-center">
<div class="col-xl-10 col-lg-12 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<div class="row">
<div class="col-lg-5 d-none d-lg-block bg-register-image"></div>
<div class="col-lg-6">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Welcome!</h1>
</div>
<form class="user">
<div class="form-group">
<input type="email" class="form-control form-control-user"
id="exampleInputEmail" aria-describedby="emailHelp"
placeholder="Enter Email Address...">
</div>
<div class="form-group">
<input type="password" class="form-control form-control-user"
id="exampleInputPassword" placeholder="Password">
</div>
<div class="form-group">
<div class="custom-control custom-checkbox small">
<input type="checkbox" class="custom-control-input" id="customCheck">
<label class="custom-control-label" for="customCheck">Remember
Me</label>
</div>
</div>
<a href="index.html" class="btn btn-primary btn-user btn-block">
Login
</a>
<hr>
<a href="index.html" class="btn btn-google btn-user btn-block">
<i class="fab fa-google fa-fw"></i> Login with Google
</a>
<a href="index.html" class="btn btn-facebook btn-user btn-block">
<i class="fab fa-facebook-f fa-fw"></i> Login with Facebook
</a>
</form>
<hr>
<div class="text-center">
<a class="small" href="forgot-password.html">Forgot Password?</a>
</div>
<div class="text-center">
<a class="small" href="register.html">Create an Account!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<% if (user == 'guest') { %>
<%} else { %>
<p> user가 존재합니다. </p>
<% } %>
<span></span>
<form action="/register" method="post" class="form-example">
<div class="form-example">
<label for="name">username: </label>
<input type="text" name="name" id="name" required />
</div>
<div class="form-example">
<label for="email">email: </label>
<input type="email" name="email" id="email" required />
</div>
<div class="form-example">
<label for="email">phone: </label>
<input type="text" name="phone" id="phone" required />
</div>
<div class="form-example">
<label for="email">password: </label>
<input type="password" name="password" id="passoword" required />
</div>
<div class="form-example">
<input type="submit" value="Subscribe!" />
</div>
</form>
</div>
</section>
</body>
</html>
- footer.ejs
<script src="js/jquery.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>
- head.ejs
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Custom styles for this template-->
<link href="css/sb-admin-2.min.css" rel="stylesheet">- nav.ejs
<nav class="navbar navbar-expand-lg ftco_navbar ftco-navbar-light" id="ftco-navbar">
<div class="container">
<a class="navbar-brand" href="index.html">Digital</a>
<div class="social-media order-lg-last">
<p class="mb-0 d-flex">
<a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-facebook"><i class="sr-only">Facebook</i></span></a>
<a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-twitter"><i class="sr-only">Twitter</i></span></a>
<a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-instagram"><i class="sr-only">Instagram</i></span></a>
<a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-dribbble"><i class="sr-only">Dribbble</i></span></a>
</p>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav ml-auto mr-md-3">
<li class="nav-item active"><a href="/" class="nav-link">Home</a></li>
<li class="nav-item"><a href="/about" class="nav-link">About</a></li>
<li class="nav-item"><a href="/list" class="nav-link">List</a></li>
<li class="nav-item"><a href="/register" class="nav-link">Register</a></li>
<li class="nav-item"><a href="/login" class="nav-link">Login</a></li>
</ul>
</div>
</div>
</nav>
Home
register
Login
GitHub - HGJin/Node_js
Contribute to HGJin/Node_js development by creating an account on GitHub.
github.com
