에러 탈출 일지

[Spring] 아이디 찾기, 비밀번호 찾기

뉴NEW — Thu, 29 Dec 2022 00:30:40 +0900

아이디 찾기 폼

<main>
<div class="form-wrapper">
    <form id="searchIdForm">
        <h3>아이디 찾기</h3>
        <div class="input-wrapper" style="display:block; margin:20px auto;">
            <input type="text" id="userName" name="userName" placeholder=" 이름" required>
        </div>
        <div class="input-wrapper" style="display:block; margin:20px auto;">
            <input type="text" id="userBirth" name="userBirth" placeholder=" 생년월일 8자리(ex.19001201)" required>
        </div>
        <div id="resultIdDiv" style="display: none; font-weight: bold; font-style: italic; ">
            <p id="searchIdResult"></p>
        </div>
        <div style="display:block; margin:20px auto; padding-top:15px;">
            <button type="button" id="btnFindId">확 인</button>
        </div>
        <div class="login_append">
        <span class="txt_find">
           <a href="/user/login.do" class="link_find">로그인</a>
            |
           <a href="/user/searchPw.do" class="link_find">비밀번호 찾기</a>
            |
           <a href="/user/join.do" class="link_find">회원가입</a>
         </span>
       </div>	
    </form>
</div>
</main>

< controller >

아이디 찾기

@Controller
@RequestMapping("/user")
public class UserController {
	@Autowired
	private UserService userService;

	// 아이디 찾기 화면으로 이동
	@RequestMapping(value = "/searchId.do", method = RequestMethod.GET)
	public String searchIdView(HttpServletRequest request, Model model,
	        UserVO searchVO) {
	    
	    return "/user/searchId";
	}
	// 아이디 찾기 결과
	@PostMapping("/searchId.do")
	@ResponseBody
	public String searchId(UserVO userVO) throws JsonProcessingException {
		String userId = userService.searchId(userVO);
		
		ObjectMapper mapper = new ObjectMapper();
		Map<String, String> resultMap = new HashMap<String, String>();
		
		if(userId != null) {
			resultMap.put("msg", "ok");
			resultMap.put("searchId", userId);
		} else {
			resultMap.put("msg", "fail");
		}
		
		String jsonStr = mapper.writerWithDefaultPrettyPrinter().writeValueAsString(resultMap);
		
		return jsonStr;
	}
	
}

< service >

public interface UserService {
	// 아이디 찾기
	String searchId(UserVO searchVO);
		
	// 비밀번호 찾기
	String searchPw(UserVO searchVO);	
}

< serviceimpl >

@Service
public class UserServiceImpl implements UserService {
	@Autowired
	private UserDAO userDAO;

	// 아이디 찾기
	@Override
	public String searchId(UserVO searchVO) {
		return userDAO.searchId(searchVO);
	}
	// 비밀번호 찾기
	@Override
	public String searchPw(UserVO searchVO) {
		return userDAO.searchPw(searchVO);
	}
}

< DAO >

@Repository
public class UserDAO {
	@Autowired
	private SqlSessionTemplate mybatis;

	// 아이디 찾기
	public String searchId(UserVO searchVO) {
		return mybatis.selectOne("UserDAO.searchId",searchVO);
	}
	
	// 비밀번호 찾기
	public String searchPw(UserVO searchVO) {
		return mybatis.selectOne("UserDAO.searchPw",searchVO);
	}

}

mapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="UserDAO">
	<!-- 쿼리 작성 영역 -->
	<select id="searchId" parameterType="user" resultType="string">
	<![CDATA[
		SELECT USER_ID FROM AL_USER
			WHERE USER_NAME = #{userName}
			  AND USER_BIRTH = #{userBirth}
			  AND USER_USE_YN = 'Y'
	
	]]>    
	</select>
	
	<select id="searchPw" parameterType="user" resultType="string">
	<![CDATA[
		SELECT USER_PW FROM AL_USER
			WHERE USER_ID = #{userId}
			  AND USER_NAME = #{userName}
			  AND USER_BIRTH = #{userBirth}
	
	]]>    
	</select>
</mapper>

< script >

아이디 찾기

<script>
    $(function() {
        $("#btnFindId").on("click", function() {
            console.log($("#searchIdForm").serialize());

            $.ajax({
                url: "/user/searchId.do",
                type: "post",
                data: $("#searchIdForm").serialize(),
                success: function(obj) {
                    const data = JSON.parse(obj);

                    console.log(data);

                    $("#resultIdDiv").show();

                    if(data.msg == "ok") {
                        $("#searchIdResult").text("아이디는 " + data.searchId +" 입니다.");
                    } else{
                        $("#searchIdResult").text("존재하지 않는 사용자입니다.");
                    }
                },
                error: function(e) {
                    console.log(e);
                }
            });
        });
    });

</script>

아이디 찾기

비밀번호 찾기 폼

