[스틸스] 로그인, 회원가입 구현 (axios, session)

 

 

1차 프로젝트에 이어서 프론트 엔드 프로젝트에 만족하지 않고 백엔드 기능을 추가해 완성도 있는 프로젝트를 만들어보고자 2차 프로젝트로 node.js 를 활용해 기능을 추가해보았다.

 

 

먼저, node.js를 활용하기 위해 html, css로 구현했던 페이지들을 ejs로 변환해 코드를 정리하고 css 역시 유지보수를 생각해 파일을 나누어 코드를 수정했다.

 

다음으로, 쇼핑몰에 필요한 가장 기본적인 기능을 넣고자 로그인, 회원가입 부터 구현을 시작했다.

 

 

1. 회원 가입 구현

 

기본적으로 MVC 구조를 사용하고 있기 때문에 회원가입 정보를 저장하기 위한 Model 부터 정의해주었다.

 

SQL 쿼리문인 INSERT INTO 를 사용해 username, phone, userpw를 입력 받아 데이터베이스인 MySQL 워크벤치에 저장되도록 함수를 만들었고, 외부 파일에서 사용하기 위해 exports까지 작성해줬다.

 

 

이어서 Controller에서 사용자의 요청을 처리할 수 있는 로직을 구현했다.

이는 사용자의 입력값을 req.body로 받아 Model에 전달하는 역할을 한다.

 

회원가입 Model, Controller

 

 

사용자의 요청이 Controller와 Model에 전달될 수 있는 이유는 라우터가 있기 때문이다.

라우터를 정의해 MVC 구조가 실행되도록 연결했고, 사용자 요청을 전달하기 위해 axios를 사용해 코드를 작성했다.

 

 

사용자의 회원가입 요청을 서버에 전달하기 위해 axios의 POST method를 사용해 user의 이름, 전화번호, 비밀번호 입력 값을 data로 전달했으며,

 

라우터에서 요청을 받을 수 있도록 router.post로서 axios 요청을 Controller로 전달해주었다.

 

 

여기서 axios로 데이터를 전달하는 경로와 라우터가 요청을 전달받는 경로는 서로 동일해야하므로 항상 이부분을 주의하며 코드를 작성하면 좋을 것 같다.

또한, GET 요청인지, POST 요청인지도 잘 구분해서 작성해야만 모든 MVC 구조의 코드가 실행될 수 있다.

 

 

---

 

 

2. 로그인 구현

 

회원 가입 로직을 구현한 후 로그인을 위해 Model에 SELECT 구문을 사용해 user의 phons, userpw 데이터를 불러오는 코드를 작성했다.

 

 

이어서, Controller에 입력받은 req.body에 해당하는 데이터를 Model에 전달해 데이터베이스에 존재하면 로그인 성공 여부를 사용자에게 isLogin 변수에 true 값을 담아서 response로 전달해주었다.

마찬가지로 데이터가 존재하지 않아 로그인에 실패하면, isLogin 변수에 false 값을 전달하도록 했다.

 

로그인을 진행하는 과정에서 데이터베이스에 존재하지 않는 정보로도 로그인 성공 메세지가 사용자에게 전달되는 오류가 발생해 Controller의 조건문에 result.length > 0 조건을 추가해 결과를 정확하게 비교할 수 있도록 코드를 수정해 해결할 수 있었다.

 

 

이제 사용자 측에서 입력 데이터를 서버로 보내는 js 코드에 대해 적어보겠다.

 

먼저 axios로 POST method를 사용했다.

data로는 로그인 form의 phone value와 userpw value를 담아 서버로 보내는 요청을 작성해주었다.

 

요청을 보낸 데이터로 Controller에서 response data를 사용자에게 전달하면,

then 구문을 작성해서 응답에 포함된 isLogin 변수가 true이면 로그인 성공 메세지를,

false라면 일치하는 로그인 정보가 없다는 메세지를 사용자에게 띄우도록 코드를 작성해 로그인 기능을 완성할 수 있었다.

 

로그인 화면

 

 

---

 

 

728x90

 

 

 

3. 로그인 세션 유지

 

회원 가입과 로그인 로직을 완성했다면 이제 세션 정보를 활용해 로그인을 유지하는 기능을 만들어줄 차례이다.

 

기본적으로 웹에서 로그인을 하면 일정 시간동안 user의 로그인 정보가 유지되며 자유롭게 기능을 이용할 수 있도록 되어있는 것을 확인할 수 있다.

 

 

나 역시도 로그인 세션을 유지하기 위한 코드를 구현해보았다.

 

가장 먼저 최상위 js 파일인 app.js에 세션을 정의해주었다.

 

다음으로 Controller에서 GET 요청의 req.session의 user 정보를 통해 user 정보가 세션에 존재하면 isLogged 변수를 true 값으로 사용자에게 전달하고,

아니라면, false로 전달하여 사용자 측에서 로그인 여부를 판단할 수 있도록 해주었다.

 

 

따라서 정의된 세션과 isLogged 변수를 활용해 사용자 헤더의 로그인 버튼 및 로그아웃 버튼을 적절하게 변경해 표시할 수 있었다.

이는 ejs 문법을 활용해 코드를 구현했다.

 

로그인 세션이 존재하면 로그아웃 버튼을 사용자에게 보여주며, 로그인 세션이 없다면 로그인 버튼이 사용자에게 보여지도록 해 기능을 완성했다.

 

로그인 유지 세션

 

 

 

마지막으로 세션을 이용해 로그아웃 기능도 구현할 수 있었다.

 

로그아웃 요청이 사용자로부터 전달되면 Controller에서 req.session.destroy를 사용해 저장되어 있던 로그인 세션 정보를 파괴함으로써 로그아웃이 이루어지도록 코드를 작성해 기능을 완성했다.