뭐가 이리 어렵고 복잡하니...너....
프론트엔드와 백엔드를 연결하는 과정은 매우 중요한 단계이며, 이 과정에서 다양한 문제가 발생할 수 있다. 특히, 타임리프 형식으로 작성한 코드를 하드코딩으로 변경하면서 겪었던 이슈.... 이러한 문제의 원인과 해결 방법을 알아보았다.
나에게 큰 시련을 가져다준 로그인 페이지 코드이다...
<!DOCTYPE html>
<html>
<head>
<title>PlayPalace - Login</title>
<link rel="stylesheet" href="/static/css/login.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="sign-up-container">
<!-- 타임리프 액션 제거 -->
<form id="signup-form">
<h1>Create Account</h1>
<span>or use your email for registration</span>
<input type="text" id="signupUsername" placeholder="Username" >
<input type="email" id="signupEmail" placeholder="Email" >
<input type="password" id="signupPassword" placeholder="Password" >
<input type="password" id="passwordCheck" placeholder="Confirm Password" >
<textarea id="signupIntroduction" placeholder="Introduce yourself" ></textarea>
<button type="button" onclick="signup()">Sign Up</button>
</form>
</div>
<div class="sign-in-container">
<!-- 타임리프 액션 제거 -->
<form id="signinForm">
<h1>Sign In</h1>
<span>or use your account</span>
<input type="text" id="signinUsername" placeholder="Username" >
<input type="password" id="signinPassword" placeholder="Password">
<button type="button" onclick="signin()">Sign In</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay-left">
<h1>Hello, Friend</h1>
<p>Enter your personal details and talk to us about the game</p>
<button id="signIn" class="overlay_btn" onclick="signin()">Sign In</button>
</div>
<div class="overlay-right">
<h1>Welcome Back</h1>
<p>To keep connected with us please login with your personal info</p>
<button id="signUp" class="overlay_btn" onclick="signup()">Sign Up</button>
</div>
</div>
</div>
</div>
<script>
function signin() {
var username = document.getElementById('signinUsername').value;
var password = document.getElementById('signinPassword').value;
// 로그인 요청
$.ajax({
url: "/user/login",
type: 'post',
data: JSON.stringify({username: username, password: password}),
contentType: "application/json",
success: function(data) {
if(data.success) {
window.location.href = 'home.html'
} else {
alert('로그인 실패: ' + data.message);
}
},
error: function() {
alert('서버 에러');
}
});
}
function signup() {
var username = document.getElementById('signupUsername').value;
var email = document.getElementById('signupEmail').value;
var password = document.getElementById('signupPassword').value;
var passwordCheck = document.getElementById('passwordCheck').value;
var introduction = document.getElementById('signupIntroduction').value;
if(password !== passwordCheck) {
alert('비밀번호가 일치하지 않습니다.');
return;
}
// 회원가입 요청
$.ajax({
url: "/user/signup",
type: 'post',
data: JSON.stringify({username: username, email: email, password: password, passwordCheck: passwordCheck,introduction: introduction }),
contentType: "application/json",
success: function(data) {
if(data.success) {
alert('회원가입 성공');
} else {
alert('회원가입 실패: ' + data.message);
}
},
error: function() {
alert('서버 에러');
}
});
}
const signUpBtn = document.getElementById("signUp");
const signInBtn = document.getElementById("signIn");
const container = document.querySelector(".container");
signUpBtn.addEventListener("click", () => {
container.classList.add("right-panel-active");
});
signInBtn.addEventListener("click", () => {
container.classList.remove("right-panel-active");
});
</script>
</body>
</html>
타입리프로 했다가~하드코딩으로 했다가~~
하나가 와!!!된다!!!하면~ 다른곳에서 하나가 안되고~~~
아주 즐거움이 극을 찍었지뭐람...?
클릭 이벤트가 동작하지 않는 문제
자아아아알 돌아가던 버튼 클릭 이벤트가 동작하지 않는 문제가 발생하였다. 이 문제는 자바스크립트의 이벤트 리스너가 제대로 등록되지 않아서 발생한 것으로 파악하였다. 이를 해결하기 위해 이벤트 리스너의 등록 과정을 확인하였고, 필요한 부분에 이벤트 리스너를 제대로 등록하여 문제를 해결하였다.대부분은 받아오는것을 안해두거나 뭔가 오타가 있거나 무언가 빠진것이 대부분이였지만 나중에 가면서 "그냥 나 하기싫어!!"라고 말하는 코드들도 발견을 하며 즐거운 시간을 보냈다...ㅎ
데이터베이스에 데이터가 입력되지 않는 문제
회원가입 기능을 테스트하던 중, 데이터베이스에 사용자 정보가 제대로 저장되지 않는 문제가 발생하였다. 이 문제는 백엔드 서버에서 사용자 정보를 받아오는 과정에 문제가 있었다. 백엔드 서버의 로그를 확인해 보니, 요청 본문의 데이터가 제대로 파싱되지 않아 발생한 문제였다. 이 문제는 백엔드 서버의 요청 본문 파싱 로직을 수정하여 해결하였다.이것 찾는데도 오래걸리드라구?
타임리프 형식에서 하드코딩으로의 변경
타임리프 형식으로 작성된 코드를 사용하다가 하다하다하다 안되서 원초적으로 돌아가보자 하며 하드코딩 방식으로 변경하였다. 이 과정에서는 주로 타임리프에서 제공하는 템플릿 기능을 자바스크립트로 대체하였다. 예를 들어, 타임리프의 th:action 기능은 자바스크립트의 fetch API를 사용하여 대체하였다.
그러면서 오히려 자바스크립트의 능력이 올라간것만 같은 느낌이다..하지만 잊지말자 나는 백엔드 개발자가 되려한다는것을...
프론트엔드와 백엔드 연결에서의 난관
프론트엔드와 백엔드를 연결할 때, CORS(Cross-Origin Resource Sharing) 문제가 자주 발생한다. 이는 브라우저의 보안 정책으로 인해 발생하는 문제로, 백엔드에서 적절한 헤더 설정을 통해 해결할 수 있다. 또한, 백엔드에서 제공하는 API의 엔드포인트, HTTP 메소드, 요청 헤더 등이 프론트엔드에서의 요청과 정확히 일치하지 않으면 연결에 실패하게 된다. 이를 해결하기 위해선 백엔드 API의 스펙을 정확히 확인하고, 이에 맞는 요청을 보내는 것이 중요하다.
회고
프론트엔드와 백엔드를 연결하는 과정에서 문제가 발생하면, 문제의 원인을 찾고 이를 해결하는 과정은 매우 중요하다. 이 과정을 통해 문제 해결 능력을 향상시키고, 코드의 이해도를 높일 수 있다.비록 짜증과 예민지수가 극까지 올라갔지만 하고나니 아~이래서 이렇구나 라는 것을 알수있는 시간이였던것 같다.