<main>
<div class="form-wrapper">
    <form id="searchPwForm">
        <h3>비밀번호 찾기</h3>
        <div class="input-wrapper" style="display:block; margin:20px auto;">
            <input type="text" id="userId" name="userId" placeholder=" 아이디" required>
        </div>
        <div class="input-wrapper" style="display:block; margin:20px auto;">
            <input type="text" id="userName" name="userName" placeholder=" 이름" required>
        </div>
        <div class="input-wrapper" style="display:block; margin:20px auto;">
            <input type="text" id="userBirth" name="userBirth" placeholder=" 생년월일 8자리(ex.19001201)" required>
        </div>
        <div id="resultPwDiv" style="display: none; font-weight: bold; font-style: italic;">
            <p id="searchPwResult"></p>
        </div>
        <div style="display:block; margin:20px auto; padding-top:15px;">
            <button type="button" id="btnFindPw">확 인</button>
        </div>

        <div class="login_append">
        <span class="txt_find">
           <a href="/user/login.do" class="link_find">&nbsp;&nbsp;&nbsp;로그인</a>
            |
           <a href="/user/searchId.do" class="link_find">아이디 찾기</a>
            |
           <a href="/user/join.do" class="link_find">회원가입</a>
         </span>
       </div>	
    </form>
</div>
</main>

< controller >

비밀번호 찾기

@Controller
@RequestMapping("/user")
public class UserController {
	@Autowired
	private UserService userService;
	
	// 비밀번호 찾기 화면으로 이동
	@RequestMapping(value = "/searchPw.do", method = RequestMethod.GET)
	public String searchPwView(HttpServletRequest request, Model model,
	        UserVO searchVO) {
	    
	    return "/user/searchPw";
	}
	
	// 비밀번호 찾기 결과
	@PostMapping("/searchPw.do")
	@ResponseBody
	public String searchPw(UserVO userVO) throws JsonProcessingException {
		String userPw = userService.searchPw(userVO);
		
		ObjectMapper mapper = new ObjectMapper();
		Map<String, String> resultMap = new HashMap<String, String>();
		
		if(userPw != null) {
			resultMap.put("msg", "ok");
			resultMap.put("searchPw", userPw);
		} else {
			resultMap.put("msg", "fail");
		}
		
		String jsonStr = mapper.writerWithDefaultPrettyPrinter().writeValueAsString(resultMap);
		
		return jsonStr;
	}

}

< script >

비밀번호 찾기

<script>
    $(function() {
        $("#btnFindPw").on("click", function() {
            console.log($("#searchPwForm").serialize());

            $.ajax({
                url: "/user/searchPw.do",
                type: "post",
                data: $("#searchPwForm").serialize(),
                success: function(obj) {
                    const data = JSON.parse(obj);

                    console.log(data);

                    $("#resultPwDiv").show();

                    if(data.msg == "ok") {
                        $("#searchPwResult").text("비밀번호는 " + data.searchPw +" 입니다.");
                    } else{
                        $("#searchPwResult").text("아이디가 존재하지 않습니다.");
                    }
                },
                error: function(e) {
                    console.log(e);
                }
            });
        });
    });

</script>

비밀번호 찾기

[Spring] 로그인 페이지 만들기

뉴NEW — Thu, 29 Dec 2022 00:15:27 +0900

로그인 폼

<main>
<div class="form-wrapper">
    <form id="loginForm">
        <h3>AC LEARN</h3>
        <div class="input-wrapper" style="display:block; margin:20px auto;">
            <input type="text" id="userId" name="userId" placeholder=" ID" required>
        </div>
        <div class="input-wrapper" style="display:block; margin:20px auto;">
            <input type="password" id="userPw" name="userPw" placeholder=" Password" required>
        </div>
        <div style="display:block; margin:20px auto;">
            <button type="button" id="btnLogin">LOGIN</button>
        </div>

        <div class="login_append">
        <span class="txt_find">
           <a href="/user/searchId.do" class="link_find">아이디 찾기</a>
            |
           <a href="/user/searchPw.do" class="link_find">비밀번호 찾기</a>
            |
           <a href="/user/join.do" class="link_find">회원가입</a>
         </span>
       </div>

    </form>
</div>
</main>

로그인 화면에 아이디 찾기, 비밀번호 찾기, 회원가입 페이지로 넘어갈 수 있게 구현

< Controller >

@Controller
@RequestMapping("/user")
public class UserController {
	@Autowired
	private UserService userService;
    
	// 로그인 화면으로 이동
	@GetMapping("/login.do")
	public String loginView() {
		return "user/login";
	}
	// 로그인 처리
	@PostMapping("/login.do")
	@ResponseBody
	public String login(UserVO userVO, HttpSession session) {
		
		// 1. 아이디 체크
		int idCheck = userService.idCheck(userVO.getUserId());
		System.out.println(idCheck);
	   	 if(idCheck < 1) {
		   return "idFail";
	   	 } else {
		   UserVO loginUser = userService.login(userVO);
		   
		   // 2. 비밀번호 체크
		   if(loginUser == null) {
			   return "pwFail";
		   }
		   // 3. 로그인 성공
		   session.setAttribute("loginUser", loginUser);
		   return "loginSuccess";
	    }
	}
}

아이디가 1개 보다 적을 때(즉, 존재 하지 않을 때) 로그인 실패

< service >

public interface UserService {
	// 로그인
	UserVO login(UserVO userVO);	
}

< serviceimpl >

@Service
public class UserServiceImpl implements UserService {
	@Autowired
	private UserDAO userDAO;

	// 로그인
	@Override
	public UserVO login(UserVO userVO) {
		return userDAO.login(userVO);
	}
}

< DAO >

@Repository
public class UserDAO {
	@Autowired
	private SqlSessionTemplate mybatis;
	

	// 로그인 
	public UserVO login(UserVO userVO) {
		return mybatis.selectOne("UserDAO.login",userVO);
	}

}

