[블로그프로젝트] 11. 로그인 구현하기(& JSTL 오류잡기 실패)

유튜브에서 블로그 만들기 프로젝트를 따라하면서 나의 스킬을 조금더 레벨업 하고자 한다.

IDE : IntelliJ

언어 : Java

DB : MySQL

빌드관리 도구 : Maven

OS : iOS

참고유튜브 : 메타코딩

---

회원가입을 완료했으니 로그인 기능을 구현하고자 한다.

우선 loginForm.jsp 에서 button을 아래로 내려주고 type에서 id로 변경 해주자

↓

<%@ page language="java" contentType="text/html; charset-UTF-8" pageEncoding="UTF-8" %>

<%@include file="../layout/header.jsp" %>

<div class="container">

    <form>
        <div class="form-group">
            <label for="user_id">ID</label>
            <input type="text" class="form-control" id="user_id" placeholder="Enter ID" name="user_id">
        </div>
        <div class="form-group">
            <label for="pwd">Password</label>
            <input type="password" class="form-control" id="pwd" placeholder="Enter Password" name="password">
        </div>

        <div class="form-group form-check">
            <label class="form-check-label">
                <input class="form-check-input" type="checkbox" name="remember"> Remember me
            </label>
        </div>

    </form>
    <button id="btn-login" class="btn btn-primary">로그인</button>
</div>


<script src="/blog/js/user.js"></script>
<%@include file="../layout/footer.jsp" %>

 

user.js 에서 버튼을 어떻게 작동할지 작성하자.

회원가입과 마찬가지로 버튼이 클릭되었을때 작동이 되게 하고 버튼 id를 입력해준다.

그리고 기능은 login을 사용할 것이다.

$("#btn-login").on("click",()=> {
            this.login();
            });

같은 user.js 파일에서 회원가입을 할 때 사용한 ajax를 복사해서 url을 변경해주고 로그인할 때는 아이디와 비밀번호만 필요하기 때문에 data에서 user_id와 password만 빼고 email은 삭제해줘도 된다.

로그인 완료시엔 메인화면으로 이동하도록 location로 설정해주자.

login : function(){

                let data = {
                    user_id : $("#user_id").val(),
                    password : $("#password").val(),
                    }

                $.ajax({
                    type : "POST",
                    url : "/blog/api/user/login",
                    data : JSON.stringify(data),
                    contentType : "application/json; charset=utf-8",
                    dataType : "json"

                }).done(function(resp) {
                    alert("로그인 완료");

                    location.href ="/blog/user"
                }).fail(function(error) {
                    alert(JSON.stringify(error));
                });




        }

 

이제 컨트롤러와 서비스부분을 작성하자.

UserApiController.java 로 이동해서 아래코드와 같이 작성하자.

session을 작성하면 로그인한 유저와 로그인하지 않은 유저의 header에서 보이는 기능을 다르게 할 수 있다. 

@PostMapping("/api/user/login")
    public ResponseDTO<Integer> login(@RequestBody User user, HttpSession session){
        System.out.println("login controller 호출");
        User principal = userService.로그인(user);
        if(principal == null){
            session.setAttribute("principal", principal);
        }

        return new ResponseDTO<Integer>(HttpStatus.OK.value(),1);
    }

 

서비스로 이동해서 select임에도 @Transactional 어노테이션을 걸어주고 readOnly=true 값을 준다.

@Transactional(readOnly = true) //select할 때 트랜잭션 시작, 종료시에 트랜잭션 종료
    public User 로그인(User user) {
        return userRepository.user(user.getUser_id(), user.getPassword());
    }

src/main/java/com/blog/repository 하위에 UserRepository.java로 이동해서 

select 기능을 구현해 줄 수 있다.

두개가 같이 작동하지만 나는 user_id로 작성해서 언더바 이후를 인식을 못하고 계속 User만 찾아서 그냥 아래의 방법을 이용하기로 했다.

 

 

그리고 여기가 아직 해결하지 못한 오류인데

Core tag들을 사용할 수 있게 아래의 링크에서 Core tags아래에 있는 코드를 header.jsp에 추가한다.

https://www.tutorialspoint.com/jsp/jsp_standard_tag_library.htm

<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>

 

그러면 아래와 같이 빨간 줄이 생길 수도 있는데 라이브러리를 추가하지 않아서 그렇다.

 

pom.xml으로 이동해서 아래 코드를 추가해주고 프로젝트를 업그레이드하거나 Maven clean을 해준다면 빨간줄은 사라질것이다.

<!-- JSTL for JSP -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
</dependency>

 

*Maven clean 하는법 : View - Tool windows - Maven -> 그러면 오른쪽에 Maven 창이 보일 것이다.

 

그러면 Maven-(본인프로젝트이름)-Lifecycle-clean을 오른쪽버튼을 클릭해주면 아래와 같이 보인다.

 

그러면 아래와 같이 빨간줄이 더이상 보이지 않는다.

 

그러면 이제 header.jsp 에서 <c></c> 들을 사용할 수 있다.

이제 로그인이 완료되면 header에 LogIn, SignUp이 아니라 글쓰기, 회원정보, 로그아웃이 보일 것이다.

 

그런데 난 아니다..

jar 파일도 다운받아서 lib폴더에 직접 넣어보고 캐시삭제도 해보고 몇번이나 껏다 키고 스프링부트 3.0 이상은 다른방식이라고 해서  jakarta-taglib도 넣어보고 검색해서 할 방법은 다 해봤지만, 저 500에러가 사라지지 않았다.

 

 

그래서 일단은 한 곳에 다 몰아서 진행하기로 했고, 다음에 해결방법을 찾으면 찾아서 수정하고 포스팅 할 예정이다.

 

이후 아이디와 비밀번호를 넣고 로그인을 해보면

 

미리 설정해놓은 로그인 완료 얼러트가 보이면서 메인화면으로 이동하게 된다.