5.11 login 체크/ pw 체크/아이디 중복확인/ 이미지 올리기/

(1교시)

금요일 마지막 실행했던 코드 열래요

일단 다른분 오류 고쳐주고계심....

난 너무 졸리고...

졸려...

 1. login 체크 만들기 

로그인에 실패했을 때와 성공했을 때 넘어가는 페이지를 만들려고 합니다.

router > user > user.controller.js의 login_check부분을 만들어주면 됩니다.

로그인 성공했을 때와 실패했을 때로 나워서 실행해주도록 구상합니다.

실패했을때는 

실패 페이지 뜨게하기 위해 flag=0값을 줘서 get값을 넣었다고 함. (실패시 다시 로그인 페이지로 redirect)

그리고 로그인 페이지에서 아이디비번 틀리게 치고, uri가 어떻게 채워지는지 확인해보기

->오류: uri가 바뀌질 않음

 

+ 로그인 실패니까 경고창이 뜨도록 합니다.

-> 로그인 html에서 넌작스 구문을 써서 자바를 만들어줌

근데 요즘은 이렇게 경고창만 띄우는것보다, 아이디 비번도 지워줘서 틀렸다는걸 알려주는게 

더 트렌드라고 합니다.

 

->오류 고쳐짐~

user.controller.js 부분에 login_check 에 만약 로그인이 실패시 응답으로

uri에 flag값을 주고 다시 로그인 페이지로 redirect 하는거였는데,

redirect 앞에 res. 을 안써놨음 ㅠ 바본가..

암튼 오류 고쳤더니 uri도 바뀌고 경고창도 뜨고 다 됩니닷.

 

까지가 1교시

 

---

(2교시)

로그인 했을 때 회원정보 가져오기, 시간 가져오기

 

 2-1. 회원정보 페이지 만들기 

-로그인 성공했을 때 나오는 페이지는 어디일까?

-> view > index.html 에서 넌적스 구문 활용해서 if문을 만들었고,

isLogin 값으로 true/ false 조정했었음! 이거 기억할 수 있어야 함.

 

때문에 index.html 페이지에 가서 "user info" 부분을 추가해줍니다.

로그인 완료한 사람만 볼 수 있어야 하므로, 로그인 성공한 부분에다가 추가해줍니다.

{% if isLogin %}
{{userid}} 님 환영합니다. <a href="/user/logout">logout</a>
<a href="/user/info">회원정보</a>

{% else %}
<a href="/user/join">JOIN</a>
<a href="/user/login">LOG IN</a>

{% endif %}

 

이렇게 넣으면 uer info 클릭시, 회원 정보가 json 형태로 뜹니다 (어제 api 연습할때 json 형태로 뿌려줬기 때문에)

그래서 이부분을 다시 html형태로 바꿔주기 위해서

-> router > user > usercontroller.js 의 info부분을 조정해줘야 합니다.

 

let info = async(req,res) => {
    //, 'userdt']
    let userlist = await User.findAll({});
    //console.log(userlist)
/*
    res.render('./user/info.html',{ //여기는 html 형태
        userList: userlist,
    });
*/
    res.json({ //이거는 api연습할 때 json으로 뿌려줬던 부분
        userlist
    })
}

<현재 코드 (json 형태)>

 

 

-> json 부분을 주석처리 해주고, 응답으로 html 페이지가 render되도록 이부분 주석을 풀어줍니다.