mapper.xml 파일에 쿼리문 작성

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="UserDAO">
	<!-- 쿼리 작성 영역 -->
	<select id="login" parameterType="user" resultType="user">
	<![CDATA[
		SELECT USER_ID
			,USER_PW
			,USER_NAME
			,USER_NICKNAME
			,USER_BIRTH
			FROM AL_USER
			WHERE USER_ID = #{userId}
			  AND USER_PW = #{userPw}
			  AND USER_USE_YN = 'Y'
	]]>
	</select>
</mapper>

< script >

<script>  
  $(function() {
     //로그인 시 아이디나 비밀번호가 틀렸을 경우에 대비하여 폼 서브밋 대신 ajax로 처리
     $("#btnLogin").on("click", function() {
        $.ajax({
           url: "/user/login.do",
           type: "post",
           data: $("#loginForm").serialize(),
           success: function(obj) {
              console.log(obj);
              if(obj =="idFail") {
                 alert("존재하지 않는 아이디입니다.");
                 $("#userId").focus();
                 return;
              }

              if(obj == "pwFail") {
                 alert("비밀번호가 틀렸습니다. 비밀번호를 확인해주세요");
                 $("#userPw").focus();
                 return;
              }
              // 로그인 성공시 홈화면으로 처리
              location.href="/index.jsp";
           },
           error: function(e) {
              console.log(e);
           }
        });
     });
  });
 </script>

아이디가 존재하지 않을 때

비밀번호가 틀렸을 때

[Spring] 회원가입 페이지 만들기 (중복체크, 유효성 검사)

뉴NEW — Wed, 28 Dec 2022 20:27:43 +0900

회원가입 폼

join.jsp 파일에 회원가입 폼을 만들어주고 스크립트에 중복체크 및 유효성 체크를 해준다.

<main>
<div class="form-wrapper">
    <form id="joinForm" action="/user/join.do" method="post">
    <h2>회원가입</h2>
    <p>ACLearn에서 새로운 성장의 기회를 얻으세요.</p><br>
    <div class="input-area">
        <div class="input-wrapper" >
            <label for="userId" >아이디</label>
        </div>
        <div>
            <input type="text" id="userId" name="userId" size="38"
                    placeholder="영문, 숫자 조합으로 8~16자리" required >
            <button type="button" id="btnIdCheck" style="width: 70px; height: 40px;">중복체크</button>
        </div>
        <p id="idValidation" style="color:red; font-size:0.5rem;">
            아이디는 영문, 숫자 조합의 8~16자리로 설정해주세요.
        </p>
        <div class="input-wrapper" >
            <label for="userPw">비밀번호</label>
        </div>
        <div>
            <input type="password" id="userPw" name="userPw" size="50"
                    placeholder="영문, 숫자, 특수문자 조합으로 8~16자리" required>
        </div>
        <p id="pwValidation" style="color:red; font-size:0.5rem;">
            비밀번호는 영문, 숫자, 특수문자 조합의 8~16자리로 설정해주세요.
        </p>
        <div class="input-wrapper" >
            <label for="userPwCheck">비밀번호 확인</label>
        </div>
        <div>
            <input type="password" id="userPwCheck" name="userPwCheck" size="50"
                    placeholder="영문, 숫자, 특수문자 조합으로 8~16자리" required>
        </div><br>
        <p id="pwCheckResult" style="font-size:0.8rem;">

        </p>
        <div class="input-wrapper" >
            <label for="userName">이름</label>
        </div>
        <div>
            <input type="text" id="userName" name="userName" size="50" 
                    placeholder="이름" required>
        </div>
        <div class="input-wrapper" >
            <label for="userNickname">닉네임</label>
        </div>
        <div>		
            <input type="text" id="userNickname" name="userNickname" size="38"
                    placeholder="영문, 한글, 숫자 조합으로 2~10자리"required>
            <button type="button" id="btnNickCheck" style="width: 70px; height: 40px;">중복체크</button>
        </div>
        <p id="nickValidation" style="color:red; font-size:0.5rem;">
            닉네임은 영문, 한글, 숫자 조합의 2~10자리로 설정해주세요.
        </p>
        <div class="input-wrapper" >
            <label for="userBirth">생년월일</label>
        </div>
        <div>
            <input type="text" id="userBirth" name="userBirth" size="50" 
                    placeholder="생년월일 8자리(ex.19001201)" >
        </div><br>
        <div style="display: block; margin: 20px auto;">
            <button type="submit" id="btnJoin">확 인</button>
        </div>
    </div>
</form>
</div>
</main>

Controller → Service → Serviceimpl → DAO → mapper

< Controller >

아이디 - 중복체크 및 유효성 검사

@Controller
@RequestMapping("/user")
public class UserController {
	@Autowired
	private UserService userService;
	
	// 회원가입 화면으로 이동
	@GetMapping("/join.do")
	public String joinView() {
		return "user/join";
	}
	
	// 회원가입 진행
	@PostMapping(value="/join.do", produces="application/text; charset=UTF-8")
    	public String join(UserVO userVO, Model model) {
		int joinResult = userService.join(userVO);
      
		if(joinResult == 0) {
			model.addAttribute("joinMsg", "회원가입에 실패하셨습니다. 관리자에게 문의해주세요.");
			return "/user/join";
		} 
		model.addAttribute("joinMsg", "회원가입에 성공했습니다. 로그인해주세요.");
		return "user/login";
	}


