서론

사실 서론이 아니고 밑에 다 써놓고 쓰는 주절 모먼트...
어떻게 리뷰를 해야할까 고민이 많았고 아직도 갈팡질팡중입니다.
쓰다보니 코드도 간략하게 언급하고 싶고.. 그러다보니 글이 너무 뚱뚱해져서 일단 지우고 다시 쓸까 싶기도 하고...

어떻게든 공부한 Vue로 프론트엔드를 해보겠다고 시간이 지체되기도 했지만
그래도 Vue는 절대 포기 못해... 재밌거든요

동영상

살다살다 유튜브 업로드를 다 해봅니다..✨

https://youtu.be/OMFNAG_hYmo

로그인

첫 접속

브라우저에 이렇게 접속을 하면 서버에 요청이 갑니다.

웹 서버는 위의 URL 요청을 받고 index()를 실행합니다.
index()를 실행하는 명분(?)은
"@GetMapping("/login")" == "Get방식으로 "/login" 요청이 들어왔을 경우, index()를 실행해줘ㅎㅎ"
라는 뜻이기 때문입니다.
ModelAndView 객체를 생성하고 사용자 화면에 뿌려줄 뷰 이름(login.jsp)를 전달합니다.

아래 if문 부분은 다른 메소드로부터 결과 메세지(로그인 실패, 회원가입 성공 등등)를 받았을 때 처리하는 구문입니다.

결론적으로 index()를 통해 login.jsp 파일을 사용자에게 전달하고, 사용자는 login.jsp를 브라우저를 통해 봄으로서 아래와 같은 화면을 볼 수 있습니다.

화면

웹서버로부터 받은 login.jsp입니다.
이제 이메일과 비밀번호를 입력하고 "submit" 버튼을 누르면 웹 서버에 이메일과 비밀번호 데이터와 함께 요청이 갑니다.

주요 HTML 코드(login.jsp)

Java코드

로그인 검사 부분으로, Post방식으로 "/login" 요청이 들어왔을 경우 수행하는 메소드입니다.
즉, 로그인 화면에서 "submit" 버튼을 눌렀을 경우 동작하는 것..!
일단 사용자가 전달한 이메일과, 비밀번호 데이터를 파라미터로 받습니다.
파라미터로 받을 때 Command 객체를 통해 받습니다.
미리 VO 클래스 정의해놓고 써먹으면 편리합니다.

사용자 관련 Service 객체를 DI를 통해 참조합니다.
캡쳐화면에는 누락되었지만, @Autowired로 참조 객체 하나 선언해놨습니다.
아무튼 이 객체로 로그인 검사를 수행하는 메소드를 호출하면서 사용자가 입력한 로그인 정보를 넘겨줍니다.
메소드 리턴값에 따라 성공/실패로 나눕니다.
저는 로그인 성공 시 사용자 정보가 모두 들어있는 객체를 리턴하도록 했습니다.
로그인 성공 시 -> 메인 페이지로 이동⭐
로그인 실패 시 -> 실패 메시지와 함께 다시 로그인 화면으로 이동💦

사용자 관련 Service 객체입니다.
컨트롤러에서 로그인 검사 해달라고 checkUser()를 호출했었죠?
checkUser는 DAO 참조 객체를 통해 메소드를 호출합니다.

DAO 클래스 내부입니다.
SqlSessionTemplate 참조 객체를 통해 DB 연동을 수행합니다.
DB 정보는 root-context.xml에 제가 사전에 설정해놨습니다.
진짜 조만간 포스팅 할게요 봐주세요

로그인 검사하는 select SQL를 호출하니까 selectOne()를 호출합니다.

Mapper 파일 내 SQL 태그입니다.
"<![CDATA[...]]" 는 쿼리 안에"<" 나 ">" (부등호 연산)을 XML 문법으로 착각하지 말라고 써놓는 것입니다.

이 쿼리를 실행하면 이메일과 비밀번호를 비교해서 row하나를 리턴할 것입니다.

UserDTO 클래스 정의 입니다.
DB 컬럼명과 멤버변수 이름이 똑같아야 자동으로 바인딩 됩니다.
그래서 웬만하면 그냥 이름 통일하는 게 좋음..

로그인 세션 생성 및 전달

다시 컨트롤러로 돌아왔습니다.
로그인 유지를 위한 세션 설정까지 한 후,
메인 페이지를 요청하기 위해 리다이렉트를 리턴합니다.

메인화면

상단 오른쪽 이름 출력으로 세션이 유지되고 있음이 보입니다.
Logout 버튼 클릭 시, 세션 삭제 및 로그아웃 처리가 됩니다.

중앙에는 모든 게시판 글을 출력합니다.
기준은 등록날짜 내림차순으로 출력했습니다.

로그아웃

"Logout" 버튼 클릭 시 요청을 수행하는 컨트롤러입니다.
주요 동작은 1) 세션 삭제, 2) 완료 메세지 생성, 3) 메세지와 함께 초기 화면으로 리다이렉트 입니다.

로그아웃 후 화면

로그아웃 버튼을 누른 후 브라우저 URL을 보시면 아시겠지만,
login 컨트롤러를 호출합니다.
login.jsp 화면 출력 직전 alert()로 메세지를 먼저 띄웠습니다.

로그아웃 후 메인화면을 접속한다면?

• 사용자 이름 없음(당연하지 세션 값이 없으니까)
• 버튼 Value값 "Logout" -> "Login"으로 변경(Vue.js에서 처리함)