let info = async(req,res) => {
    //, 'userdt']
    let userlist = await User.findAll({});
    //console.log(userlist)

    res.render('./user/info.html',{ //여기는 html 형태
        userList: userlist,
    });
    
/*
    res.json({ //이거는 api연습할 때 json으로 뿌려줬던 부분
        userlist
    })
}
*/

 

-------------------------------------------------------------------------------------------------------------------------------

 2-2. 회원정보 페이지 - 날짜 원하는 형태로 가져오기  

- select할 때 바꾸는 방법도 있지만, 사용할 때 마다 attribute이용해서 날짜를 바꿔줘야 하는데 이부분 노가다임.

그래서 애초에 가지고 올때 날짜 형태로 가지고 오도록 해주면 됨.

 

-> models > user.js > userdt 부분이 등록했던 날짜를 넣는 부분이었습니다. 여기 안에 코드를 추가해줍니다.

 1. 

get: function(){

   return moment(this.getDataValue('userdt')).format('YYYY-MM-D')

}

 

이는 속성값에 매소드를 추가해주는 것입니다.

여기서 this는 자신 (Class)를 바라보고 있고, getDataValue() 안에는 필드값을 넣어주면 됩니다.

-> Class안에 있는 userdt를 바라본다는 의미이고

.format('YYYY-MM-D') 는 moment라는 패키지를 활용해서 그 값을 변경해주는 형태인것.

따라서 moment를 사용하려면 패키지를 다운받아줘야 합니다.

- npm install moment

설치 후 가져오기

- const moment = require('moment');

 

 2. 

type:Sequelize.DATEONLY,

 

원래 코드에

type : Sequelize.DATE 라고 되어있던 부분을 -> DATEONLY  라고 바꿔줍니다.

 

(이 다음에 원래 있던 테이블을 한번 삭제하고 회원가입 진행해줘야 적용이 됩니다.

:  server.js에 있는

   sequelize.sync({ force : false, }) 부분 -> sequelize.sync({ force : true, })

로 바꿔주고 브라우저에서 회원가입 후 다시 그걸로 로그인 하면 뜹니다잉.)

 

----------------------------------------------------------------------------------------------------------------------------

(3교시)

 3. 이미지 넣기 

 1. 

일단 회원가입 할때 넣을 수 있도록 view > join.html 에 

<tr>
	<td>image: </td>
    	<td><input type="file" name="img"></td>
</tr>

추가해줍니다.

(이때 input 에다가 accept="image/png, jpg" 를 넣어줘서 확장자를 정해줄 수 있지만

여기서는 작동만 해보도록 합니다.)

 

 2. 

form 태그 쪽에 프로퍼티 값이 추가됩니다.

<form action="/user/join_done" method="post" enctype="multipart/form-data" id="login_form">

 

-multipart/formdata : http 통신에 대해서 짚어봐야 알 수 있습니다. 간략하게 이해하자면 

http 통신이라는 것에는 start 정보 /header 정보 / body정보 가 있습니다.

body부분이 바로 실질적으로 html이 들어가는 부분입니다.

우리가 post로 데이터를 전송을 할 때는 바디부분에 input에 대한 정보들(ex.username , userpw등등..)이 들어갑니다.

이것이 우리가 express에서 post값을 받을 때 req.body로 받는 이유입니다.

그런데 여기서 왜 multipart/formdata 를 추가해줬냐 하면, 크기를 확보해야하기 때문입니다.

즉, body부분을 img도 넘겨줄 수 있는 크기를 만들어서, body 영역에 img가 내용이 들어갈 수 있도록 한것입니다.

꼭 이미지가 아니더라도 일반 텍스트/ 변수들이 아니라 파일정보를 받으려면 form이 그 만큼의 준비가 되어있어야 합니다. 그래서 파일을 받을때 multipart/formdata를 붙여주면 미리 그부분 크기를 키워놓으라는 의미로 이해하면 됩니다.

이걸로 html에서 이미지를 보내줄 준비가 된 것입니다.

우리가 post값을 받을떄도 express에서 body-parser 설치한 것처럼 이미지도 마찬가지입니당.

body부분 가져올수있는것 다운받아야합니다. npm install multer 

+ 이후 multer세팅에서 확장자를 가져오도록 하는 path도 다운받아 놓습니다. npm install path

 

 

 4. multer 사용법- app.use ( '/ ' ,    ,   ); 

 처음에 우리가 서버에 접속 했을 때,

이곳에 들어왔다가 그 다음에 라우터를 타고 점점점 안쪽으로 들어가다가

실행되는 파일의 컨트롤러 부분의 함수가 실행이 됩니다. 

 

첫번째 인자값은 uri가 들어가고 두번째 인자값은 라우터라든가 함수가 들어갑니다. 

 

하지만 여기에는 중간에 인자값이 더 들어갈 수 있습니다. 궁극적으로 마지막 인자로 함수가 들어가기만 하면

강제적으로 미들웨어를 추가할 수 있는것입니다.

즉 app.use안에는 두가지 미들웨어가 들어갈 수 있습니다.  

 

실험으로 한가지 예시를 만들어봅시다.

(선생님이 왜인지 예시를 get으로 만드심..)

app.get ('/',(req,res)=>{
	console.log('hi');
},(req,res)=>{
	console.log('houuuu');
    res.send('두번째 콜백이도 실행 됐어용')
})

이 코드를 실행시켜보면

node server.js

 

이렇게 되는데, 

오류는 뜨지 않고 브라우저는 계속 로딩, 콘솔창에 hi만 찍힌걸로 봐서 첫번째 콜백함수만 실행된걸 알 수 있음.

 

즉, app.get('/' ,     ,     )에다가 함수 두개 집어넣으면 첫번째 아이만 실행된다.

두개의 콜백함수를 모두 실행시키고 싶으면 어떻게 해야할까? 

 

next를 이용해봅니다.

첫번째 콜백이 인자에 next 넣어주고 함수안에 next();로 받아주면 끝. 간-단.

app.get ('/',(req,res,next)=>{
	console.log('hi');
    	next();
},(req,res)=>{
	console.log('houuuu');
    res.send('두번째 콜백이도 실행 됐어용')
})

이렇게 추가해주고 코드 실행.

node server.js

브라우저에도 res.send('두번째 콜백이 실행 됐어용')가 떴고, console 창에도 hi와 houuuu가 뜬걸로 봐서, 

첫번째와 두번째 콜백함수 모두 실행된걸 알 수 있습니다. 

 

예시로 들은 app.get 이외에도 router.get이나 router.post도 마찬가지로

첫번째 인자값으로 uri값이 있습니다 (만약에 생략되었다면 그게 첫번째 루트인것).

그 다음부터 들어가는 인자값으로 함수가 들어갈 수 있는데, 그게 모두 미들웨어이고 이걸 여러개 넣을 수 있습니다.

----------------------------------------------------------------------------------------------------------------------------------

 

 3. 

multer 사용 세팅.

const multer = require('multer');
const path = require('path');



const upload = multer({
	storage : multer.discStorage({
    	destination : function(req, res, file){
    		callback(null, 'uploads/') //폴더명
    		},
       	filename: function(req, file, callback){
        	callback(null, new Date().valueOf() + path.extname(file.originalname))
        }
    }),
})
//여기까지가 세팅

 

1. multer 가져오기, path 가져오기

2. multer 라는 매소드 안에 인자값은 하나, 객체 형태로 들어갑니다.

3. 그 객체 안에는 한가지 값, storage 가 들어갑니다.

4. storage: 에는 multer.discStorage가 들어가고, 얘가 또 매소드라서 인자값이 2개나 객체로 들어가요 또..

   1) destination   2) filename