	// 아이디 중복체크
	@PostMapping("/idCheck.do")
	@ResponseBody
	public String idCheck(UserVO userVO) throws JsonProcessingException {
		
		String returnStr ="";
		int idCnt=userService.idCheck(userVO.getUserId());
		
		// 아이디가 중복일 때 
		if(idCnt > 0) { 
			returnStr ="duplicatedId";

		}else {
			returnStr = "idOk";
		}
		return returnStr;
	}
}

< Service >

public interface UserService {
	// 회원가입
	int join(UserVO userVO);
    
    	// 아이디 중복체크
	int idCheck(String userId);
}

< Serviceimpl >

@Service
public class UserServiceImpl implements UserService {
	@Autowired
	private UserDAO userDAO;
	
	// 회원가입
	@Override
	public int join(UserVO userVO) {
		return userDAO.join(userVO); 
	}
    
	// 아이디 중복체크
	@Override
	public int idCheck(String userId) {
		return userDAO.idCheck(userId);
	}
}

< DAO >

@Repository
public class UserDAO {
	@Autowired
	private SqlSessionTemplate mybatis;
	
	// 회원가입	
	public int join(UserVO userVO) {
		 return mybatis.insert("UserDAO.join",userVO);
	}

	// 아이디 중복체크
	public int idCheck(String userId) {
		return mybatis.selectOne("UserDAO.idCheck",userId);
	}

}

mapper.xml 파일에 쿼리문 작성

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="UserDAO">
	<!-- 쿼리 작성 영역 -->
	<insert id="join" parameterType="user">
	<![CDATA[
		INSERT INTO AL_USER(
			USER_ID,
			USER_PW,
			USER_NAME,
			USER_NICKNAME,
			USER_BIRTH,
			USER_REGDATE,
			USER_MODFDATE,
			USER_USE_YN
		) VALUES (
			#{userId},
			#{userPw},
			#{userName},
			#{userNickname},
			#{userBirth},
			NOW(),
			NOW(),
			'Y'
		)
	]]>
	</insert>
</mapper>

< script >

아이디 - 중복체크 및 유효성 검사

<script>
    $(function(){
        // 아이디 중복체크 했는지 확인
        var checkId = false;
        // 아이디가 형식에 맞는지
        var idValidation = false;
        // 닉네임 중복체크
        var nicknameCheck = false;
        // 닉네임이 형식에 맞는지
        var nickValidation = false;

        $("#idValidation").hide();
        $("#nickValidation").hide();

        // 아이디 중복체크
        $("#btnIdCheck").on("click",function(){
            console.log($("#joinForm").serialize());
            console.log($("#joinForm"));
            $.ajax({
                url: '/user/idCheck.do',
                type: 'post',
                data: $("#joinForm").serialize(),
                success: function(obj){
                    console.log(obj);

                    if(obj == 'duplicatedId'){
                        alert("중복된 아이디입니다.");
                        $("#userId").focus();
                    } else {
                        if(confirm("사용 가능한 아이디 입니다. '" + $("#userId").val() + 
                                "'를(을) 사용하시겠습니까?")) {
                            checkId = true;
                            $("#btnIdCheck").attr("disabled", true);
                        }
                    }
                },
                error: function(e){
                    console.log(e);
                }
            })				
        });

        // 아이디 중복체크 후 다시 아이디를 변경했을 때
        $("#userId").on("change",function(){
            checkId = false;
            $("#btnIdCheck").attr("disabled", false);
        });

        // 아이디 유효성 - 영문, 숫자 조합으로 8~16자리
        $("#userId").on("change", function(){
            var regexId = /^(?=.*[a-zA-Z])(?=.*[0-9]).{8,16}$/;
            var resultId = regexId.exec($("#userId").val());

              if(resultId != null){
                  $("#idValidation").hide(); 
               }else{
                   $("#idValidation").show();
                   $("#userId").focus();
                   $("#btnIdCheck").attr("disabled", true);
               }
        });
    });
</script>

- ajax 이용

- 아이디 중복체크 했는데 또 다시 아이디 변경하면 중복체크한 버튼 다시 눌리도록 설정해줌.

아이디 유효성 검사

alert 창

중복된 아이디일 때

< script >

비밀번호 - 일치 및 유효성 검사

