지금까지 배운 내용 안보고 만들어보기 -> 틀린부분 체크** + 총 정리
1. Visual studio - terminal 환경설정
1-1. 아래 명령어 실행
npm init
npm install express nunjucks body-parser sequelize sequelize-cli mysql2
npx sequelize init
1-2. 생성된 파일들 중 쓰지 않을 파일 (migrations, seeders) 삭제
1-3. config 의 development 부분의 정보 내 것과 일치하게 변경
1-4. models파일의 index.js 내용 중 필요없는 부분 삭제
2. server.js 작성 및 server 접속 test
2-1. server.js 파일 만들고 기본 코드 작성 (server.js 파일 = 최초 '/'을 받는 js)
const express = require('express');
const app = express();
app.get('/',(req,res)=> {
res.send('I am server.js')
})
app.listen(3000,()=>{
console.log('server start port : 3000')
})
* 막힌부분1 .sync를 까먹음
2-2. server.js server접속 test
const express = require('express');
const app = express();
const {sequelize}=require('./models') //객체
sequelize.sync({force:false}) //{force:false} 생략 가능-> force:false뜻-덮어쓰기x, true- 덮어쓰기o
.then(()=>{
console.log('접속 성공')
}).catch(()=>{
console.log('접속 실패')
})
app.get('/',(req,res)=> {
res.send('I am server.js')
})
app.listen(3000,()=>{
console.log('server start port : 3000')
})models 파일의 sequelize 객체 부분만 가져옴.
.sync() method - 객체 반환해서 .then() .catch 구문으로 성공 or 실패 체크
VS terminal 창에 node server.js 입력 -> 성공이면 다음 step으로 실패라면 config 쪽 DB 정보 check!
3. table 만들기
막힌부분2 return super.init({}) <- 괄호사용 틀림 , STRING 을 TEXT라고 씀
3-1. models - user.js 파일 만들어서 joinn DB에 users0510 table 만드는 코드 작성
const Sequelize = require('sequelize') // Class
module.exports = class User extends Sequelize.Model{
static init(sequelize){
return super.init({
userid:{
type:Sequelize.STRING(20),
allowNull:false,
unique:true,
},
userpw:{
type:Sequelize.STRING(20),
allowNull:false,
},
username:{
type:Sequelize.STRING(20),
allowNull:false,
},
gender:{
type:Sequelize.BOOLEAN,
allowNull:false,
},
userimage:{
type:Sequelize.STRING(100),
allowNull:true,
},
userdt:{
type:Sequelize.DATE,
allowNull:false,
defaultValue:Sequelize.NOW,
}
},{
sequelize,
timestamps:false,
underscored:false,
paranoid:false,
modelName:"User",
tableName:"users0510",
charset:"utf8",
collate:"utf8_general_ci",
})
}
static associate (db){}
}
3-2. Models - index.js에 user.js 연결
models - index.js 아래 내용 3가지 추가
'use strict';
// const path = require('path');
const Sequelize = require('sequelize');
// const basename = path.basename(__filename);
const env = process.env.NODE_ENV || 'development';
const config = require(__dirname + '/../config/config.json')[env];
const db = {};
const User = require('./user'); /////추가 1 user 내용 (User class로 exports 된 것 변수에 담기)
let sequelize;
if (config.use_env_variable) {
sequelize = new Sequelize(process.env[config.use_env_variable], config);
} else {
sequelize = new Sequelize(config.database, config.username, config.password, config);
}
db.User = User; ////// 추가 2 db에 User 담기
User.init(sequelize); ///// 추가 3 User.init 인자sequelize를 넣어 실행
db.sequelize = sequelize;
db.Sequelize = Sequelize;
module.exports = db;
3-3. 만든 table 이 DB에 잘 들어가는지 체크
terminal 명령 입력
node server.js
mySQL check
<- users0510 생성 확인
4. main page 구현 ( html render하기 )
먼저 html을 render할 nunjucks 와 post로 값을 보낼 body-parser 환경설정
4-1. nunjucks -> server.js 파일에 아래 3가지 내용 추가
const nunjucks = require('nunjucks');
nunjucks.configure('views',{
express:app,
})
app.set('view engine', 'html')
4-2. body-parser 도 server.js 파일에 내용 2가지 추가
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended:false}));app.use(bodyParser ~ )요 부분은 위 쪽에 쓰는게 좋다. 아래 쪽에 쓰면 오류가 날 수도 있음.
server.js 전체
4-3. main page를 위한 파일 경로 및 코드 작성
4-3-1. server.js에 아래 내용 추가 및 수정
- '/'를 받으면 routers 변수로 간다 -> routers - index.js
const routers = require('./routers') //index라는 이름은 경로에 안써도 지정이 자동으로 된다.
app.use('/',routers);
4-3-2. routers - index.js 코드 작성
const express=require('express');
const router = express.Router();
router.use('/',)
module.exports = router();
--> 여기서 바로 html render하지 않고 routers 폴더 안, main이라는 폴더 - 그 안의 index.js - main.controller.js 파일을 router 사용으로 거쳐서 마지막 js인 main.controller.js 파일에서 '/'을 받았을 때 render할 index.html 내용 보내기
글로쓰면 넘 복잡해서 파일 흐름을 보면
요렇게 된다.
routers - index.js 에서 routers - main - index.js 를 가져오기, router.user('/', 변수명) 추가
routers - index.js
const express=require('express');
const router = express.Router();
const main = require('./main')
router.use('/',main)
module.exports = router;
4-3-3. '/', main -> routers - main - index.js 로 가라고 설정했으니 index.js 내용 추가
막힌부분3 module.exports=router(); 라고씀, router. use를 빼먹음 , mainController.main <- 변수명을 안씀
routers - main - index.js
const express = require('express');
const router = express.Router();
const mainController = require('./main.controller')
router.use('/', mainController.main);
module.exports=router;
4-3-4. 다시 mainController라는 변수에 main.controller를 담고 글로 보냈으니 아래 내용 추가
routers - main - main.controller.js 내용 추가
let main = ('/', (req,res)=>{
res.render('index.html');
})
module.exports.main=main;
4-3-5. index.html 파일 생성 및 추가
views 라는 폴더 생성 - 그 안에 index.html 추가
views - index.html
index.html
<a href="#" >로그인</a>
<a href="#" >회원가입</a>
-> server실행 후 localhost:3000을 치면 요렇게 나온다.
여기까지의 server.js
const express = require('express');
const app = express();
const {sequelize}=require('./models')
const nunjucks = require('nunjucks');
const bodyParser = require('body-parser')
const routers = require('./routers')
app.use(bodyParser.urlencoded({extended:false}));
nunjucks.configure('views',{
express:app,
})
app.set('view engine', 'html')
sequelize.sync({force:true})
.then(()=>{
console.log('접속 성공')
}).catch(()=>{
console.log('접속 실패')
})
app.use('/',routers);
app.listen(3000,()=>{
console.log('server start port : 3000')
})
5. 회원가입 page 만들기 & DB 연결하기
5-1. routers 폴더 안 - user 폴더 - 그 안에 index.js, user.controller.js 만들기
(main page와 같은 구조)
uri 가 /user 부터 시작하는 것은 routers - user - index.js 를 거치도록 만들기
5-2. routers - index.js 에 /user 추가
const express=require('express');
const router = express.Router();
const main = require('./main')
const user = require('./user') //추가 1
router.use('/user', user); // 추가2 -> 아래 '/'보다 일부러 위에 위치함
router.use('/',main);
module.exports = router;
5-3. routers - user - index.js 작성
const express = require('express');
const router = express.Router();
const userController = require('./user.controller')
router.use('/join',userController.join)
module.exports=router;
5-4. routers - user - user.controller.js 작성
let join = (req,res)=>{
res.render('./user/join.html');
}
module.exports ={
join,
//join:join 과 같다.
// join이라는 변수 명(임의설정가능)에 join 이라는 변수(위에설정되어있음 )을 넣겠다.
}
5-5. views - user - join.html 작성
join.html
회원가입 PAGE
<form method = "post" action = "/user/join_success">
<table>
<tr>
<td>아이디</td>
<td>
<input type ="text" name ="userid" >
</td>
</tr>
<tr>
<td>비번</td>
<td>
<input type ="text" name ="userpw" >
</td>
</tr>
<tr>
<td>이름</td>
<td>
<input type ="text" name ="username" >
</td>
</tr>
<tr>
<td>성별</td>
<td>
<input type ="radio" name ="gender" value="0" checked >남자
<input type ="radio" name ="gender" value="1" >여자
</td>
</tr>
</table>
<input type="submit" value="회원가입하기">
</form>
여기까지의 결과 - main page -> 회원가입 누르면 아래 화면이 나옴
5-6. DB 연결하기
join.html에서 submit button을 누르면 action ="/user/join_success" 로 설정했었다. -> 요 부분을 만들어 주기!
변화가 있는 시작점 (=경로의 끝)에서부터 하나씩 수정, 추가를 해주면 좋은 것같다.
5-6-1. routers- user - user.controller.js 에 join_success 추가 , 변수 추가
let join = (req,res)=>{
res.render('./user/join.html');
}
let join_success = (req,res)=>{
res.render('./user/join_success.html'); //새로 만들 html
}
module.exports ={
join,
join_success,
}-> html에 전송할 (post로 받은 내용들을 변수에 담아 join_success.html로 보내기↓↓
let join = (req,res)=>{
res.render('./user/join.html');
}
let join_success = (req,res)=>{
let userid = req.body.userid;
let userpw = req.body.userpw;
let username = req.body.username;
let gender = req.body.gender;
res.render('./user/join_success.html',{
userid, userpw, username, gender
});
}
module.exports ={
join,
join_success,
}
5-6-2. routers - user - index.js 추가
const express = require('express');
const router = express.Router();
const userController = require('./user.controller')
router.get('/join',userController.join) //get으로 수정
router.post('/join_success', userController.join_success); //post으로 받으니 post!
module.exports=router;
5-6-3. views - user - join_success.html 생성 및 추가
join_success.html
{{username}}님 환영합니다. <br/>
{{username}}님의 ID 는 {{userid}}입니다.
여기까지하면 브라우저 상에 join_success.html이 잘 뜬다. 하지만 mySQL에 아직 연결이 안되어 있어서 DB에 추가가 안되는 상태
5-6-4. mySQL에 연결하기 (insert구문 -> create 구문)
routers - user - user.controller.js
let join_success = async(req,res)=>{
let userid = req.body.userid;
let userpw = req.body.userpw;
let username = req.body.username;
let gender = req.body.gender;
await User.create({
userid,userpw,username, gender
})
res.render('./user/join_success.html',{
userid, userpw, username, gender
});
}-> 서버 키고 브라우저에 '회원가입' 해보기 -> join_success.html 이 잘 render되는지, mySQL의 data row잘 추가 되는지 check !
6. login page 만들기
6-1. views - index.htm 추가 수정
/user/login 추가
index.html
<a href="/user/login" >로그인</a>
<a href="/user/join" >회원가입</a>
6-2. routers - user - index.js 추가
const express = require('express');
const router = express.Router();
const userController = require('./user.controller')
router.get('/join',userController.join);
router.post('/join_success', userController.join_success);
router.get('/login', userController.login); //// /// 추가
module.exports=router;
6-3. routers - user - user.controller.js 추가
막힌부분4 ./user 를 까먹어서 오류남.
let login = (req,res)=>{
res.render('./user/login.html');
}
module.exports ={
join, join_success, login,
}
6-4. views - user - login.html 생성 및 코드 작성
막힌부분 5. 여기서 method -> methoe로 써서 session 이 실행이 안되었다, 한참 찾음
login.html <br/>
<form method = "post" action ="/user/login_check">
<table>
<tr>
<td>아이디</td>
<td>
<input type ="text" id ="userid" name = "userid">
</td>
</tr>
<tr>
<td>비밀번호 </td>
<td>
<input type ="text" id ="userid" name = "userpw">
</td>
</tr>
</table>
<input type ="submit" value = "로그인하기">
</form>
결과
6-5. submit -> action 부분 login_check 만들기
routers - user - user.controller.js
let login_check = async (req,res)=>{
let userid = req.body.userid;
let userpw = req.body.userpw;
let result = await User.findOne({
where:{userid, userpw}
})
res.redirect('/');
}
일단 변수 명 만들어놓음. DB와 비교해서 값이 있으면 -> 없으면 -> 설정은 안배운 상태로 어떤 ID, PW를 써도 login이 되는 상태 (배우고 update 예정)
6-6. routers - user - index.js 도 추가
const express = require('express');
const router = express.Router();
const userController = require('./user.controller')
router.get('/join',userController.join);
router.post('/join_success', userController.join_success);
router.get('/login', userController.login);
router.post('/login_check', userController.login_check); //추가
module.exports=router;
7. session을 위한 설치, 설정
7-1. terminal 명령어 express-session 다운
npm install express-session
7-2. server.js 에 session 설정
const session = require('express-session')
app.use(session({
secret:'aaa',
resave:false,
saveUninitialized:true,
}))
7-3. routers - user - user.controller.js 추가
막힌 부분6. req.session.save 부분 아직 못외움
let login_check = async (req,res)=>{
let userid = req.body.userid;
let userpw = req.body.userpw;
let result = await User.findOne({
where:{userid, userpw}
})
req.session.uid = userid;
req.session.isLogin = true;
req.session.save(()=>{
res.redirect('/');
})
}
req.session 이라는 곳에 uid, isLogin 속성과 값을 추가해서 보냄
7-4. views - index.html 추가
{% if isLogin %}
{{userid}}님 환영합니다. <a href = "#" > 돌아가기 </a>
{% else %}
<a href="/user/login" >로그인</a>
<a href="/user/join" >회원가입</a>
{% endif %}if isLogin = true면 (맨 처음 mainpage로 들어온 상태가 아닌 아이디 비번을 치고 들어온 로그인 을 한 상태)
{{userid}}님 환영합니다. 를 보여주고 아니면 (로그인하러 main page로 처음 들어왔을 때 ) 로그인/회원가입이 보이도록 함
8. logout page 만들기
8-1. views - index.html 수정
막힌부분 7. 또 /user 경로를 빼먹음
{% if isLogin %}
{{userid}}님 환영합니다. <a href = "/user/logout" > 돌아가기 </a>
{% else %}
<a href="/user/login" >로그인</a>
<a href="/user/join" >회원가입</a>
{% endif %}
8-2. routers-user - user.controller.js 추가
막힌부분 8. req.session.save(()=>)부분
let logout = (req,res)=>{
delete req.session.isLogin;
delete req.session.uid;
req.session.save(()=>{
res.redirect('/');
})
}
8-3. routers - user - index.js 추가
const express = require('express');
const router = express.Router();
const userController = require('./user.controller')
router.get('/join',userController.join);
router.post('/join_success', userController.join_success);
router.get('/login', userController.login);
router.post('/login_check', userController.login_check);
router.get('/logout', userController.logout); // 추가
module.exports=router;
9. info 추가
9-1. routers - user - user.controller.js 추가
let info = async (req,res)=>{
let result = await User.findAll({});
res.render('./user/info.html', {
result,
})
console.log(result);
}
9-2. routers - user -index.js 추가
const express = require('express');
const router = express.Router();
const userController = require('./user.controller')
router.get('/join',userController.join);
router.post('/join_success', userController.join_success);
router.get('/login', userController.login);
router.post('/login_check', userController.login_check);
router.get('/logout', userController.logout);
router.get('/info', userController.info);
module.exports=router;
9-3. views - user - info.html 파일 생성 및 코드 작성
<table>
<tr>
<td>번호</td>
<td>아이디</td>
<td>비번</td>
<td>이름</td>
<td>성별</td>
<td>사진</td>
<td>등록일</td>
</tr>
{% for item in result %}
<tr>
<td>{{item.dataValues.id}}</td>
<td>{{item.dataValues.userid}}</td>
<td>{{item.dataValues.userpw}}</td>
<td>{{item.dataValues.username}}</td>
<td>{{item.dataValues.gender}}</td>
<td>{{item.dataValues.userimage}}</td>
<td>{{item.dataValues.userdt}}</td>
</tr>
{% endfor %}
</table>
===================================최종 코드==================================
server.js
const express = require('express');
const app = express();
const {sequelize}=require('./models')
const nunjucks = require('nunjucks');
const bodyParser = require('body-parser')
const routers = require('./routers')
const session = require('express-session')
app.use(session({
secret:'aaa',
resave:false,
saveUninitialized:true,
}))
app.use(bodyParser.urlencoded({extended:false}));
nunjucks.configure('views',{
express:app,
})
app.set('view engine', 'html')
sequelize.sync({force:false})
.then(()=>{
console.log('접속 성공')
}).catch(()=>{
console.log('접속 실패')
})
app.use('/',routers);
app.listen(3000,()=>{
console.log('server start port : 3000')
})
models - index.js
'use strict';
// const path = require('path');
const Sequelize = require('sequelize');
// const basename = path.basename(__filename);
const env = process.env.NODE_ENV || 'development';
const config = require(__dirname + '/../config/config.json')[env];
const db = {};
const User = require('./user');
let sequelize;
if (config.use_env_variable) {
sequelize = new Sequelize(process.env[config.use_env_variable], config);
} else {
sequelize = new Sequelize(config.database, config.username, config.password, config);
}
db.User = User;
User.init(sequelize);
db.sequelize = sequelize;
db.Sequelize = Sequelize;
module.exports = db;
models - user.js
const Sequelize = require('sequelize') // Class
module.exports = class User extends Sequelize.Model{
static init(sequelize){
return super.init({
userid:{
type:Sequelize.STRING(20),
allowNull:false,
unique:true,
},
userpw:{
type:Sequelize.STRING(20),
allowNull:false,
},
username:{
type:Sequelize.STRING(20),
allowNull:false,
},
gender:{
type:Sequelize.BOOLEAN,
allowNull:false,
},
userimage:{
type:Sequelize.STRING(100),
allowNull:true,
},
userdt:{
type:Sequelize.DATE,
allowNull:false,
defaultValue:Sequelize.NOW,
}
},{
sequelize,
timestamps:false,
underscored:false,
paranoid:false,
modelName:"User",
tableName:"users0510",
charset:"utf8",
collate:"utf8_general_ci",
})
}
static associate (db){}
}
routers -index.js
const express=require('express');
const router = express.Router();
const main = require('./main')
const user = require('./user')
router.use('/user', user);
router.use('/',main);
module.exports = router;
routers - main - index.js
const express = require('express');
const router = express.Router();
const mainController = require('./main.controller')
router.use('/', mainController.main);
module.exports=router;
routers - main - main.controller.js
let main = (req,res)=>{
console.log(req.session);
res.render('index.html',{
userid:req.session.uid,
isLogin:req.session.isLogin
});
}
module.exports.main = main; // (뒤에가 함수)
routers - user - index.js
const express = require('express');
const router = express.Router();
const userController = require('./user.controller')
router.get('/join',userController.join);
router.post('/join_success', userController.join_success);
router.get('/login', userController.login);
router.post('/login_check', userController.login_check);
router.get('/logout', userController.logout);
router.get('/info', userController.info);
module.exports=router;
routers - user - user.controller.js
const {User} = require('../../models')
let join = (req,res)=>{
res.render('./user/join.html');
}
let join_success = async(req,res)=>{
let userid = req.body.userid;
let userpw = req.body.userpw;
let username = req.body.username;
let gender = req.body.gender;
await User.create({
userid,userpw,username, gender
})
res.render('./user/join_success.html',{
userid, userpw, username, gender
});
}
let login = (req,res)=>{
res.render('./user/login.html');
}
let login_check = async (req,res)=>{
let userid = req.body.userid;
let userpw = req.body.userpw;
let result = await User.findOne({
where:{userid, userpw}
})
req.session.uid = userid;
req.session.isLogin = true;
req.session.save(()=>{
res.redirect('/');
})
}
let logout = (req,res)=>{
delete req.session.isLogin;
delete req.session.uid;
req.session.save(()=>{
res.redirect('/');
})
}
let info = async (req,res)=>{
let result = await User.findAll({});
res.render('./user/info.html', {
result,
})
console.log(result);
}
module.exports ={
join, join_success, login, login_check, logout, info
}
views - index.html
{% if isLogin %}
{{userid}}님 환영합니다. <a href = "/user/logout" > 돌아가기 </a>
{% else %}
<a href="/user/login" >로그인</a>
<a href="/user/join" >회원가입</a>
{% endif %}
views - user - info.html
<table>
<tr>
<td>번호</td>
<td>아이디</td>
<td>비번</td>
<td>이름</td>
<td>성별</td>
<td>사진</td>
<td>등록일</td>
</tr>
{% for item in result %}
<tr>
<td>{{item.dataValues.id}}</td>
<td>{{item.dataValues.userid}}</td>
<td>{{item.dataValues.userpw}}</td>
<td>{{item.dataValues.username}}</td>
<td>{{item.dataValues.gender}}</td>
<td>{{item.dataValues.userimage}}</td>
<td>{{item.dataValues.userdt}}</td>
</tr>
{% endfor %}
</table>
views - user - join_success.html
join_success.html <br/>
{{username}}님 환영합니다. <br/>
{{username}}님의 ID 는 {{userid}}입니다.
views -user - join.html
join.html <br/>
회원가입 PAGE <br/>
<form method = "post" action = "/user/join_success">
<table>
<tr>
<td>아이디</td>
<td>
<input type ="text" name ="userid" >
</td>
</tr>
<tr>
<td>비번</td>
<td>
<input type ="text" name ="userpw" >
</td>
</tr>
<tr>
<td>이름</td>
<td>
<input type ="text" name ="username" >
</td>
</tr>
<tr>
<td>성별</td>
<td>
<input type ="radio" name ="gender" value="0" checked >남자
<input type ="radio" name ="gender" value="1" >여자
</td>
</tr>
</table>
<input type="submit" value="회원가입하기">
</form>
views - user - login.html
login.html <br/>
<form method = "post" action ="/user/login_check">
<table>
<tr>
<td>아이디</td>
<td>
<input type ="text" id ="userid" name = "userid">
</td>
</tr>
<tr>
<td>비밀번호 </td>
<td>
<input type ="text" id ="userid" name = "userpw">
</td>
</tr>
</table>
<input type ="submit" value = "로그인하기">
</form>
질문 . git 파일 채로 올리기
