Ajax2-1. 기본_로그인 페이지

AJAX 통신으로 로그인 페이지 구현

1. 사용자, 로그인페이지에서 아이디와 비밀번호 입력 후 제출
2. 사용자가 입력한 데이터, 바로 백엔드 서버로 전달되는 것이 아니라 AJAX통신을 통하여 프론트에서 백엔드로 요청객체로 전달
3. 프론트의 요청을 전달받은 백엔드는 연결되어 있는 DB의 정보와 비교하여 로그인 검증
4. 백엔드, 로그인 검증 결과를 프론트에 응답
5. 프론트, 응답받은 내용에 대한 처리를 사용자에게 제공

목차

1. 백엔드 서버에 요청보내기
2. 요청 바디에 내용 넣기
3. 요청 헤더 조작
4. 응답받고 응답에 대한 처리 작성해보기

1. 요청 보내기

1-1. XMLHttpRequest 메서드 사용

function ajax() {
const xhr = new XMLHttpRequest()

//1. 요청보내기
xhr.open('POST', 'http://localhost:3000/login')
xhr.send()
}

[참고] open()메서드의 첫번째 인자값인 요청 메서드는 보통 대문자로 쓰는 게 관례

1-2. 백엔드에서 요청을 잘 받았는 지 확인

app.post('/login2',(req,res)=>{
	console.log(`received!`)
})

요청이 잘 들어왔다면, 브라우저 콘솔창에서 ajax 함수 호출 시 백엔드 콘솔화면에 received! 라는 문구가 확인 될 것이다.

2. 요청 바디에 내용 넣기

-send() 메서드에 인자로 들어가는 부분이 요청 바디에 들어가는 내용작성

xhr.send(`브라우저 콘솔에서 함수 호출 시 req.body에 실려 백엔드로 보내질 내용`)

3. 요청 헤더 조작

만약, 요청 보냈을 때 백엔드 콘솔창에 빈 객체로 나온다면 헤더에 컨텐트타입을 설정하는 코드를 작성하면 됨

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

여기까지가 요청에 대한 부분이다.
그렇다면 지금까지 작성한 코드를 한 눈에 확인해보자

---

요청에 대해 작성한 코드 한 눈에 보기

-요청 헤더 조작 및 요청 바디에 내용 실어서 백엔드로 요청 보내기

function ajax(item){
    const xhr = new XMLHttpRequest()
    xhr.open('POST','http://localhost:3000/user/login')
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    xhr.send(`userid=${item['userid']}&userpw=${item['userpw']}`)
}

---

자 이제부터 대망의 응답받기이다.

4. 응답 받기

응답 받을 시 onreadystatechange 의 콜백함수가 실행될 것이다.
이전 게시글에서 보았듯이 응답은 진행 과정에 따라 크게 4 단계로 나뉜다.

하지만 코드 번호 1번의 경우 단순히 백 서버와 연결이 완료된 상태이므로,
요청에 대한 콜백이 실행되는
(콜백 총 3회 발생,요청이 전달된 코드 번호 2번부터 이후의 코드인 3번, 4번) 코드에 대한 처리를 작성해주자.


각각의 진행 과정에 따른 프론트의 처리를 어떻게 할 것인지를 작성해주면 되는데,
switch문을 이용하여 작성해보도록 하자.

xhr.onreadystatechange = () => {
                    switch(xhr.readyState){
                        case 2 :
                            console.log('header_received')
                            break;
                        case 3 :
                            console.log('loading')
                            break;
                        case 4 :
                            console.log('done', xhr.response)
                            break;
                    }

이렇게 코드를 작성하고 난 후에
브라우저에서 로그인 폼 데이터 입력 후 로그인 버튼을 누르면
콘솔창에 다음과 같이 출력될 것이다.

header_received
loading
done notLoggedIn

참고로 현재 미들웨어를 관리하는 서버측 js 파일에 아래와 같이 작성되어 있고,
로그인화면에서 로그인정보와 일치하지 않는 아이디 비밀번호를 입력하였기 때문에
notLogedIn이라는 응답을 받은 것이다.
만약 DB서버에 있는 아이디와 비밀번호에 일치하는 로그인 정보를 입력하였다면
쿠키가 생성되며 마지막 출력으로 'done loggedIn'이 확인되었을 것이다.

---

userController.js

exports.loginPost = (req, res) => {
    const {userid, userpw} = req.body
    const param = [ userid, userpw ]
    try {
        pool.getConnection((err, conn) => {
            conn.query(SQL.loginPost, param, (error, result) => {
                if(result[0]!= undefined){
                    delete result[0].pw
                    const item = result[0]
                    const token = createToken(item)
                    res.setHeader(`Set-Cookie`,`AccessToken=${token}; httpOnly; secure; path=/;`)
                    res.send(`loggedIn`)
                } else {
                    res.send(`notLoggedIn`)
                }    
                conn.release()
            })
        })
    } catch (err) {
        console.log(err)
    }
}

---

다시, login.html 파일로 돌아와서 응답이 돌아왔을 때 그에 따른 처리를 다르게 적용하는 코드를 작성 해 보자.

const msg = document.querySelector('#msg')

if(xhr.response == 'loggedIn'){
location.href="http://localhost:3000"
} else {
    msg.innerHTML = '로그인 정보를 확인해주세요'
    msg.style.color = 'red'
}

나는 if문을 사용해서 서버로 부터 받은 응답이 loggedIn이면
로그인이 완료되었다는 알림과 함께 메인페이지로 보내버리고,
그렇지 않을 경우 로그인 정보를 확인해주세요 라는 라는 문구가 확인되도록 코드를 작성하였다.

물론, msg 는 html에서 id가 msg인 아이를 참조하므로 html에 다음과 같이 적는 것도 잊지말자.

<span id = "msg"></span>

오늘은 이렇게 XMLHttprequest() 메서드를 이용해서 굉장한 하드코딩으로 AJAX 로그인 기능을 구현해보았다.

사실 프로미스나 외부라이브러리인 axios를 사용한 아주 멋진 방법도 있다.
하지만 이런 멋진 방법들은 기본기가 확실해야 잘 사용할 수 있는 법.

다음 포스팅에서 이런 멋진 방법들을 다루기 전에 오늘 배운 내용들을 잘 복습해보도록 하자!