<script>
    $(function(){
        // 비밀번호가 형식에 맞는지
        var pwValidation = false;
        // 비밀번호 확인란과 일치하는지
        var pwCheck = false;

        $("#pwValidation").hide();
        $("#pwCheckResult").hide();
 
        // 비밀번호 유효성 검사 - 영문, 숫자, 특수문자 조합으로 8~16자리
        function validatePassword(character){
            return /^(?=.*[a-zA-Z])(?=.*[!@#$%^&*+=-])(?=.*[0-9]).{8,16}$/.test(character);
        }
        
        // 비밀번호 입력될때마다 유효성 검사
        $("#userPw").on("change",function(){
            // 비밀번호 유효성 처리
            if(!validatePassword($("#userPw").val())){
                pwValidation = false;
                $("#pwValidation").show();
                $("#userPw").focus();
            } else {
                pwValidation = true;
                $("#pwValidation").hide();
            }

            // 비밀번호 확인까지 입력한 후 다시 비밀번호 재설정할 경우
            if($("#userPw").val() == $("#userPwCheck").val()){
                pwCheck = true;
                $("#pwCheckResult").css("color", "green");
                $("#pwCheckResult").text("비밀번호가 일치합니다.");
            } else {
                pwCheck = false;
                $("#pwCheckResult").css("color", "red");
                $("#pwCheckResult").text("비밀번호가 일치하지 않습니다.");
            }
        });

        // 비밀번호 확인란 입력할 때 일치하는지
        $("#userPwCheck").on("change", function(){
            $("#pwCheckResult").show();

            if($("#userPw").val() == $("#userPwCheck").val()){
                pwCheck = true;
                $("#pwCheckResult").css("color", "green");
                $("#pwCheckResult").text("비밀번호가 일치합니다.");
            } else {
                pwCheck = false;
                $("#pwCheckResult").css("color", "red");
                $("#pwCheckResult").text("비밀번호가 일치하지 않습니다.");
            }
        });
    });
</script>

비밀번호는 입력할때마다 유효성 검사하게 설정

유효성에 맞지 않을 시

올바른 유효성일때 빨간 문구가 사라진다

< Controller >

닉네임 - 중복체크 및 유효성 검사

@Controller
@RequestMapping("/user")
public class UserController {
	@Autowired
	private UserService userService;
	
	// 닉네임 중복체크
	@PostMapping("/nicknameCheck.do")
	@ResponseBody
	public String nicknameCheck(UserVO userVO) throws JsonProcessingException {
		System.out.println(userVO.getUserNickname());

		String returnStr ="";
		int nickCnt=userService.nicknameCheck(userVO.getUserNickname());
		
		if(nickCnt > 0) {
			returnStr ="duplicatedNickname";
			
		}else {
			returnStr = "nicknameOk";
		}
		return returnStr;	
	}
}

service , serviceimpl, DAO 파일 모두 위에 아이디 중복체크와 같은 방식으로 작성

mappte.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="UserDAO">
	<!-- 쿼리 작성 영역 -->
	<select id="nicknameCheck" parameterType="String" resultType="int">
		SELECT COUNT(USER_NICKNAME)
			FROM AL_USER
			WHERE USER_NICKNAME = #{userNickname}	
	</select>
</mapper>

< script >

닉네임 - 중복체크 및 유효성 검사

<script>
    $(function(){
        // 닉네임 중복체크
        var nicknameCheck = false;
        // 닉에임이 형식에 맞는지
        var nickValidation = false;

        $("#nickValidation").hide();

        // 닉네임 중복체크
        $("#btnNickCheck").on("click",function(){
            $.ajax({
                url: '/user/nicknameCheck.do',
                type: 'post',
                data: $("#joinForm").serialize(),
                success: function(obj){
                    console.log(obj);

                    if(obj == 'duplicatedNickname'){
                        alert("중복된 닉네임 입니다.");
                        $("#userNickname").focus();
                    } else {
                        if(confirm("사용 가능한 닉네임 입니다. '" + $("#userNickname").val() + 
                                "'를(을) 사용하시겠습니까?")) {
                            nicknameCheck = true;
                            $("#btnNickCheck").attr("disabled", true);
                        }
                    }
                },
                error: function(e){
                    console.log(e);
                }
            })

        });

        // 닉네임 중복체크 후 다시 변경
        $("#userNickname").on("change",function(){
            nicknameCheck = false;
            $("#btnNickCheck").attr("disabled", false);
        });

        // 닉넴 유효성 - 영문, 한글, 숫자 조합으로 2~10자리
        $("#userNickname").on("change", function(){
            var regexNick = /^(?=.*[a-z0-9가-힣])[a-z0-9가-힣]{2,10}$/;
            var resultNick = regexNick.exec($("#userNickname").val());

              if(resultNick != null){
                  $("#nickValidation").hide(); 
               }else{
                   $("#nickValidation").show();
                   $("#userNickname").focus();
                   $("#btnNickCheck").attr("disabled", true);
               }
        });
    });
</script>

올바른 유호성일 때 빨간 문구가 사라진다

alert 창

중복체크 하지 않고 회원가입 버튼 클릭시

<script>
    $(function(){
        // 회원가입 제출했을 때
        $("#joinForm").on("submit", function(e){
            // 아이디 중복체크가 안됐거나, 중복된 아이디 사용했을 때
            if(!checkId) {
                alert("아이디 중복체크를 진행하세요.");
                $("#userId").focus();
                e.preventDefault();
                return false;
            } 

            // 비밀번호 유효성 검사가 틀렸을 때
            if(!pwValidation){
                alert("영문, 숫자, 특수문자 조합의 8~16자리로 설정하세요.");
                $("#userPw").focus();
                e.preventDefault();
                return;
            }
            // 비밀번호와 비밀번호 확인이 일치하지 않을 때
            if(!pwCheck) {
                alert("비밀번호가 일치하지 않습니다.");
                $("#userPwCheck").focus();
                e.preventDefault();
                return;
            }

            // 닉네임 중복체크
            if(!nicknameCheck) {
                alert("닉네임 중복체크를 진행하세요.");
                $("#userNickname").focus();
                e.preventDefault();
                return false;
            } 
            // 모두 true일 경우 아무것도 작성하지 X
            alert("회원가입이 완료되었습니다!");
        });
    });
</script>

회원가입 성공

<script>  
  $(function() {
     //회원가입 성공 시 메시지 출력
     if($("#joinMsg").val() != "" && $("#joinMsg").val() != null) {
        alert($("#joinMsg").val());
     }
 </script>

alert창

FileZilla 설치하기

뉴NEW — Fri, 16 Dec 2022 10:56:13 +0900

https://filezilla-project.org/download.php?platform=win64#close

[AWS] SpringBoot 배포

뉴NEW — Thu, 15 Dec 2022 16:52:16 +0900

AWS 환경설정

https://error-out.tistory.com/243

Jar 실행

root@ip-172-31-11-244:/home/ubuntu# java -jar _07_SpringBoot_SpringSecurity-0.0.1-SNAPSHOT.jar java -jar _07_SpringBoot_SpringSecurity-0.0.1-SNAPSHOT.jar

글 2개 있으니까

board 3번부터 시작하니까 NEXT_VAL= 3으로

만약 글 번호가 순서대로 되지 않는다면

순서대로 진행하기. (ex. 3번부터 시작한다)

[AWS] Linux Utuntu EC2 환경설정

뉴NEW — Thu, 15 Dec 2022 11:06:09 +0900

무료 클라우드 컴퓨팅 서비스 - AWS 프리 티어

Q: AWS 프리 티어란 무엇입니까? AWS 프리 티어는 고객에게 서비스별로 지정된 한도 내에서 무료로 AWS 서비스를 살펴보고 사용해 볼 수 있는 기능을 제공합니다. 프리 티어는 12개월 프리 티어, 상

aws.amazon.com

aws 무료 가입

- 1년 무료 (이후 사용은 자동 결제 됨)

- 인스턴스 중지 = 클라우드 OFF

- 인스턴스 종료 = 인스턴스 삭제 ( 종료해야 결제 안 됨)

EC2 사용

서버 사용할수록 여기에 추가됨

인스턴스 시작 눌러서 설정해주기

Ubuntu Linux 18.04 설정

윈도우는.ppk / 맥북은 .pem 으로 설정

키페어 생성 누르면 .ppk 파일이 다운 받아진다

키페어 털리면 요금 폭탄

깃(git)에 올리지 말 것!

네트워크 설정 > 편집 > 보안 그룹 규칙 추가 4개

소스 유형 - 위치 무관

보안 그룹 규칙1) 웹 서버에 포트 열어주기

보안 그룹 규칙2) MYSQL 3306 포트로 열어주기

보안 그룹 규칙3) tomcat, was에 8080 포트로 열어주기

보안 그룹 규칙4) springboot에 9090 포트로 열어주기

