Class에 대해 더 배우기 !
function Person(name,age){
this.name=name;
this.age=age;
}
let foo = new Person ('foo', 20);
let jay = new Person ('jay', 21);
이렇게 만들면 여러개 객체를 만들 수 있음 -> 조금 불편함 -> CLASS 만들어진 이유
함수 안 this.name / this. age는 바로 붙는다
Class는 어떠한 객체를 만들기 위해, 어떠한 틀을 만들고 클래스, 함수 사용해서 new라는 생성자 이용하게 되는 것
= ? ?
class Person{
constructor(name,age){
this.name=name;
this.age=age;
}
}
let foo = new Person('foo',20);
let jay = new Person('foo',21);
Class -> prototype 지식이 있어야함.
함수를 console.dir 찍으면 constructor 가 존재, ( constructor가 존재해야 new라는 생성자가 가능)
객체를 찍을 땐 contructor 가 존재하지 않음.
//// 함수 ////
function Person(name,age){
this.name=name;
this.age=age;
}
//// 객체 /////
let Person2 = {
name:'foo',
age:20,
}
console.dir 찍어보기
클래스를 만든다 하면
class 클래스명 {
constructor(){
}
}이렇게 만들어야함.
class Person{
constructor(name,age){
this.name=name;
this.age=age;
}
}
new foo = new Person('foo', 20);
// -> 명령하면 Person의constructor가 가장 먼저 실행된다.
연습
function Person(name, age){
this.name=name;
this.age=age;
}
Person.prototype.getName = function(){
return this.name;
}
Person.prototype.getAge = function(){
return this.age;
}
===> prototype안에 getAge, getName Method가 들어감
함수 안 함수 생성
function Person(name, age){
this.name=name;
this.age=age;
function setName(_name){
this.name = _name;
}
}
Person.prototype.getName = function(){
return this.name;
}
Person.prototype.getAge = function(){
return this.age;
}
Person 의 객체를 만들었을 때 setName 함수가 나올지 보기
아래 추가 + console에 a 입력
let a = new Person('em', 20);
위에 함수 틀려서 -> 다시 아래처럼 수정
function Person(name, age){
this.name=name;
this.age=age;
this.setName = function (_name){
this.name = _name;
}
}
Person.prototype.getName = function(){
return this.name;
}
Person.prototype.getAge = function(){
return this.age;
}
let a = new Person('em', 20);
class Person{
constructor(name,age){
this.name=name;
this.age=age;
}
getName = function(){
return this.name;
}
getAge = function(){
return this.age;
}
setName = function(_name){
this.name = _name;
}
}
let a = new Person('emily', 20);
-> prototype을 활용하지않고 class 안에다가 다 넣은다.
function Person2(name, age){
this.name = name;
this.age = age;
}
Person2.setName = function(){ //정적
return 'a';
}
Person2.prototype.getName = function(){ //prototype
return this.name;
}
Person2.prototype.getAge = function(){
return this.age;
}
console.dir 찍어보면
let b = new Person2('jake', 20);
추가해서 console창에 b 입력
-> setName 안나왔음
함수인 상태일 때 사용가능한 형태, 객체일 때 사용안되는게-> static 정적 (객채변환이 안됨) = 정적 method
아래 비교해봐!
class Person3{
constructor(name,age){
this.name = name;
this.age = age;
}
setName = function(){
return 'a';
}
getName = function(){
return this.name;
}
getAge = function(){
return this.age;
}
}
let c = new Person3('emily',20)
다 나온다.
static 을 쓰게 되면
class Person3{
constructor(name,age){
this.name = name;
this.age = age;
}
static setName = function(){
return 'a';
}
getName = function(){
return this.name;
}
getAge = function(){
return this.age;
}
}
let c = new Person3('emily',20)
-> setName이 빠진다.
new 객체 만드는 이유 : 유동적인 객체를 만들기 위해
-?> 그럼 왜 static을 만들었을까?? ?
=> 해당 구조를 사용하고싶지 않을 때
static에 접근 하려면
a.setName 은 안된다.
Person3.setName() 은된다.
new라는 생성자를 만들지않고 사용할 때 static을 쓴다.
유동적으로 객체를 만들지 못해서 "정적 method"라고 불림
Sequelize 사용할 때 new 를 안쓴 이유
class Person3{
constructor(name,age){
this.name = name;
this.age = age;
}
static setName = function(){
console.log(this)
return `${this.name} / ${this.age}`;
}
getName = function(){
console.log(this);
return this.name;
}
getAge = function(){
return this.age;
}
}
let c = new Person3('emily',20)
function Person2(name, age){
console.log(this)
this.name = name;
this.age = age;
}
Person2.setName = function(){ //static
console.log(this)
return 'a';
}
Person2.prototype.getName = function(){
return this.name;
}
Person2.prototype.getAge = function(){
return this.age;
}
let b = new Person2('jake', 20);
console창에 Person2() 입력
this 는 Person2를 가지고있는 내용에 객체를 만들어준 상태 this = 객체로 볼 수 있음.
자기 함수를 가르키는 내용도 + 새로운 객체도 만드는게 =this...배고팡
함수 안에 있는 this 와 static 정적 함수 안에 있는this의 내용이 아예 다르다.
static - class, 함수 안에서 따로 실행된다. 개별적으로. 그래서 그 안에 있는 객체를 사용할 수 없음.
정적 method는 this라는 걸 사용할 수 없다. 단일적으로 사용해야 한다.
====================================상속 super =================================
두 개의 class 만들기
Person == 부모로 Action==자식으로 만들기
class Person{
constructor(name, age){
this.name = name;
this.age =age;
}
}
class Action{
run = function(){
console.log('run');
}
}
class Person{
constructor(name, age){
this.name = name;
this.age =age;
}
}
class Action extends Person{
run = function(){
console.log('run');
}
}
a = new Action ();
console.log(a)
class Person{
constructor(name, age){
this.name = 'ff';
this.age =20;
}
}
class Action extends Person{ //constructor 존재하고 있는데 안보일뿐
run = function(){
console.log('run');
}
}
a = new Action ();
함수 안에 값을 넣어주니 요렇게 나옴
상속 = 두개의 내용을 합쳐서 보여주겠다. / 두가지를 하나로 합친다.
같고 중복되는 내용이 있으면 따로 빼서 분류 묶음해주는게 가장 좋다.
Action construter - Person이 줬다. 생략된다 그럼
class Person{
constructor(name, age){
this.name = 'name';
this.age =age;
}
}
class Action extends Person{
// constructor 생략되었다. 부모로부터 받는다.
run = function(){
console.log('run');
}
}
a = new Action ('foo', 20);
check
직접 만들어 보기 constructor
class Person{
constructor(name, age){
this.name = 'name';
this.age =age;
}
}
class Action extends Person{
constructor(name,age){
this.name = name;
this.age=age;
}
run = function(){
console.log('run');
}
}
a = new Action ('foo', 20);
부모와 자식간에 constructor를 맞춰주지않으면 상속 자체가안된다. 이 코드를 실행시킬려면 super을 사용해야함
class Person{
constructor(name, age){
this.name = 'name';
this.age =age;
}
}
class Action extends Person{
constructor(name,age){
super(name,age)
}
run = function(){
console.log('run');
}
}
a = new Action ('foo', 20);
super = 부모의 내용을 가져오는 method이다.
어떤 내용? = > 부모의constructor / 예시로 보여쥬ㅜㄹ게
Person에 getName 추가
class Person{
constructor(name, age){
this.name = 'name';
this.age =age;
}
getName = function(){
return this.name;
}
}
부모의 내용 getName을 끌어다 쓰고 싶으면 ?
class Person{
constructor(name, age){
this.name = 'name';
this.age =age;
}
getName = function(){
return this.name;
}
}
class Action extends Person{
constructor(name,age){ // 내가 action에서 받은 name,age를
super(name,age) // 부모 name,age로 ?
}
run = function(){
name = super().getName;
console.log(name + 'is run');
}
}
a = new Action ('foo', 20);
자식 class에 constructor를 쓰고 싶으면 super는 세트
class Model{ //부모
constructor(){
}
static init(){
return 'init이다!악'
}
}
class User{ //자식 (부모에constructor없으니 여기도 생략쓰~)
static init(){
console.log('aaa I am class User')
}
}
class Model{ //부모
constructor(){
}
static init(){
console.log('aaa');
}
}
class User extends Model{ //자식 (부모에constructor없으니 여기도 생략쓰~)
static init(){
this.init();
}
}
??????????????????? 무한루프 도는 듯..
class Model{ //부모
constructor(){
}
static init(){
console.log('aaa');
}
}
class User extends Model{ //자식 (부모에constructor없으니 여기도 생략쓰~)
static init(){
super.init() // 정적이 아닌걸 가져왔기 떄문..
}
}
?????뭘하고잇눈건지 모르겟다.
super는 constructor 랑 가져오는거 아닌가요? 질문 -
-> constructor는 정적method , 기본적으로 static과 비슷.
consturctor 존재는 하지만 내용 표현x 세팅뿐
static같은 경우도 class안에 있지만 따로 놈.
그래서 static도 super로 가져올 수 잇다. super -> 정적method를 가져오는 거
class Model{ //부모
constructor(){
}
static init(){
return 'aaa';
}
}
class User extends Model{ //자식 (부모에constructor없으니 여기도 생략쓰~)
static init(){
return super.init() // 정적이 아닌걸 가져왔기 떄문..
}
}
//static은 new로 접근하면 x
let name = User.init();
console.log(name);
우리가 공부한 sequelize로 공부
const Sequelize = require('sequelize'); //class
module.exports = class User extends Sequelize.Model{
static init(sequelize){ // User의 init (한 가지 인자값)
//User가 만든 것 / sequelize 변수를 받는다. 시작하자마자 return한다. 무엇을??
// 부모로부터 있는init method를 호출 -> super썻다는 의미 자체로 부모의 init은 정적method다.
// 를 알 수 있음.
return super.init({ //부모로부터 init한 method를 호출 , 부모의 init (두가지 인자값)
userid:{
type: Sequelize.STRING(20),
// .STRING => new 를 안쓰고 .찍고 바로 사용. -> 정적method였다.
// Sequelize라는 변수 안에 클래스 에서 string이라는게 정적으로 static으로
// 선언되어있었따........
allowNull: false,
unique:true,
},
userpw:{
type: Sequelize.STRING(40),
allowNull: false,
},
username:{
type: Sequelize.STRING(20),
allowNull: false,
},
gender:{
type: Sequelize.BOOLEAN,
allowNull: false,
},
userimage:{
type: Sequelize.STRING(100),
allowNull: true,
},
create_at:{
type:Sequelize.DATE,
allowNull:false,
defaultValue:Sequelize.NOW,
}
},{
sequelize,
timestamps:false,
underscored:false,
modelName:'User',
tableName:'users',
paranoid:false,
charset:'utf8',
collate:'utf8_general_ci',
});
}
static associate(db){}
};
============================================================================
공용pc에 있는 다른 분의 코드
<table>
<thead>
<td>idx</td>
<td>아이디</td>
<td>비밀번호</td>
<td>이름</td>
<td>성별</td>
<td>이미지</td>
<td>아이디 생성일</td>
</thead>
{% for ele in userList%}
<tr>
<td>{{ele.dataValues.id}}</td>
<td>{{ele.dataValues.userid}}</td>
<td>{{ele.dataValues.userpw}}</td>
<td>{{ele.dataValues.username}}</td>
<td>
{%if ele.dataValues.gender %}
남자
{%else%}
여자
{% endif %}
</td>
<td>{{ele.dataValues.userimage}}</td>
<td>{{ele.dataValues.create_at}}</td>
</tr>
{% endfor %}
</table>if /??? 공부해보기
----------------------------------------------------------------------------------------
views - index.html
<a href = "/user/join">회원가입</a>
<a href = "/user/login">로그인</a>routers - main - main.controller.js
let main = (req,res)=>{
res.render('index.html');
}
module.exports.dd = main; // (뒤에가 함수)
================================== J O I N ====================================
views - user - join_success.html
<h2>환영합니다. </h2>
~ 님 환영하빈다.
<a href = "/">메인으로가기 </a>
join.html
join html 입니다.
<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 ="password" name = "userpw"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name ="username"> </td>
</tr>
<tr>
<td>성별</td>
<td>
<input type = "radio" id ="gender" name="gender" value="0">남자
<input type = "radio" id ="gender" name="gender" value="1">여자
</td>
</tr>
</table>
<input type = "submit" value="로그인">
</form>
routers - user - index.js
router.use('/join_success', controller.join_success)추가
routers - user - user.controller.js
const {User} = require('../../models/index');
let join = (req,res) => {
//res.send('join');
res.render('./user/join.html')
}
let login = (req,res) => {
res.render('./user/login.html')
}
let join_success = (req,res)=>{
res.render('./user/join_success.html')
}
let info = async (req,res) => {
//, 'userdt']
let userlist = await User.findAll({});
console.log(userlist)
res.render('./user/info.html',{
userList: userlist,
})
}
module.exports = {
join:join,
login:login,
info:info,
join_success:join_success,
}
-> 회원가입누르면 이제 잘 나옴
이제 입력 submit 누르면 post로 값이 넘어오고 db에 넣기
post 하려면 body-parser
server.js 추가
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended:false}));터미널 -> npm install body-parser 명령어 실행 / 다운
서버에 이걸 써도 되는 이유 -> app.use를 사용해서 ( 잘 이해가 안갓당..)
app.use(bodyPar~ ) 이게 다 뿌려주는건감
routers - user - user.controller 에서 console.log 찍어서 post 값 잘 오나 확인
let join_success = (req,res)=>{
console.log(req.body.userid);
console.log(req.body.userpw);
console.log(req.body.username);
console.log(req.body.gender);
res.render('./user/join_success.html')
}
이제 DB접속
이미
const {User} = require('../../models/index');controller.js 위에 보면 가져왔음
바로User.create 사용가능
let join_success = (req,res)=>{
console.log(req.body.userid);
console.log(req.body.userpw);
console.log(req.body.username);
console.log(req.body.gender);
res.render('./user/join_success.html')
User.create({
userid:req.body.userid,
userpw:req.body.userpw,
username:req.body.username,
gender:req.body.gender,
userimage:req.body.userimage,
})
}
->터미널에 server.js 키고 체크하면서 ㄱ ㄱ
routers - user - user.controller
let join_success = async (req,res)=>{
console.log(req.body.userid);
console.log(req.body.userpw);
console.log(req.body.username);
console.log(req.body.gender);
try{
let rst = await User.create({
userid:req.body.userid,
userpw:req.body.userpw,
username:req.body.username,
gender:req.body.gender,
userimage:req.body.userimage,
})
}catch(e){
console.log(a);
}
res.render('./user/join_success.html',{
userid:req.body.userid,
userpw:req.body.userpw,
username:req.body.username,
gender:req.body.gender,
userimage:req.body.userimage,
})
}
join_success.html
<h2>환영합니다. </h2>
{{username}} 님 환영하빈다.
{{username}}님의 ID는 {{userid}}입니다.
<a href = "/">메인으로가기 </a>
회원가입 완료
================================== L O G I N ==================================
login.html
login html 입니다.
<form action = "/user/login_check" method="post">
<table>
<tr>
<td>아이디</td>
</tr>
<tr>
<td>
<input type="text" name ="userid">
</td>
</tr>
<tr>
<td>패스워드</td>
<td>
<input type="password" name="userpw">
</td>
</tr>
</table>
<input type="submit" value="로그인하기">
</form>
routers - user - index.js
const express = require('express');
const router = express.Router();
const controller = require('./user.controller');
//해당폴더의 하위 URL을 관리하는 파일.
// join login info
router.use('/join',controller.join)
router.use('/login',controller.login)
router.use('/info',controller.info)
router.post('/join_success', controller.join_success)
router.post('/login_check', controller.login_check);
module.exports = router;
controller.js
let login_check = async (req,res)=>{
res.redirect();
}
npm install express-session 설치
설치 했으면
server.js
const session = require('express-session');
app.use(session({
secret:'aaa',
resave:false,
saveUninitialized:true,
}))
controller 에 이제 입력
지금까지의 코드
server.js
const express = require('express');
const {sequelize} = require('./models'); // 객체
const {User} =require('./models');
const app = express();
const router = require('./routers/index');
const nunjucks = require('nunjucks');
const bodyParser = require('body-parser');
const session = require('express-session');
app.use(session({
secret:'aaa',
resave:false,
saveUninitialized:true,
}))
app.use(bodyParser.urlencoded({extended:false}));
app.set('view engine','html');
nunjucks.configure('views',{
express:app,
})
// seqeulize.sync -> new Promise 객체로 반환이됩니다.
sequelize.sync({ force:false, })
.then(()=>{
console.log('접속 성공')
})
.catch(()=>{
console.log('접속 실패');
})
app.use('/',router); // 비동기
app.listen(3000,()=>{
console.log('server start port 3000');
});
routers- index.js
const express = require('express');
const router = express.Router();
const mainRouter = require('./main/index');
const userRouter = require('./user/index');
// URL 관리하는 파일로 따로뺌.
router.use('/user',userRouter);
router.use('/',mainRouter);
module.exports = router;
routers-user-index.js
const express = require('express');
const router = express.Router();
const controller = require('./user.controller');
// 중분류
// 해당폴더의 하위 URL을 관리하는 파일.
// join login info
router.get('/join',controller.join)
router.get('/login',controller.login)
router.get('/info',controller.info)
router.post('/join_success', controller.join_success)
router.post('/login_check', controller.login_check);
module.exports = router;
routers-user-user.controller.js
const {User} = require('../../models/index');
let join = (req,res) => {
//res.send('join');
res.render('./user/join.html')
}
let login = (req,res) => {
res.render('./user/login.html')
}
let info = async (req,res) => {
//, 'userdt']
let userlist = await User.findAll({});
console.log(userlist)
res.render('./user/info.html',{
userList: userlist,
})
}
let join_success = async (req,res)=>{
console.log(req.body.userid);
console.log(req.body.userpw);
console.log(req.body.username);
console.log(req.body.gender);
try{
let rst = await User.create({
userid:req.body.userid,
userpw:req.body.userpw,
username:req.body.username,
gender:req.body.gender,
userimage:req.body.userimage,
})
}catch(e){
console.log(a);
}
res.render('./user/join_success.html',{
userid:req.body.userid,
userpw:req.body.userpw,
username:req.body.username,
gender:req.body.gender,
userimage:req.body.userimage,
})
}
let login_check = async (req,res)=>{
let userid = req.body.userid;
let userpw = req.body.userpw;
res.redirect();
}
module.exports = {
join:join,
login:login,
info:info,
join_success:join_success,
login_check:login_check,
}
views - index.html
<a href = "/user/join">회원가입</a>
<a href = "/user/login">로그인</a>
views - user - join_success.html
<h2>환영합니다. </h2>
{{username}} 님 환영하빈다.
{{username}}님의 ID는 {{userid}}입니다.
<a href = "/">메인으로가기 </a>
views - user - join.html
join html 입니다.
<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 ="password" name = "userpw"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name ="username"> </td>
</tr>
<tr>
<td>성별</td>
<td>
<input type = "radio" id ="gender" name="gender" value="0" checked>남자
<input type = "radio" id ="gender" name="gender" value="1">여자
</td>
</tr>
</table>
<input type = "submit" value="로그인">
</form>한개 checked 되도록 html 에 checked 쓰기
views -user - login.html
login html 입니다.
<form action = "/user/login_check" method="post">
<table>
<tr>
<td>아이디</td>
<td>
<input type="text" name ="userid">
</td>
</tr>
<tr>
<td>패스워드</td>
<td>
<input type="password" name="userpw">
</td>
</tr>
</table>
<input type="submit" value="로그인하기">
</form>
views- user - info.html
info html 입니다.
<table>
<tr>
<td>번호</td>
<td>아이디</td>
<td>패스워드</td>
<td>이름</td>
<td>성별</td>
<td>이미지</td>
<td>등록일</td>
</tr>
{% for item in userList %}
<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>
===================================점심 시간===================================
김빱
session, cookie.? 가 뭐징
session - server 측에서 저장되는
server, 서버에 저장됨
login의 유지는..? server측에서 내가 로그인한 id, 정보를 계속 가지고 있음. 값을 get, post등으로 계속 안넘겨줘도 됨.
cookie -사용자 측에서 저장되는
내용이 Data가 browser, 브라우저에 저장됨
ex) 장바구니 ( 회원가입 안하고 장바구니 놓고 다른 거 보다가 다시 돌아왔을 때 아직 장바구니에 있음. ),
팝업닫기, 팝업창 띄웠는데 일주일동안 다시보지않기-> 이런 것도 쿠키로 만드는 것
변수, 내용들이 브라우저에 저장되어서 껏다 켜도 그대로 있음.
- 보안성이 아주 취약 (데이터를 조작 가능함) - 수정, 삭제가 가능
- 날라가도 괜찮은 데이터들은 쿠키로 만들어도 괜춘.!
로그인 -> session 으로 만들거다. (민감한 정보일수록) => 어떻게 사용할지 아래에 ㄱ ㄱ
자동 로그인 -> 쿠기값과 session 같이 활용해야함
= > 일상생활과 밀접해서 그런지 흥미롭당..
로그인 아이디,비번 넣고 -> post -> server ------조회(select * from us~) ----> DB
성공 -> index page
DB에서 record를 못찾으면 로그인 실패 -> 이전 url 돌아가기
로그인이 성공했을 때 session 생성해주면 됨.
session이 생성되는 순간 어느 page를 가도 값을 가지고 댕김
===========================================================================
LOGIN
try{
let rst = await User.create({ // User.create 반환 값 - 비동기형식 Promise 객체
userid:req.body.userid,
userpw:req.body.userpw,
username:req.body.username,
gender:req.body.gender,
userimage:req.body.userimage,
})
}catch(e){ //예외처리
console.log(a);
}
비동기가 아닌 동기처리 방식이면 Promise 객체 값이 항상 Pending 이 됨
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;
try{
let rst = await User.create({ // User.create 반환 값 - 비동기형식 Promise 객체
userid:userid,
userpw:userpw,
username:username,
gender:gender,
})
}catch(e){
console.log(a);
}
res.render('./user/join_success.html',{
userid:userid,
userpw:userpw,
username:username,
gender:gender,
})
}
여기서 또 줄일 수 있다.
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;
try{
let rst = await User.create({ // User.create 반환 값 - 비동기형식 Promise 객체
userid,
userpw,
username,
gender,
})
}catch(e){
console.log(a);
}
res.render('./user/join_success.html',{
userid,
userpw,
username,
gender,
})
}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;
try{
let rst = await User.create({userid, userpw,username, gender,})
}catch(e){
console.log(a);
}
res.render('./user/join_success.html',{userid, userpw,username,gender})
}
---------------------------------------------------------------------------------------------------------------------------------
이제 로그인에 아이디, 비밀번호를 입력한 값을 post로 가져와 login_check 에서 값이 있는지 확인,
있으면 성공(session) or 없으면 실패
나의 table check
입력할 아이디, 비번 골라두기
덤블도어, asdf
* 성공 기준
mysql select문
routers - user - user.controller.js
아래 select 문 쳌
let login_check = async (req,res)=>{
let userid = userid;
let userpw = userpw;
let result = await User.findOne({
where:{userid,userpw}
})
console.log(result);
res.send('test');
}
let login_check = async (req,res)=>{
let userid = req.body.userid;
let userpw = req.body.userpw;
let result;
try{
result = await User.findOne({
where:{
userid:userid,
userpw:userpw}
})
} catch(e){
console.log(e)
}
console.log(result);
res.send('test');
}오류나서 try catch
let login_check = async (req,res)=>{
let userid = req.body.userid;
let userpw = req.body.userpw;
let result = await User.findOne({
where:{userid,userpw}
})
console.log(result);
res.send('test');
}
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}
})
req.session.uid = userid;
//uid라는 변수값에 userid 값을 넣겠다.
req.session.isLogin = true;
// 개발자가 현재 로그인 상태가 true인지 편하게 구분하려고 만들어 놓은 것
//isLogin이라는 속성에 true라는 값을 넣겠다.
req.session.save(()=>{ //저장하겠다.
res.redirect('/'); //그리고 메인으로 가 !
})
}위와 같이 session 하면 JS 파일 말고server에 공통적으로 쓰는 변수가 되는 것
server.js 의 session 요 부분은 내용 찾아보고 외우기
app.use(session({
secret:'aaa',
resave:false,
saveUninitialized:true,
}))
let login_check = 안에 consol
정리
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}
})
console.log(result);
console.log(req)
req.session.uid = userid;
req.session.isLogin = true;
// 개발자가 현재 로그인 상태가 true인지 편하게 구분하려고 만들어 놓은 것
req.session.save(()=>{
res.redirect('/');
})
}
routers - main - main.controller
let main = (req,res)=>{
console.log(req.session);
res.render('index.html',{
userid:req.session.uid,
isLogin:req.session.isLogin
});
}
module.exports.dd = main; // (뒤에가 함수)
views - index.html
{% if isLogin %} //true == {% if true %}}
{{userid}}님 환영합니다. <a href="#">로그아웃</a>
{% else %} //true가 아니면
<a href ="/user/join">회원가입</a>
<a href ="/user/login">로그인</a>
{% endif %}
console.log에 git commit 만 눌러서 edit 창이 열리면
요 명령어로 나가기
:q!
=================================로그아웃 만들기 ===============================
routers - index.js
{{userid}}님 환영합니다. <a href="/user/logout">로그아웃</a>경로 쓰고
user - logout 파일 만들기
user - index.jx
router.get('/logout', controller.logout);
user - user.controller.js
let logout = (req,res) =>{
delete req.session.isLgin;
delete req.session.uid;
req.session.save(()=>{
res.redirect('/');
})
}
module.exports = {
join:join,
login:login,
info:info,
join_success:join_success,
login_check:login_check,
logout,
}
세션에 저장이 많아지면 과부하. 1000명정도까지는 괜춘 그 이상은 ..
{% for [받을변수 ] in [반복할 배열] %}
{% endfor %}
{% if [조건] %}
-> BOOLEAN or 비교 연산자
* 비교 연산자의 결과는 항상 BOOLEAN
html 태그 가능
{% else %}
{?% endif %}
** 구문, 언어 쓰는건 {% % } 괄호 하나야!
** {{ }} 출력용
--------- 정리
server.js
const express = require('express');
const {sequelize} = require('./models'); // 객체
const {User} =require('./models');
const app = express();
const router = require('./routers/index');
const nunjucks = require('nunjucks');
const bodyParser = require('body-parser');
const session = require('express-session');
app.use(session({
secret:'aaa',
resave:false,
saveUninitialized:true,
}))
app.use(bodyParser.urlencoded({extended:false}));
app.set('view engine','html');
nunjucks.configure('views',{
express:app,
})
// seqeulize.sync -> new Promise 객체로 반환이됩니다.
sequelize.sync({ force:false, })
.then(()=>{
console.log('접속 성공')
})
.catch(()=>{
console.log('접속 실패');
})
app.use('/',router); // 비동기
app.listen(3000,()=>{
console.log('server start port 3000');
});
routers-index.js
const express = require('express');
const router = express.Router();
const mainRouter = require('./main/index');
const userRouter = require('./user/index');
// 대분류
// URL 관리하는 파일로 따로뺌.
router.use('/user',userRouter);
router.use('/',mainRouter);
module.exports = router;
routers - main - index.js
const express = require('express');
const router = express.Router();
const controller = require('./main.controller')
console.log(controller);
router.use('/',controller.dd);
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.dd = main; // (뒤에가 함수)
routers - user - index.js
const express = require('express');
const router = express.Router();
const controller = require('./user.controller');
// 중분류
// 해당폴더의 하위 URL을 관리하는 파일.
// join login info
router.get('/join',controller.join)
router.get('/login',controller.login)
router.get('/info',controller.info)
router.get('/logout', controller.logout);
router.post('/join_success', controller.join_success)
router.post('/login_check', controller.login_check);
module.exports = router;routers - user - user.controller.js
const {User} = require('../../models/index');
let join = (req,res) => {
//res.send('join');
res.render('./user/join.html')
}
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}
})
console.log(result);
console.log(req)
req.session.uid = userid;
req.session.isLogin = true;
// 개발자가 현재 로그인 상태가 true인지 편하게 구분하려고 만들어 놓은 것
req.session.save(()=>{
res.redirect('/');
})
}
let info = async (req,res) => {
//, 'userdt']
let userlist = await User.findAll({});
console.log(userlist)
res.render('./user/info.html',{
userList: userlist,
})
}
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;
try{
let rst = await User.create({userid, userpw,username, gender})
}catch(e){
console.log(a);
}
res.render('./user/join_success.html',{userid, userpw,username,gender})
}
let logout = (req,res) =>{
delete req.session.isLogin;
delete req.session.uid;
req.session.save(()=>{
res.redirect('/');
})
}
module.exports = {
join:join,
login:login,
info:info,
join_success:join_success,
login_check:login_check,
logout,
}
views - index.html
{% if isLogin %}
{{userid}}님 환영합니다. <a href="/user/logout">로그아웃</a>
{% else %}
<a href ="/user/join">회원가입</a>
<a href ="/user/login">로그인</a>
{% endif %}
views - user - join_success.html
<h2>환영합니다. </h2>
{{username}} 님 환영하빈다.
{{username}}님의 ID는 {{userid}}입니다.
<a href = "/">메인으로가기 </a>
vies - user - join.html
join html 입니다.
<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 ="password" name = "userpw"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name ="username"> </td>
</tr>
<tr>
<td>성별</td>
<td>
<input type = "radio" id ="gender" name="gender" value="0" checked>남자
<input type = "radio" id ="gender" name="gender" value="1">여자
</td>
</tr>
</table>
<input type = "submit" value="로그인">
</form>
views - user - login
login html 입니다.
<form action = "/user/login_check" method="post">
<table>
<tr>
<td>아이디</td>
<td>
<input type="text" name ="userid">
</td>
</tr>
<tr>
<td>패스워드</td>
<td>
<input type="password" name="userpw">
</td>
</tr>
</table>
<input type="submit" value="로그인하기">
</form>
views - user - logout.html