5. destination: 에는 콜백함수가 들어갑니다.

  function(req, res, file){callback(null, 'uploads/')}, -> 여기부분 'uploads' 이름의 새파일도 만들어줘야 합니다.

6. filename: 에도 콜백함수가 들어감.

  function(req, file, callback){callback(null, new Date().valueOf() + path.extname(file.originalname))}

 

까지가 세팅인데,, 선생님도 이거는 그냥 복붙해서 쓰신다고 함.. 그냥 외우지 말고 있는거 가져다 쓰자.

 

 4. 

multer 사용 하기.

 

중간에 미들웨어를 하나 추가해 줍니다. 

routers > user >index.js에서  join success 부분에 추가해야겠죵

 (세팅에서 만들어준 변수명)upload. single('img'-> 요거슨 join.html에서 지정해준 이미지 name 을 가져와야 합니다. )

즉, 추가한 코드는

router.post('/join_done',upload.single('img'),controller.join_done);

router.post('/join_done',upload.single('img'),controller.join_done); => 요부분이 추가되었슴당.

 

(세팅할때 uploads 파일 만들어줬는디 한번 더 확인)

 

하면 끄읕.

회원 가입할때 이미지 넣고 해서- 그 uploads 파일에 이미지 들어가 있으면 성공입니닷