0.0.0.0/0 어떤 아이피에 :/0 어떤 포트를 접속해서 열어주는

(소스가 0.0.0.0/0인 규칙은 모든 IP 주소에서 인스턴스에 액세스하도록 허용합니다. 알려진 IP 주소의 액세스만 허용하도록 보안 그룹을 설정하는 것이 좋습니다.)

여기까지 설정하고 인스턴스 시작

윈도우

맥북- 복사에서 터미널에 복붙

PuTTY

Session에서 host name에 퍼블릭 DNS 쓰기

SSH > Auth > Credentials > 브라우저 누르고 .ppk 파일 가지고 오기 > open

인스터스에서 사용자이름 확인 > 입력하기

사용자 이름

명령어

cd .. 상위폴더 가기

cd / 폴더이름 - 폴더 이름로 가기

ls 지금 현재 잇는 폴더에 파일이나 디렉토리 확인하기

ls -i

ls -a 숨긴 파일까지 볼 수 있다

ls -s 파일 크기 순으로 보기

sudo su - 관리자 권한으로 바뀜 > root ~ #으로 표시됨

안돼면,  # cd .home/사용자이름

JAVA 설치

apt-get install openjdk-11-jdk 입력 > y 입력 > 완료

which java 경로 찾기 > 경로: /user/bin/java

실제 경로 찾기 > readlink -f /user/bin/java

ubuntu = 사용자 이름

실제경로 > /usr/lib/jvm/java-11-openjdk-amd64/bin

(여기서 bin을 지우고 /usr/lib/jvm/java-11-openjdk-amd64만 기억해둘 것)

i 누르면 인설트 편집모드> esc누르면 나감

export 경로

esc 누르고 (ESC가 안먹힐 경우 -> 키보드 Fn키 풀기)

:wq 저장하고 나오기

:q! 저장하지 않고 나오기

ctrl + c 저장하지 않고 나오기

환경변수 적용 확인

지정 경로 비교해보고 똑같으면 설치 완료

MYSQL 설치

apt-get install mysql-server 입력 > y 입력 > 완료

dpkg -l | grep mysql-server > 잘 설치 되었는지 확인하는 명령어

5.7 버전으로 잘 설치 됨

cd /etc/mysql/mysql.conf.d >엔터치고 > vi mysqld.cnf =>편집기 열기
키보드 ↓ 눌러서, bind-address에서
로컬 호스트만 들어올 수 있게 설정(127.0.0.1)이 되어있는 것을 i를 눌러서 0.0.0.0로 편집 하고

esc 누르고 :wq 입력 (저장하고 나오기)

mysql utf-8로 변경

[client]
default-character-set=utf8

[mysql]
default-character-set=utf8

[mysqld]
collation-server=utf8_unicode_ci
init-connect='SET NAMES utf8'
character-set-server=utf8
lower_case_table_names=1

esc 누르고 :wq 입력

service mysql restart 재부팅하고 > mysql로 접속

create database studydb; 스키마 만들기

grant all privileges on studydb.* to 'study'@'%';

스터디디비에 모든 권한을 스터디한테 준다

flush privileges; 변환준 거 저장하고

퍼블릭 ipv4주소 복사해서

hostname에 복붙

스키마 이름

