`문제`

백앤드만 하다보니 프론트단에서 어떻게 동작하는지 알턱이 없다
일단 궁금한 부분
- 어떤 페이지로 접속 시 로그인이 필요하면 로그인창으로 연결시켜주고
- 로그인이 되어있으면 그 페이지를 보여주고 싶다면?

`해결`

프론트 유경험자분에게 간단 설명을 들었다

1) 자바스크립트단에서 해결한다

즉 html에서는 해결할 자바스크립트를 불러올뿐이다

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script src="/js/login.js"></script>
    <title>샘플타이틀</title>
</head>

<div>
	<button type="button" onclick="signin()" class="dr-button indigo w-100">
		로그인 하기
  </button>
</div>

2) 자바스크립트에서는 fetch를 사용한다.

함수를 정의하고 그 함수가 발동하면 fetch를 실행한다

// login.js
async function signin() {
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;

  // 서버로 전송할 데이터 생성
  const userInput = {
    email: email,
    password: password,
  };

  // 서버로 데이터 전송
  fetch('<http://13.209.15.124/api/auth/login>', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(userInput),
  })
    .then((response) => response.json())
    .then((result) => {
      if (result.success) {
        alert(`${result.message}`);
        window.location.href = '/page/main_list.html';
      } else {
        alert(`${result.errorMessage}`);
        window.location.href = '/page/index_login.html';
      }
    })
    .catch((error) => {
      console.error('회원가입 실패:', error);
    });
}

if(result.success) 하면 window.location.href 를 통해 원하는 페이지로 인계한다.
else 하면 window.location.href 를 통해 원하는 페이지로 인계한다.

`결론`

안어렵다! 한번 해보자.