----------------------------------------------------------------------------------------------------------------------------------

 

 

 

뭔가 이것저것 들은것같은디..? 모르게따

(대충 뭐했나 생각 해보면..)

이미지 업로드

-외워서 치는 코드

-path 어쩌구 확장자 가져오는 코드 필요

-코드에 있는 폴더명이랑 같은 폴더 있어야 함(uploads)

- 사진 넣고 회원가입 하면 vs upload폴더에 사진 들어가있음 짱신기

---

(4교시)

 

우리가 에이젝스를 사용하기 위해서 엑시오스를 사용했었는데 그 cdn값을 가져와서 자바스크립트에 연결을 했었죠.

그 cdn값을 다시 한번 가져와 보도록 합시다.

선생님이 금요일 수업때 쓰셨던 axios를 그대로 긁어와서 붙이심.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>

 

userid_check 하는 부분

1. 중복확인

 1-2) 을 어떻게 할거냐! -> 그 아이디 입력한 벨류값을 가져와서 데이터랑 비교해보고

중복이 아니면 true , 중복이면 false 값을 주도록 합니다.  

 

 

---

(5교시)

-4교시에 하던거 마저하기

-그리고 자습인거같당

---

(6교시)

자습습습

오류1. password-check 칸이 안뜨는 오류

-td 칸을 안만들어서 안떴던거였음. td 칸 만들어서 password 써놓으니까 다시 뜸

 <tr>
     <td>password check</td>
     <td><input type="password" name="userpw_check"></td>
 </tr>

 

---

(7교시)

오류2. 회원가입 버튼 눌렀더니 alert가 안뜸.

이곳의 value라고 하는 프로퍼티값을 찾을 수가 없다고 한다. 

 

콘솔창을 보니

join:73 Uncaught TypeError: Cannot read property 'value' of null
    at password_check (join:73)
    at HTMLInputElement.<anonymous> (join:78)
password_check @ join:73
(anonymous) @ join:78

 

function password_check(){
                //console.log(pwd1.value, pwd2.value);
                return pwd1.value == pwd2.value;
        }

 

----------- 이거 오류 찾느라고 시간 다감 ㅎ

개어이없넿

        <tr>
            <td>password</td> <!-- 패스워드 확인(두번입력 ,두번 일치)-->
            <td><input type="password" name="userpw"></td>
        </tr>
        <tr>
            <td>password check</td>
            <td><input type="password" name="userpw_check"></td>
        </tr>

<고치기 전 코드(오류 난 코드)>

 

위에 보면 

      const pwd1 = document.querySelector('#userpw');

      const pwd2 = document.querySelector('#userpw_check');

라고 선언해놨는데,,, 아니 아이디값을 지정 안해줘놓고 그걸 가져온다고 하면 어떡합니까. 구문영씨. 예!?

후.... 아이디값을 넣어줍니다..

        <tr>
            <td>password</td> <!-- 패스워드 확인(두번입력 ,두번 일치)-->
            <td><input type="password" id="userpw" name="userpw"></td>
        </tr>
        <tr>
            <td>password check</td>
            <td><input type="password" id="userpw_check" name="userpw_check"></td>
        </tr>

---저장후 재실행---

---

콘솔창에 value값까지 아주 잘 뜨는구만..

 

---

(8교시)&자습

 

userid.addEventListener('focusout',userid_check);

...

btn.addEventListener('click',()=>{ 
        pwd_check = password_check();
        ...
        }
    

질문 1. 둘다 같은 이벤트인데 왜 하나는 인자값으로 변수만 집어넣고,

하나는 익명함수로 실행시켰는지?

 

addEventlistener()

:특정 이벤트가 발생했을 시, 특정 함수를 실행할 수 있게 해주는 기능.

1번째 인자는 이벤트명이다.
2번째 인자는 콜백 함수로, 이벤트가 발생되면 실행된다.

 

userid.addEventListener('focusout',userid_check); -> 이거 두번째 인자가 그냥 함수명으로 들어가도 되는건가..?

그런가봄. userid_check 자체를 콜백함수라고 생각하면 되는듯.

 

btn.addEventListener는 두번째 인자로 익명함수를 콜백함수로 쓴것.