DDL 누르고 내용 복사해서

붙여넣기 ENGINE-InnoDB; 까지 입력하기

왼쪽 스키마 눌러서 테이블 생성 확인할 수 있다

링크 복사해서

다운받기

tar -zvxf a 하고 tab키 누르면 > 압축 풀기

cd apache-tomcat-9.0.70 >아파치 파일로 들어가서

sh startup.sh >톰캣 실행

http://퍼블릭 ipv4주소:8080

[SpringBoot] OAuth 라이브러리 개념

뉴NEW — Wed, 14 Dec 2022 12:16:10 +0900

1. OAuth 라이브러리란?

- Security와 함께 사용

- Open Authorization의 약자로 사용자들이 비밀번호는 제공하지 않고 다른 웹사이트나 어플리케이션에 존재하는 자신의 정보에 대한 접근 권한을 부여할 수 있는 개방형 접근 위임 라이브러리

ex) 카카로 로그인시 제공 정보를 선택한 후 동의 버튼을 누르면 그 사이트에서 카카오에 저장되어 있는 내 정보에 대한 접근 권한을 받아서 사용할 수 있게 된다.

2. OAuth 용어 정리

- 자원 소유자(Resource Owner): 정보를 가지고 있는 주체. 즉 사용자를 말한다.

- 자원 서버(REsource Server): 자원 소유자에 대한 정보를 가지고 있는 서버나 어플리케이션(카카오, 네이버, 구글 등)

- 인가 서버(Authorization Server): 자원 소유자를 인증하는 인증 서버. 다른 서버나 어플리케이션에서 자원 서버에 저장되어 있는 사용자 정보에 접근할 수 있는 권한을 AccesssToken을 발행해주는 서버

- 클라이언트(Client): 현재 자원 소유자가 사용하고 있는 웹사이트나 웹 어플리케이션. 자원 소유자의 동의를 통해 자원 서버에 있는 자원 소유주에 대한 정보를 취득할 수 있다.

사용자 → 간편 로그인 → 웹 사이트에서 자원 서버로 요청 → 자원 서버에서 사용자가 동의했으면 AccessToken발행 → 발행 받은 AccessToken을 통해 자원 서버에 있는 사용자 정보를 취득 → 웹 사이트에서 취득한 사용자 정보를 활용

JPA (Java Persistence API) 개념

뉴NEW — Thu, 8 Dec 2022 10:17:47 +0900

JPA(Java Persistence API)

1. JPA란?

- Java에서 사용하는 ORM(Object Relational Mapping) 기술 표준으로 인터페이스의 모음

- Java Class로 RDB(Relational DataBase) 테이블간의 관계를 표현

- 인터페이스를 Hibernate, OpenJPA를 사용하여 구현

2. 영속성(Persistence)

- 웹 어플리케이션이 종료되도 영원히 저장되어 있는 데이터(RDB)

3. 영속성 켄텍스트(Persistence Context)

- 웹 어플리케이션과 DB사이에서 엔터티와 데이터의 괴리를 해소시켜주는 기능과 엔터티를 보관하는 기능

4. 엔티티(Entity)

- 하나의 테이블에 대해 정의된 클래스

- 엔티티의 모양대로 테이블이 제작되며 엔티티매니저에 의해 Select, Insert, Delete, Update 기능을 사용할 수 있게 됨

5. 엔티티 매니저(Entity Manager)

- 엔티티를 가져가서 쿼리를 직접 수행하는 객체

- 엔티티 매니저를 상속받은 JpaRepository를 구현하여 DB에 접근하는 방식

1. JPA (Java Persitence API)

(1) Persistence(영속성): 우리가

(2) Entity(엔티티): 실제 DB에 생성될 테이블 클래스. 테이블의 이름, 키, 컬럼들을 정의

(3) 엔티티 클래스 선언 방식

1) 클래스 선언문 위에 @Entity를 붙여준다.

2) 시퀀스를 만들려면 @Entity밑에 @SequenceGnerdator로 시퀀스를 만든다.

3) 테이블 컬럼들을 정의한다.

4) 키 값으로 지정될 컬럼 위에 @Id를 불여준다.

5) 키 값의 전략은 @GeneratedValue를 사용하여 설정

- GenerationType.IDNTITY

- GenerationType.SEQUENCE

- GenerationType.AUTO

- GenerationType.TABLE

6) 특정 컬럼에 특정 속성(nullable, unique key 등)을 지정하고 싶으면 해당 컬럼 위에 @Column을 붙여준다.

7) 테이블에 컬럼으로 생성되지 않을 변수들에는 @Transient를 붙여준다

8) 엔티티 클래스 작성 완료 후 서버를 부팅하면 JPA가 자동으로 테이블을 생성 함.

(4) 엔티티 매니저 (Entity Manager)

- 실제 쿼리를 구현하고 사용해주는 객체, JPA 초창기에는 직접 Entity Manager를 구현하여 사용함. 현재는 Entity Manager를 내부에 가지고 있는 JpaRepository를 사용하여 간편하게 구현

(5) JpaRepository

- save, findBy, deleteBy 등과 같은 Entity Manager의 메소드들을 정의 해놓은 인터페이스

- JpaRepository를 상속받은 인터페이스를 구현함으로써 Entity Manager의 메소드들을 사용할 수 있다.

