문제 - 서버와 프론트 연결하기
1) 문제
서버를 잘 구축했는데, 추가로 프론트도 함께 구현해서 연결해 보기로 했다 !
일단 ,, 서버도 만들어두었고, 필요한 프론트 화면까지 구성을 잘 했다
문제는 뭐냐면 둘을 연결하는 것이었다 ..!
지난 프로젝트에서도 문제였는데, Javascript에 익숙하지 않아서, 어떤 방식으로 프론트에서 백으로 요청을 보내야 하는지 고민이 됐다
2) 시도 & 해결
그나마 익숙한 ajax를 통해서 통신을 시도해보기로 했다.
$.ajax({
type: "POST",
url: `/api/login`,
contentType: "application/json",
data: JSON.stringify({
username: username,
password: password
}),
})
.done(function (res, status, xhr) {
window.location.href = host;
})
.fail(function (jqXHR, textStatus) {
alert("로그인 실패!");
});로그인을 예시 코드로 갖고와봤다 !
$.ajax로 통신을 하면, 원하는 method와 url을 매핑하주고, 서버쪽으로 보낼 데이터 타입을 서버쪽과 일치시켜주어야 한다.
나는 json 타입으로 주고받는 것으로 설정해 두었기 때문에, 넘겨줄 때의 data type도 application/json으로 설정해주고, data를 넘겨줄 때도 JSON.stringify로 감싸서 넘겨주었다.
그리고 usernmae과 password를 넘겨주는데, key: value 값의 형태로 넘겨준다.
앞에 적어주는 key 값은 받아주는 dto에 있는 필드명과 일치해야 한다.
뒤의 value는 input 태그의 value를 위에서 변수로 갖고와서 넣어주었다.
3) 배운 점
전반적으로 프론트와 백을 연결하면서 느꼈던 점은,
1) 서버로 보낼 Http Method와 Url 매핑을 확인한다.
2) Request Body에 담아줄 Dto 타입의 필드명과 일치하는지 확인한다.
그리고 추가적으로 form 태그를 사용했는지, 프론트의 원하는 input 태그에서 value를 잘 가져오고 있는지 등등을 잘 확인해야 한다.
프론트와 백을 연결하면서 오류도 많이 보고, 오류가 없었는데 서버쪽으로 응답 자체가 전송되지 않았다거나, 서버쪽으로 요청은 되는데 데이터가 넘어가지 않는 등의 문제가 많았었다.
잘 확인하면서 진행하면 다음 프로젝트 때는 오류 횟수를 줄일 수 있을 듯 하다 !
