스프링 43강. 자바스크립트 분리

세션 유지시간 설정 가능!

server:
  session:
    timeout: 30

1. 로그인 페이지 주세요 GET /loginForm
2. 프론트앤드 유효성 검사 -> required, maxLength
3. button에 이벤트 리스너 달기
4. username, password 자바스크립트에서 찾기
5. json으로 변환해서 fetch 요청 POST /login
6. 백엔드 -> LoginDto로 받아야 함 INSERT가 아니라서 toEntity 필요 없음
7. 네이티브 쿼리 SELECT * FROM user WHERE username=:username AND password=:password
8. 후처리? 세션 저장 등등 쿠키는 따로 담에 할 거임

회원가입과 로그인의 다른 점은 두 가지뿐이다.

SELECT냐 INSERT냐,

세션에 저장하냐 마냐!

세션은 하나로 공유하는 공간이기 때문에 IoC 컨테이너에 등록이 되어있다.

request는 여러 개라서 등록이 불가능하다.

그래서 DI가 가능하다.

templates는 동적 파일을 두는 폴더이다.

자바 코드를 적을 수 있어서 동적으로 제어가 가능하다.

state는 정적인 파일을 두는 폴더이다.

어디서든 접근 가능하고 변하지 않는 정적인 파일 두는 곳이다.

얘는 스프링에서 유일하게 URL 접근이 가능한 공간이다.

여기에 js폴더를 만들어준다.

만드는 김에 image, css 폴더도 만들어준다.

이 3개는 기본 세팅이라고 생각하자.

js파일은 쉽게 말해 테이블별로 하나씩 만들어준다고 생각하면 된다.

// 1. 이벤트 리스너
$("#btn-join").click(() => {
    join();
});


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


// 2. 기능

// 회원가입 요청 메서드
let join = async () => {

    // (1) username, password, email, address 찾아서 자바스크립트 오브젝트로 만들기
    let joinDto = {
        username: $("#username").val(),
        password: $("#password").val(),
        email: $("#email").val(),
        address: $("#address").val()
    }

    // (2) 자바스크립트 오브젝트 -> JSON 변환 (통신의 표준이 JSON!!)
    // let userJson = JSON.stringify(userDto);

    // (3) fetch 요청
    let response = await fetch("/api/join", {
        method: 'POST',
        body: JSON.stringify(joinDto),
        headers: {
            'Content-Type': 'application/json;charset=utf-8'
        }
    });

    let responseParse = await response.json();

    // (4) 회원가입이 잘되면 알림창을 띄우고 로그인 페이지로 이동
    if (responseParse.code == 1) {
        alert("회원가입에 성공하였습니다.");
        location.href = "/loginForm";
    } else {
        alert("회원가입에 실패하였습니다.");
    }
}

// 로그인 요청 메서드
let login = async () => {
    let loginDto = {
        username: $("#username").val(),
        password: $("#password").val()
    }

    let response = await fetch("/api/login", {
        method: 'POST',
        body: JSON.stringify(loginDto),
        headers: {
            'Content-Type': 'application/json;charset=utf-8'
        }
    });

    let responseParse = await response.json();

    if (responseParse.code == 1) {
        alert("로그인에 성공하셨습니다.");
        location.href = "/";
    } else {
        alert("로그인에 실패하였습니다.");
    }
}

/ 하면 static 폴더로 간다.