(6) 인터페이스로 만들어도 사용할 수 있는 이유는 스프링 내부에서 해당 Repository에 대한 Proxy 객체를 만들어서 컨테이너에 등록해준다. 따라서 결국 Jpa를 동작하게 하는 클래스는 스프링에 의해 생성된 Proxy(프록시)객체이다.

(7) Repository 작성 방식

1) Repository 인터페이스 선언

2) extends JpaRepository < 해당 엔티티 클래스, 해당 엔티티 클래스의 키의 형태(Integer, String, IdClass 등) >

3) Repository 등록 후 ServiceImpl에서 해당 Repository Proxy객체를 호출하여 Entity Manager의 메소드들을 사용한다.

ex. boardTestRepository.save(), boardTestRepository.fingById() 등

(8) 복합키(Composite Key): 키가되는 컬럼이 두 개 이상 존재하는 엔티티에는 복합키를 설정해야 한다.

(9) 복합키 설정 방식

1) 키가될 변수에 @Id를 붙여준다

1) 엔티티 클래스 위에 @IdClass(복합키를 가지고 있는 클래스)를 선언

3) 복합키를 가지고 있는 클래스를 만들어 준다.

4) 클래스의 이름은 엔티티명 + Id

5) 복합키를 가지고 있는 클래스에는 엔티티 클래스에 @Id로 지정된 변수들을 선언. 엔티티에 선언한 변수명과 동일하게 선언.

6) PK면서 FK인 컬럼은 FK를 가져올 해당 엔티티 객체를 만들어서 Id로 지정 → private BoardTest boardTest;

단순 PK인 컬럼들은 객체가 아닌 값의 형태로 만들어 준다 → private int boardNo

(10) ORM(Object Relation Mapping) : RDB의 테이블 관계들을 객체로 매핑해주는 프레임워크

(11) 관계생성(Foreign key)이 ORM 프레임워크의 핵심 기능

(12) 관계생성Foreign key) 방식

1) FK로 가져올 컬럼이 PK일 때

- FK로 가져올 컬럼을 소유하고 있는 엔티티 객체를 멤버 ㅕㄴ수로 선언

- 생성한 객체 멤버변수 위에 @Id를 붙여서 PK 지정

- @ManyToOne or @OneToOne or @OneToMany 매핑 관계를 지정

- @JoinColumn("테이블의 컬럼명") FK로 가져올 컬럼을 지정

- IdClass에 조인된 컬럼 정의

- 컬럼의 형태로 변수 생성, 변수명은 FK가 등록된 엔티티의 객체 이름을 동일하게 써줘야 한다.

ex. BoardFileTest → private BoardTest boardTest;

BoardFileTestId → private int boardTest;

2) FK로 가져온 컬럼이 FK 역할만 할 때

- FK로 가져올 컬럼을 소유하고 있는 엔티티 객체를 멤버 변수로 선언

- @ManyToOne or @OneToOne or @OneToMany 매핑 관계를 지정

- @JoinColumn("테이블의 컬럼명") FK로 가져올 컬럼을 지정

3) FK가 여러 개일 때 (PK)

- @JoinColums(

@JoinColumn(name="테이블의 컬럼명", referenceColumnName="FK로 참조할 테이블 컬럼명"),

@JoinColumn(name="테이블의 컬럼명", referenceColumnName="FK로 참조할 테이블 컬럼명")

)

- FK 여러 개가 PK로 올 경우 : 이미 원본 테이블에도 IdClass가 지정되어 있다.

해당 엔티티의 IdClass를 만들 경우 멤버 변수로 원본 테이블의 IdClass를 객체로 선언한다.

EX)

@Id
@ManyToOne
// BoardFileTest
@JoinColumns(
	@JoinColumn(name="BOARD_NO", referenceColumnName="BOARD_NO"),
	@JoinColumn(name="BOARD_TITLE", referenceColumnName="BOARD_TITLE"),
	@JoinColumn(name="테이블의 컬럼명", referenceColumnName="FK로 참조할 테이블 컬럼명")
) 
private BoardTest boardTest;

@Id
private int boardFileNo;

// BoardFileTestId
private int boardFileNo;
private BoardTestId boardTest;

2. Url 파라미터

(1) Url 파라미터는 주소/전달할 파라미터

(2) 유동적인 값을 넣는 형태의 파라미터 전달방식

(3) @Mapping("/주소/{받아올 인자값}")

public void 메소드명(@PathVariable int 받아올 인자값(boardNo))

(4) th:href="@{/board/board/{boardNo}} (변수명에 어떤 값이 들어가는 지: boardNo=${board.boardNo})"

(5) 한 개의 파라미터만 전송할 수 있다.

화면단	SpringFramwork	SpringBoot
Framework	JSP	html
Framework Template	jstl	thymeleaf
Framework Controller	@Controller(return String)	@RestController (return ModekAndVies, feturn RepositoryEntity)
Service, ServiceImpl	동일
DB 접극 객체	DAO	Mapper Interface, Repository Interface (혼용 가능)
SQL Mapper	동일

- html과 thymeleaf를 사용하기 때문에 API 구현 x

Spring Tools

뉴NEW — Tue, 6 Dec 2022 09:24:13 +0900

구글 sts > Tools Spring > 4.16.1 - Window X86_64 다운

Spring Tools 설치 환경

뉴NEW — Mon, 5 Dec 2022 14:53:32 +0900

구글 sts > Tools Spring > 4.16.1 - Window X86_64 다운

lombok.jar 파일 있는 위치 설정한 뒤 실행

install/update 눌러주고 > 스프링 부트 재부팅