안녕하세요
최근 2주일간 개인 프로젝트를 진행했고
드디어 오늘 완성했습니다.
내일까지 시간이 있어서 코드를 리뷰해보려고 합니다.
프로젝트의 이름은 Fish Dalle3입니다.
배경 이미지를 Dall E 3를 사용해서 만들었기 때문에
간단하게 지었습니다.
이미지 제공 ▼
DALL·E 3 | OpenAI
먼저 로그인 화면을 보여드리겠습니다.
ID와 PW로 로그인하는 간단한 로그인 기능입니다.
<div class = "title">Fish Dalle3</div>
<jsp:include page="${lp }"></jsp:include>
</div>
Landing Page에 jsp의 내장 기능인 include를 사용해서
로그인 폼을 구현 했습니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "resources/css/login.css">
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="login-section">
<form action="/game/login" method="post">
ID : <input name="u_id" class="login-input-id" autofocus="autofocus"><br>
PW : <input name="u_pw" class="login-input-pw" type="password">
<br>
<div class="button-container">
<button class="login-btn">LOG IN</button>
<button class="Signup-btn" formaction="/game/signupGo">SIGN UP</button>
</div>
</form>
<div class = "isLogin">
<h4>${isLogin }</h4>
</div>
</div>
</body>
</html>
Login.jsp의 코드입니다.
form action으로 로그인 요청을 처리합니다.
Id와 Passeword를 u_id와 u_pw에 담아서 파라미터로 넘깁니다.
/login으로 POST 요청을 보내면
@Autowired
LoginDAO lDAO;
@RequestMapping(value = "/login", method = RequestMethod.POST)
public String Login(Login l, HttpServletRequest req) {
lDAO.login(l, req);
String id = req.getParameter("u_id");
req.setAttribute("ID", id);
if(req.getAttribute("isLogin").equals("로그인 성공")) {
return "main";
}else {
req.setAttribute("lp", "login.jsp");
return "landing";
}
}
loginController에서 요청을 받습니다.
LoginDAO 객체를 Autowired로 가져와서
DAO의 로그인 기능을 수행합니다.
이때 ID는 Attribute로 지정해서 게임 내에서
닉네임으로 사용할 예정입니다.
다음은 DAO 코드입니다.
@Autowired
SqlSession ss;
public void login(Login l, HttpServletRequest req) {
List<Login> login = ss.getMapper(LoginMapper.class).getMemberById(l);
if (login == null || login.isEmpty()) {
req.setAttribute("isLogin", "아이디가 존재하지 않습니다.");
return;
}
Login lgn = login.get(0);
if (lgn.getU_pw().equals(l.getU_pw())) {
req.setAttribute("isLogin", "로그인 성공");
req.getSession().setAttribute("loginMember", lgn);
req.getSession().setMaxInactiveInterval(600);
} else {
req.setAttribute("isLogin", "비밀번호가 일치하지 않습니다.");
}
}
LoginMapper에 매핑된 Mybatis메소드를 실행하는데요.
데이터베이스에 있는 회원가입한 유저 정보를 불러옵니다.
이때 데이터가 존재하지 않으면 Attribute에 오류메세지를 지정합니다.
받아온 로그인 정보 객체의 비밀번호와 DB에 있는 비밀번호가 같다면
로그인 성공 처리를 합니다.
다음은 Mapping을 위한 자바 클래스입니다.
package com.puft.game;
public class Login {
private String u_id;
private String u_pw;
public Login() {
}
public Login(String u_id, String u_pw) {
super();
this.u_id = u_id;
this.u_pw = u_pw;
}
public String getU_id() {
return u_id;
}
public void setU_id(String u_id) {
this.u_id = u_id;
}
public String getU_pw() {
return u_pw;
}
public void setU_pw(String u_pw) {
this.u_pw = u_pw;
}
}
DB에 저장된 컬럼명과 변수명을 같게합니다.
다음은 MyBatis의 Mapper 코드입니다.
<?xml version="1.0" encoding="UTF-8"?>
<mapper namespace="com.puft.game.LoginMapper">
<select id="getMemberById" parameterType="com.puft.game.Login" resultType="com.puft.game.Login"> select * from userLogin where u_id = #{u_id} </select>
<insert id="signUp" parameterType="com.puft.game.Login"> insert into userLogin values(#{u_id}, #{u_pw}) </insert>
</mapper>
LoginMapper 인터페이스를 namespace로 지정하고
id 값을 조회하는 select 문과
회원가입 시 DB에 정보를 삽입하는 insert문을 각각 작성해주었습니다.
package com.puft.game;
import java.util.List;
public interface LoginMapper {
public abstract List<Login> getMemberById(Login l);
public abstract int signUp(Login l);
}
Mapper 인터페이스에는 DAO의 메소드에 들어갈 파라미터와 리턴타입을 신경써주어야 합니다.
이렇게 하면 DB의 데이터와 성공적으로 맵핑이 되고
로그인을 진행할 수 있습니다.
다음은 회원가입 부분을 살펴보겠습니다.
<button class="Signup-btn" formaction="/game/signupGo">SIGN UP</button>
랜딩페이지에서 Sign Up 버튼을 누르면 signupGo로 요청을 보내고
이 요청을 컨트롤러에서 받으면
@RequestMapping(value = "/signupGo", method = RequestMethod.POST)
public String signupGo( HttpServletRequest req) {
req.setAttribute("lp", "register.jsp");
return "landing";
}
register.jsp를 보여줍니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "resources/css/login.css">
<script type="text/javascript" src="resources/js/BeaverValidChecker.js"></script>
<script type="text/javascript" src="resources/js/isValid.js"></script>
</head>
<body>
<div class= "login-section">
<form action = "/game/signup" method = "post" name = "f" onsubmit="return check();">
ID : <input name = "u_id" class = "login-input-id" autofocus = "autofocus" placeholder = "영어 또는 숫자"><p>
PW : <input name = "u_pw" class = "login-input-pw" autofocus = "autofocus" placeholder = "7글자 이상" type = "password"><p>
PW Check: <input name = "u_pw_check" class = "login-input-pw" autofocus = "autofocus" placeholder = "PW Check" type = "password"><p>
<br>
<button class = "Signup-btn">SIGN UP</button>
</form>
</div>
</body>
</html>
register.jsp에서는 form의 input으로
아이디, 비밀번호, 확인용 비밀번호를 입력받고
signup 경로로 POST 요청을 보내게됩니다.
이때 각각 유효성 검사를 하는 로직도 추가하였습니다.
function check(){
let u_id = document.f.u_id;
let u_pw = document.f.u_pw;
let u_pw_check = document.f.u_pw_check;
if(isEmpty(u_id)){
alert("아이디를 다시 입력해주세요!");
return false;
}else if(isEmpty(u_pw)){
alert("비밀번호를 다시 입력해주세요!");
return false;
}else if(atLeastLetter(u_pw, 7)){
alert("비밀번호는 7글자 이상 입력해주세요!");
return false;
}else if(isEmpty(u_pw_check)){
alert("확인용 비밀번호를 다시 입력해주세요!");
return false;
}else if(notEqualPw(u_pw, u_pw_check)){
alert("비밀번호가 확인용 비밀번호와 다릅니다.");
return false;
}
return true;
}
유효성 검사를 통과한다면
@RequestMapping(value = "/signup", method = RequestMethod.POST)
public String signup(Login l, HttpServletRequest req) {
req.setAttribute("lp", "login.jsp");
lDAO.signUp(l, req);
return "landing";
}
signup의 post 컨트롤러에 내용을 실행합니다.
LoginDAO의 signUp 메소드를 실행하고
다시 로그인 폼의 내용을 띄웁니다.
public void signUp(Login l, HttpServletRequest req) {
l.setU_id(req.getParameter("u_id"));
l.setU_pw(req.getParameter("u_pw"));
if (ss.getMapper(LoginMapper.class).signUp(l) == 1) {
req.setAttribute("isLogin", "회원가입 성공");
}
}
로그인 DAO를 보면
폼으로 입력받은 아이디와 비밀번호를
로그인 객체에 넣고 맵핑 시켜서 signUp Mapper 메소드를 실행합니다.
성공하면 "회원가입 성공" 메세지를 띄웁니다.
signUp Mapper는 앞에서 본 것과 같이
<insert id="signUp" parameterType="com.puft.game.Login"> insert into userLogin values(#{u_id}, #{u_pw}) </insert>
DB에 insert하는 내용입니다.
회원가입에 성공헀습니다.
로그인에 성공하면 Game페이지로 이동하게 됩니다.
이번 프로젝트에서는 Spring의 MVC패턴을 사용해서
로그인을 구현해봤습니다.
