Springboot->html+자바스크립트로!

지금 까지 프런트엔드도 스프링 부트로
프로젝트를 진행하고 있었다
하지만 예약 페이지/예약 내역 페이지를 구현하면서
음 그냥 자바스크립트 window.onload로 하면 되겠다는 생각이 들었다
물론 보안 면에서는 더 떨어지는 선택이지만
리액트는 아니지만
프런트엔드+백엔드 서버가 좀 더 명확히
분리된 느낌으로 토이 프로젝트를 만들고 싶었다

1. 톰캣 설치
https://myhappyman.tistory.com/134

VS Code - 로컬에서 JSP 작업 환경 구성하기

자세히 알려주신다 jsp는 아니지만 그대로 하면 된다
꼭<Context path="" docBase="C:\Users\Administrator\Desktop\blog\front\"></Context>를 확인하자
안 그러면 war뭐라고 한다
그리고 이상한 오류가 나올 수 있는데

vscode

java.home을 주석 처리하면 된다!

결과

vscode

2. 통신 방법 변경
이제는 디렉트로 백엔드 서버에 던지면 된다
xmlhttprequest는 동기 통신을 지원하지 않아서
j쿼리를 부득이하게 사용하게 되었다
jwt토큰도 헤더-> 쿠키로 바로 그냥 쿠키를 던져준다

js

첫 요청 시 fisrtRequest를 타고 응답이 newJwtToken아니라면


받은 응답을 전달하고 newJwtToken라면
새 토큰을 받았다는 뜻이니

getNewAccesToken로 다시 요청을 한다
이번에 자바스크립트만으로 프런트를 구성하면서
동기/비동기 통신에 대해 좀 더 명확히 알게 됐다
동기가 필요 없을 줄 알았는데
결제할 때도 그렇고 꼭 필요한 거 같다

3.url수정
예를 들어 예약 페이지를 가면

js

url을 써주고
requestUrl='http://localhost:8080/api/getClientReservation';
전송할 데이터를 만들고
let data=JSON.stringify(
결과를 받아 행한다

json으로 통일했다
물론 게시판에 사용할 form데이터 형식도
하나 만들어놨다

4.window.onload
예를 들어 마이페이지 같은 경우
로그인하고 접근 시
정보를 가져와야 한다

js

만들어서 접근 시 바로 정보가
미리 나와있을 수 있게 만들어 놓자!

아침 9시 반부터 어제저녁 11시까지 작업했다..
물론 중간에 버그들도 발견해서 고치느라 더 오래 걸렸지만!

결과

http://localhost:3030/myPage.html

http://localhost:3030/reservationPagevar3.html

기능 테스트들은 다 잘된다
어후 힘들었다

사실 제일 고생했던 부분이 통신방법을
바꾸는 부분이었는데
비동기로 하니 정보를 받아와서 뿌려야 하는데
토큰이 만료되어서 다시 갈 때 정작 뿌리는
곳은 undifiend가오고 밑에서 정보를 받아오게 되는 걸 깨달았다
그래서 동기식을 사용하게 되었다

++추가
로그인 전용 페이지 접근을 막기위해

js

403오류를 서버에서 주면
로그인 부탁표시를 띄어주고
홈으로보내버리자!

이제 부트 페이 가상계좌를 해보자!